/* Current main-site navigation: requirements-v2/v3/v4 chrome,
   requirements-updated-navigation and new-design-global-20261015.
   WordPress still owns destinations, WPML, search and mobile disclosure data. */
html[data-theme="dark"] body.ch-blog-redesign { --ch-nav-panel: #03090c; }
html[data-theme] body.ch-blog-redesign .menuPort .ch-nav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.3rem;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--ch-nav-line);
  border-radius: .5rem;
  background: transparent;
  color: var(--ch-nav-icon);
}
html[data-theme] body.ch-blog-redesign .menuPort .ch-nav-icon .ch-shared-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  stroke-width: 2;
}
/* Three paints follow the document: primary structure, neutral detail, blue accent.
   Existing theme variables keep the same contrast adaptation in light mode. */
html[data-theme] body.ch-blog-redesign .menuPort .ch-shared-icon [data-icon-part="structure"] { color: var(--ch-nav-text); }
html[data-theme] body.ch-blog-redesign .menuPort .ch-shared-icon [data-icon-part="detail"] { color: var(--ch-nav-muted); }
html[data-theme] body.ch-blog-redesign .menuPort .ch-shared-icon [data-icon-part="accent"] { color: var(--ch-nav-icon); }
html[data-theme] body.ch-blog-redesign .menuPort .ch-shared-icon [data-icon-part] { stroke: currentColor; }
html[data-theme] body.ch-blog-redesign .menuPort .ch-shared-icon [stroke="none"] { stroke: none; }
html[data-theme] body.ch-blog-redesign .menuPort .ch-nav-copy strong {
  margin-bottom: .25rem;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.4;
}
html[data-theme] body.ch-blog-redesign .menuPort .ch-nav-copy small {
  font-size: .8rem;
  line-height: 1.5;
  max-height: 3em;
}
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-parent .sub-menu li:not(.ch-mega-browse) > a {
  gap: .7rem;
  padding: .7rem .75rem;
  border: 0;
  border-radius: .4rem;
  color: var(--ch-nav-text);
  background: transparent;
}
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-parent .sub-menu li:not(.ch-mega-browse) > a:is(:hover, :focus-visible, [aria-current="page"]) { background: var(--ch-nav-hover); }
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-parent > .sub-menu > .ch-mega-browse {
  display: flex;
  justify-content: center;
  margin-top: .65rem;
  padding-top: .8rem;
  border: 0;
}
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-browse > a {
  display: inline-flex;
  width: auto;
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  border: 2px solid var(--ch-nav-line);
  border-radius: 999px;
  color: var(--ch-nav-text);
  background: transparent;
  font-weight: 650;
  line-height: 1.35;
}
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-browse > a:is(:hover, :focus-visible) {
  color: #fff;
  background: #0877b5;
  border-color: #0877b5;
}
html[data-theme] body.ch-blog-redesign .menuPort nav .ch-mega-browse .ch-shared-icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }

html[data-theme] body.ch-blog-redesign.btMenuHorizontal .mainHeader { z-index: 10000; }
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > li > a {
  position: relative;
  z-index: 7;
  min-height: 2.35rem;
  padding-block: .4rem;
  border-radius: 999px;
  font-weight: 500;
  transition: color .16s ease, background-color .16s ease;
}
html[data-theme].touch body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent > .subToggler { z-index: 8; }
/* When tools wrap below navigation at tablet widths, they remain clickable
   above the transparent gap bridge, just like the top-level trigger links. */
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .mainHeader .logo,
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort .topBarInMenu,
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .ch-header-controls {
  position: relative;
  z-index: 7;
}
/* The language panel may overlap the wrapped tools row. Its open parent
   must paint above those controls, without moving or enlarging the panel. */
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .wpml-ls-item:is(.on, :focus-within) { z-index: 8; }
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent > .sub-menu {
  position: fixed;
  inset: var(--ch-menu-panel-top, var(--ch-menu-top, 134px)) 0 auto;
  width: 100%;
  max-width: none;
  gap: .35rem .65rem;
  padding: 1rem max(clamp(20px, 3vw, 48px), calc((100vw - 1380px) / 2));
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 rgb(170 204 222 / 15%), 0 12px 18px -14px rgb(219 242 255 / 45%);
  background: var(--ch-nav-panel) !important;
  transform: none;
  clip-path: inset(0 0 100% 0 round 0 0 1rem 1rem);
  transition: opacity .2s ease, clip-path .2s ease, visibility 0s .2s;
}
/* This real hit area belongs to the same LI as the trigger and panel.
   Its measured height covers the header padding even during slow crossings. */
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent::after {
  content: "";
  display: block;
  position: fixed;
  top: var(--ch-trigger-bottom, 110px);
  left: 0;
  width: 100vw;
  height: var(--ch-menu-bridge, 24px);
  background: transparent;
  pointer-events: none;
  visibility: hidden;
}
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent:is(.on, :focus-within):not(.ch-menu-dismissed)::after { pointer-events: auto; visibility: visible; }
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent:is(.on, :focus-within):not(.ch-menu-dismissed) > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  clip-path: inset(0 0 0 0 round 0 0 1rem 1rem);
  transition: opacity .4s ease, clip-path .4s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent.ch-menu-dismissed > .sub-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
  clip-path: inset(0 0 100% 0 round 0 0 1rem 1rem);
}
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-mega-parent.ch-menu-dismissed::after { pointer-events: none; visibility: hidden; }
body.ch-blog-redesign .ch-menu-backdrop {
  display: none;
  position: fixed;
  inset: var(--ch-menu-top, 134px) 0 0;
  z-index: 9998;
  background: rgb(0 0 0 / 28%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.ch-blog-redesign.ch-desktop-menu-open .ch-menu-backdrop { display: block; }
html[data-theme="light"] body.ch-blog-redesign .ch-menu-backdrop { background: rgb(11 24 33 / 18%); }
body.ch-blog-redesign .ch-menu-backdrop[hidden] { display: none; }
/* Bold News places its header at 10002 and its drawer at 101. The drawer
   contains the cloned brand/close bar and must sit above that opaque header. */
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort { z-index: 10003; }
/* The drawer stays above this surface; a tap outside is consumed here instead
   of activating a link or control on the page behind it. */
body.ch-blog-redesign .ch-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: rgb(0 0 0 / 38%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s .18s;
}
body.ch-blog-redesign.btMenuVertical.btMenuVerticalOn:not(.btTopToolsSearchOpen) .ch-mobile-menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
html[data-theme="light"] body.ch-blog-redesign .ch-mobile-menu-backdrop { background: rgb(11 24 33 / 26%); }
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort nav > ul > .ch-mobile-disclosure > a {
  display: block;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
}
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort nav > ul > .ch-mobile-disclosure > .subToggler { pointer-events: none; }
/* A touch tablet can use the horizontal header. Its full-row disclosure is
   explicit, so focus alone must not reopen a panel after the second tap. */
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-touch-disclosure > .subToggler { pointer-events: none; }
html[data-theme] body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-touch-disclosure > a { cursor: pointer; }
html[data-theme].touch body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-touch-disclosure:not(.on) > .sub-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
html[data-theme].touch body.ch-blog-redesign.btMenuHorizontal .menuPort nav > ul > .ch-touch-disclosure.ch-menu-dismissed > .sub-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* One native scroll owner prevents wheel transforms and keyboard focus-scroll
   from accumulating separate offsets. Keep the parent drawer-open transform. */
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort {
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 84px;
}
/* Mobile WordPress bars can already be above the viewport when the drawer
   opens. Reserve only the visible inset captured before scroll locking. */
html[data-theme] body.ch-blog-redesign.admin-bar.btMenuVertical > .menuPort {
  padding-top: var(--ch-mobile-admin-inset, var(--wp-admin--admin-bar--height, 32px));
  scroll-padding-top: calc(84px + var(--ch-mobile-admin-inset, var(--wp-admin--admin-bar--height, 32px)));
}
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort .menuScrollPort {
  overflow: visible;
  transform: none !important;
  transition: none !important;
}
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort .iScrollVerticalScrollbar { display: none; }
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort .logo {
  position: sticky;
  top: 0;
  /* The parent's scrolling submenu toggles use z-index:80. */
  z-index: 100;
  background: var(--ch-nav-panel);
}
html[data-theme] body.ch-blog-redesign.btMenuVertical > .menuPort nav .ch-mega-parent > .sub-menu > .ch-mega-browse > a { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.ch-blog-redesign .menuPort nav > ul > .ch-mega-parent > .sub-menu { transition: none !important; transform: none !important; }
  body.ch-blog-redesign .ch-mobile-menu-backdrop { transition: none; }
}