/* ================================================================
   header.css — Leonardo Edition
   Sticky header, 3-column grid layout, logo, nav, utilities,
   compact state, mobile toggle, scroll sentinel.
   Breakpoint principale: 1000px (mobile-first).
================================================================ */

/* ── Reset base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-utility);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll sentinel (isteresi) ────────────────────────────────── */
/*
  Due sentinel per eliminare il feedback loop tra scroll anchoring
  e la transizione dell'header sticky.

  scroll-sentinel--down : top 96px (88px header espanso + 8px respiro)
    → quando ESCE dal viewport, nav.js aggiunge .is-compact
    → si attiva solo scrollando giù oltre 96 px

  scroll-sentinel--up   : top 56px (60px header compatto − 4px)
    → quando ENTRA nel viewport, nav.js rimuove .is-compact
    → si attiva solo quando si torna sopra 56 px

  Dead zone 56–96 px (40px > 28px delta layout): qualunque aggiustamento
  di scrollY da scroll anchoring non può attraversare entrambe le soglie,
  rendendo il loop fisicamente impossibile.
*/
.scroll-sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.scroll-sentinel--down { top: 96px; }
.scroll-sentinel--up   { top: 56px; }

/* ── Header base (mobile-first) ────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-hairline);
  /* Transizioni esplicite — niente transition: all.

     Compattazione fluida SENZA spostare la pagina:
     la barra si abbassa (padding della .nav-primary) e, con la
     stessa durata e curva, cresce un margin-bottom della stessa
     quantita'. Lo spazio occupato nel flusso resta identico
     fotogramma per fotogramma, quindi il contenuto sotto non si
     muove e lo Scroll Anchoring non interviene (era lui a far
     vibrare la barra quando se ne animava l'altezza).

     Prima l'altezza cambiava di colpo mentre solo il logo era
     animato: due movimenti fuori sincrono + contenuto che saltava
     di 28px → la transizione "a scatti". */
  transition:
    box-shadow    var(--duration-base) var(--ease-out),
    margin-bottom var(--duration-base) var(--ease-out);
}

/* Compact state — aggiunto da JS via IntersectionObserver */
.site-header.is-compact {
  box-shadow: 0 1px 20px rgba(14, 14, 13, 0.06);
  /* compensa esattamente il padding perso (2 × (20 − 12) su mobile) */
  margin-bottom: calc(2 * (var(--space-20) - var(--space-12)));
}

/* ── Nav primary ───────────────────────────────────────────────── */
.nav-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-20);
  padding-inline: var(--space-24);
  gap: var(--space-16);
  /* animato in coppia con il margin-bottom di .site-header:
     vedi commento li' (stessa durata, stessa curva) */
  transition:
    padding-top    var(--duration-base) var(--ease-out),
    padding-bottom var(--duration-base) var(--ease-out);
}

.site-header.is-compact .nav-primary {
  padding-block: var(--space-12);
}

/* ── Nav list (mobile: nascosta) ───────────────────────────────── */
.nav-list {
  display: none;
  list-style: none;
  align-items: center;
  gap: var(--space-32);
}

/* ── Logo ──────────────────────────────────────────────────────── */
.nav-logo {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
  /* On mobile: logo a sinistra, dimensione ridotta */
  order: -1;
}

.nav-logo img {
  display: block;
  width: var(--logo-width-mobile);
  height: auto;
  transition: width var(--duration-base) var(--ease-out);
}

/* ── Utilities (mobile: nascosta) ──────────────────────────────── */
.nav-utilities {
  display: none;
  align-items: center;
  gap: var(--space-20);
}

/* ── Mobile toggle ─────────────────────────────────────────────── */
.nav-mobile-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  padding: var(--space-4);
  /* Ordine: sempre all'estrema destra su mobile.
     margin-left: auto rimosso — ci pensa .nav-mobile-sel */
  order: 1;
}

.toggle-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.toggle-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 1px;
}

.toggle-label {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ── Mobile Selezione counter ──────────────────────────────────── */
/*
  Visibile solo su mobile (<1000px) — il counter desktop è in nav-utilities.
  Posizionato subito a sinistra di .nav-mobile-toggle: [LOGO] … [icon][n] [MENU]
  Stessa tipografia di .toggle-label (Satoshi 11px 500 tracking-widest uppercase).
  L'icona è sempre visibile; il testo [n] compare solo quando count > 0.
*/
.nav-mobile-sel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-4);
  flex-shrink: 0;
  /* Spinge sé stesso + il MENU accanto verso il bordo destro.
     margin-left: auto era su .nav-mobile-toggle — spostato qui
     perché il counter precede il toggle nell'ordine flex.
     Risultato: [LOGO] [···spazio···] [icon][n] [MENU] */
  margin-left: auto;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-mobile-sel:hover {
  color: var(--color-accent);
}

.nav-mobile-sel__count {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  line-height: 1;
}

/* Nasconde il testo quando count = 0 (textContent vuoto) */
.nav-mobile-sel__count:empty {
  display: none;
}

/* Animazione bump testo: scale + flash bordeaux (no background) */
@keyframes badge-bounce-text {
  0%   { transform: scale(1);    color: var(--color-ink);    }
  30%  { transform: scale(1.25); color: var(--color-accent); }
  65%  { transform: scale(1.12); color: var(--color-accent); }
  100% { transform: scale(1);    color: var(--color-ink);    }
}

.nav-mobile-sel__count.is-bouncing {
  animation: badge-bounce-text 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: none;
}

/* Desktop (≥1000px): il counter desktop in nav-utilities prende il posto */
@media (min-width: 1000px) {
  .nav-mobile-sel {
    display: none;
  }
}


/* ── Utility buttons ───────────────────────────────────────────── */
.util-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-4);
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.util-btn:hover {
  color: var(--color-accent);
}

.util-icon {
  display: block;
  flex-shrink: 0;
}

.util-label {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   SWITCHER LINGUA — IT | EN
   Stato attivo: testo scuro + barra sottile sotto.
   Hover: la barra scorre sotto la voce puntata; al mouse-out
   torna sotto quella attiva. Posizione/larghezza calcolate in
   nav.js (initLangSwitch) — funziona con qualsiasi larghezza.
   NOTA: per ora è solo visivo, non cambia la lingua del sito.
══════════════════════════════════════════════════════════════ */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: 5px;          /* spazio per la barra */
}

.lang-switch__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  transition: color var(--duration-fast) var(--ease-out);
}

.lang-switch__btn.is-active {
  color: var(--color-ink);
}

@media (hover: hover) {
  .lang-switch__btn:hover {
    color: var(--color-ink);
  }
}

.lang-switch__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Separatore verticale sottile */
.lang-switch__sep {
  display: block;
  width: 1px;
  height: 10px;
  background: var(--color-hairline);
}

/* Barra scorrevole */
.lang-switch__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-ink);
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    width     320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.util-count {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 500;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-radius: 50%;
  line-height: 1;
  transition: background-color var(--duration-fast) var(--ease-out);
}

/* Nasconde il count quando è 0 */
.util-count:empty,
.util-count[data-count="0"] {
  display: none;
}

/* ── Nav links ─────────────────────────────────────────────────── */
.nav-link {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
  /* Nessun text-transform — Instrument Serif e Satoshi usati mixed-case */
}

.nav-link:hover {
  color: var(--color-accent);
}

/* Stato pagina corrente — impostato da JS via aria-current="page" */
.nav-link[aria-current="page"] {
  color: var(--color-accent);
}

/* Trigger che aprono overlay: piccola indicazione visiva */
.nav-link--megamenu[aria-expanded="true"],
.nav-trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

/* ── DESKTOP (≥1000px) ─────────────────────────────────────────── */
@media (min-width: 1000px) {

  /*
    Architettura flex + logo absolute:
    · flex justify-content:space-between → braccio sinistro e gruppo destro
      ai due estremi del nav.
    · position:relative → anchor per .nav-logo absolute.
    · .nav-logo position:absolute left:50% translateX(-50%) → centro viewport
      indipendente dalla larghezza dei bracci.
    · max-width sui bracci protegge la zona logo — niente padding hardcoded.
  */
  .nav-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-block: var(--header-pad-v-expanded);
    padding-inline: var(--space-40);
  }

  .site-header.is-compact .nav-primary {
    padding-block: var(--header-pad-v-compact);
  }

  /* Compensazione desktop: 2 × (28 − 14) = 28px, lo stesso che la
     barra perde. Deve seguire i due token del padding, non un
     numero fisso: se cambiano, la pagina tornerebbe a saltare. */
  .site-header.is-compact {
    margin-bottom: calc(2 * (var(--header-pad-v-expanded) - var(--header-pad-v-compact)));
  }

  /* Nav liste */
  .nav-list {
    display: flex;
  }

  /* ── Braccio sinistro ──────────────────────────────────────────── */
  /*
    max-width = 50% viewport − raggio logo expanded (105px) − respiro (35px).
    Garantisce che nessuna voce entri nella zona logo anche in viewport strette.
  */
  .nav-list--left {
    justify-content: flex-start;
    gap: var(--space-32);
    max-width: calc(50% - 140px);
  }

  /* ── Braccio destro: gruppo nav-destra + utilities ─────────────── */
  /*
    nav-right-group raggruppa nav-list--right e nav-utilities come unità flex.
    Utilities tornano nel flusso normale — niente position:absolute.
    Stessa max-width protegge la zona logo dal lato destro.
  */
  .nav-right-group {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    max-width: calc(50% - 140px);
  }

  .nav-list--right {
    justify-content: flex-end;
    gap: var(--space-32);
  }

  .nav-utilities {
    display: flex;
    flex-shrink: 0;
  }

  /* ── Logo: centro ottico della viewport ────────────────────────── */
  /*
    position:absolute non altera il DOM/focus order — screen reader
    legge il logo nella sua posizione naturale nell'HTML.
    order:unset rimuove l'override mobile (order:-1).
  */
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: unset;
  }

  .nav-logo img {
    width: var(--logo-width-expanded);
  }

  .site-header.is-compact .nav-logo img {
    width: var(--logo-width-compact);
  }

  /*
    Compact: logo ridotto a 148px — raggio 74px.
    Zona riservata: 74px + 35px respiro = 109px.
  */
  .site-header.is-compact .nav-list--left,
  .site-header.is-compact .nav-right-group {
    max-width: calc(50% - 109px);
  }

  /* Mobile toggle: nascosto su desktop */
  .nav-mobile-toggle {
    display: none;
  }

}

/* ── Schermata grande (≥1280px): più spazio tra voci ─────────── */
@media (min-width: 1280px) {

  .nav-primary {
    padding-inline: var(--space-64);
  }

  .nav-list--left,
  .nav-list--right {
    gap: var(--space-40);
  }

}

/* ── Animazione badge Selezione ────────────────────────────────── */
/*
  Bounce spring + flash bordeaux sul .util-count al click "Aggiungi".
  Al 30%: background bianco, numero bordeaux ("lampeggia bordeaux").
  Al 100%: ritorno allo stato normale (bordeaux bg, testo chiaro).
  Re-avviabile: JS rimuove .is-bouncing, forza reflow con offsetWidth,
  poi la ri-aggiunge — l'animazione riparte da zero.
*/
@keyframes badge-bounce {
  0%   { transform: scale(1);    background-color: var(--color-accent); color: var(--color-bg); }
  30%  { transform: scale(1.18); background-color: var(--color-bg);     color: var(--color-accent); }
  65%  { transform: scale(1.10); background-color: var(--color-bg);     color: var(--color-accent); }
  100% { transform: scale(1);    background-color: var(--color-accent); color: var(--color-bg); }
}

.util-count.is-bouncing {
  animation: badge-bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: none;   /* sospende la transition esistente durante l'animazione */
}


/* ── SR-only utility ───────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}