/* ==========================================================================
   TGL Site Header — 2026 redesign
   Requires: tgl-design-system.css (tokens) · tgl-fonts.css (@font-face)

   ONE menu tree, two layouts. Above 1024px `.tgl-site-header__nav` is an
   inline row with click-to-open panels; below it, the same element becomes a
   full-screen sheet and the panels become accordions. Nothing is duplicated
   in the DOM — the old header shipped the whole menu twice.

   Two visual states, both from the design:

     over-hero   barra transparente, texto blanco, píldora translúcida  (295:157)
     stuck       barra blanca, texto negro, sin píldora                 (304:2699)

   `.is-stuck` la agrega el bundle. Sin JavaScript el header se queda en su
   estado inicial y todos los links siguen funcionando.
   ========================================================================== */

.tgl-site-header {
    /* ── Component tokens ── */
    --sh-max: 1377px;          /* ancho del contenido del header — 304:2724.
                                  Es MÁS ancho que --tgl-container (1144): el
                                  header respira hasta los bordes, el contenido no. */
    --sh-height: 80px;
    --sh-height-mobile: 58px;  /* 353:531 */
    --sh-gap: 24px;

    --sh-fg: var(--tgl-primitive-white);
    --sh-bg: transparent;
    --sh-pill-bg: rgba(255, 255, 255, 0.1);   /* 304:2621 */
    --sh-panel-bg: rgba(20, 20, 20, 0.92);
    --sh-panel-border: rgba(255, 255, 255, 0.14);
    --sh-divider: rgba(255, 255, 255, 0.8);   /* 297:2447 */
    --sh-search-bg: rgba(217, 217, 217, 0.2); /* 304:2643 */
    --sh-search-placeholder: rgba(255, 255, 255, 0.5);

    --sh-cta-bg: var(--tgl-primitive-orange-cta);
    --sh-cta-fg: var(--tgl-primitive-ink-1000);

    --sh-link-size: 0.9rem;      /* 14.4px — 304:2728 */
    --sh-link-leading: 1.63;     /* 23.45 / 14.4 */

    position: sticky;
    top: 0;
    z-index: var(--tgl-z-sticky);
    background: var(--sh-bg);
    color: var(--sh-fg);
    font-family: var(--tgl-font-body);

    /* Solo animan color y fondo. `height` NUNCA: animarla dispara layout en
       cada frame del scroll, y en iOS eso se ve como un tirón. */
    transition:
        background-color var(--tgl-transition-normal),
        color var(--tgl-transition-normal),
        box-shadow var(--tgl-transition-normal);
}

/* Sobre el hero: barra transparente, texto blanco. Es el estado inicial. */
.tgl-site-header--over-hero {
    position: fixed;
    inset-inline: 0;
    --sh-bg: transparent;
}

/* Scrolleado: barra blanca, texto negro, sin fondo en la píldora del nav. */
.tgl-site-header.is-stuck {
    --sh-fg: var(--tgl-primitive-ink-1000);
    --sh-bg: var(--tgl-primitive-white);
    --sh-pill-bg: transparent;
    --sh-panel-bg: var(--tgl-primitive-white);
    --sh-panel-border: var(--tgl-border-light);
    --sh-divider: var(--tgl-border-medium);
    --sh-search-bg: var(--tgl-primitive-gray-100);
    --sh-search-placeholder: var(--tgl-text-muted);
    box-shadow: var(--tgl-shadow-sm);
}

.tgl-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-gap);
    width: 100%;
    max-width: var(--sh-max);
    min-height: var(--sh-height);
    margin-inline: auto;
    padding-inline: var(--tgl-space-6);
    box-sizing: border-box;
}

/* ── Logo ─────────────────────────────────────────────────────────────── */

.tgl-site-header .tgl-site-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;

    /* El header se monta dentro de un template de Elementor, cuyo kit estila
       `a` a nivel global. Sin esto el logo de texto sale azul y subrayado —
       verificado en el harness antes de que llegara a producción. */
    color: inherit;
    text-decoration: none;
}

.tgl-site-header .tgl-site-header__logo img {
    display: block;
    width: auto;
    height: 2.5rem;   /* 40px — mismos valores que el header viejo, ya probados */
    max-width: none;
}

.tgl-site-header .tgl-site-header__logo-text {
    font-family: var(--tgl-font-heading);
    font-size: var(--tgl-font-size-lg);
    color: currentColor;
}


/* ── Nav ──────────────────────────────────────────────────────────────── */

.tgl-site-header .tgl-nav {
    display: flex;
    align-items: center;
    gap: 28px;                 /* 304:2621 */
    margin: 0;
    padding: 8px 20px;         /* 304:2621 */
    list-style: none;
    background: var(--sh-pill-bg);
    border-radius: var(--tgl-radius-full);
    transition: background-color var(--tgl-transition-normal);
}

.tgl-site-header .tgl-nav__item {
    position: relative;
    margin: 0;
}

.tgl-site-header .tgl-nav__top {
    display: inline-flex;
    align-items: center;
    gap: 2px;                  /* 304:2622 */
}

.tgl-site-header .tgl-nav__top-link,
.tgl-site-header .tgl-nav__panel-link,
.tgl-site-header .tgl-nav__link {
    color: currentColor;
    font-size: var(--sh-link-size);
    line-height: var(--sh-link-leading);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: opacity var(--tgl-transition-fast);
}

/* Los links del nav nunca se parten. Un item de dos palabras rompía la
   píldora en dos líneas y descolocaba toda la barra. */
.tgl-site-header .tgl-nav__top-link { white-space: nowrap; }

/* Un padre SIN destino se emite como un botón que lleva las dos clases:
   `__top-link` (es el label) y `__toggle` (abre el panel). En ese caso NO
   debe tomar el tamaño fijo del botón de chevron suelto — con 20×20 el texto
   se parte y la píldora se deforma. */
.tgl-site-header .tgl-nav__top-link.tgl-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
    height: auto;
}

.tgl-site-header .tgl-nav__top-link:hover,
.tgl-site-header .tgl-nav__panel-link:hover,
.tgl-site-header .tgl-nav__link:hover { opacity: 0.7; }

.tgl-site-header .tgl-nav__top-link[aria-current="page"] { text-decoration: underline; }

.tgl-site-header .tgl-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: currentColor;
    background: none;
    border: 0;
    cursor: pointer;
}

.tgl-site-header .tgl-nav__chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--tgl-transition-normal);
}

.tgl-site-header .tgl-nav__toggle[aria-expanded="true"] .tgl-nav__chevron { transform: rotate(180deg); }

/* ── Panel ────────────────────────────────────────────────────────────── */

/* Sin JS el panel nunca se abre, y el link del padre sigue funcionando. Por
   eso el estado por defecto es el atributo `hidden` y no una clase. */
.tgl-site-header .tgl-nav__panel[hidden] { display: none; }

.tgl-site-header .tgl-nav__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    padding: 14px 20px 10px;                    /* 297:2451 */
    background: var(--sh-panel-bg);
    border: 1px solid var(--sh-panel-border);
    border-radius: var(--tgl-radius-lg);        /* 10px */
    backdrop-filter: blur(12px);
    box-shadow: var(--tgl-shadow-lg);
}

.tgl-site-header .tgl-nav__panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tgl-site-header .tgl-nav__group-label {
    margin: 0 0 8px;
    font-family: var(--tgl-eyebrow-font);
    font-size: 0.625rem;                        /* 10px — 297:2445 */
    font-weight: 600;
    letter-spacing: var(--tgl-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--tgl-primitive-teal-700);
}

.tgl-site-header .tgl-nav__group-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Un link de panel que ADEMÁS tiene hijos ("Friends of the Good Life"):
   conserva su propio destino y los hijos bajan indentados debajo. No hay
   flyout de tercer nivel — en el header viejo ese flyout, en pantalla táctil,
   hace que el padre no se pueda tocar nunca. */
.tgl-site-header .tgl-nav__group:not(.is-grid) .tgl-nav__panel-link + .tgl-nav__group-links {
    margin-top: 8px;
    padding-left: var(--tgl-space-4);
    border-left: 1px solid var(--sh-panel-border);
}

.tgl-site-header .tgl-nav__group:not(.is-grid) .tgl-nav__group-links .tgl-nav__link {
    font-weight: 400;
    opacity: 0.85;
}

/* `is-grid` en el item padre, desde el campo nativo "CSS Classes" de
   Appearance → Menus. Es lo que convierte la lista de islas en la grilla de
   dos filas del diseño, sin admin propio. */
.tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-links {
    flex-flow: row wrap;
    gap: 10px 21px;                             /* 297:2444 */

    /* Sin ancho explícito el panel es shrink-to-fit y la grilla se acomoda en
       2 columnas en vez de 4. 4 × 107 + 3 × 21 = 491, que es lo que da el
       diseño (297:2444). Se resetea en mobile, donde la lista es vertical. */
    width: 491px;
}

.tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-item { flex: 0 0 107px; }

.tgl-site-header .tgl-nav__group-item { margin: 0; }

.tgl-site-header .tgl-nav__group-item .tgl-nav__link,
.tgl-site-header .tgl-nav__panel-link {
    display: block;
    font-size: 0.891rem;                        /* 14.264px */
    font-weight: 600;
    white-space: nowrap;
}

.tgl-site-header .tgl-nav__panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tgl-space-4);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sh-divider);
}

.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link {
    font-weight: 400;
    text-decoration: underline;
}

/* El primer link del footer es el destacado ("Foster Hill"). */
.tgl-site-header .tgl-nav__panel-footer .tgl-nav__panel-link:first-child {
    color: var(--tgl-primitive-orange-cta);
}

/* ── Acciones ─────────────────────────────────────────────────────────── */

.tgl-site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;                                   /* 304:2738 */
    flex-shrink: 0;
}

.tgl-site-header .tgl-site-search {
    position: relative;   /* ancla del panel de resultados */
    display: flex;
    align-items: center;
    height: 39px;
    border-radius: var(--tgl-radius-full);
    transition: background-color var(--tgl-transition-normal);
}

.tgl-site-header .tgl-site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex-shrink: 0;
    padding: 0;
    color: currentColor;
    background: var(--sh-search-bg);
    border: 0;
    border-radius: var(--tgl-radius-full);
    cursor: pointer;
}

.tgl-site-header .tgl-site-search__toggle svg { width: 18px; height: 18px; }

/* El campo arranca colapsado y se expande al abrir. Se anima `width` y no
   `display`, para que la transición exista y el input siga siendo enfocable. */
.tgl-site-header .tgl-site-search__input {
    width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: currentColor;
    font-family: inherit;
    font-size: 0.891rem;
    opacity: 0;
    pointer-events: none;
    transition:
        width var(--tgl-transition-slow),
        opacity var(--tgl-transition-fast),
        padding var(--tgl-transition-slow);
}

.tgl-site-header .tgl-site-search__input::placeholder { color: var(--sh-search-placeholder); }
.tgl-site-header .tgl-site-search__input:focus { outline: none; }

.tgl-site-header .tgl-site-search.is-open { background: var(--sh-search-bg); }

.tgl-site-header .tgl-site-search.is-open .tgl-site-search__input {
    width: 124px;                               /* 163 − 39 del botón */
    padding-inline: 12px;
    opacity: 1;
    pointer-events: auto;
}

.tgl-site-header .tgl-site-search.is-open .tgl-site-search__toggle { background: transparent; }

/* ── Resultados en vivo ──
   El diseño 2026 no dibuja esta superficie. Se resolvió como lista vertical
   (patrón combobox estándar) en vez del carrusel con flechas y puntos que
   tiene el header viejo: navegable por teclado y sin pelear el scroll en
   mobile. Ver §2.13 del plan. */

.tgl-site-header .tgl-site-search__results[hidden] { display: none; }

.tgl-site-header .tgl-site-search__results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--tgl-z-dropdown);
    width: min(420px, calc(100vw - 2 * var(--tgl-space-6)));
    padding: var(--tgl-space-3);
    background: var(--sh-panel-bg);
    border: 1px solid var(--sh-panel-border);
    border-radius: var(--tgl-radius-lg);
    backdrop-filter: blur(12px);
    box-shadow: var(--tgl-shadow-lg);
}

.tgl-site-header .tgl-site-search__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tgl-space-4);
    padding-bottom: var(--tgl-space-2);
    margin-bottom: var(--tgl-space-2);
    border-bottom: 1px solid var(--sh-divider);
}

.tgl-site-header .tgl-site-search__status {
    margin: 0;
    font-size: var(--tgl-text-eyebrow);
    color: currentColor;
    opacity: 0.75;
}

.tgl-site-header .tgl-site-search__see-all {
    flex-shrink: 0;
    color: var(--tgl-primitive-orange-cta);
    font-size: var(--tgl-text-eyebrow);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.tgl-site-header .tgl-site-search__list {
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Seis resultados y el resto scrollea DENTRO del panel. Un dropdown más
       alto que la ventana deja el último resultado inalcanzable. */
    max-height: 336px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tgl-site-header .tgl-search-result {
    display: flex;
    align-items: center;
    gap: var(--tgl-space-3);
    padding: var(--tgl-space-2);
    border-radius: var(--tgl-radius-md);
    color: currentColor;
    text-decoration: none;
    transition: background-color var(--tgl-transition-fast);
}

/* `.is-active` la pone el teclado (flechas); `:hover` es el mouse. Se ven
   igual a propósito: son el mismo estado para el usuario. */
.tgl-site-header .tgl-search-result:hover,
.tgl-site-header .tgl-search-result.is-active {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.tgl-site-header .tgl-search-result__media {
    flex: 0 0 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--tgl-radius-sm);
    line-height: 0;
}

.tgl-site-header .tgl-search-result__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tgl-site-header .tgl-search-result__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;   /* sin esto el texto largo desborda el flex en vez de cortarse */
}

.tgl-site-header .tgl-search-result__title {
    font-size: 0.891rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgl-site-header .tgl-search-result__price {
    font-size: var(--tgl-text-eyebrow);
    opacity: 0.75;
}

/* Señal de carga sin spinner: un spinner nuevo es markup, CSS y una animación
   más para 300 ms de espera. */
.tgl-site-header .tgl-site-search.is-loading .tgl-site-search__list { opacity: 0.5; }

.tgl-site-header .tgl-site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;                                   /* 304:2744 */
    height: 39px;
    padding-inline: 11px;
    background: var(--sh-cta-bg);
    color: var(--sh-cta-fg);
    border-radius: var(--tgl-radius-full);
    font-size: 0.865rem;                        /* 13.832px */
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: filter var(--tgl-transition-fast);
}

.tgl-site-header .tgl-site-header__cta:hover { filter: brightness(0.94); }

.tgl-site-header .tgl-site-header__cta-arrow { width: 10px; height: 8px; }

/* El CTA del sheet solo existe en mobile. */
.tgl-site-header .tgl-site-header__cta--sheet { display: none; }

/* `color` y el reset de botón van FUERA del media query a propósito. Estaban
   dentro, así que arriba del breakpoint el kit de Elementor le ganaba a la
   hamburguesa y la pintaba de su color de botón. Está oculta ahí, pero un
   estilo que depende del viewport para no romperse es una trampa esperando. */
.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-close {
    color: currentColor;
    background: none;
    border: 0;
    padding: 0;
}

.tgl-site-header .tgl-site-header__burger,
.tgl-site-header .tgl-site-header__sheet-head { display: none; }

/* ==========================================================================
   Mobile — el caso principal, no el fallback. 80% del tráfico.
   ========================================================================== */

@media (max-width: 1023px) {

    .tgl-site-header__inner {
        min-height: var(--sh-height-mobile);
        padding-inline: var(--tgl-space-4);
    }

    .tgl-site-header__logo img { height: 32px; }   /* 353:532 */

    /* El mismo <nav> del desktop, ahora como hoja a pantalla completa. */
    .tgl-site-header__nav {
        position: fixed;
        inset: 0;
        z-index: var(--tgl-z-overlay);
        display: flex;
        flex-direction: column;
        padding: var(--tgl-space-6) var(--tgl-space-5) var(--tgl-space-8);
        background: var(--tgl-primitive-white);
        color: var(--tgl-primitive-ink-1000);
        overflow-y: auto;
        overscroll-behavior: contain;

        /* `transform` + `visibility` en vez de `display`, para que la hoja
           anime y siga fuera del orden de tabulación mientras está cerrada. */
        visibility: hidden;
        transform: translateX(100%);
        transition:
            transform var(--tgl-transition-slow),
            visibility var(--tgl-transition-slow);
    }

    .tgl-site-header.is-nav-open .tgl-site-header__nav {
        visibility: visible;
        transform: translateX(0);
    }

    .tgl-site-header .tgl-site-header__sheet-head {
        display: flex;
        justify-content: flex-end;
        margin-bottom: var(--tgl-space-8);
    }

    .tgl-site-header .tgl-site-header__sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: currentColor;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .tgl-site-header .tgl-site-header__sheet-close svg { width: 17px; height: 17px; }

    .tgl-site-header .tgl-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: none;
    }

    .tgl-site-header .tgl-nav__item { padding-block: 8px; }

    .tgl-site-header .tgl-nav__top { justify-content: space-between; width: 100%; }

    .tgl-site-header .tgl-nav__top-link {
        font-size: 1.125rem;                      /* 138:1293 */
        font-weight: 400;
    }

    /* Acordeón: el panel pasa a ser parte del flujo, sin posicionamiento. */
    .tgl-site-header .tgl-nav__panel {
        position: static;
        transform: none;
        min-width: 0;
        margin-top: var(--tgl-space-3);
        padding: 0 0 0 var(--tgl-space-5);
        background: none;
        border: 0;
        border-radius: 0;
        backdrop-filter: none;
        box-shadow: none;
    }

    .tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-links {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        width: auto;   /* anula los 491px de la grilla desktop */
    }

    .tgl-site-header .tgl-nav__group.is-grid .tgl-nav__group-item { flex: none; }

    .tgl-site-header .tgl-nav__group-item .tgl-nav__link,
    .tgl-site-header .tgl-nav__panel-link { font-size: 1rem; font-weight: 400; }

    .tgl-site-header .tgl-nav__panel-footer { flex-direction: column; align-items: flex-start; }

    .tgl-site-header .tgl-site-header__cta--sheet {
        display: inline-flex;
        margin-top: auto;
        height: 40px;                              /* 138:1307 */
    }

    .tgl-site-header .tgl-site-header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: currentColor;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .tgl-site-header .tgl-site-header__burger svg { width: 22px; height: 15px; }

    /* El diseño mobile no dibuja búsqueda en el header (353:533 son solo CTA
       y hamburguesa). Se oculta, NO se borra del markup: sacarla del DOM sería
       una decisión de producto y todavía no está tomada. */
    .tgl-site-header .tgl-site-search { display: none; }

    /* El CTA de la barra se va cuando la hoja está abierta: la hoja trae el
       suyo, y dos CTA visibles a la vez confunden. */
    .tgl-site-header.is-nav-open .tgl-site-header__actions .tgl-site-header__cta {
        visibility: hidden;
    }
}

/* ==========================================================================
   Accesibilidad y preferencias
   ========================================================================== */

.tgl-site-header :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: var(--tgl-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .tgl-site-header,
    .tgl-site-header__nav,
    .tgl-site-header .tgl-site-search__input,
    .tgl-site-header .tgl-nav__chevron,
    .tgl-site-header .tgl-nav {
        transition: none;
    }
}