/* =============================================================
   reset.css — azzeramento e comportamenti di base
   Starter siti · 00_Sistema/02_Template/sito/starter/
   -------------------------------------------------------------
   Non è un reset "tabula rasa": è il minimo che serve per
   lavorare COL browser invece che contro. Un elemento vuole
   essere alto quanto il suo contenuto e largo quanto il padre:
   rispettare questa tendenza evita il 90% dei bug di layout.

   Questo file si carica per PRIMO e non si tocca da progetto a
   progetto. Se ti serve cambiare qualcosa qui, quasi sempre la
   modifica va in components.css.
   ============================================================= */

/* Box model prevedibile ovunque, pseudo-elementi inclusi. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Via i margini di default: lo spazio lo decide il layout, non il tag. */
* {
  margin: 0;
}

html {
  /* Evita il salto orizzontale del layout fra una pagina con la
     barra di scorrimento e una senza. */
  scrollbar-gutter: stable;

  /* Le ancore non teletrasportano: scorrono. Disattivato più sotto
     per chi chiede meno movimento. */
  scroll-behavior: smooth;

  /* Un'ancora non finisce incollata al bordo alto dello schermo.
     ⚠️ Era --sp-7 (48 px), e si sommava a --sez-l che sopra il titolo
     vale già ~119 px a 1280: 167 px di vuoto sopra l'ancora. Misurato
     in headless: il titolo di #contatti atterrava a y=165,94, ora a
     y=129,94. Il doppio pagamento non sparisce, si riduce. */
  scroll-padding-block-start: var(--stacco-ancora);

  /* Permette le transizioni verso height:auto — serve a <details>
     e agli accordion senza una riga di JavaScript. */
  interpolate-size: allow-keywords;

  -webkit-text-size-adjust: 100%;
}

body {
  min-block-size: 100svh; /* svh, non vh/dvh: su mobile dvh fa ridisegnare
                             la pagina mentre la UI del browser scorre */
  display: grid;
  grid-template-rows: auto 1fr auto; /* header · main · footer sempre in fondo */

  font-family: var(--font-testo);
  font-size: var(--testo-0);
  line-height: var(--interlinea-testo);
  color: var(--testo);
  background-color: var(--sfondo);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Media: mai più larghi del contenitore, e mai deformati. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* I campi form non ereditano il carattere da soli. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Parole lunghissime (URL, email) non sfondano il contenitore. */
p,
li,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titoli);
  line-height: var(--interlinea-titoli);
  text-wrap: balance;   /* i titoli non lasciano una parola sola sull'ultima riga */
  font-weight: var(--peso-titoli); /* era 700 a mano: con un peso di marca diverso h5/h6 restavano indietro */
}

p {
  text-wrap: pretty;    /* evita l'orfana in fondo al paragrafo */
}

ul, ol {
  padding-inline-start: var(--sp-5);
}

/* Il colore non può essere l'unico segnale di un link (SC 1.4.1):
   la sottolineatura resta, staccata quel tanto che basta a non
   tagliare le lettere discendenti. */
a {
  color: var(--accento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accento-scuro);
}

/* -------------------------------------------------------------
   FUOCO — visibile sempre, su ogni fondo
   -------------------------------------------------------------
   ⚠️ `outline: none` senza sostituto disegnato è la violazione di
   accessibilità più comune e più facile da evitare. Qui non c'è.

   :focus-visible e non :focus — così l'anello compare a chi naviga
   da tastiera e non lampeggia a ogni clic del mouse.
   Il colore arriva da --fuoco: dentro una banda scura quel token
   viene ridefinito (layout.css) e l'anello si inverte da solo.
   ------------------------------------------------------------- */
:focus-visible {
  outline: var(--fuoco-spessore) solid var(--fuoco);
  outline-offset: var(--fuoco-stacco);
  border-radius: var(--raggio-s);
}

/* -------------------------------------------------------------
   MOVIMENTO RIDOTTO — non è opzionale
   -------------------------------------------------------------
   SC 2.3.3: ogni animazione innescata da un'interazione deve poter
   essere disattivata. Rispettare prefers-reduced-motion è una delle
   tre alternative ammesse, ed è l'unica che costa sei righe.
   Problematici: parallax, zoom, elementi che ruotano.
   Generalmente accettabili: dissolvenze e transizioni di opacità.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}