/* ==========================================================================
   RadicItaliane — Radici da custodire (decisione 54, 27/10/2026)

   Foglio di stile della sezione /radicitaliane, caricato DOPO sito.css dalle
   pagine che scrive `backend/sito_radici.py` (`sito.ossatura`, `fogli`).
   Identità propria dentro il sito (§9 del brief: «colori della terra, dei
   cereali, del legno, delle foglie e della carta antica»): gli stessi
   componenti di sito.css (pulsanti, riquadri, briciole) con i colori della
   sezione. Tutto sta sotto `.radici`, tranne lo sfondo della pagina.

   I token della sezione stanno nei quattro blocchi del tema (chiaro, scuro
   scelto, scuro del dispositivo, contrasto alto), come sito.css: i due
   blocchi scuri hanno gli stessi valori. Contrasto del testo almeno 4,5:1
   sul proprio fondo (WCAG 2.2 AA). Nessun carattere scaricato: le grazie
   sono quelle del sistema. Telefono prima di tutto, nessuno scorrimento
   orizzontale della pagina, comandi alti almeno 44 px, campi a 17 px.
   ========================================================================== */

:root {
  --radici-carta: #f7f1e6;
  --radici-carta-2: #efe5d3;
  --radici-carta-3: #e4d6bd;
  --radici-inchiostro: #2a1f16;
  --radici-terra: #6b3f1d;
  --radici-terra-bordo: #b58a63;
  --radici-grano: #7a5310;
  --radici-grano-tenue: #f1dfb4;
  --radici-oliva: #44511d;
  --radici-oliva-tenue: #e3e8cc;
  --radici-rischio: #8a2f1b;
  --radici-rischio-tenue: #f6ddd3;
  --radici-voce: #5b3a5e;
  --radici-voce-tenue: #ece0eb;
  --radici-grazie: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"] {
  --radici-carta: #1b1712;
  --radici-carta-2: #241e17;
  --radici-carta-3: #2f271e;
  --radici-inchiostro: #f1e8da;
  --radici-terra: #e3b88f;
  --radici-terra-bordo: #6e5440;
  --radici-grano: #e2bd6a;
  --radici-grano-tenue: rgb(226 189 106 / .14);
  --radici-oliva: #c3d394;
  --radici-oliva-tenue: rgb(195 211 148 / .13);
  --radici-rischio: #ffb29c;
  --radici-rischio-tenue: rgb(255 178 156 / .13);
  --radici-voce: #e2bfe4;
  --radici-voce-tenue: rgb(226 191 228 / .12);
}

/* nessuna scelta esplicita: segue il dispositivo (stessi valori di sopra) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --radici-carta: #1b1712;
    --radici-carta-2: #241e17;
    --radici-carta-3: #2f271e;
    --radici-inchiostro: #f1e8da;
    --radici-terra: #e3b88f;
    --radici-terra-bordo: #6e5440;
    --radici-grano: #e2bd6a;
    --radici-grano-tenue: rgb(226 189 106 / .14);
    --radici-oliva: #c3d394;
    --radici-oliva-tenue: rgb(195 211 148 / .13);
    --radici-rischio: #ffb29c;
    --radici-rischio-tenue: rgb(255 178 156 / .13);
    --radici-voce: #e2bfe4;
    --radici-voce-tenue: rgb(226 191 228 / .12);
  }
}

@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --radici-terra: #4a2a10; --radici-terra-bordo: #6b4a2c; --radici-grano: #5e3f07;
  }
}

/* -------------------------------------------------------------- pagina */
/* lo sfondo di carta su tutta la pagina della sezione; dove :has() non c'è
   resta quello del sito, e la sezione si legge lo stesso */
body:has(.radici) { background: var(--radici-carta); }
body:has(.radici) .briciole a, body:has(.radici) .briciole li { color: var(--text-muted); }

.radici { color: var(--radici-inchiostro); }
/* il restyling del sito (decisione 56) ha alzato la scala dei titoli di
   sito.css: la sezione tiene i corpi, le interlinee e la spaziatura di prima */
.radici { --t-h2: clamp(22px, 2.8vw, 27px); --t-h3: 19px; --t-apertura: 19px; }
.radici :is(h1, h2, h3) { line-height: 1.25; letter-spacing: 0; text-wrap: wrap; }
.radici .apertura { line-height: 1.6; }
.radici [hidden] { display: none !important; }
.radici h1, .radici h2, .radici h3, .radici h4 {
  font-family: var(--radici-grazie); color: var(--radici-inchiostro); font-weight: 700;
}
.radici h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: 0; }
.radici h4 { font-size: 18px; margin: 18px 0 6px; line-height: 1.3; }
.radici a { color: var(--radici-terra); }
.radici a:hover { color: var(--radici-inchiostro); }
.radici .occhiello {
  margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--radici-grano);
}
.radici .occhiello a { color: inherit; }
.radici .meta { font-size: 15px; color: var(--text-muted); }
.radici .nota { font-size: 16px; color: var(--text-muted); max-width: var(--testo-max); }
.radici .vuoto { font-style: italic; color: var(--text-muted); }
.radici .apertura { max-width: var(--testo-max); }
.radici .riquadro { border-color: var(--radici-terra-bordo); background: var(--radici-carta-2); }
.radici .riquadro.attenzione { border-color: var(--warn-border); background: var(--warn-bg); }

/* i pulsanti di sito.css, nei colori della terra */
.radici .pulsante { border-color: var(--radici-terra-bordo); background: var(--radici-carta); color: var(--radici-inchiostro); }
.radici .pulsante:hover { background: var(--radici-carta-2); color: var(--radici-inchiostro); }
.radici .pulsante-primario { background: var(--radici-terra); border-color: var(--radici-terra); color: var(--radici-carta); }
.radici .pulsante-primario:hover { background: var(--radici-inchiostro); border-color: var(--radici-inchiostro); color: var(--radici-carta); }
.radici .azioni { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------- navigazione della sezione */
.radici-nav {
  margin: 4px 0 24px; padding: 12px 0; border-top: 2px solid var(--radici-terra);
  border-bottom: 1px solid var(--radici-terra-bordo);
}
.radici-marchio { margin: 0 0 8px; font-family: var(--radici-grazie); font-size: 22px; }
.radici-marchio a { color: var(--radici-inchiostro); font-weight: 700; text-decoration: none; }
.radici-marchio span { display: block; font-size: 16px; font-style: italic; color: var(--radici-terra); }
.radici-nav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.radici-nav li { margin: 0; }
.radici-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px;
  border-radius: var(--r-pill); font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--radici-inchiostro);
}
.radici-nav a:hover { background: var(--radici-carta-2); }
.radici-nav a[aria-current="page"] { background: var(--radici-terra); color: var(--radici-carta); }

/* --------------------------------------------------------------- home */
.radici-eroe { padding: 8px 0 12px; }
.radici-eroe > p:not(.occhiello):not(.azioni) {
  max-width: var(--testo-max); font-family: var(--radici-grazie); font-size: 20px; line-height: 1.55;
}
.radici-sezioni ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.radici-sezioni li {
  margin: 0; padding: 14px 16px; border: 1px solid var(--radici-terra-bordo);
  border-radius: var(--r-lg); background: var(--radici-carta-2);
}
.radici-sezioni li > a { font-family: var(--radici-grazie); font-size: 20px; font-weight: 700; }
.radici-sezioni li p { margin: 6px 0 0; font-size: 16px; }
.lettera {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px;
  border-radius: 50%; background: var(--radici-terra); color: var(--radici-carta);
  font-family: var(--font); font-size: 15px; vertical-align: 2px;
}
.radici-missione {
  margin: 36px 0 0; padding: 16px 0 0; border-top: 1px solid var(--radici-terra-bordo);
  font-family: var(--radici-grazie); font-style: italic; max-width: var(--testo-max);
}

/* ------------------------------------------------------ schede negli elenchi */
.griglia-schede { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.radici-scheda {
  min-width: 0; padding: 16px; border: 1px solid var(--radici-terra-bordo);
  border-radius: var(--r-lg); background: var(--radici-carta-2);
  overflow-wrap: anywhere;
}
.radici-scheda h3, .radici-scheda h4 { margin: 4px 0 8px; font-size: 21px; }
.radici-scheda h3 a, .radici-scheda h4 a { text-decoration: none; color: var(--radici-inchiostro); }
.radici-scheda h3 a:hover, .radici-scheda h4 a:hover { text-decoration: underline; }
.radici-scheda > :last-child { margin-bottom: 0; }
.radici-scheda.voce { border-left: 4px solid var(--radici-voce); }
.radici-scheda.varieta { border-left: 4px solid var(--radici-oliva); }
.nomi-locali { font-size: 16px; font-style: italic; }

/* ------------------------------------------------------------- etichette */
/* §7 e §11 del brief: lo stato documentale si scrive, non si indovina */
.etichetta {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 10px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1.6;
  letter-spacing: 0; text-transform: none; vertical-align: 1px;
}
.etichetta-verificata { color: var(--radici-oliva); background: var(--radici-oliva-tenue); }
.etichetta-segnalata { color: var(--radici-grano); background: var(--radici-grano-tenue); }
.etichetta-accertare { color: var(--warn); background: var(--warn-bg); }
.etichetta-rischio { color: var(--radici-rischio); background: var(--radici-rischio-tenue); }
.etichetta-neutra { color: var(--text-muted); background: var(--radici-carta); }
.etichetta-testimonianza { color: var(--radici-voce); background: var(--radici-voce-tenue); }
.etichetta-fonte { color: var(--radici-terra); background: var(--radici-carta); font-weight: 600; }
.etichette { margin: 8px 0 0; }

/* -------------------------------------------------- articoli, schede, voci */
.radici-articolo { max-width: 760px; }
.radici-articolo > header { margin-bottom: 18px; }
.radici-articolo .testo { font-family: var(--radici-grazie); font-size: 19px; line-height: 1.65; }
.radici-articolo .testo h2 { margin-top: 36px; }
.radici-articolo .testo h3 { margin-top: 26px; }
.radici-articolo .testo q, .radici-articolo .testo blockquote { font-style: italic; }
.radici-voce .testo { overflow-wrap: anywhere; }
.nome-scientifico { margin: -4px 0 8px; font-size: 18px; }
.regioni, .provenienza, .correzione { font-size: 16px; }
.radici-foto { margin: 18px 0 24px; }
.radici-foto img { display: block; width: 100%; border-radius: var(--r-md); background: var(--radici-carta-3); }
.radici-foto figcaption { margin-top: 6px; font-size: 15px; color: var(--text-muted); }
.radici-foto .credito { display: block; }
.dati-varieta .dato { padding: 12px 0; border-top: 1px solid var(--radici-terra-bordo); }
.dati-varieta .dato h3 { margin: 0 0 6px; font-size: 18px; }
.dati-varieta .dato > :last-child { margin-bottom: 0; }
.radici-fonti { margin-top: 32px; }
.radici-fonti ul { padding-left: 0; list-style: none; }
.radici-fonti li { padding: 8px 0; border-bottom: 1px dotted var(--radici-terra-bordo); overflow-wrap: anywhere; }
.radici-fonti .sostiene { display: block; font-size: 15px; color: var(--text-muted); }
.nota-ai { font-size: 15px; font-style: italic; color: var(--text-muted); }
.approfondire ul { padding-left: 1.2em; }

/* l'invito alla campagna (§5) */
.radici-invito, .radici-campagna {
  margin: 40px 0 0; padding: 20px 20px 10px; border: 1px solid var(--radici-terra-bordo);
  border-radius: var(--r-lg); background: var(--radici-grano-tenue);
}
.radici-invito h2, .radici-campagna h2 { margin-top: 0; }
.radici-invito .messaggio, .radici-campagna .messaggio {
  font-family: var(--radici-grazie); font-size: 21px; font-weight: 700;
}
.inviti { display: grid; gap: 10px; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.inviti li { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--radici-carta); }
.inviti li p { margin: 4px 0 0; font-size: 16px; }
.inviti a { display: inline-block; padding: 4px 0; }
.chiusa { font-weight: 700; }

/* ----------------------------------------------------- cartogramma (fase 1) */
.cartogramma { display: grid; gap: 16px; align-items: start; margin: 12px 0 18px; }
.cartogramma svg { display: block; width: 100%; max-width: 322px; height: auto; }
.cartogramma .tessera { fill: var(--radici-carta-2); stroke: var(--radici-terra-bordo); stroke-width: 1.5; }
.cartogramma .tessera.piena { fill: var(--radici-grano-tenue); stroke: var(--radici-grano); }
.cartogramma a:hover .tessera, .cartogramma a:focus .tessera { stroke: var(--radici-terra); stroke-width: 3; }
.cartogramma text { fill: var(--radici-inchiostro); text-anchor: middle; font-family: var(--font); }
.cartogramma .sigla { font-size: 12px; font-weight: 600; }
.cartogramma .conto { font-size: 13px; font-weight: 700; }
.elenco-regioni, .indice-territori ul { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 20px; font-size: 16px; }
.elenco-regioni li, .indice-territori li { break-inside: avoid; margin: 0; padding: 4px 0; }
.elenco-regioni a, .indice-territori a { display: inline-block; min-height: 32px; padding-top: 4px; }
.elenco-regioni span, .indice-territori span { color: var(--text-muted); font-size: 15px; }
@media (min-width: 760px) {
  .cartogramma { grid-template-columns: 322px minmax(0, 1fr); }
}
.atlante .regione { scroll-margin-top: 16px; }

/* ricette per territorio (decisione 57): indice dei 21 territori, poi un
   gruppo per territorio con le ricette della redazione e quelle di famiglia */
.indice-territori { margin: 12px 0 8px; }
.ricette .regione { scroll-margin-top: 16px; margin-top: 28px; }
.ricette .regione > h4 { margin: 18px 0 10px; }
.radici-scheda.ricetta { border-left: 4px solid var(--radici-grano); }
.filtri-atlante { display: grid; gap: 10px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.filtri-atlante label { display: grid; gap: 4px; font-weight: 700; font-size: 16px; }
.filtri-atlante .conteggio { grid-column: 1 / -1; margin: 0; color: var(--text-muted); }

/* ------------------------------------------------------- moduli pubblici */
.modulo-radici { max-width: 760px; }
.modulo-radici fieldset {
  min-width: 0; margin: 0 0 18px; padding: 14px 16px 6px;
  border: 1px solid var(--radici-terra-bordo); border-radius: var(--r-lg); background: var(--radici-carta);
}
.modulo-radici legend { padding: 0 6px; font-weight: 700; font-size: 18px; }
.modulo-radici .campo { margin: 0 0 14px; min-width: 0; }
.modulo-radici .campo > label { display: block; margin-bottom: 4px; font-weight: 700; }
.modulo-radici input[type="text"], .modulo-radici input[type="email"],
.modulo-radici select, .modulo-radici textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: 17px;
}
.modulo-radici textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.modulo-radici input[type="file"] { max-width: 100%; min-height: 44px; font: inherit; font-size: 16px; }
.modulo-radici :is(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.modulo-radici [aria-invalid="true"] { border-color: var(--ko); }
.modulo-radici .obbligatorio { font-weight: 400; font-size: 15px; color: var(--text-muted); }
.modulo-radici .aiuto { margin: 4px 0 0; font-size: 15px; color: var(--text-muted); }
.modulo-radici .errore { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ko); }
.modulo-radici .scelta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start;
  margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--radici-carta-2);
}
.modulo-radici .scelta input, .modulo-radici .spunta input {
  width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--radici-terra);
}
.modulo-radici .scelta label { margin: 0; cursor: pointer; }
.modulo-radici .scelta label span { display: block; font-size: 16px; color: var(--text-muted); }
.modulo-radici .scelta:has(input:checked) { outline: 2px solid var(--radici-terra); }
.modulo-radici .spunta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start; }
.modulo-radici .spunta label { margin: 0; font-weight: 400; }
.modulo-radici .spunta .errore { grid-column: 1 / -1; }
.modulo-radici button[disabled] { opacity: .6; cursor: not-allowed; }
.modulo-radici .stato { margin: 10px 0 0; }
.modulo-radici .stato.errore {
  padding: 10px 12px; border: 1px solid var(--ko-border); border-radius: var(--r-md);
  background: var(--ko-bg); color: var(--ko); font-weight: 600;
}
.modulo-radici .stato.fatto {
  padding: 12px 14px; border: 1px solid var(--ok-border); border-radius: var(--r-md);
  background: var(--ok-bg); color: var(--text); font-weight: 600;
}
.radici-percorsi .percorso { padding: 4px 0 0; }
.radici-richieste { margin-top: 40px; }
.radici-manifesto { max-width: 760px; font-family: var(--radici-grazie); font-size: 20px; line-height: 1.65; }
.radici-manifesto h1 { margin-bottom: 20px; }
.radici-testa { margin-bottom: 8px; }

@media print {
  body:has(.radici) { background: #fff; }
  .radici-nav, .radici-invito, .radici-campagna, .modulo-radici { display: none; }
}