/* ==========================================================================
   Menu a tutta pagina — responsive

   REGOLA INVIOLABILE: nessuna riga fuori da @media.

   Questo file fa una cosa sola ma decisiva: ACCENDE l'hamburger sotto i
   1024px, cioe esattamente alla larghezza in cui responsive/00-header.css
   nasconde la riga di link. Le due regole sono due facce dello stesso
   passaggio e vanno lette insieme: prima il menu spariva e basta, adesso
   passa il testimone al pannello.

   Da 1024 in su l'hamburger resta `display: none` (sezioni/00b) e il
   pannello non e raggiungibile: il menu del mockup c'e ed e quello.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1023 · Tablet e sotto — il pulsante entra in scena
   -------------------------------------------------------------------------- */
/* ⚠️ 9 set 2026 — IN ITALIANO L'HAMBURGER SI ACCENDE A 1172, NON A 1023.
   E' la meta che manca della regola in responsive/00-header.css: li il menu
   in linea si spegne, qui si accende il pulsante che lo sostituisce. Se le
   due larghezze non coincidessero, fra 1024 e 1172 il sito italiano
   resterebbe SENZA navigazione — che e peggio del difetto di partenza.
   Il pannello a tutta pagina e gia pronto e non cambia: cambia solo da quale
   larghezza in giu lo si puo aprire. */
@media (max-width: 1172px) {
  html[lang^="it"] .hamb { display: inline-flex; }
}

@media (max-width: 1023px) {
  .hamb { display: inline-flex; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   Il pannello guadagna aria: le voci sono la cosa piu grande dello schermo e
   il gutter da 40 le stringerebbe troppo.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .menuf__nav  { padding-inline: var(--page-gutter); }
  .menuf__coda { padding-inline: var(--page-gutter); }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   A 375 il gutter di sezione (che il core porta a 16) vale anche qui, quindi
   non serve ripeterlo: si stringe solo il passo verticale, perche cinque
   voci piu CTA e lingue su uno schermo da 667 sono al limite.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .menuf__voce { padding-block: 10px; }
  .menuf__coda { gap: var(--space-3); }
}


/* --------------------------------------------------------------------------
   Schermi bassi (telefono in orizzontale, <= 480px di altezza)
   Le voci non ci stanno piu centrate: si allineano in alto e scorrono, e la
   coda si stringe. Meglio un menu che scorre che un menu tagliato.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (max-width: 1023px) {
  .menuf__nav  { justify-content: flex-start; padding-block: var(--space-3); }
  .menuf__voce { font-size: 22px; padding-block: 8px; }
  .menuf__coda { padding-block: var(--space-2) var(--space-3); gap: var(--space-2); }
}