/*
 * Header Responsive Guardrails v6
 * Final owner for tablet containment and desktop Subscribe intrinsic sizing.
 * A CTA must never be concealed by a clipping ancestor or collapse its own visible children.
 */


/* Mobile touch-target ownership v4 */
/*
 * Several non-home surfaces inherited compact legacy sizing below 768px that
 * reduced the Subscribe hit box to 36-42px even though the same control was
 * 44px on Home. Keep the icon-only presentation, but never shrink the actual
 * interactive target below the 44px header contract.
 */
@media (max-width: 767px) {
  .site-header .site-header__actions > .newsletter-cta,
  .site-header__actions > .newsletter-cta {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
  }

  .site-header .site-header__actions > .header-search-toggle,
  .site-header .site-header__actions > .theme-toggle,
  .site-header .site-header__actions > .nav-toggle,
  .site-header__actions > .header-search-toggle,
  .site-header__actions > .theme-toggle,
  .site-header__actions > .nav-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .site-header .site-header__inner,
  .site-header__inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: clamp(16px, 3vw, 24px) !important;
    padding-right: clamp(16px, 3vw, 24px) !important;
    overflow-x: visible !important;
  }

  .site-header .site-header__actions,
  .site-header__actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
  }

  .site-header__actions > .header-search-toggle,
  .site-header__actions > .theme-toggle,
  .site-header__actions > .newsletter-cta,
  .site-header__actions > .nav-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}


/*
 * 960-1439px intentionally uses the compact icon-only Subscribe control from
 * combined.css. At 1440px the label becomes visible, so intrinsic sizing must
 * become authoritative again. Never pair a visible label with a fixed 44px box.
 */
@media (min-width: 1440px) {
  .site-header:not(.aiwp-header-compact) .site-header__actions > .newsletter-cta {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .site-header:not(.aiwp-header-compact) .site-header__actions > .newsletter-cta > .newsletter-cta__label {
    display: inline-block !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .site-header:not(.aiwp-header-compact) .site-header__actions > .newsletter-cta > svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    overflow: visible !important;
  }
}


/*
 * Breakpoint ownership v3
 * -----------------------
 * The legacy bundle switched to a seven-link inline nav at 960px even though
 * the menu's intrinsic width exceeded its grid column until roughly 1024px.
 * It also increased nav spacing abruptly at 1200px and 1440px, briefly making
 * the menu wider than the center grid track again. Those are interaction
 * overlaps even when the page has no horizontal scrollbar.
 */

/* 960-1023px: retain compact navigation instead of cramming seven links inline. */
@media (min-width: 960px) and (max-width: 1023px) {
  .site-header .primary-nav:not(.is-open),
  .site-header nav#primary-navigation:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-header .nav-toggle,
  .site-header button.nav-toggle,
  .site-header [data-aiwp-nav-toggle] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .site-header .primary-nav.is-open,
  .site-header nav#primary-navigation.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: calc(var(--header-height, 80px) + 8px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - (var(--header-height, 80px) + 32px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl, 16px) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.16) !important;
    z-index: 9998 !important;
  }

  .site-header .primary-nav.is-open .menu,
  .site-header nav#primary-navigation.is-open .menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .site-header .primary-nav.is-open .menu > li > a {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    justify-content: flex-start !important;
    font-size: 1rem !important;
    border-radius: var(--radius-lg, 12px) !important;
  }
}

/* 1024-1279px: compact inline nav; never let intrinsic menu width exceed its grid track. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header:not(.aiwp-header-compact) .primary-nav .menu,
  .site-header:not(.aiwp-header-compact) nav#primary-navigation .menu {
    gap: 0 !important;
    padding: 3px 6px !important;
  }

  .site-header:not(.aiwp-header-compact) .primary-nav .menu > li > a,
  .site-header:not(.aiwp-header-compact) nav#primary-navigation .menu > li > a {
    padding: 5px 6px !important;
    font-size: 13px !important;
  }
}

/* 1280-1599px: medium density. 1440 may show the full Subscribe pill, so keep nav bounded. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .site-header:not(.aiwp-header-compact) .primary-nav .menu,
  .site-header:not(.aiwp-header-compact) nav#primary-navigation .menu {
    gap: 4px !important;
    padding: 6px 12px !important;
  }

  .site-header:not(.aiwp-header-compact) .primary-nav .menu > li > a,
  .site-header:not(.aiwp-header-compact) nav#primary-navigation .menu > li > a {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}



/* Compact drawer semantic-theme ownership v5.
 * The drawer is a header surface, so it must follow the active site theme at
 * every compact width. Legacy rules hard-coded a white drawer in dark mode.
 */
@media (max-width: 1023px) {
  .site-header .primary-nav.is-open,
  .site-header nav#primary-navigation.is-open {
    background: var(--color-bg, #ffffff) !important;
    color: var(--color-text, #1a1a1a) !important;
    border-color: var(--color-border, rgba(128,128,128,.28)) !important;
  }

  .site-header .primary-nav.is-open .menu,
  .site-header nav#primary-navigation.is-open .menu {
    background: transparent !important;
  }

  .site-header .primary-nav.is-open .menu > li > a,
  .site-header nav#primary-navigation.is-open .menu > li > a {
    color: var(--color-text, #1a1a1a) !important;
    background: transparent !important;
    min-height: 48px !important;
  }

  .site-header .primary-nav.is-open .menu > li.current-menu-item > a,
  .site-header .primary-nav.is-open .menu > li.current_page_item > a,
  .site-header nav#primary-navigation.is-open .menu > li.current-menu-item > a,
  .site-header nav#primary-navigation.is-open .menu > li.current_page_item > a {
    color: var(--color-primary, #1683ff) !important;
  }
}


/* Specificity closure v6.
 * combined.css contains ID-based and 3-class !important rules at >=960px.
 * The v5 owner was later in source order but still lost the cascade because
 * selector specificity outranks source order among !important declarations.
 * These exact selectors intentionally exceed the legacy rules at the two
 * compact desktop handoff widths and nowhere else.
 */
@media (min-width: 960px) and (max-width: 1023px) {
  header.site-header .site-header__actions button.nav-toggle[data-aiwp-nav-toggle],
  header.site-header .site-header__actions .nav-toggle[data-aiwp-nav-toggle] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  header.site-header nav#primary-navigation.primary-nav:not(.is-open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  header.site-header nav#primary-navigation.primary-nav.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - (var(--header-height, 80px) + 32px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 16px !important;
    border: 1px solid var(--color-border, rgba(128,128,128,.28)) !important;
    border-radius: var(--radius-xl, 16px) !important;
    background: var(--color-bg, #ffffff) !important;
    color: var(--color-text, #1a1a1a) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.18) !important;
    z-index: 9998 !important;
  }

  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    color: var(--color-text, #1a1a1a) !important;
    background: transparent !important;
    border-radius: var(--radius-lg, 12px) !important;
  }
}

/* Explicit theme scopes remove ambiguity from OS color-scheme emulation and
 * guarantee that a site-selected dark theme never inherits a legacy white drawer. */
html[data-theme='dark'] header.site-header nav#primary-navigation.primary-nav.is-open,
html[data-theme-mode='dark'] header.site-header nav#primary-navigation.primary-nav.is-open {
  background: var(--color-bg, rgb(18,18,18)) !important;
  color: var(--color-text, rgb(237,237,237)) !important;
  border-color: var(--color-border, rgba(255,255,255,.14)) !important;
}

html[data-theme='dark'] header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li > a,
html[data-theme-mode='dark'] header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li > a {
  color: var(--color-text, rgb(237,237,237)) !important;
  background: transparent !important;
}