/* =====================================================================
   10 — BASE
   Reset misurato, elementi HTML, tipografia.
   Regola di impaginazione applicata qui: lo spazio SOPRA un titolo e'
   sempre maggiore di quello sotto. Il titolo appartiene al testo che
   segue, non a quello che lo precede.
   ===================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;   /* iOS non deve reingrandire in orizzontale */
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);        /* mai sotto 16px */
  font-weight:400;
  line-height:var(--lh-body);      /* 1,62: dentro l'intervallo 1,5-1,7 */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* nessuno scorrimento orizzontale */
}

/* --- Titoli --------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--s-4);
  font-weight:700;
  line-height:var(--lh-head);
  letter-spacing:-.02em;
  text-wrap:balance;               /* evita la riga orfana di una parola */
}
h1{ font-size:var(--fs-h1); letter-spacing:-.03em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; }
h4,h5,h6{ font-size:var(--fs-body); font-weight:600; }

/* Lo spazio sopra e' maggiore di quello sotto: il titolo sta col suo testo.
   `:where()` mantiene la specificita' a zero, cosi' un componente non deve
   combattere per sovrascrivere. */
:where(* + h2){ margin-top:var(--s-8); }
:where(* + h3){ margin-top:var(--s-7); }
:where(* + h4){ margin-top:var(--s-6); }

/* --- Testo ---------------------------------------------------------- */
p,ul,ol,dl,blockquote,figure,table,pre{ margin:0 0 var(--s-4); }
p:last-child,ul:last-child,ol:last-child{ margin-bottom:0; }

p,li{ max-width:var(--measure); }

strong,b{ font-weight:600; }
small{ font-size:var(--fs-sm); }   /* 14px, il minimo ammesso */

/* --- Collegamenti --------------------------------------------------- */
a{
  color:var(--cta);
  text-decoration:underline;
  text-underline-offset:.15em;
  text-decoration-thickness:from-font;
}
a:hover{ color:var(--deep); }

/* Il focus si vede sempre, e non solo per colore. */
:focus-visible{
  outline:3px solid var(--cta);
  outline-offset:2px;
}

/* --- Elenchi -------------------------------------------------------- */
ul,ol{ padding-left:var(--s-5); }
li + li{ margin-top:var(--s-2); }

/* --- Controlli ------------------------------------------------------
   I controlli di modulo non ereditano il font dal documento: senza questa
   riga un <button> parte dal carattere di sistema a 13,33px, e qualunque
   testo dentro un pulsante finirebbe sotto la soglia dei 14px. */
button,input,select,textarea{ font:inherit; color:inherit; }

/* --- Immagini ------------------------------------------------------- */
img,svg,video{ display:block; max-width:100%; height:auto; }
figure{ margin-inline:0; }
figcaption{
  margin-top:var(--s-2);
  font-size:var(--fs-sm);
  color:var(--ink-3);
}

/* --- Dettagli nativi ------------------------------------------------
   Le domande frequenti usano <details>/<summary> e non JavaScript: il
   testo resta nell'HTML anche a pannello chiuso, quindi indicizzabile e
   leggibile dai motori generativi, che in gran parte non eseguono JS. */
details{
  border-top:1px solid var(--rule);
  padding:var(--s-4) 0;
}
details:last-of-type{ border-bottom:1px solid var(--rule); }
summary{
  cursor:pointer;
  font-weight:600;
  font-size:var(--fs-lead);
  line-height:1.35;
  min-height:var(--touch);         /* area toccabile piena */
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding-right:var(--s-5);
  position:relative;
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"";
  position:absolute;
  right:0;
  width:12px; height:12px;
  border-right:2px solid var(--cta);
  border-bottom:2px solid var(--cta);
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
details[open] > summary::after{ transform:rotate(-135deg); }
summary + *{ margin-top:var(--s-3); }

/* --- Citazioni ------------------------------------------------------ */
blockquote{
  margin-left:0;
  padding-left:var(--s-5);
  border-left:3px solid var(--brand);
  color:var(--ink-2);
}

/* --- Codice --------------------------------------------------------- */
code,kbd,samp,pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9375em;
}
pre{
  padding:var(--s-4);
  background:var(--paper-2);
  overflow-x:auto;
}

/* --- Separatore ----------------------------------------------------- */
hr{
  height:1px;
  margin:var(--s-7) 0;
  border:0;
  background:var(--rule);
}

/* --- Solo per screen reader ----------------------------------------- */
.screen-reader-text{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}

/* --- Salta al contenuto --------------------------------------------
   Primo elemento focalizzabile della pagina: chi naviga da tastiera non
   deve attraversare il menu a ogni pagina. */
.skip{
  position:absolute;
  left:var(--s-4);
  top:calc(-1 * var(--touch) - var(--s-4));
  z-index:calc(var(--z-panel) + 10);
  display:inline-flex;
  align-items:center;
  min-height:var(--touch);
  padding:0 var(--s-4);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip:focus{ top:var(--s-4); color:var(--paper); }