/* ============================================================
   Impianto: contenitore, testata, piede
   ============================================================ */

.wrap{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------------- barra di servizio ---------------- */
.topbar{
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:var(--fs-3xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  padding-block:8px; flex-wrap:wrap; min-height:40px;
}
.topbar .wrap > span{ line-height:20px }
.topbar a:hover{ color:var(--accent-text) }

/* Selettore di lingua (passo 8). Il markup lo scrive sdc_switch_lingua() in
   inc/lingue.php: <b> la lingua corrente, <a> quelle raggiungibili, <span
   aria-disabled> quelle in cui questa pagina non esiste — che sono il 57% delle
   schede, quindi non è un caso di bordo.
   ⚠️ La lingua non disponibile NON si smorza col colore: la topbar è già
   --muted su --paper, e toglierle contrasto la porterebbe sotto il 4,5:1
   chiuso al passo 7. La distinzione la fa il segno tipografico — le parentesi,
   che si leggono anche senza colore e senza hover (su un telefono l'hover non
   arriva mai). */
.topbar .lingue{ display:inline-flex; gap:.6em; align-items:center; line-height:20px }
.topbar .lingue b{ color:var(--ink); font-weight:600 }
.topbar .lingue [aria-disabled]{ cursor:default }
.topbar .lingue [aria-disabled]::before{ content:"(" }
.topbar .lingue [aria-disabled]::after{ content:")" }

/* Loghetti social + lingua, a destra della barra (T10, s24). Le icone sono
   SVG inline a tratto (`sdc_social()`, inc/nav.php): 15px nella barra, 20
   nel piede sotto l'indirizzo; il colore è quello del testo intorno, e il
   nome della rete resta nel markup per i lettori di schermo (`.vh`). */
.topbar__destra{ display:inline-flex; align-items:center; gap:var(--sp-5); line-height:20px }
.social{ display:inline-flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0 }
.social li{ margin:0 }
.social a{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:inherit }
.social svg{ width:20px; height:20px } /* s30: «tasti social più grandi» (nota HOME), erano 15 */
.social a:hover{ color:var(--accent-text) }
.piede .social{ margin-top:var(--sp-3); gap:14px }
.piede .social svg{ width:20px; height:20px }
.piede .social a:hover{ color:#fff }

/* ---------------- testata ---------------- */
.masthead .wrap{
  display:flex; align-items:center; gap:var(--sp-5);
  padding-block:22px 20px; flex-wrap:wrap;
}
.masthead .logo{ flex:0 0 auto }
.logo-svg{ height:66px }
.masthead .strumenti{ display:flex; align-items:center; gap:var(--sp-4) }

/* cartiglio Rivista SdU — a destra, attaccato al menu (sessione 26).
   Non è più la campitura piena di un tempo ma un cartiglio editoriale:
   tre righe di testo e un filetto verticale. La gerarchia della testata
   la comanda il marchio (cresciuto da 54 a 66px): prima, col fondo
   terracotta, comandava il pulsante. Il `margin-left:auto` che spingeva
   il menu a destra adesso spinge questo — il menu gli si mette accanto. */
.cartiglio-rivista{
  display:block;
  margin-left:auto;
  text-align:right;
  font-family:var(--sans);
  line-height:1.4;
  border-right:1px solid var(--line-strong);
  padding-right:var(--sp-5);
}
.cartiglio-rivista .nome{
  display:block;
  font-family:var(--serif);
  font-size:var(--fs-lg);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--accent-text);   /* 4,5:1 sui fondi chiari (00-token.css) */
}
.cartiglio-rivista .nota{
  display:block;
  font-size:var(--fs-3xs);
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-top:3px;
  color:var(--muted);         /* come la topbar: 11,5px maiuscoletto */
}
.cartiglio-rivista:hover{ color:var(--muted) }  /* le righe di qualifica non cambiano */
.cartiglio-rivista:hover .nome{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------- navigazione ---------------- */
.nav-toggle{
  display:none;
  border:1px solid var(--line-strong); background:transparent;
  border-radius:var(--radius); padding:8px 12px; cursor:pointer;
  font-family:var(--sans); font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase;
}

nav.principale ul{ display:flex; align-items:center; gap:26px; list-style:none; flex-wrap:wrap }
nav.principale a{
  display:inline-block;
  font-family:var(--sans); font-size:var(--fs-sm);
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 0; border-bottom:2px solid transparent;
}
nav.principale a:hover,
nav.principale .current-menu-item > a,
nav.principale .current-menu-ancestor > a,
nav.principale .current-menu-parent > a{
  color:var(--accent-text); border-bottom-color:var(--accent-text);
}
/* secondo livello: elenco a discesa */
nav.principale li{ position:relative }
nav.principale .sub-menu{
  display:none; position:absolute; top:100%; left:0; z-index:40;
  min-width:230px; flex-direction:column; gap:0;
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:6px 0;
  box-shadow:0 8px 24px rgba(36,31,22,.12);
}
nav.principale li:hover > .sub-menu,
nav.principale li:focus-within > .sub-menu{ display:flex }
nav.principale .sub-menu a{
  border-bottom:0; padding:7px 16px; text-transform:none;
  font-size:var(--fs-xs); letter-spacing:.02em; white-space:nowrap;
}
nav.principale .sub-menu a:hover{ background:var(--paper-2) }
/* terzo livello (sessione 22): «Linee di ricerca» sotto Biblioteca. Si apre
   di lato, alla destra della voce madre, e resta aperto finché il puntatore
   sta sulla voce o il fuoco è dentro; la voce madre non porta da nessuna
   parte (href="#") e lo dice con la freccetta. */
nav.principale .sub-menu .sub-menu{ top:-7px; left:100%; margin-left:-1px }
nav.principale .sub-menu .menu-item-has-children > a::after{ content:" ›"; color:var(--muted) }

/* ---------------- ricerca ---------------- */
.ricerca{
  display:flex; align-items:center;
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:2px 4px 2px 14px;
  color:var(--muted); font-family:var(--sans); font-size:var(--fs-xs);
}
/*
 * Il contorno del fuoco sta sulla pillola, non sul campo.
 *
 * `.ricerca input:focus{outline:none}` qui sotto serve a non disegnare un
 * rettangolo dentro una pillola, ed è giusto; ma al passo 7, percorrendo
 * tutti i fermi col Tab, questo è risultato **l'unico del sito senza alcun
 * indicatore** — restava il solo cambio di colore di un filetto da 1px, che
 * fra due tinte scure non si vede. Il contorno lo prende l'involucro, con
 * lo stesso disegno di tutti gli altri fermi.
 */
.ricerca:focus-within{
  border-color:var(--accent-text);
  outline:2px solid var(--fuoco);
  outline-offset:2px;
}
.ricerca input{
  border:0; background:transparent; width:120px; padding:6px 0;
  color:var(--ink); font-size:var(--fs-xs);
}
.ricerca input::placeholder{ color:var(--muted) }
.ricerca input:focus{ outline:none }
.ricerca button{
  border:0; background:transparent; color:var(--accent-text);
  cursor:pointer; padding:5px 9px; border-radius:var(--radius-pill);
}

/*
 * La lente della testata (s26): al posto del campo, un pulsante tondo
 * un passo sopra le voci di menu (l'icona è 22px contro i 14px del
 * testo). Tutte le regole che nascondono il campo stanno dietro a
 * `html.js`, la classe che lo script inline in header.php mette prima
 * del CSS: senza JavaScript la lente non esiste e il campo resta al
 * suo posto, come da sempre.
 */
html.js .masthead .strumenti .ricerca{ display:none }
.cerca-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer;
}
html.js .cerca-toggle{ display:inline-flex }
.cerca-toggle:hover{ color:var(--accent-text); background:var(--paper-2) }
.cerca-toggle svg{ display:block }
/* lente o croce, etichetta o etichetta: comanda aria-expanded */
.cerca-toggle .icone-chiudi,
.cerca-toggle .etichetta-chiudi{ display:none }
.cerca-toggle[aria-expanded="true"] .icone-apri,
.cerca-toggle[aria-expanded="true"] .etichetta-apri{ display:none }
.cerca-toggle[aria-expanded="true"] .icone-chiudi{ display:block }
.cerca-toggle[aria-expanded="true"] .etichetta-chiudi{ display:inline }

/*
 * Il campo aperto copre menu e cartiglio: spariti dal flusso, il campo
 * campo prende il loro posto, così la riga della testata non cambia
 * altezza e il marchio non balla. La croce per chiudere è la lente
 * stessa, che ha girato l'icona; l'Esc fa lo stesso (nav.js).
 */
.masthead.cerca-aperta .cartiglio-rivista,
.masthead.cerca-aperta nav.principale{ display:none }
/* è il contenitore a crescere, non solo il campo: dentro ci sta anche la croce */
html.js .masthead.cerca-aperta .strumenti{ flex:1 1 auto }
html.js .masthead.cerca-aperta .strumenti .ricerca{
  display:flex; flex:1 1 auto;
  padding:5px 6px 5px 18px;
}
.masthead.cerca-aperta .ricerca input{
  width:auto; flex:1; font-size:var(--fs-sm);
}
.masthead.cerca-aperta .ricerca button{ padding:6px 10px }

/* filetto forte sotto la testata */
.rule-thick{ border-top:2px solid var(--ink); margin-inline:var(--gutter) }
@media (min-width:1210px){ .rule-thick{ max-width:var(--wrap-max); margin-inline:auto } }

/* ---------------- piede ---------------- */
.piede{
  background:var(--foot-bg);
  color:var(--foot-text);
  --logo-main:var(--foot-logo-main);
  --logo-sub:var(--foot-logo-sub);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:var(--lh-largo);
  margin-top:var(--sp-5);
}
.piede-colonne{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; /* s30: tre colonne, via «Resta aggiornato» */
  padding-block:var(--sp-7) var(--sp-6);
}
.piede .logo-svg{ height:64px; margin-bottom:var(--sp-4) }
.piede h2{
  font-size:var(--fs-3xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--foot-muted); margin-bottom:var(--sp-3); font-weight:600;
}
.piede a:hover{ color:#fff }
.piede li{ list-style:none; margin-bottom:6px }
.piede ul{ list-style:none }


/* dicitura MIC — obbligo di legge, in ogni pagina */
.mic{
  border-top:1px solid var(--foot-line);
  padding-block:var(--sp-5);
}
.mic .wrap{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap }
.mic img{ width:auto; height:56px; flex:0 0 auto; background:#fff; padding:6px; border-radius:2px }
.mic p{ font-size:12px; line-height:1.6; color:var(--foot-muted); max-width:78ch }

.piede-coda{
  border-top:1px solid var(--foot-line);
  padding-block:var(--sp-4);
  font-size:12px; color:var(--foot-muted);
}
.piede-coda .wrap{ display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap }

/* ---------------- adattamento ---------------- */
@media (max-width:940px){
  .piede-colonne{ grid-template-columns:1fr 1fr }
}
/*
 * La navigazione a pannello: schermo stretto **oppure** dispositivo senza mouse.
 *
 * ── Perché non basta la larghezza ─────────────────────────────────────────
 * Le tendine si aprono su `:hover` e `:focus-within`. Da tastiera funziona —
 * provato al passo 7, il Tab entra nelle tre voci sotto Biblioteca. Col tocco
 * no: un dito non passa sopra, e toccare la voce madre naviga invece di dare
 * il fuoco. Sotto i 760px non è un problema perché comanda l'hamburger, dove
 * le tendine sono già aperte e statiche. Il buco è **sopra** i 760: un iPad in
 * orizzontale è 1024px, prende la barra da scrivania, e lì le sette pagine
 * sotto Biblioteca e Associazione non si raggiungono in nessun modo.
 * Misurato: a 1024 e a 800 la tendina resta `display:none` anche dopo il
 * tocco; a 760 e a 390 è `flex` dentro il pannello.
 *
 * `(hover: none)` descrive esattamente il caso — nessun mezzo di puntamento
 * capace di passare sopra — e lascia stare i portatili col touchscreen, che
 * hanno anche il trackpad e dichiarano `hover: hover`.
 */
@media (max-width:760px), (hover: none){
  .masthead .wrap{ padding-block:var(--sp-4) }
  .nav-toggle{ display:inline-block; order:3 }
  /*
   * Qui la ricerca prende l'altra strada (s26): la lente non c'è e il
   * campo sta sempre in mostra, pieno, accanto all'hamburger. Aprire
   * un pannello dentro il pannello del menu sarebbe un passo di troppo
   * per scrivere due parole; e il campo pieno si usa meglio col pollice.
   */
  .masthead .strumenti{ order:2; flex:1 }
  html.js .cerca-toggle{ display:none }
  html.js .masthead .strumenti .ricerca{ display:flex; flex:1 1 auto }
  nav.principale{
    order:4; flex-basis:100%;
    display:none; border-top:1px solid var(--line); padding-top:var(--sp-4);
  }
  nav.principale.aperta{ display:block }
  nav.principale ul{ flex-direction:column; align-items:stretch; gap:0 }
  nav.principale a{ padding:10px 0; border-bottom:1px solid var(--line) }
  nav.principale .sub-menu{
    display:flex; position:static; border:0; box-shadow:none;
    background:transparent; padding:0 0 0 var(--sp-4);
  }
  /* il terzo livello rientra di un altro passo; niente freccetta di lato */
  nav.principale .sub-menu .sub-menu{ margin-left:0 }
  nav.principale .sub-menu .menu-item-has-children > a::after{ content:"" }
}

@media (max-width:760px){
  /* Il marchio torna ai 54px di prima: su una riga stretta i 66px del
     desktop rubano spazio al menu. Il cartiglio resta sotto il logo,
     a piena larghezza e allineato a sinistra: è la richiesta chiave
     del cliente, non può finire in coda. Il filetto verticale non ha
     più senso senza il menu accanto, e se ne va. */
  .logo-svg{ height:54px }
  .cartiglio-rivista{
    max-width:none; flex:1 1 100%; order:1;
    text-align:left; border-right:0; padding-right:0;
  }
  .ricerca input{ width:100% }
  .piede-colonne{ grid-template-columns:1fr; gap:var(--sp-5) }
}