/*
Theme Name: Siti a Norma
Theme URI: https://www.sitianorma.it/
Author: Andrea Porcu
Author URI: https://www.sitianorma.it/
Description: Tema WordPress accessibile per il servizio di verifica e adeguamento normativo dei siti web. WCAG 2.1 AA come obiettivo di progetto, nessuna risorsa caricata da domini terzi, nessuno script di tracciamento, caratteri ospitati in locale. Modulo di contatto scritto a mano con riepilogo degli errori accessibile e template per la dichiarazione di accessibilità.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siti-a-norma
Tags: accessibility-ready, one-column, custom-menu, translation-ready, block-styles
*/

/* ==================================================================
   SITI A NORMA — sistema di design

   Regole che valgono per tutto il foglio:

   1. Nessun @import, nessun url() verso un dominio diverso dal proprio.
      I caratteri stanno in fonts/. Se qualcuno un giorno incolla qui
      un link a Google Fonts, il sito perde il suo primo argomento di
      vendita e la conformità privacy che dichiara.
   2. Ogni coppia di colori usata per il testo supera 4,5:1 sul suo
      sfondo; ogni bordo che porta informazione supera 3:1.
      I valori sono verificati, non stimati: vedi README.md.
   3. Il contorno del focus non si nasconde mai. Nemmeno "solo qui".
   4. Nessuna dimensione in px per il testo: si deve poter ingrandire.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Caratteri — ospitati in locale
   Se i file .woff2 non sono ancora stati messi in fonts/, il sito
   ripiega sui caratteri di sistema e resta perfettamente leggibile.
------------------------------------------------------------------ */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stardos Stencil";
  src: url("fonts/StardosStencil-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   2. Token
------------------------------------------------------------------ */

:root {
  /* Carta grigia, inchiostro rosso scuro: estetica da perizia tecnica. */
  --carta: #f1f2ef;
  --foglio: #ffffff;
  --inchiostro: #14171a;
  --grafite: #565e66;   /* 5,86:1 su --carta, 6,59:1 su --foglio */
  --linea: #d4d8d2;
  /* Un solo colore di marca per tutto il sito: il rosso scuro del marchio. */
  --timbro: #7a1c24;         /* rosso scuro: 10,40:1 su --foglio, 9,26:1 su --carta */
  --timbro-scuro: #5c1520;   /* stati hover: bianco sopra 13,26:1 */
  --timbro-chiaro: #fbf1c4;  /* tinta di fondo, giallo carta da lettera */
  --paglia: #fcf4d0;         /* fondo dei riquadri: --inchiostro sopra 15,6:1, --grafite 5,7:1 */
  --marchio: var(--timbro);  /* il marchio ha un token suo: per ridifferenziarlo basta questa riga */
  --critico: #a61b1b;   /* 7,52:1 su --foglio */
  --grave: #b45309;     /* 5,02:1 su --foglio */
  --conforme: #1e6b4f;  /* 6,42:1 su --foglio */
  --pie-testo: #d9dde0; /* 13,5:1 su --inchiostro */
  --pie-tenue: #9aa3ab; /*  7,21:1 su --inchiostro */
  --pie-linea: #333a40;

  --sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bollo: "Stardos Stencil", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --misura: 68ch;       /* 1.4.8: riga di lettura mai troppo lunga */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --ritmo: clamp(3rem, 7vw, 5.5rem);
  --tocco: 44px;        /* 2.5.5: area minima dei comandi */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 1.4.12 — spaziature del testo modificabili senza perdita di contenuto. */
p, li, dd, blockquote { letter-spacing: normal; word-spacing: normal; }

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; }

/* Il focus è il criterio 2.4.7 e insieme la firma visiva del sito:
   non si nasconde mai, nemmeno sugli elementi decorativi. */
:focus-visible {
  outline: 3px solid var(--timbro);
  outline-offset: 3px;
  border-radius: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
/* Nelle zone scure il contorno blu sparirebbe: qui vira al bianco. */
.pie :focus-visible,
.stato-conformita :focus-visible { outline-color: #fff; }

/* Testo riservato alle tecnologie assistive. Nota: viene anche emesso
   inline da inc/accessibilità.php, così funziona pure se un plugin
   ritarda il caricamento di questo foglio. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  white-space: normal;
}

/* ------------------------------------------------------------------
   3. Impianto
------------------------------------------------------------------ */

/* Il contenitore è largo, il testo no: --misura (68 caratteri, riga 95)
   governa p e li ovunque, indipendentemente da questa larghezza. Allargare
   il contenitore non allunga mai una riga di paragrafo. */
.contenitore { width: min(100% - var(--gutter) * 2, 1240px); margin-inline: auto; }
.stretto { width: min(100%, var(--misura)); margin-inline: auto; }

.salta-al-contenuto {
  position: absolute;
  left: 0; top: -100%;
  background: var(--timbro);
  color: #fff;
  padding: .85rem 1.25rem;
  z-index: 100;
  font-family: var(--mono);
  font-size: .9rem;
  text-decoration: none;
}
.salta-al-contenuto:focus { top: 0; }

/* 2.4.1 — il contenuto principale è un bersaglio di focus dichiarato,
   ma non deve mostrare un contorno quando ci si arriva col salto. */
#contenuto-principale:focus { outline: none; }

/* ------------------------------------------------------------------
   4. Tipografia
------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h1, h2 { color: var(--timbro); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p, li { max-width: var(--misura); }
p { margin: 0 0 1.15em; }

.occhiello {
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grafite);
  margin: 0 0 1rem;
}

.guida { font-size: 1.2rem; color: var(--grafite); max-width: 58ch; }

a {
  color: var(--timbro);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* 1.4.1 — i link dentro al testo non si distinguono solo per colore. */
.contenuto a:not(.bottone) { text-decoration: underline; }

/* ------------------------------------------------------------------
   5. Intestazione e navigazione
------------------------------------------------------------------ */

.testata { background: var(--foglio); border-bottom: 1px solid var(--linea); }
.testata__interno {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 0;
}

/* Il marchio è un timbro disegnato con testo vero e un bordo.
   Tutte le misure sono in em e dipendono dall'unica font-size di .marchio:
   cambiando quella, il timbro scala per intero senza scomporsi. Serve perché
   a 320px il timbro a grandezza piena non ci starebbe accanto al pulsante
   del menu. */
.marchio {
  display: inline-block;
  text-decoration: none;
  color: var(--marchio);
  font-size: clamp(.55rem, 2.4vw, .78rem);
  line-height: 1;
}
.marchio:hover { color: var(--timbro-scuro); }

.timbro {
  display: inline-block;
  border: 2px solid currentColor;
  padding: .8em 1.5em .75em;
  font-family: var(--bollo);
  text-align: center;
  line-height: 1;
  transform: rotate(-0.3deg);
  /* Sporca appena il bordo, come l'inchiostro su carta. Se il browser non
     applica il filtro il timbro resta nitido: si perde l'effetto, non il
     marchio. */
  filter: url(#timbro-irregolare);
}
.timbro__nome {
  display: block;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Il blocco che contiene la definizione del filtro non deve occupare spazio. */
.timbro-filtro { position: absolute; width: 0; height: 0; overflow: hidden; }

.menu-principale ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-principale li { max-width: none; }
.menu-principale a {
  display: inline-block;
  color: var(--inchiostro);
  text-decoration: none;
  font-size: .97rem;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.menu-principale a:hover { border-bottom-color: var(--timbro); }
.menu-principale [aria-current="page"],
.menu-principale .current-menu-item > a {
  border-bottom-color: var(--timbro);
  font-weight: 700;
}

.apri-menu {
  display: none;
  font-family: var(--mono);
  font-size: .85rem;
  background: var(--foglio);
  border: 1px solid var(--inchiostro);
  padding: .55rem .9rem;
  min-height: var(--tocco);
  cursor: pointer;
  color: var(--inchiostro);
}
.apri-menu:hover { background: var(--timbro-chiaro); }

/* ------------------------------------------------------------------
   6. Apertura: l'istruzione al posto dello slogan
------------------------------------------------------------------ */

.apertura {
  background: var(--foglio);
  border-bottom: 1px solid var(--linea);
  padding: var(--ritmo) 0;
}
.apertura h1 { margin-bottom: .5em; }
.apertura__lettera { display: none; }
@media (min-width: 62em) {
  .apertura .contenitore {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  .apertura__testo { min-width: 0; }
  .apertura__lettera { display: block; width: 100%; height: auto; }
}
.riferimenti {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  max-width: 62ch;
  border-left: 4px solid var(--timbro);
  background: var(--paglia) url("assets/sfumatura-paglia.svg") center / cover no-repeat;
  font-size: 1rem;
}
.riferimenti strong { display: block; margin-bottom: .35rem; color: var(--timbro); }
.riferimenti ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.riferimenti li {
  border: 1px solid var(--timbro);
  background: var(--foglio);
  padding: .15rem .6rem;
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 600;
}
.apertura__comandi { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 0; }

.prova {
  margin-top: 2.5rem;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--timbro);
  background: var(--paglia) url("assets/sfumatura-paglia.svg") center / cover no-repeat;
  padding: 1.15rem 1.35rem;
  max-width: 58ch;
}
.prova p { margin: 0; font-size: .97rem; color: var(--inchiostro); }
.prova kbd {
  font-family: var(--mono);
  font-size: .85rem;
  background: var(--foglio);
  border: 1px solid var(--grafite);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: .1rem .45rem;
  color: var(--inchiostro);
}
.prova__esito {
  display: none;
  margin-top: .7rem !important;
  color: var(--conforme);
  font-weight: 700;
}
.prova.is-provata .prova__esito { display: block; }

/* ------------------------------------------------------------------
   7. Sezioni
------------------------------------------------------------------ */

.sezione { padding: var(--ritmo) 0; }
.sezione--foglio { background: var(--foglio); border-block: 1px solid var(--linea); }
.sezione__testa { margin-bottom: 2.5rem; }

.griglia {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
@media (min-width: 45em) {
  .griglia--2 { grid-template-columns: repeat(2, 1fr); }
  .griglia--3 { grid-template-columns: repeat(3, 1fr); }
}

.scheda { background: var(--paglia) url("assets/sfumatura-paglia.svg") center / cover no-repeat; padding: 1.6rem 1.5rem; }
.scheda h3 { margin-bottom: .5rem; }
.scheda p { font-size: .97rem; color: var(--grafite); margin: 0; }
.scheda__cifra {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--timbro);
  margin-bottom: .8rem;
}

.elenco-verifica { list-style: none; margin: 0; padding: 0; }
.elenco-verifica li {
  position: relative;
  border-bottom: 1px solid var(--linea);
  padding: .9rem 0 .9rem 1.9rem;
  max-width: var(--misura);
}
.elenco-verifica li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: .7rem; height: .7rem;
  border: 2px solid var(--timbro);
}
.elenco-verifica strong { display: block; }
.elenco-verifica span { color: var(--grafite); font-size: .95rem; }

.nota-sezione { margin-top: 2rem; }

/* ------------------------------------------------------------------
   Scadenzario
   Una linea del tempo fatta di regole e quadrati, non di immagini:
   resta leggibile ingrandita, non pesa niente e non ha bisogno di
   testo alternativo. Su schermo stretto diventa una colonna, e i
   riquadri restano allineati a sinistra come una sequenza.
------------------------------------------------------------------ */

.scadenzario {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 1px;
  background: var(--linea);
  border-top: 2px solid var(--timbro);
}
@media (min-width: 45em) {
  .scadenzario { grid-template-columns: repeat(3, 1fr); }
}

.scadenzario li {
  position: relative;
  max-width: none;
  min-width: 0;
  background: var(--foglio);
  padding: 2.1rem 1.5rem 1.7rem;
}
/* Il quadrato appoggiato sulla linea: è il segno del timbro, ripetuto. */
.scadenzario li::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 1.5rem;
  width: 16px;
  height: 16px;
  background: var(--foglio);
  border: 3px solid var(--timbro);
}

.scadenzario__data {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--timbro);
  margin-bottom: .7rem;
}
.scadenzario strong { display: block; font-size: 1.1rem; margin-bottom: .4rem; }
.scadenzario span { color: var(--grafite); font-size: .97rem; }

/* Il contrappeso al scadenzario: dichiarare il limite di ciò che si vende
   è l'argomento più forte che questo sito abbia. Graficamente deve pesare,
   non essere una postilla. */
.nota-onesta {
  margin: 2.5rem 0 0;
  border-left: 4px solid var(--timbro);
  background: var(--paglia) url("assets/sfumatura-paglia.svg") center / cover no-repeat;
  padding: 1.2rem 1.4rem;
  max-width: 62ch;
  font-size: 1rem;
}
.nota-onesta:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Referto di esempio
   La gravità è scritta a parole: il quadrato colorato la accompagna,
   non la sostituisce. Se fosse solo colore, salterebbe il criterio
   1.4.1 proprio nel riquadro che mostra il prodotto.
------------------------------------------------------------------ */

.referto {
  border: 1.5px solid var(--inchiostro);
  background: var(--foglio);
  max-width: 62rem;
}

.referto__intestazione {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  max-width: none;
  padding: .9rem 1.4rem;
  background: var(--carta);
  border-bottom: 1.5px solid var(--inchiostro);
}
.referto__titolo {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.referto__meta { font-family: var(--mono); font-size: .8rem; color: var(--grafite); }

.referto__voci { list-style: none; margin: 0; padding: 0; }

.referto__voce {
  display: grid;
  gap: .5rem 1.4rem;
  max-width: none;
  padding: 1.4rem;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 45em) {
  .referto__voce { grid-template-columns: 8.5rem 1fr; }
}

.referto__grado {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.referto__grado::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  background: currentColor;
}
.referto__voce--critico .referto__grado { color: var(--critico); }
.referto__voce--grave .referto__grado { color: var(--grave); }
.referto__voce--medio .referto__grado { color: var(--grafite); }

.referto__corpo { min-width: 0; }
.referto__corpo h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.referto__corpo p { font-size: .97rem; color: var(--grafite); margin-bottom: .6rem; }

.referto__riferimenti {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 !important;
}
.referto__riferimenti span {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  border: 1px solid var(--linea);
  padding: .15rem .5rem;
  color: var(--grafite);
}

.referto__chiusura {
  margin: 0;
  max-width: none;
  padding: 1.1rem 1.4rem;
  background: var(--carta);
  font-size: .93rem;
  color: var(--grafite);
}

/* ------------------------------------------------------------------
   Prima / dopo
   "Prima" e "Dopo" sono scritti nell'etichetta: rosso e verde
   accompagnano, non informano da soli.
------------------------------------------------------------------ */

.confronto {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  max-width: 62rem;
}
@media (min-width: 45em) {
  .confronto { grid-template-columns: 1fr 1fr; }
}

/* min-width: 0 non è ornamentale: la misura minima automatica di un elemento
   di griglia è il suo contenuto minimo, quindi senza questa riga un blocco di
   codice lungo allarga la colonna oltre il contenitore invece di scorrere
   dentro il proprio riquadro. Si vede solo sotto i 45em. */
.confronto__lato { background: var(--foglio); padding: 1.5rem; min-width: 0; }
.confronto__lato--prima { border-top: 3px solid var(--critico); }
.confronto__lato--dopo { border-top: 3px solid var(--conforme); }
.confronto__lato h3 { font-size: 1.02rem; margin-bottom: .9rem; }
.confronto__lato > p { margin: 0; font-size: .95rem; color: var(--grafite); }
.confronto q { font-style: normal; }

.confronto__segno {
  display: inline-block;
  margin-right: .5rem;
  vertical-align: .1em;
  padding: .15rem .5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.confronto__lato--prima .confronto__segno { background: var(--critico); }
.confronto__lato--dopo .confronto__segno { background: var(--conforme); }

.confronto pre {
  margin: 0 0 .9rem;
  padding: .9rem 1rem;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.55;
  background: var(--carta);
  border: 1px solid var(--linea);
  overflow-x: auto;
}

/* ------------------------------------------------------------------
   8. Pulsanti
------------------------------------------------------------------ */

.bottone {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  background: var(--timbro);
  color: #fff;
  border: 2px solid var(--timbro);
  padding: .8rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  min-height: var(--tocco);
  line-height: 1.5;
}
.bottone:hover { background: var(--timbro-scuro); border-color: var(--timbro-scuro); color: #fff; }
.bottone--secondario { background: transparent; color: var(--timbro); }
.bottone--secondario:hover { background: var(--timbro-chiaro); color: var(--timbro); border-color: var(--timbro-scuro); }

/* ------------------------------------------------------------------
   9. Modulo
------------------------------------------------------------------ */

.modulo { max-width: 34rem; }
.campo { margin-bottom: 1.4rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .35rem; }
.campo .aiuto { display: block; font-size: .9rem; color: var(--grafite); margin-bottom: .45rem; }
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inchiostro);
  background: var(--foglio);
  border: 1.5px solid var(--grafite);
  border-radius: 0;
  padding: .7rem .8rem;
  min-height: var(--tocco);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--critico);
  border-width: 2.5px;
}
/* 3.3.1 — l'errore non è solo rosso: ha un'etichetta testuale. */
.campo .errore {
  display: block;
  color: var(--critico);
  font-weight: 700;
  font-size: .93rem;
  margin-top: .35rem;
}
.campo .errore::before { content: "Errore: "; }

.modulo__nota { font-size: .9rem; color: var(--grafite); max-width: 34rem; }

.riepilogo-errori {
  border: 2px solid var(--critico);
  background: var(--foglio);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.8rem;
  max-width: 34rem;
}
.riepilogo-errori h2 { font-size: 1.1rem; color: var(--critico); margin-bottom: .5rem; }
.riepilogo-errori ul { margin: 0; padding-left: 1.2rem; }
.riepilogo-errori li { margin-bottom: .3rem; }
.riepilogo-errori a { color: var(--critico); font-weight: 700; }

.esito-invio {
  border: 2px solid var(--conforme);
  background: var(--foglio);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.8rem;
  max-width: 34rem;
}
.esito-invio h2 { font-size: 1.1rem; color: var(--conforme); margin-bottom: .4rem; }
.esito-invio p:last-child { margin: 0; }

/* Campo esca per i robot. Fuori schermo, fuori dall'ordine di
   tabulazione e fuori dall'albero di accessibilità: chi usa uno
   screen reader non lo incontra mai e quindi non lo compila mai. */
.trappola {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   10. Contenuto editoriale
------------------------------------------------------------------ */

.articolo { padding: var(--ritmo) 0; background: var(--foglio); }
.articolo__meta {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--grafite);
  letter-spacing: .06em;
  margin-bottom: 1.5rem;
}

.contenuto > * { margin-inline: auto; }
.contenuto h2 { margin-top: 2.2em; }
.contenuto h3 { margin-top: 1.8em; }
.contenuto ul, .contenuto ol { padding-left: 1.3rem; }
.contenuto li { margin-bottom: .4rem; }
.contenuto blockquote {
  border-left: 4px solid var(--timbro);
  margin: 2rem auto;
  padding-left: 1.2rem;
  font-style: italic;
  color: var(--grafite);
}
.contenuto figure { margin: 2rem auto; }
.contenuto figcaption { font-size: .9rem; color: var(--grafite); margin-top: .5rem; }
.contenuto code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--carta);
  padding: .1em .35em;
}
.contenuto pre {
  font-family: var(--mono);
  background: var(--carta);
  border: 1px solid var(--linea);
  padding: 1rem;
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.contenuto table { margin: 2rem auto; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grafite);
  border-bottom: 2px solid var(--inchiostro);
}

/* Una tabella che deborda deve poter scorrere anche da tastiera:
   il contenitore diventa un elemento attivabile con Tab. Lo avvolge
   js/interfaccia.js, ma anche senza JavaScript la tabella resta
   leggibile perché la pagina scorre in orizzontale. */
.tabella-scorrevole { overflow-x: auto; margin: 2rem auto; }
.tabella-scorrevole table { margin: 0; }

.elenco-articoli { list-style: none; margin: 0; padding: 0; }
.elenco-articoli li { border-bottom: 1px solid var(--linea); padding: 1.6rem 0; max-width: none; }
.elenco-articoli h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.elenco-articoli h2 a { text-decoration: none; }
.elenco-articoli h2 a:hover { text-decoration: underline; }

.paginazione { margin-top: 2.5rem; font-family: var(--mono); font-size: .9rem; }
.paginazione .page-numbers {
  display: inline-block;
  padding: .5rem .75rem;
  min-width: var(--tocco);
  min-height: var(--tocco);
  text-align: center;
}
.paginazione .current { background: var(--timbro); color: #fff; }

/* ------------------------------------------------------------------
   11. Commenti
------------------------------------------------------------------ */

.commenti { padding: var(--ritmo) 0; background: var(--carta); border-top: 1px solid var(--linea); }
.elenco-commenti { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.elenco-commenti .children { list-style: none; padding-left: 1.5rem; border-left: 2px solid var(--linea); }
.commento { border-bottom: 1px solid var(--linea); padding: 1.4rem 0; max-width: none; }
.commento__meta { font-family: var(--mono); font-size: .82rem; color: var(--grafite); margin-bottom: .6rem; }
.commento__corpo > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   12. Stato di conformità e pie' di pagina
------------------------------------------------------------------ */

.stato-conformita {
  background: var(--timbro);
  color: #fff;
  padding: 1.4rem 0;
  font-family: var(--mono);
  font-size: .88rem;
}
.stato-conformita p { max-width: none; margin: 0; }
.stato-conformita a { color: #fff; }
.stato-conformita strong { letter-spacing: .06em; }

.pie {
  background: var(--inchiostro);
  color: var(--pie-testo);
  padding: var(--ritmo) 0 2.5rem;
  font-size: .94rem;
}
.pie a { color: #fff; }
.pie h2 {
  font-size: 1rem;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pie-tenue);
  font-weight: 400;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; max-width: none; }
.pie__colonne { display: grid; gap: 2.5rem; }
@media (min-width: 45em) { .pie__colonne { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__legale {
  border-top: 1px solid var(--pie-linea);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--pie-tenue);
  line-height: 1.9;
  max-width: none;
}

/* ------------------------------------------------------------------
   13. Adattamenti
------------------------------------------------------------------ */

/* 1.4.10 — a 320px di larghezza, o al 400% di ingrandimento, il menu
   passa in colonna e nulla scorre in orizzontale. Senza JavaScript
   il pulsante resta nascosto e il menu visibile. */
@media (max-width: 45em) {
  .js .apri-menu { display: block; }
  .js .menu-principale { flex-basis: 100%; display: none; }
  .js .menu-principale.is-aperto { display: block; }
  .menu-principale ul { flex-direction: column; gap: 0; }
  .menu-principale li { border-top: 1px solid var(--linea); }
  .menu-principale a { padding: .8rem 0; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --grafite: #33393f; --linea: #8b9198; --pie-tenue: #c3c9ce; }
}

/* Modalita' a contrasto forzato di Windows: i colori vengono sostituiti
   dal sistema, ma bordi e contorni devono restare visibili. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  .bottone { border: 2px solid ButtonText; }
  .elenco-verifica li::before { border-color: CanvasText; }
  /* Il filtro SVG in contrasto forzato può rendere il bordo illeggibile. */
  .timbro { filter: none; border-color: CanvasText; }
  .confronto__segno { border: 1px solid ButtonText; }
  .referto__grado::before { background: CanvasText; }
  .prova { border: 1px solid CanvasText; }
}

@media print {
  .testata, .pie, .prova, .apri-menu, .stato-conformita, .salta-al-contenuto, .modulo { display: none; }
  body { background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}