/* =====================================================================
   40 — TESTATA E PIEDE
   La testata ha altezza fissa (--header-h / --header-h-desk): niente
   spostamento del contenuto al caricamento, quindi nessun CLS
   attribuibile alla testata.
   Le tendine compaiono da 1000px. Sotto, cinque link diretti agli hub.
   ===================================================================== */

/* --- Testata --------------------------------------------------------- */
.hd{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:var(--header-h);
  background:var(--paper);
  box-shadow:inset 0 -1px 0 var(--rule);
}
@media (min-width:1000px){
  .hd{ height:var(--header-h-desk); }
}
.hd__w{
  display:flex;
  align-items:center;
  gap:var(--s-5);
  height:100%;
}

/* Logo: altezza dichiarata, larghezza automatica. L'immagine ha width e
   height nell'HTML, quindi il posto se lo prende prima di caricarsi. */
.hd .custom-logo-link{ display:flex; align-items:center; flex:0 0 auto; }
.hd .custom-logo{ height:32px; width:auto; }
@media (min-width:1000px){
  .hd .custom-logo{ height:38px; }
}
.hd__name{
  font-size:var(--fs-lead);
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--ink);
}

/* --- Menu principale (da 1000px) ------------------------------------- */
.nav{ display:none; }

@media (min-width:1000px){
  .nav{
    display:flex;
    align-items:center;
    gap:var(--s-5);
    margin:0 auto 0 var(--s-6);
    padding:0;
    list-style:none;
  }
  .nav__i{
    position:relative;
    display:flex;
    align-items:center;
    margin:0;
    max-width:none;
  }

  /* Il link porta alla pagina hub. Il pulsante accanto apre la tendina.
     Sono due elementi perche' sono due azioni. */
  .nav__a{
    display:inline-flex;
    align-items:center;
    min-height:var(--touch);
    padding:0 var(--s-1);
    font-size:var(--fs-sm);
    font-weight:500;
    color:var(--ink-2);
    text-decoration:none;
    box-shadow:inset 0 -2px 0 transparent;
    transition:color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  }
  .nav__a:hover{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--cta); }

  /* Voce corrente: colore piu' scuro, peso maggiore E filetto. Tre segnali,
     cosi' resta distinguibile anche in scala di grigi. */
  .nav__i--on > .nav__a{
    color:var(--ink);
    font-weight:700;
    box-shadow:inset 0 -2px 0 var(--cta);
  }

  /* Pulsante della tendina: area toccabile piena, freccia disegnata col
     bordo (nessuna icona da caricare). */
  .nav__t{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--s-6);
    min-height:var(--touch);
    padding:0;
    background:none;
    border:0;
    cursor:pointer;
    color:var(--ink-3);
  }
  .nav__t:hover{ color:var(--ink); }
  .nav__ar{
    width:8px; height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform var(--dur) var(--ease);
  }
  .nav__i--open .nav__ar{ transform:translateY(2px) rotate(-135deg); }

  /* --- Tendina ------------------------------------------------------
     Allineata a sinistra sotto la voce padre, larghezza contenuta: non e'
     un mega-menu, e non deve diventarlo. */
  .sub{
    position:absolute;
    top:100%;
    left:0;
    z-index:var(--z-sub);
    display:none;
    min-width:280px;
    max-width:320px;
    margin:0;
    padding:var(--s-4);
    background:var(--paper);
    border:1px solid var(--rule);
    box-shadow:var(--shadow-pop);
    list-style:none;
  }
  .nav__i--open > .sub{ display:grid; }

  /* Ripiego senza JavaScript.
     Con JS la tendina e' governata dalla classe, cosi' Esc puo' chiuderla anche
     col puntatore fermo sopra. Senza JS quella classe non arriva mai, quindi
     apriamo su :hover e :focus-within — l'unico modo per rendere la tendina
     usabile anche col mouse e con la tastiera. Le due strade non convivono:
     `html:not(.js)` le tiene separate (nav.js aggiunge `js` all'elemento
     radice appena parte). */
  html:not(.js) .nav__i--has:hover > .sub,
  html:not(.js) .nav__i--has:focus-within > .sub{ display:grid; }

  /* Due colonne da 7 figlie in su. Le righe arrivano da --righe, calcolato
     in PHP dalla conta effettiva: il flusso per colonna riempie prima la
     colonna di sinistra.
     Le due colonne vanno dichiarate esplicitamente e non lasciate creare da
     `grid-auto-flow`: in una griglia dalle colonne implicite, `grid-column:1/-1`
     si riferisce alla sola linea esplicita esistente e non attraversa nulla —
     la prima voce resterebbe larga una colonna. */
  .sub--2col{
    /* 640px e' il massimo previsto, e serve: a 560px le colonne restano a
       247px e le frasi piu' lunghe vanno a tre righe. Cosi' le colonne stanno
       a ~288px, la misura indicata. Il carattere non si tocca. */
    min-width:640px;
    max-width:640px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;
    column-gap:var(--s-6);
  }

  .sub__i{ margin:0; max-width:none; }
  .sub__a{
    display:flex;
    align-items:center;
    min-height:var(--touch);       /* voce cliccabile per intero */
    padding:var(--s-2) var(--s-3);
    font-size:15px;                /* fra 15 e 16px, come da specifica */
    line-height:1.4;
    font-weight:500;
    color:var(--ink-2);
    text-decoration:none;
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
  }
  .sub__a:hover,.sub__a:focus-visible{ background:var(--tint); color:var(--deep); }
  .sub__i [aria-current="page"]{ color:var(--ink); font-weight:700; }

  /* Almeno 14px fra una voce e l'altra. */
  .sub__i + .sub__i{ margin-top:var(--s-4); }
  /* In due colonne il salto di colonna non deve ereditare il margine. */
  .sub--2col .sub__i{ margin-top:0; }
  .sub--2col .sub__i + .sub__i{ margin-top:var(--s-2); }

  /* La prima voce della tendina a due colonne e' separata dalle altre da un
     filetto: non e' un modulo del software, e' il metodo di lavoro, e viene
     prima. Il filetto attraversa entrambe le colonne perche' la voce occupa
     tutta la larghezza: se stesse solo nella colonna di sinistra, separerebbe
     la prima voce dalle tre sotto e non dalle altre sette. */
  .sub--2col .sub__i:first-child{
    grid-column:1 / -1;
    margin-bottom:var(--s-3);
    padding-bottom:var(--s-3);
    border-bottom:1px solid var(--rule);
  }
  /* Una riga per la voce a tutta larghezza, poi le righe calcolate in PHP per
     le restanti. Se ne avanza qualcuna resta a zero: non ci sono spazi fra le
     righe, la distanza fra le voci e' un margine. */
  .sub--2col{ grid-template-rows:auto repeat(var(--righe,4),auto); }
}

/* --- Bottone della testata ------------------------------------------ */
.hd .bt{ flex:0 0 auto; margin-left:auto; }
@media (min-width:1000px){
  .hd .bt{ margin-left:0; }
}
/* Sotto i 1000px l'invito all'azione sta nel pannello, non nella testata:
   accanto all'hamburger non ci sta senza comprimere il logo. */
@media (max-width:999px){
  .hd .bt{ display:none; }
}

/* --- Hamburger ------------------------------------------------------ */
.navtoggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--touch); height:var(--touch);
  margin-left:auto;
  padding:0;
  background:none;
  border:1px solid var(--rule);
  cursor:pointer;
  color:var(--ink);
}
@media (min-width:1000px){
  .navtoggle{ display:none; }
}
.navtoggle__l,
.navtoggle__l::before,
.navtoggle__l::after{
  display:block;
  width:20px; height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.navtoggle__l{ position:relative; }
.navtoggle__l::before,.navtoggle__l::after{ content:""; position:absolute; left:0; }
.navtoggle__l::before{ top:-6px; }
.navtoggle__l::after{ top:6px; }
.navtoggle[aria-expanded="true"] .navtoggle__l{ background:transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__l::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__l::after{ top:0; transform:rotate(-45deg); }

/* --- Pannello mobile ------------------------------------------------
   Nessuna tendina e nessun accordion: cinque link diretti agli hub. Le
   figlie si leggono nella pagina hub, dove hanno lo spazio per funzionare. */
#mobilenav{
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:var(--z-panel);
  padding:var(--s-5) var(--gutter) var(--s-8);
  background:var(--paper);
  overflow-y:auto;
  overscroll-behavior:contain;
}
#mobilenav[hidden]{ display:none; }
@media (min-width:1000px){
  #mobilenav{ display:none; }
}
.mnav{ margin:0 0 var(--s-6); padding:0; list-style:none; }
.mnav .nav__i{ display:block; margin:0; max-width:none; }
.mnav .nav__i + .nav__i{ border-top:1px solid var(--rule); }
.mnav .nav__a{
  display:flex;
  align-items:center;
  min-height:calc(var(--touch) + var(--s-2));
  font-size:var(--fs-lead);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}
.mnav .nav__i--on > .nav__a{
  color:var(--cta);
  box-shadow:inset 3px 0 0 var(--cta);
  padding-left:var(--s-3);
}
/* Nel pannello il pulsante della tendina non serve: non c'e' tendina. */
.mnav .nav__t{ display:none; }
.mnav .sub{ display:none; }

/* --- Piede ---------------------------------------------------------- */
.ft{
  padding-block:var(--s-8) var(--s-5);
  background:var(--ink);
  color:var(--rule);
}
/* `:not(.bt)`: senza l'esclusione questa regola vincerebbe per specificita'
   sul bottone (`.ft a` = classe + elemento, `.bt` = solo classe) e il testo
   del bottone passerebbe da --paper a --rule, scendendo a 3,59:1 sul fondo
   dell'azione. */
.ft a:not(.bt){ color:var(--rule); text-decoration:none; }
.ft a:not(.bt):hover,
.ft a:not(.bt):focus-visible{ color:var(--paper); text-decoration:underline; }

/* Il segnaposto nel piede non puo' usare la superficie tenue: --rule su
   --tint da' 1,28:1. Sul fondo scuro basta il filetto sotto. */
.ft .todo{
  background:transparent;
  box-shadow:inset 0 -1px 0 var(--rule-2);
  color:var(--rule);
}
.ft__t{
  margin-bottom:var(--s-4);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper);
}
.fnav{ margin:0; padding:0; list-style:none; }
.fnav li{ margin:0; max-width:none; }
.fnav li + li{ margin-top:var(--s-1); }
.fnav a{
  display:flex;
  align-items:center;
  min-height:var(--touch);
  font-size:var(--fs-sm);
}

/* Fascia legale: testo minuto ma mai sotto 14px.
   Il colore e' --rule-2 e non --ink-3: quest'ultimo sul fondo scuro da'
   2,85:1, sotto la soglia. Con --rule-2 il rapporto e' 9,96:1. */
.ft__legal{
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--ink-2);
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--rule-2);
}
.ft__legal p{ max-width:none; }
.ft__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-5);
  margin-top:var(--s-4);
  padding:0;
  list-style:none;
}
.ft__links li{ margin:0; max-width:none; }
.ft__links a{
  display:inline-flex;
  align-items:center;
  min-height:var(--touch);
  font-size:var(--fs-sm);
}
/* "Preferenze cookie" riapre il pannello di consenso: deve essere
   possibile cambiare idea, quindi e' un pulsante, non un link morto. */
.ft__links button{
  min-height:var(--touch);
  padding:0;
  background:none;
  border:0;
  color:var(--rule);
  font:inherit;
  font-size:var(--fs-sm);
  text-decoration:underline;
  cursor:pointer;
}
.ft__links button:hover{ color:var(--paper); }