/*
 * header.css — header fisso, nav desktop, hamburger e pannello mobile, switcher lingua.
 * Spec: specs/00-globali.md. Stati: default (trasparente sopra la hero), .is-pinned (fondo pieno
 * `--header-pinned-bg` da nav.js oltre 10px di scroll, marchio a meta' altezza solo da 900px),
 * .is-open (pannello mobile aperto).
 * Mobile-first: fino a 899px si vedono solo logo e hamburger.
 */
.site-header {
  --header-pinned-bg: var(--color-violet);
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--color-ink-inverse);
  background: transparent;
  transition: background-color var(--dur-header) var(--ease-in-out), box-shadow var(--dur-header) var(--ease-in-out);
}
.has-solid-header .site-header { position: sticky; background: var(--color-purple-deep); }
.site-header__inner { position: relative; z-index: 60; /* sopra il pannello mobile (z 40): logo e X restano visibili a menu aperto */ display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--header-height); padding-block: var(--space-xs); transition: min-height var(--dur-header) var(--ease-in-out); }
.site-header.is-open { background: var(--color-purple-deep); }

/* Marchio: 204x99 nello stato iniziale a 1440 → qui scala col contenitore; a metà quando ancorato,
   da 900px in su */
.site-header__brand { display: block; flex: none; line-height: 0; }
.site-header__logo { height: clamp(48px, 5.5vw, 99px); width: auto; transition: height var(--dur-header) var(--ease-in-out); }
.site-header__logo--small { display: none; }
.site-header__wordmark { font-family: var(--font-display); font-size: var(--font-size-h3); text-transform: uppercase; }

/* Ancorato: header-pin-shrink. Una soglia (10px, nav.js), nessuna interpolazione sullo scroll.
   Fondo e altezza della barra cambiano a ogni misura; il marchio invece si rimpicciolisce solo da
   900px in su (blocco qui sotto): su mobile parte gia' alla misura minima (48px) e ridurlo lo
   rendeva illeggibile, quindi allo scroll resta identico. */
.site-header.is-pinned { background: var(--header-pinned-bg); box-shadow: 0 2px 24px rgba(26, 11, 46, 0.25); }
.site-header.is-pinned .site-header__inner { min-height: var(--header-height-pinned); }
/* Da 900px il marchio dimezza l'ALTEZZA e resta completo (marchio + scritta): si riduce anche il
   box, non solo il disegno come faceva transform: scale(). Se il backend fornisce un logo compatto
   diverso (campo header_logo_small) quello sostituisce il pieno, alla stessa altezza dimezzata. */
@media (min-width: 900px) {
  .site-header.is-pinned .site-header__logo { height: clamp(24px, 2.75vw, 50px); }
  .site-header.is-pinned.has-small-logo .site-header__logo--full { display: none; }
  .site-header.is-pinned.has-small-logo .site-header__logo--small { display: block; }
}

/* Nav desktop */
.site-header__nav, .site-header__actions { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--header-nav-gap); }
.nav__link { position: relative; display: inline-block; padding: var(--space-xs) 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1; text-transform: uppercase; text-decoration: none; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-state) var(--ease-out); }
.nav__link:hover::after, .nav__item.is-current .nav__link::after { transform: scaleX(1); }
.site-header__actions { align-items: center; gap: var(--space-2xs); }

/* Hamburger: 44x44, tre barre → X */
.site-header__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: var(--radius); background: var(--color-chip); }
.site-header__toggle-bar { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--dur-header) var(--ease-in-out), opacity var(--dur-header) var(--ease-in-out); }
.site-header.is-open .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pannello mobile: a tutta altezza, sequenza verticale semplice */
.nav-mobile { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: var(--space-lg); padding: calc(var(--header-height) + var(--space-lg)) var(--container-padding) var(--space-2xl); background: var(--color-purple-deep); color: var(--color-ink-inverse); overflow-y: auto; }
.nav-mobile__list { display: flex; flex-direction: column; gap: var(--space-sm); }
.nav-mobile__link { display: block; padding: var(--space-xs) 0; font-family: var(--font-display); font-size: var(--font-size-h2); line-height: 1.1; text-transform: uppercase; text-decoration: none; }
.nav-mobile__item.is-current .nav-mobile__link { color: var(--color-cyan); }
.nav-mobile__cta { align-self: flex-start; }
.nav-mobile__langs { display: flex; gap: var(--space-sm); margin-top: auto; }
.nav-mobile__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius); background: var(--color-chip); font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none; }
.nav-mobile__lang.is-current { background: var(--color-cyan); color: var(--color-plum); }
.site-header.is-open { background: var(--color-purple-deep); }
body.nav-open { overflow: hidden; } /* solo mentre il pannello e' aperto: non e' un overflow permanente sul body */

/* Switcher lingua (details nativo) */
.lang { position: relative; }
.lang__toggle { list-style: none; cursor: pointer; }
.lang__toggle::-webkit-details-marker { display: none; }
.lang__list { position: absolute; right: 0; top: calc(100% + var(--space-2xs)); min-width: 160px; padding: var(--space-2xs); border-radius: var(--radius); background: var(--color-purple-deep); box-shadow: 0 8px 32px rgba(26, 11, 46, 0.35); }
.lang__link { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; font-size: 15px; }
.lang__link:hover { background: var(--color-chip); }

@media (min-width: 900px) {
  .site-header__nav, .site-header__actions { display: flex; }
  .site-header__toggle, .nav-mobile { display: none; }
  /* Figma 236:391 + 236:393-401: marchio a sinistra, voci e azioni in un unico gruppo a destra
     con passo 36px. `margin-left: auto` sulla nav spinge tutto a destra: le azioni le restano
     accanto (il gap del contenitore vale anche fra nav e azioni). */
  .site-header__inner { padding-block: 20px; gap: var(--header-nav-gap); }
  .site-header__nav { margin-left: auto; }
}

/* Spazio in cima quando l'header non e' sovrapposto a una hero (frontend-traps: header trasparente) */
.has-solid-header .site-main { padding-top: 0; }