/*
 * Navbar desktop con animazione "pill" scroll-linked.
 *
 * Il JS imposta su .site-header la CSS variable --nav-progress (0 → 1) in base
 * allo scroll tra --nav-start (1vh) e --nav-end (~40vh). Tutti gli stili si
 * interpolano linearmente su quella variabile, così l'animazione segue il dito
 * dell'utente in modo fluido — invece di un toggle on/off a una soglia.
 *
 * Struttura:
 *  - .page-header : logo grande + CTA grande, nel flusso della pagina. Scrolla
 *                   via con il contenuto.
 *  - .site-header : pill fixed in alto. A progress=0 contiene il solo menu ed
 *                   è trasparente; allo scroll si allarga progressivamente per
 *                   inglobare logo-mini (a sinistra) e CTA (a destra) con bg,
 *                   blur e border-radius.
 *
 * Mobile (< 1024px): navbar nascosta, page-header nascosto. Verrà gestita
 * separatamente.
 */

/*
 * Variabili condivise tra page-header e site-header.
 * --nav-top:    distanza della pill fixed dal top del viewport.
 * --nav-pill-h: altezza fissa della pill. Il contenuto (menu, logo mini, CTA)
 *               è centrato verticalmente dentro questi 52px. Il page-header
 *               usa la stessa altezza + padding simmetrico rispetto a nav-top
 *               così logo grande e CTA grande stanno sulla stessa linea ottica.
 */
:root {
    --nav-pill-h: 60px;
    --nav-top: 36px;
}

/* ─────────────────────────────────────────────────────────
 * Page header — logo + CTA/burger nel flusso della pagina.
 *
 * Desktop (≥1024px): altezza = nav-top*2 + nav-pill-h, così il centro
 * verticale coincide con la pill fixed. Hamburger nascosto.
 *
 * Mobile (<1024px): visibile, scorre con la pagina (non fixed).
 * Mostra solo logo e hamburger. La CTA testuale è nascosta — la CTA
 * appare invece dentro l'overlay del menu.
 * ───────────────────────────────────────────────────────── */
.page-header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem 1.25rem;
}

@media (min-width: 1024px) {
    .page-header {
        gap: 2rem;
        height: calc(var(--nav-top) * 2 + var(--nav-pill-h));
        margin: 0 auto;
        max-width: 1440px;
        /* padding: 0 2.5rem; */
    }
}

.page-header__logo {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .page-header__logo {
        height: 40px;
    }
}

.page-header__logo img {
    display: block;
    height: 100%;
    max-width: 200px;
    object-fit: contain;
    width: auto;
}

@media (min-width: 1024px) {
    .page-header__logo img {
        max-width: 250px;
    }
}

/* CTA in the page-header: desktop only.
   On mobile the hamburger takes its slot; the CTA reappears inside the overlay.
   Visual styling comes from .btn .btn-blue — here we only handle the
   desktop-only visibility. */
.page-header__cta {
    display: none;
}

@media (min-width: 1024px) {
    .page-header__cta {
        display: inline-flex;
    }
}

/* ─────────────────────────────────────────────────────────
 * Site header — pill fixed
 * ───────────────────────────────────────────────────────── */
.site-header {
    --nav-progress: 0;
    /* Late progress: stays at 0 until --nav-progress reaches 0.6, then climbs
       to 1 by the end. Used by logo-mini and CTA so they fade in only after
       the pill has already expanded enough to host them. The max() clamp
       keeps the value at 0 during the first 60% of the scroll animation. */
    --nav-progress-late: calc(max(0, (var(--nav-progress) - 0.6)) / 0.4);

    display: none;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--nav-top);
    z-index: 1000;
}

@media (min-width: 1024px) {
    .site-header {
        display: block;
    }
}

/* ─────────────────────────────────────────────────────────
 * Container interno — interpolazione lineare su --nav-progress.
 *
 * A progress=0: width auto (cresce col solo menu), centrato, trasparente,
 *   no radius, no shadow.
 * A progress=1: padding laterale ampio per respirazione, bg/blur/radius/shadow
 *   pieni, leggero margine dall'alto.
 *
 * La larghezza è determinata dal contenuto (width: max-content) — quando
 * logo-mini e CTA si espandono, la pill si allarga di conseguenza.
 * ───────────────────────────────────────────────────────── */
.site-header__inner {
    align-items: center;
    backdrop-filter: saturate(calc(100% + 40% * var(--nav-progress)))
                     blur(calc(8px * var(--nav-progress)));
    border-radius: calc(52px * var(--nav-progress));
    box-shadow: 0 8px 28px rgba(0, 0, 0, calc(0.12 * var(--nav-progress)));
    display: flex;
    gap: calc(0.5rem + 1rem * var(--nav-progress));
    height: var(--nav-pill-h);
    justify-content: center;
    margin: 0 auto;
    /* No overflow clip on the container: the sub-menu dropdown must escape
       the pill. The horizontal collapse of logo-mini and CTA is contained
       by their own overflow:hidden (see .site-header__logo and .site-header__cta). */
    max-width: calc(100% - 3rem);
    /* padding verticale 0: l'altezza è fissata da --nav-pill-h, il contenuto
       è centrato via align-items. Solo il padding orizzontale si anima.
       Left cresce a 24px (per dare respiro al logo mini che appare da sinistra),
       right a 16px. Entrambi partono da 12px a progress=0. */
    padding:
        0
        calc(8px + 4px  * var(--nav-progress))
        0
        calc(12px + 12px * var(--nav-progress));
    pointer-events: auto;
    width: max-content;
}

/* Background interpolato via rgba — 0 → 0.92 di opacità */
body.bg-light .site-header__inner {
    background-color: rgba(255, 255, 255, calc(0.92 * var(--nav-progress)));
}

body.bg-dark .site-header__inner {
    background-color: rgba(21, 32, 55, calc(0.92 * var(--nav-progress)));
}

/* ─────────────────────────────────────────────────────────
 * Logo mini — collassato a progress=0, visibile a progress=1.
 * Usiamo max-width + opacity + margin-right per un collasso fluido senza
 * spostamenti bruschi del menu.
 * ───────────────────────────────────────────────────────── */
.site-header__logo {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    max-width: calc(140px * var(--nav-progress-late));
    opacity: var(--nav-progress-late);
    overflow: hidden;
    text-decoration: none;
}

.site-header__logo img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: auto;
}

/* ─────────────────────────────────────────────────────────
 * Menu centrale
 * ───────────────────────────────────────────────────────── */
.site-header__menu {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
}

/*
 * Hover pill — un background a forma di pill che segue il cursore tra le voci
 * di menu, in stile bravepeople.co. Posizione/larghezza guidate da CSS variables
 * --pill-x e --pill-w impostate dal JS al mouseenter di ogni <li>; --pill-opacity
 * fa fade-in al primo hover e fade-out quando il cursore lascia la lista.
 *
 * Z-index: il ::before sta a 0, gli <a> a 1 — così il testo resta sopra la pill.
 * Transizione lunga (cubic-bezier morbida) per il morphing fluido tra le voci.
 */
.site-header__menu-list {
    --pill-x: 0px;
    --pill-w: 0px;
    --pill-opacity: 0;

    align-items: stretch;
    display: flex;
    gap: 16px;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.site-header__menu-list::before {
    background-color: var(--color-ice-20);
    border-radius: 9999px;
    content: "";
    height: calc(var(--nav-pill-h) - 16px);
    left: 0;
    opacity: var(--pill-opacity);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(var(--pill-x), -50%);
    transition:
        transform 450ms cubic-bezier(0.34, 1.2, 0.64, 1),
        width 450ms cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 200ms ease;
    width: var(--pill-w);
    z-index: 0;
}

.site-header__menu-list li {
    align-items: center;
    display: flex;
    position: relative;
    z-index: 1;
}

.site-header__menu-list a {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-family: var(--font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 100%;
    letter-spacing: 0;
    line-height: 20px;
    padding: 0 18px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 250ms ease;
}

/* Quando l'item è "active" (hover marcato dal JS) il testo va al colore
   scuro per restare leggibile sopra la pill beige #f0ede6. */
.site-header__menu-list li.is-pill-active a {
    color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────
 * Sub-menu dropdown — appare on hover/focus dell'<li> padre.
 *
 * WordPress emette <ul class="sub-menu"> dentro le <li> con figli e marca
 * il padre con .menu-item-has-children. Il dropdown è position:absolute
 * sotto la voce padre. Il container .site-header__inner non ha overflow
 * clip, quindi il dropdown esce liberamente sotto la pill.
 *
 * Stato di riposo: opacity 0 + translateY(8px) + pointer-events:none.
 * Hover/focus-within sul padre: fade-in con leggero slide.
 * Un padding-top di 12px sul ::before invisibile crea una "zona ponte"
 * che evita che il menu si chiuda mentre il cursore passa sopra il gap.
 * ───────────────────────────────────────────────────────── */
.site-header__menu-list .sub-menu {
    background-color: var(--color-ice-20);
    border-radius: 32px;
/* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); */
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 50%;
    list-style: none;
    margin: 0;
    min-width: 220px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translate(-50%, 8px);
    transition:
        opacity 220ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

/* Bridge invisibile tra voce padre e dropdown — evita la chiusura quando
   il cursore attraversa il gap di ~12px tra pill e card del sub-menu. */
.site-header__menu-list .menu-item-has-children::after {
    content: "";
    height: 12px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 100%;
}

.site-header__menu-list .menu-item-has-children:hover::after,
.site-header__menu-list .menu-item-has-children:focus-within::after {
    opacity: 1;
    pointer-events: auto;
}

.site-header__menu-list .menu-item-has-children:hover > .sub-menu,
.site-header__menu-list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.site-header__menu-list .sub-menu li {
    align-items: stretch;
    display: flex;
    width: 100%;
}

.site-header__menu-list .sub-menu a {
    border-radius: 99999px;
    color: var(--color-text);
    font-size: 14px;
    height: auto;
    letter-spacing: 0;
    line-height: 18px;
    padding: 14px;
    text-transform: uppercase;
    transition: background-color 200ms ease, color 200ms ease;
    width: 100%;
}

.site-header__menu-list .sub-menu a:hover,
.site-header__menu-list .sub-menu a:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────────────────
 * CTA inside the pill — mirrors the mini logo pattern: fluid collapse.
 * Visual (label pill, arrow circle, hover rotation) comes from .btn .btn-blue.
 * Here we only override sizing and the progress-driven collapse so it fits
 * in the 44px pill row and appears/disappears in sync with --nav-progress-late
 * (delayed: it only fades in during the last 40% of the scroll animation).
 * ───────────────────────────────────────────────────────── */
.site-header__cta {
    --btn-circle-size: 36px;
    --btn-radius: 36px;
    --btn-pad-x: 1rem;

    font-size: 0.85rem;
    max-height: 44px;
    max-width: calc(220px * var(--nav-progress-late));
    min-height: 36px;
    opacity: var(--nav-progress-late);
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────
 * Colori testo in base a bg del body
 * ───────────────────────────────────────────────────────── */
body.bg-light .site-header,
body.bg-light .page-header {
    color: var(--color-text);
}

body.bg-dark .site-header,
body.bg-dark .page-header {
    color: #fff;
}

/* ─────────────────────────────────────────────────────────
 * Reduced motion: forza lo stato iniziale (--nav-progress = 0 gestito dal JS)
 * Qui non serve altro perché le transizioni sono guidate dallo scroll, non da
 * una durata CSS. Il JS rispetta prefers-reduced-motion saltando gli update.
 * ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
 * Mobile — hamburger button
 *
 * Visibile solo sotto 1024px. Vive dentro .page-header quindi scorre con
 * la pagina (nessun position:fixed). Due barre che si trasformano in X
 * quando .is-open è applicata (via JS sul body).
 * ───────────────────────────────────────────────────────── */
.page-header__burger {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9999px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 44px;
    z-index: 1001; /* sopra l'overlay per restare cliccabile */
}

@media (min-width: 1024px) {
    .page-header__burger {
        display: none;
    }
}

/* SVG 24x24 inline, colore ereditato dal button (currentColor).
   Le 3 barre (<path>) si animano in "X": la centrale fa fade-out,
   la top e la bottom convergono al centro e ruotano di ±45°. */
.page-header__burger-icon {
    display: block;
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

/* transform-box: fill-box → il transform-origin "center" è il centro
   della bbox della singola <path>, non dell'intero viewBox. Così la
   rotazione delle barre top/bottom avviene attorno al loro asse locale
   (dopo averle portate a y=12 con translateY), producendo una X pulita. */
.page-header__burger-bar {
    transform-box: fill-box;
    transform-origin: center;
    transition:
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity   200ms ease;
}

body.mobile-menu-open .page-header__burger-bar--top {
    transform: translateY(4.77px) rotate(45deg);
}

body.mobile-menu-open .page-header__burger-bar--middle {
    opacity: 0;
}

body.mobile-menu-open .page-header__burger-bar--bottom {
    transform: translateY(-4.77px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────
 * Mobile menu overlay
 *
 * Fullscreen fixed, nascosto di default (opacity:0, pointer-events:none,
 * visibility:hidden). Al tap dell'hamburger JS applica body.mobile-menu-open
 * che rivela l'overlay con fade + blur.
 * ───────────────────────────────────────────────────────── */
.mobile-menu {
    align-items: center;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 6rem 1.5rem 2rem;
    pointer-events: none;
    position: fixed;
    transition:
        opacity 350ms ease,
        visibility 0s linear 350ms;
    visibility: hidden;
    z-index: 1000;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }
}

body.bg-light .mobile-menu {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
}

body.bg-dark .mobile-menu {
    background-color: rgba(21, 32, 55, 0.94);
    color: #fff;
}

body.mobile-menu-open .mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transition:
        opacity 350ms ease,
        visibility 0s linear 0s;
    visibility: visible;
}

.mobile-menu__nav {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 640px;
    width: 100%;
}

.mobile-menu__list {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-menu__list > li {
    text-align: center;
    width: 100%;
}

/* Font: stesso treatment del desktop (.site-header__menu-list a) —
   font-family, peso 400, uppercase, letter-spacing 0. Dimensione
   più grande perché siamo in overlay fullscreen mobile. */
.mobile-menu__list a {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-family: var(--font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 20px;
    min-height: 40px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 200ms ease;
}

.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────
 * Mobile sub-menu — accordion +/- come i toggle (toggle.css).
 *
 * Markup atteso (renderizzato da WP):
 *   <li class="menu-item-has-children">
 *     <a>Voce padre</a>
 *     <button class="mobile-menu__sub-toggle">[+/-]</button>  ← iniettato dal JS
 *     <ul class="sub-menu"> … </ul>
 *   </li>
 *
 * La voce padre + il bottone toggle stanno sulla stessa riga (.mobile-menu__row,
 * iniettato dal JS attorno ai due elementi). Il sub-menu è collassato con
 * grid-template-rows: 0fr → 1fr per animare l'altezza senza max-height fisso.
 * ───────────────────────────────────────────────────────── */
.mobile-menu__list .menu-item-has-children {
    display: flex;
    flex-direction: column;
}

/* Flex centrato: link + toggle stanno fianco a fianco al centro della riga.
   Il link mantiene il suo width naturale; il toggle è subito a destra con
   un piccolo gap. Per restare allineato con le voci senza figli, l'<a>
   compensa con un padding-left pari alla larghezza del toggle + gap, così
   il testo del link risulta visivamente centrato sull'asse della lista. */
.mobile-menu__row {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: center;
    width: 100%;
}

.mobile-menu__row > a {
    padding-left: calc(1rem + 32px + 4px);
}

.mobile-menu__sub-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9999px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

/* Plus/minus icon via mask-image so the fill follows currentColor.
   Stesso pattern di toggle.css (.toggle-icon). */
.mobile-menu__sub-toggle::before {
    background-color: currentColor;
    content: "";
    display: block;
    height: 20px;
    mask-image: url("../icons/plus.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("../icons/plus.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    width: 20px;
}

.mobile-menu__list .menu-item-has-children.is-open > .mobile-menu__row .mobile-menu__sub-toggle::before {
    mask-image: url("../icons/minus.svg");
    -webkit-mask-image: url("../icons/minus.svg");
}

/* Sub-menu collassato: display:none per non occupare spazio. All'apertura
   diventa flex column. Niente animazione di altezza per evitare residui di
   spazio quando chiuso. */
.mobile-menu__list .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mobile-menu__list .menu-item-has-children.is-open > .sub-menu {
    display: flex;
    flex-direction: column;
}

/* Voci del sub-menu: leggermente più piccole, non uppercase, separate
   visivamente dalle voci top-level. */
.mobile-menu__list .sub-menu li {
    text-align: center;
    width: 100%;
}

.mobile-menu__list .sub-menu a {
    font-size: 13px;
    min-height: 36px;
    opacity: 0.85;
    padding: 0.4rem 1rem;
    text-transform: uppercase;
}

/* Stagger in apertura: ogni link entra con un piccolo delay incrementale.
   Stato di partenza: shift verso il basso + opacity 0. A menu aperto si
   portano nella posizione finale. Solo i figli diretti della lista — i
   <li> dentro il sub-menu non partecipano allo stagger. */
.mobile-menu__list > li,
.mobile-menu__cta {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 450ms ease,
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-menu-open .mobile-menu__list > li,
body.mobile-menu-open .mobile-menu__cta {
    opacity: 1;
    transform: translateY(0);
}

body.mobile-menu-open .mobile-menu__list > li:nth-child(1) { transition-delay: 80ms; }
body.mobile-menu-open .mobile-menu__list > li:nth-child(2) { transition-delay: 140ms; }
body.mobile-menu-open .mobile-menu__list > li:nth-child(3) { transition-delay: 200ms; }
body.mobile-menu-open .mobile-menu__list > li:nth-child(4) { transition-delay: 260ms; }
body.mobile-menu-open .mobile-menu__list > li:nth-child(5) { transition-delay: 320ms; }
body.mobile-menu-open .mobile-menu__list > li:nth-child(6) { transition-delay: 380ms; }
body.mobile-menu-open .mobile-menu__cta                    { transition-delay: 440ms; }

/* Visual styling comes from .btn .btn-blue. Here we only add the
   overlay-specific spacing; the stagger animation is handled further above. */
.mobile-menu__cta {
    margin-top: 1rem;
}

/* Reduced motion: niente stagger, niente shift verticale. */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-menu__list > li,
    .mobile-menu__cta,
    .page-header__burger-bar {
        transition: opacity 150ms ease, visibility 0s;
    }
    .mobile-menu__list > li,
    .mobile-menu__cta {
        transform: none;
    }
    body.mobile-menu-open .mobile-menu__list > li,
    body.mobile-menu-open .mobile-menu__cta {
        transition-delay: 0ms;
    }
}