/* MOJAVE-CUTOVER: drop the `:root[data-skin="mojave"]` prefix from every selector, move these rules into the
   shell stylesheet and delete the navbar rules of halo-shell.css they replace (ADOPCION.md, Fase 4). */
/* ==========================================================================
   AG MOJAVE — PIEL DEL NAVBAR (escrito a mano; no es una copia de dist/)
   Restyla el navbar de Halo solo con <html data-skin="mojave">. Sin el atributo,
   ningún selector coincide y Halo Bento se ve idéntico.

   Va sin capa a propósito: las reglas de halo-shell.css tampoco tienen capa, y una
   regla en @layer mj.modules les perdería. Cada selector empieza con
   :root[data-skin="mojave"], así le gana a Halo por especificidad sin !important.
   MojaveSkinTests vigila que ninguna regla quede fuera de la piel.

   Escritorio (más de 1100 px, donde Halo muestra la cápsula):
   - barra flotante elevada, enlaces condensados en mayúsculas;
   - el indicador es una barra roja en el borde inferior que sigue al cursor y vuelve
     a la página actual (halo-navbar.js lee --mj-navbar-bar);
   - «More» abre un panel ancho en rejilla y, con mouse, se abre al pasar el cursor.
   ========================================================================== */

@media (width > 1100px) {
    :root[data-skin="mojave"] .halo-navbar {
        /* Valores propios del navbar, con nombre: acento del indicador y del hover, tracking de las
           etiquetas en mayúsculas, ancho de la cápsula recogida y columna mínima del panel «More». */
        --mj-navbar-accent: var(--mj-primary-fill);
        --mj-navbar-accent-ink: var(--mj-primary-ink);
        --mj-navbar-caps-tracking: 0.02em;
        --mj-navbar-compact-width: 60rem;
        --mj-navbar-menu-column: 220px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: stretch;
        gap: var(--mj-inline-loose);
        top: var(--mj-space-3);
        height: var(--mj-space-16);
        /* Centrada y a lo ancho del contenido. Ancho explícito (no max-width): en pantallas donde body es
           flex, como Communications, margin auto la encogería a su contenido. Abajo, el aire de una región. */
        width: calc(100% - 2 * var(--mj-gutter));
        margin: var(--mj-space-3) auto var(--mj-stack-block);
        padding: 0 var(--mj-space-2) 0 var(--mj-space-4);
        background: var(--mj-bg-raised);
        border-radius: var(--mj-radius-lg);
        box-shadow: var(--mj-highlight), var(--mj-shadow-md);
    }
    /* Al bajar, la barra se recoge en una cápsula más angosta y baja; arriba vuelve a todo lo ancho.
       halo-navbar.js pone data-scrolled. El indicador se reacomoda solo mientras cambia el ancho. */
    :root[data-skin="mojave"] .halo-navbar[data-scrolled] {
        width: min(100% - 2 * var(--mj-gutter), var(--mj-navbar-compact-width));
        height: var(--mj-row);
        box-shadow: var(--mj-highlight), var(--mj-shadow-lg);
    }
    :root[data-skin="mojave"] .halo-navbar[data-scrolled] .halo-navbar__link { padding-inline: var(--mj-space-4); }
    :root[data-skin="mojave"] .halo-navbar__brand,
    :root[data-skin="mojave"] .halo-navbar__tools { align-self: center; }
    :root[data-skin="mojave"] .halo-navbar__brand { margin-inline-end: var(--mj-space-4); }

    /* La cápsula deja de ser una píldora: los enlaces ocupan todo el alto de la barra.
       Sin posición propia, el indicador y el panel de «More» se ubican respecto a la barra. */
    :root[data-skin="mojave"] .halo-navbar__capsule {
        --mj-navbar-bar: 1;
        position: static;
        justify-self: start;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    :root[data-skin="mojave"] .halo-navbar__more { position: static; display: flex; }

    :root[data-skin="mojave"] .halo-navbar__link {
        height: auto;
        padding-inline: var(--mj-space-5);
        border-radius: 0;
        color: var(--mj-fg-muted);
        font: var(--mj-weight-semibold) var(--mj-text-lg)/1 var(--mj-font-display);
        font-variation-settings: "wdth" 75, "opsz" 24;
        letter-spacing: var(--mj-navbar-caps-tracking);
        text-transform: uppercase;
    }
    :root[data-skin="mojave"] .halo-navbar__link[aria-current="page"] { color: var(--mj-fg); }
    :root[data-skin="mojave"] .halo-navbar__link:hover,
    :root[data-skin="mojave"] .halo-navbar__link[aria-expanded="true"] { color: var(--mj-navbar-accent-ink); text-decoration: none; }
    :root[data-skin="mojave"] .halo-navbar__link:focus-visible {
        box-shadow: none;
        outline: 2px solid var(--mj-focus);
        outline-offset: calc(var(--mj-space-0-5) * -1);
    }
    :root[data-skin="mojave"] .halo-navbar__badge { font-family: var(--mj-font-ui); letter-spacing: 0; text-transform: none; }

    /* El indicador: JS fija ancho y posición horizontal; alto y borde los pone la piel. */
    :root[data-skin="mojave"] .halo-navbar__indicator {
        top: auto;
        bottom: 0;
        height: var(--mj-space-1);
        border-radius: var(--mj-radius-2xs) var(--mj-radius-2xs) 0 0;
        background: var(--mj-navbar-accent);
    }

    /* «More» como panel ancho: rejilla de destinos y, tras el divisor, los de administración. */
    :root[data-skin="mojave"] .halo-navbar__menu {
        inset-inline: 0;
        top: calc(100% + var(--mj-space-2));
        min-width: 0;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mj-navbar-menu-column)), 1fr));
        gap: var(--mj-space-1);
        padding: var(--mj-inset-card);
        background: var(--mj-bg-raised);
        border: 0;
        border-radius: var(--mj-radius-lg);
        box-shadow: var(--mj-highlight), var(--mj-shadow-lg);
        transform-origin: top center;
    }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__item {
        gap: var(--mj-inline-loose);
        min-height: var(--mj-row);
        padding-inline: var(--mj-space-3);
        border-radius: var(--mj-radius-md);
        color: var(--mj-fg);
        font: var(--mj-weight-semibold) var(--mj-text-md)/var(--mj-leading-snug) var(--mj-font-ui);
    }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__item:hover { background: var(--mj-bg-hover); }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__item:focus-visible {
        box-shadow: none;
        outline: 2px solid var(--mj-focus);
        outline-offset: calc(var(--mj-space-0-5) * -1);
    }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__item > svg {
        flex: none;
        padding: var(--mj-space-1-5);
        border-radius: var(--mj-radius-sm);
        background: var(--mj-structure-soft);
        color: var(--mj-structure-soft-ink);
    }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__item[aria-current="page"] {
        background: var(--mj-bg-selected);
        color: var(--mj-structure-ink);
    }
    :root[data-skin="mojave"] .halo-navbar__menu .halo-menu__divider {
        grid-column: 1 / -1;
        margin: var(--mj-stack) 0;
        border-top-color: var(--mj-border-subtle);
    }
}

/* Entre 1101 y 1279 px los enlaces en mayúsculas no caben con todo su aire: se juntan un paso. */
@media (1100px < width < 1280px) {
    :root[data-skin="mojave"] .halo-navbar__link,
    :root[data-skin="mojave"] .halo-navbar[data-scrolled] .halo-navbar__link { padding-inline: var(--mj-space-3); font-size: var(--mj-text-md); }
    :root[data-skin="mojave"] .halo-navbar__brand { margin-inline-end: var(--mj-space-2); }
}

/* Solo cuando «More» se abrió al pasar el cursor (halo-navbar.js pone data-hover-open), la capa de
   cierre no captura clics: el panel se cierra al salir del área del menú. Abierto con clic o teclado,
   la capa sigue cerrando con un clic afuera, como en Halo. */
@media (width > 1100px) {
    :root[data-skin="mojave"] .halo-navbar[data-hover-open] .halo-navbar__scrim { pointer-events: none; }
}

@media (width > 1100px) and (prefers-reduced-motion: no-preference) {
    :root[data-skin="mojave"] .halo-navbar__indicator {
        transition: transform var(--mj-dur-snappy) var(--mj-spring-snappy),
                    width var(--mj-dur-snappy) var(--mj-spring-snappy),
                    opacity var(--mj-dur-quick) var(--mj-ease-out);
    }
    :root[data-skin="mojave"] .halo-navbar__link { transition: color var(--mj-dur-base) var(--mj-ease-hover), padding var(--mj-dur-smooth) var(--mj-spring-smooth); }
    :root[data-skin="mojave"] .halo-navbar {
        transition: width var(--mj-dur-smooth) var(--mj-spring-smooth),
                    height var(--mj-dur-smooth) var(--mj-spring-smooth),
                    box-shadow var(--mj-dur-gentle) var(--mj-ease-out);
    }
}