/**
 * Primary navigation switcher - final mobile/tablet owner.
 * 2026-08-24: replaces the stretched active underline with a bounded rounded switcher.
 * Loaded at wp_enqueue_scripts priority 9999 so it deterministically wins legacy bundle rules.
 */

@media (max-width: 1023px) {
  .site-header .primary-nav.is-open,
  .site-header nav#primary-navigation.is-open,
  #primary-navigation.is-open,
  nav.primary-nav.is-open {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(var(--color-black-rgb, 0, 0, 0), 0.10) !important;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  .primary-nav.is-open .menu,
  .primary-nav.is-open ul.menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    list-style: none !important;
  }

  .primary-nav.is-open .menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  .primary-nav.is-open .menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--color-text, #171717) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
  }

  /* The old active/hover pseudo-elements were sized against a 100%-wide link,
     which produced the long centered blue bar in the tablet menu. */
  .primary-nav.is-open .menu > li > a::before,
  .primary-nav.is-open .menu > li > a::after {
    content: none !important;
    display: none !important;
  }

  .primary-nav.is-open .menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:hover,
  .primary-nav.is-open .menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:focus {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    border-color: rgba(var(--color-primary-rgb), 0.18) !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .primary-nav.is-open .menu > li.current-menu-item > a,
  .primary-nav.is-open .menu > li.current_page_item > a,
  .primary-nav.is-open .menu > li.current-menu-ancestor > a {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--sv-btn-text-on-primary, #ffffff) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.20) !important;
    transform: none !important;
  }

  .primary-nav.is-open .menu > li.current-menu-item > a:hover,
  .primary-nav.is-open .menu > li.current_page_item > a:hover,
  .primary-nav.is-open .menu > li.current-menu-ancestor > a:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--sv-btn-text-on-primary, #ffffff) !important;
    box-shadow: 0 7px 20px rgba(var(--color-primary-rgb), 0.26) !important;
    transform: none !important;
  }

  .primary-nav.is-open .menu > li > a:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

  :root[data-theme='dark'] .site-header .primary-nav.is-open,
  :root[data-theme='dark'] .site-header nav#primary-navigation.is-open,
  :root[data-theme='dark'] #primary-navigation.is-open,
  :root[data-theme='dark'] nav.primary-nav.is-open {
    background: rgba(18, 18, 20, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.48), 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  }

  :root[data-theme='dark'] .primary-nav.is-open .menu > li > a {
    background: transparent !important;
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.86) !important;
  }

  :root[data-theme='dark'] .primary-nav.is-open .menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:hover,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor) > a:focus {
    background: rgba(255, 255, 255, 0.065) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--color-primary) !important;
  }

  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current-menu-item > a,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current_page_item > a,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current-menu-ancestor > a,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current-menu-item > a:hover,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current_page_item > a:hover,
  :root[data-theme='dark'] .primary-nav.is-open .menu > li.current-menu-ancestor > a:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--sv-btn-text-on-primary, #0b0b0d) !important;
    -webkit-text-fill-color: currentColor !important;
  }
}


/* Exact compact-panel geometry owner: the legacy 960-1023 guardrail uses ID-level selectors. */
@media (max-width: 1023px) {
  html body header.site-header nav#primary-navigation.primary-nav.is-open {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
/* High-specificity active owner: beats legacy #primary-navigation and header guardrail !important rules. */
@media (max-width: 1023px) {
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-item > a,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current_page_item > a,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-ancestor > a,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-item > a:hover,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current_page_item > a:hover,
  header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-ancestor > a:hover {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--sv-btn-text-on-primary, #ffffff) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.20) !important;
    transform: none !important;
  }
}
/* Dark-mode rule has one extra html attribute selector in legacy guardrails; outrank it explicitly. */
@media (max-width: 1023px) {
  html[data-theme='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-item > a,
  html[data-theme='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current_page_item > a,
  html[data-theme='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-ancestor > a,
  html[data-theme-mode='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-item > a,
  html[data-theme-mode='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current_page_item > a,
  html[data-theme-mode='dark'] body header.site-header nav#primary-navigation.primary-nav.is-open ul#primary-menu.menu > li.current-menu-ancestor > a {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--sv-btn-text-on-primary, #ffffff) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.20) !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .primary-nav.is-open .menu > li > a {
    transition: none !important;
  }
}