/**
 * Navegación principal — UNaF 2026.
 *
 * Un solo panel abierto a la vez, por click (nunca por hover). El hover
 * solo cambia color/fondo. Toda la interacción vive en assets/js/header.js;
 * este archivo únicamente posiciona y anima lo que header.js abre/cierra
 * vía el atributo `hidden` + `aria-expanded`.
 *
 * Markup (emitido por inc/class-walker-nav-menu-unaf.php):
 *   <li class="menu-item nav-item nav-has-panel">
 *     <div class="nav-item__row">
 *       <a class="nav-link">Título</a>
 *       <button class="nav-sub-toggle" aria-controls="nav-panel-x">…</button>
 *     </div>
 *     <div class="nav-panel [nav-panel--mega|nav-panel--simple]" id="nav-panel-x" hidden>…</div>
 *   </li>
 *
 * El contenido de un panel "mega" lo decide inc/mega-menus.php (registro de
 * callbacks) — este archivo solo sabe estilar el sistema genérico de clases
 * .mega-panel/.mega-header/.mega-grid/.mega-card/.mega-footer/.mega-cta,
 * reusable por cualquier mega-menú futuro sin escribir CSS nuevo.
 *
 * ÍNDICE
 *   0. Tokens del componente (compuestos sobre los tokens globales de style.css)
 *   1. Base compartida (todos los tamaños)
 *   2. Desktop (>=992px) — anclaje por-trigger, sistema de mega-menú, dropdown simple
 *   3. Mobile/tablet (<=991px) — drawer fullscreen + acordeón
 */

/* =============================================================================
   0. TOKENS DEL COMPONENTE
   ============================================================================= */
:root {
  --header-h-scrolled: 64px;

  --mega-gap: var(--space-4);
  --mega-padding: var(--space-4);
  --mega-radius: var(--radius-lg);
  --mega-blur: 14px;
  --mega-shadow: 0 2px 6px rgba(0, 31, 84, 0.06), 0 24px 48px rgba(0, 31, 84, 0.16);
  --mega-transition: 200ms var(--motion-ease);
}

[data-theme="dark"] {
  --mega-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.4);
}

/* =============================================================================
   1. BASE COMPARTIDA
   ============================================================================= */
.primary-nav {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}

/* Hijo directo, no descendiente: este selector debe tocar solo el <ul
   class="nav-menu"> raíz (siempre hijo directo de <nav class="primary-nav">
   — ver header.php y el fallback sin menú asignado). Cualquier <ul> anidado
   más adentro (.nav-panel-list, .mega-grid) vive dentro de un <li> > <div
   class="nav-panel">, nunca como hijo directo, así que queda afuera. */
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--header-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-action-h);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.8125rem, 0.16vw + 0.78rem, 0.9rem);
  letter-spacing: 0.012em;
  line-height: 1.25;
  color: var(--color-text-soft);
  padding: 0 clamp(7px, 0.5vw, 11px);
  border-radius: var(--radius-pill);
  transition: color var(--transition-hover), background var(--transition-hover);
}

/* Hover = feedback transitorio (pill). Página activa = estado persistente
   ([aria-current="page"], que wp_nav_menu() ya agrega solo). Cada señal
   vive en un único lugar, no se pisan. */
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.primary-nav [aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

[data-theme="dark"] .primary-nav a:hover,
[data-theme="dark"] .primary-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .primary-nav [aria-current="page"] {
  background: rgba(255, 255, 255, 0.1);
}

/* Ítem con panel: fila (link real + botón toggle) */
.nav-item__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.nav-item__row > .nav-link {
  flex: 1;
  min-width: 0;
}

.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-head);
  line-height: 1;
  transition: background var(--transition-hover), color var(--transition-hover), transform var(--transition-hover);
}

.nav-sub-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.nav-sub-toggle__icon {
  display: block;
  font-size: 0.85rem;
  transition: transform 0.22s ease;
}

.nav-has-panel[data-open="true"] .nav-sub-toggle__icon {
  transform: rotate(180deg);
}

.menu-toggle { display: none; }

/* Panel — oculto por `hidden`, nunca por opacity/visibility (accesible por defecto) */
.nav-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* .mega-grid es un <ul>, pero vive dentro de .nav-panel--mega (varios
   niveles debajo de .primary-nav > ul), así que no hereda ningún reset
   de lista desde ahí. Lo declara acá, breakpoint-independiente, igual
   que .nav-panel-list arriba. */
.mega-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   2. DESKTOP (>=992px) — click-to-open, un panel a la vez
   ============================================================================= */
@media (min-width: 992px) {
  .primary-nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    width: max-content;
    max-width: min(920px, calc(100vw - 360px));
    height: var(--header-h);
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.32s var(--motion-ease);
  }

  /* Header sticky: reduce altura en sync con .header-inner al scrollear
     (.primary-nav es hermano de .site-header-layout, no descendiente). */
  .site-header-layout.is-scrolled ~ .primary-nav {
    height: var(--header-h-scrolled);
  }

  .primary-nav > ul,
  .primary-nav > .nav-menu {
    pointer-events: auto;
    gap: clamp(0px, 0.65vw, var(--space-2));
  }

  .primary-nav .nav-menu > li {
    position: relative;
  }

  .nav-item__row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
  }

  .nav-item__row > .nav-link {
    flex: 0 1 auto;
  }

  .nav-sub-toggle {
    width: 28px;
    min-width: 28px;
    height: var(--header-action-h);
    color: var(--color-text-soft);
  }

  /* Sin ícono en desktop: el panel se descubre por hover/foco (@h-02b en
     header.js), no hace falta una flecha anunciándolo. El botón conserva
     su tamaño y foco-visible (sigue siendo el target de teclado/click),
     solo se le oculta el glifo. Mobile no toca esta regla — sigue
     mostrando la flecha y rotándola, exactamente como antes. */
  .nav-sub-toggle__icon {
    display: none;
  }

  .nav-has-panel:hover .nav-sub-toggle,
  .nav-sub-toggle:hover,
  .nav-sub-toggle:focus-visible {
    color: var(--color-primary);
  }

  [data-theme="dark"] .nav-sub-toggle {
    color: var(--text-on-surface-soft);
  }

  [data-theme="dark"] .nav-has-panel:hover .nav-sub-toggle,
  [data-theme="dark"] .nav-sub-toggle:hover,
  [data-theme="dark"] .nav-sub-toggle:focus-visible {
    color: #ffffff;
  }

  /* .primary-nav a (línea 82) usa --color-text-soft / --color-primary sin
     variante dark — ambos son valores oscuros pensados para fondo claro,
     así que en dark mode el texto del menú quedaba casi invisible sobre
     --surface-base. Mismos valores que ya usa .nav-sub-toggle acá arriba,
     para que el link y su botón de al lado luzcan coherentes. */
  [data-theme="dark"] .primary-nav a {
    color: var(--text-on-surface-soft);
  }

  [data-theme="dark"] .primary-nav a:hover,
  [data-theme="dark"] .primary-nav a:focus-visible,
  [data-theme="dark"] .primary-nav [aria-current="page"] {
    color: #ffffff;
  }

  /* Panel flotante — anclado a SU PROPIO <li>, no al centro de la barra.
     Glassmorphism sutil: base sólida del tema + blur moderado + hairline
     superior más claro que el borde (da sensación de vidrio con borde
     definido, no de mancha difusa). Nunca transparencia dura: el fondo
     nunca baja de ~90% de opacidad del surface del tema, así el contraste
     AA no depende de qué haya detrás. */
  .nav-panel {
    position: absolute;
    top: calc(100% + var(--space-4));
    left: 0;
    background: color-mix(in srgb, var(--surface-base) 92%, transparent);
    backdrop-filter: blur(var(--mega-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--mega-blur)) saturate(1.3);
    border: 1px solid var(--card-border);
    border-radius: var(--mega-radius);
    box-shadow: var(--mega-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: var(--space-3);
    z-index: 1102;
    opacity: 0;
    transform: translateY(-8px) scale(0.98) translateX(var(--panel-shift, 0px));
    transform-origin: top left;
    transition: opacity var(--mega-transition), transform var(--mega-transition);
    will-change: opacity, transform;
  }

  /* Dropdown tradicional — ancho 100% gobernado por su contenido. Sin
     max-height/overflow-y propios: con pocos ítems nunca necesita scroll
     vertical, así que overflow-x nunca queda forzado a auto (ver mega,
     que sí lo necesita y lo declara explícito). El único límite es el
     viewport, para que un ítem extremadamente largo no reviente el layout. */
  .nav-panel--simple {
    width: max-content;
    max-width: min(90vw, 480px);
  }

  [data-theme="dark"] .nav-panel {
    box-shadow: var(--mega-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .nav-panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1) translateX(var(--panel-shift, 0px));
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-panel {
      transition: opacity 0.12s linear;
      transform: translateX(var(--panel-shift, 0px));
    }

    .nav-panel:not([hidden]) {
      transform: translateX(var(--panel-shift, 0px));
    }
  }

  /* Puente sin gap muerto entre el trigger y el panel (hover del mouse) */
  .nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--space-4);
  }

  .nav-panel-list a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: background var(--transition-hover);
  }

  .nav-panel-list a:hover,
  .nav-panel-list a:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }

  /* ---------------------------------------------------------------------
     Sistema de mega-menú — genérico y reutilizable.
     .mega-panel      raíz del contenido (dentro de .nav-panel--mega)
     .mega-header     eyebrow + bajada institucional, antes del grid
     .mega-grid       grid fluido de tarjetas (auto-fit, no fijo a N)
     .mega-card       tarjeta: imagen + título + descripción + cta
     .mega-footer     cierre del panel (link/acción de "ver todo")
     Ningún selector de acá menciona Facultades — cualquier mega-menú
     futuro (Investigación, Posgrado, Extensión...) reusa esto tal cual.
     --------------------------------------------------------------------- */
  .nav-panel--mega {
    width: max-content;
    max-width: 620px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: var(--mega-padding);
  }

  .mega-header {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--card-border);
  }

  .mega-header__eyebrow {
    display: block;
    font-family: var(--font-head);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 2px;
  }

  .mega-header__lead {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
  }

  [data-theme="dark"] .mega-header__eyebrow {
    color: var(--color-accent);
  }

  .mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--mega-gap);
  }

  .mega-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text);
    background: var(--surface-muted);
    transition: transform var(--mega-transition), box-shadow var(--mega-transition);
    height: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  .mega-card:hover,
  .mega-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--elevation-2);
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-card:hover,
    .mega-card:focus-visible {
      transform: none;
    }
  }

  .mega-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    overflow: hidden;
  }

  .mega-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--mega-transition);
  }

  .mega-card:hover .mega-card__img,
  .mega-card:focus-visible .mega-card__img {
    transform: scale(1.04);
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-card:hover .mega-card__img,
    .mega-card:focus-visible .mega-card__img {
      transform: none;
    }
  }

  .mega-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.4rem;
  }

  .mega-card__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .mega-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: normal;
    transition: color var(--transition-hover);
  }

  .mega-card:hover .mega-card__title,
  .mega-card:focus-visible .mega-card__title {
    color: var(--color-primary);
  }

  .mega-card__desc {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: normal;
    line-height: 1.4;
  }

  .mega-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
  }

  .mega-card__cta svg {
    transition: transform var(--transition-hover);
  }

  .mega-card:hover .mega-card__cta svg,
  .mega-card:focus-visible .mega-card__cta svg {
    transform: translateX(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-card:hover .mega-card__cta svg,
    .mega-card:focus-visible .mega-card__cta svg {
      transform: none;
    }
  }

  .mega-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--card-border);
  }

  .mega-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--transition-hover);
  }

  .mega-cta:hover,
  .mega-cta:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }

  [data-theme="dark"] .mega-card {
    background: var(--surface-muted);
  }

  [data-theme="dark"] .mega-card__title {
    color: var(--text-on-surface);
  }

  [data-theme="dark"] .mega-card:hover .mega-card__title,
  [data-theme="dark"] .mega-card:focus-visible .mega-card__title {
    color: var(--color-accent);
  }

  [data-theme="dark"] .mega-card__cta {
    color: var(--color-accent);
  }

  /* Tablet de escritorio angosto: el grid fluido ya baja de columnas solo;
     acá solo pasamos la tarjeta a formato horizontal (imagen a la izquierda). */
  @media (max-width: 1199px) {
    .mega-grid {
      grid-template-columns: 1fr;
    }

    .mega-card {
      flex-direction: row;
      align-items: stretch;
    }

    .mega-card__media {
      width: 96px;
      aspect-ratio: auto;
      flex-shrink: 0;
    }

    .mega-card__content {
      padding: var(--space-2) var(--space-3);
    }
  }

  /* Underline — reservado exclusivamente para la página activa.
     El hover ya tiene su propia señal (pill de fondo, ver base compartida);
     no repetimos el mismo mensaje dos veces. */
  .nav-item__row > .nav-link {
    position: relative;
  }

  .nav-item__row > .nav-link::after {
    content: "";
    position: absolute;
    left: clamp(7px, 0.5vw, 11px);
    right: clamp(7px, 0.5vw, 11px);
    bottom: 7px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-hover);
  }

  .primary-nav [aria-current="page"] > .nav-item__row > .nav-link::after,
  .primary-nav .nav-item__row > .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav-close { display: none; }

  body.home .primary-nav {
    z-index: 1101;
  }

  body.home .nav-panel {
    z-index: 1102;
  }
}

/* =============================================================================
   3. MOBILE / TABLET (<=991px) — drawer fullscreen, acordeón por click
   ============================================================================= */
@media (max-width: 991px) {
  body.nav-is-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 100%);
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--surface-base);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: calc(var(--header-h) + var(--space-2)) var(--space-3) var(--space-8);
    box-shadow: -8px 0 32px rgba(0, 15, 35, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
    z-index: var(--z-mobile-drawer);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid var(--header-border);
    box-sizing: border-box;
  }

  .primary-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: calc(var(--z-mobile-header) + 1);
    transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s;
  }

  .primary-nav > ul,
  .primary-nav > .nav-menu {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .primary-nav ul li,
  .primary-nav .nav-menu li {
    border-bottom: 1px solid var(--header-border);
    min-width: 0;
  }

  .primary-nav ul li:last-child,
  .primary-nav .nav-menu li:last-child {
    border-bottom: 0;
  }

  .primary-nav a {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--space-4) var(--space-3);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--color-navy);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .primary-nav a:hover,
  .primary-nav [aria-current="page"] {
    background: var(--color-bg-soft);
    color: var(--color-navy);
  }

  .nav-has-panel > .nav-item__row {
    border-bottom: 0;
  }

  .nav-has-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-sub-toggle {
    width: 48px;
    min-width: 48px;
    min-height: var(--header-action-h);
    border-left: 1px solid var(--header-border);
    color: var(--color-navy);
    background: transparent;
  }

  .nav-sub-toggle:hover,
  .nav-sub-toggle:focus-visible {
    background: var(--color-bg-soft);
    color: var(--color-primary);
  }

  .nav-panel {
    display: none;
    width: 100%;
    background: var(--surface-muted);
    border-top: 1px solid var(--header-border);
    padding: var(--space-3);
  }

  .nav-has-panel[data-open="true"] > .nav-panel {
    display: block;
  }

  .nav-panel-list li {
    border-bottom: 1px solid var(--header-border);
  }

  .nav-panel-list li:last-child {
    border-bottom: 0;
  }

  .nav-panel-list a {
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + var(--space-2));
    font-size: 0.94rem;
    font-weight: 600;
  }

  /* Mega-menú en mobile: encabezado + tarjetas apiladas, sin grilla */
  .mega-header {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--header-border);
  }

  .mega-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
  }

  .mega-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-base);
  }

  .mega-card__media {
    width: 72px;
    flex-shrink: 0;
    aspect-ratio: auto;
  }

  .mega-card__badge {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-primary);
    font-family: var(--font-head);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mega-card__content {
    padding: var(--space-2) var(--space-3);
    justify-content: center;
  }

  .mega-card__desc,
  .mega-card__cta {
    display: none;
  }

  .mega-footer {
    margin-top: var(--space-2);
    padding-top: 0;
    border-top: 0;
  }

  .mega-cta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
  }

  [data-theme="dark"] .nav-sub-toggle {
    color: var(--text-on-surface);
    border-left-color: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .nav-sub-toggle:hover,
  [data-theme="dark"] .nav-sub-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  [data-theme="dark"] .nav-panel {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .mega-header,
  [data-theme="dark"] .mega-footer {
    border-color: rgba(255, 255, 255, 0.1);
  }

  [data-theme="dark"] .primary-nav {
    background: var(--surface-base);
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }

  [data-theme="dark"] .primary-nav a {
    color: var(--text-on-surface);
    text-shadow: none;
  }

  [data-theme="dark"] .primary-nav a:hover,
  [data-theme="dark"] .primary-nav [aria-current="page"] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    text-shadow: none;
  }

  .menu-toggle { display: grid; }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0, 31, 84, 0.45);
    z-index: var(--z-mobile-overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  [data-theme="dark"] .nav-overlay {
    background: rgba(6, 21, 45, 0.55);
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-close {
    position: static;
    align-self: flex-end;
    flex-shrink: 0;
    margin: 0 0 var(--space-2);
  }
}