/* ==========================================================================
   Menu a tutta pagina — telefono e tablet
   (hamburger nella barra + pannello che copre lo schermo)

   ⚠️ NON ESISTE NEL MOCKUP. Il mockup mobile non c'e: tutto quello che sta
   qui dentro e una scelta mia, presa dal linguaggio del sito e non inventata
   da zero — fondo #00122b come l'Hero e l'header, gli stessi quadrati
   concentrici ruotati a -45deg, la freccia delle CTA sulle voci, l'azzurro
   Primary per la pagina in cui ci si trova.

   ⚠️ QUESTO FILE E SEMPRE CARICATO, LE REGOLE VALGONO A OGNI LARGHEZZA.
   Quello che accende e spegne il pulsante e responsive/00b-menu-mobile.css:
   qui l'hamburger e `display: none` e il pannello e fuori scena, cioe lo
   stato desktop. E il contrario dell'abitudine (base = mobile), ma e la
   regola del progetto: le sezioni descrivono il desktop del mockup, e sul
   desktop questo componente non esiste.

   L'ANIMAZIONE LA FA GSAP (animations.js, initMenu). Qui c'e comunque una
   transizione di riserva: se GSAP non carica, o se l'utente ha chiesto meno
   movimento, il pannello si apre lo stesso in dissolvenza. `.menuf--gsap`
   viene messa da animations.js e spegne la transizione, cosi le due cose non
   si pestano i piedi.
   ========================================================================== */


/* ==========================================================================
   1. Il pulsante
   ========================================================================== */

.hamb {
  display: none;                    /* lo accende il responsive, sotto i 1024 */
  align-items: center;
  justify-content: center;
  width: 43px;                      /* stessa altezza del pulsante della barra */
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hamb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Le linee stanno in un box loro: le trasformazioni del JS agiscono su
   `.hamb__linea`, e un box separato tiene il centro di rotazione dove serve
   senza dipendere dal padding del pulsante. */
.hamb__linee {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 14px;
}

.hamb__linea {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
}

/* La linea di mezzo e piu corta: da chiusa l'hamburger non e tre trattini
   uguali, e un segno. Aprendosi si allunga e sparisce, e a farlo e GSAP.

   ⚠️ NIENTE `transition` SU QUESTE LINEE. GSAP scrive `width` e `transform`
   in linea a ogni fotogramma: una transizione CSS sulle stesse proprieta
   inseguirebbe i valori dell'animazione, e il risultato e un movimento
   molle e in ritardo. Se GSAP non c'e, l'icona resta un hamburger e a
   chiudere il pannello e la X che sta dentro il pannello stesso. */
.hamb__linea:nth-child(2) { width: 15px; align-self: flex-end; }


/* ==========================================================================
   2. Il pannello
   ========================================================================== */

.menuf {
  position: fixed;
  inset: 0;
  z-index: 200;                     /* sopra l'header (10) e tutto il resto */
  display: flex;
  flex-direction: column;
  background: var(--color-tertiary);   /* #00122b, come Hero e header */
  color: var(--color-white);
  overflow: hidden;                    /* i quadrati sbordano di proposito */

  /* Riserva senza GSAP. `visibility` insieme a `opacity` perche un pannello
     a opacita 0 ma ancora presente intercetta i tocchi su tutta la pagina. */
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.menuf.is-aperto {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

/* Quando c'e GSAP la visibilita non la decide piu il CSS.
   ⚠️ Perche: in chiusura `interfaccia.js` toglie subito `.is-aperto`, e con
   la regola qui sopra il pannello sparirebbe di colpo prima che la timeline
   abbia fatto un fotogramma. Sotto GSAP il pannello e sempre «visibile» e a
   nasconderlo e l'attributo `hidden` (display: none), che lo script rimette
   solo a chiusura finita. Questa regola sta DOPO `.menuf` di proposito: a
   parita di specificita vince l'ultima. */
.menuf--gsap {
  transition: none;
  opacity: 1;
  visibility: visible;
}

/* `hidden` e l'attributo del markup: il pannello non esiste finche lo script
   non lo apre. Serve la riga esplicita perche `display: flex` qui sopra
   vincerebbe sul `display: none` di default dell'attributo. */
.menuf[hidden] { display: none; }


/* ⚠️ IL FONDO E TINTA PIATTA. Nella prima versione (2 set 2026) c'erano i
   quadrati concentrici dell'Hero, `.menuf__patterns` / `.menuf__pattern`.
   Andrea li ha fatti togliere lo stesso giorno: il pannello deve essere solo
   blu. Sono spariti da qui, dal markup di header.php e dalla timeline in
   animations.js — non e rimasto niente da spegnere. */


/* --- La barra in cima ----------------------------------------------------
   Stesse misure dell'header (91px, padding 24 / gutter): aprendo il menu il
   logo non si sposta di un pixel, e questo fa sembrare che sia la stessa
   barra a espandersi invece che un pannello che compare sopra.
-------------------------------------------------------------------------- */
.menuf__barra {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 91px;
  padding: 24px var(--page-gutter);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.menuf__chiudi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menuf__chiudi:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* La croce: due linee sovrapposte, ruotate. Sono elementi veri e non uno
   pseudo-elemento perche GSAP le anima insieme a quelle dell'hamburger. */
.hamb__linee--x { height: 22px; justify-content: center; }
.hamb__linee--x .hamb__linea {
  position: absolute;
  top: 50%;
  width: 22px;
  transition: none;
}
.hamb__linee--x .hamb__linea:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.hamb__linee--x .hamb__linea:nth-child(2) { width: 22px; align-self: auto; transform: translateY(-50%) rotate(-45deg); }


/* --- Le voci -------------------------------------------------------------
   Una colonna di righe alte, separate da un filo. La riga e tutta cliccabile
   (48px minimi, che e la misura di un polpastrello) e la freccia delle CTA
   sta a destra: e lo stesso segno dei pulsanti del sito, qui vuol dire
   «questa riga porta da qualche parte».

   ⚠️ `flex: 1` e `min-height: 0`: le voci prendono lo spazio che avanza fra
   barra e coda, e scorrono da sole se non ci stanno (cinque voci su un
   iPhone SE in orizzontale). Un menu che taglia l'ultima voce e un menu
   rotto.
-------------------------------------------------------------------------- */
.menuf__nav {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--page-gutter) var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menuf__voce {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-tertiary-400);
  color: var(--color-white);
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.15;
  font-weight: 400;
  text-decoration: none;
  text-wrap: balance;
}

.menuf__voce:last-child { border-bottom: 0; }

.menuf__voce:hover,
.menuf__voce:focus-visible { color: var(--color-primary-50); }
.menuf__voce:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* La pagina in cui ci si trova: azzurro Primary, come lo stato attivo della
   riga di link del desktop. */
.menuf__voce.is-corrente { color: var(--color-primary); }

/* La freccia e quella delle CTA (`vidim_freccia_cta()`), stessa meccanica di
   components.css: ferma a riposo, si allunga al tocco. Qui e piu grande,
   perche la riga e piu grande. */
.menuf__voce .btn__freccia {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: .55;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.menuf__voce.is-corrente .btn__freccia { opacity: 1; }

.menuf__voce:hover .btn__freccia,
.menuf__voce:focus-visible .btn__freccia { opacity: 1; transform: translateX(4px); }

.menuf__voce:hover .btn__freccia-asta,
.menuf__voce:focus-visible .btn__freccia-asta {
  transform: scaleX(2.4);
  transform-origin: right center;
  transform-box: fill-box;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}


/* --- La coda: CTA e lingue ----------------------------------------------- */
.menuf__coda {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: var(--space-3) var(--page-gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.menuf__cta {
  width: 100%;
  justify-content: center;
}

.menuf__lingue {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.menuf__lingua {
  min-width: 48px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-tertiary-400);
  border-radius: var(--radius-md);
  color: var(--text-on-dark-muted);
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
}
.menuf__lingua.is-attiva {
  border-color: var(--color-white);
  color: var(--color-white);
}
.menuf__lingua:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }


/* --- Pagina bloccata mentre il menu e aperto -----------------------------
   Senza questa riga la pagina sotto continua a scorrere col dito e, chiuso
   il menu, ci si ritrova altrove. `position: fixed` sul body non serve: il
   pannello e `fixed` e Lenis viene fermato dal JS.
-------------------------------------------------------------------------- */
.menu-aperto,
.menu-aperto body { overflow: hidden; }


/* --- Meno movimento ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .menuf,
  .menuf__voce,
  .menuf__voce .btn__freccia,
  .hamb__linea { transition: none; }
}