/* QuizCittadinanza — foglio di stile unico
   Palette: verde bandiera primario, rosso solo per l'errore.
   Nessuna dipendenza esterna. */

:root {
  --verde: #009246;
  --verde-scuro: #00602E;
  --verde-tinta: #E6F4EC;
  --rosso: #CE2B37;
  --rosso-tinta: #FCECEE;
  --inchiostro: #14201A;
  --grigio: #5B6B62;
  --grigio-chiaro: #D8DFDA;
  --carta: #FFFFFF;
  --carta-2: #F5F7F5;
  --ambra: #B26A00;
  --ambra-tinta: #FDF3E3;

  --radius: 10px;
  --max: 760px;
  --max-large: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ombra: 0 1px 3px rgba(20, 32, 26, .08), 0 4px 12px rgba(20, 32, 26, .05);
}

[data-tema="scuro"] {
  --verde: #35C07A;
  --verde-scuro: #8FE0B4;
  --verde-tinta: #12291D;
  --rosso: #FF7A85;
  --rosso-tinta: #2E1518;
  --inchiostro: #E8EFEA;
  --grigio: #9DAAA3;
  --grigio-chiaro: #2C3832;
  --carta: #131A16;
  --carta-2: #1B2420;
  --ambra: #E5A54B;
  --ambra-tinta: #2B2010;
  --ombra: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  /* Grande: chi legge non è madrelingua. */
  font-size: 18px;
  line-height: 1.7;
  color: var(--inchiostro);
  background: var(--carta-2);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Tipografia ---------- */

h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.45rem; font-weight: 700; margin-top: 1.8em; }
h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.5em; }
p { margin: 0 0 1em; }

a { color: var(--verde-scuro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--verde); }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
  border-radius: 4px;
}

.salta-al-contenuto {
  position: absolute; left: -9999px;
  background: var(--verde); color: #fff;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.salta-al-contenuto:focus { left: 0; top: 0; }

/* ---------- Intestazione ---------- */

.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--grigio-chiaro);
  position: sticky; top: 0; z-index: 40;
}
.testata-interno {
  max-width: var(--max-large); margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.logo {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--inchiostro); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo:hover { color: var(--inchiostro); }
.logo-segno {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  background: linear-gradient(90deg, var(--verde) 0 33%, #fff 33% 66%, var(--rosso) 66% 100%);
  border: 1px solid var(--grigio-chiaro);
}
.nav-principale { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-principale a {
  color: var(--inchiostro); text-decoration: none;
  padding: 8px 10px; border-radius: 8px; font-size: .95rem; font-weight: 600;
}
.nav-principale a:hover { background: var(--verde-tinta); color: var(--verde-scuro); }

.btn-tema {
  background: none; border: 1px solid var(--grigio-chiaro); color: var(--inchiostro);
  width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  font-size: 1.05rem; line-height: 1; flex: none;
}
.btn-tema:hover { background: var(--carta-2); }

.lang-switch { position: relative; }
.lang-switch select {
  appearance: none; -webkit-appearance: none;
  background: var(--carta); color: var(--inchiostro);
  border: 1px solid var(--grigio-chiaro); border-radius: 8px;
  padding: 9px 30px 9px 10px; font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; height: 40px;
}
.lang-switch::after {
  content: "▾"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); pointer-events: none; color: var(--grigio);
}

@media (max-width: 720px) {
  .nav-principale a.nav-solo-desktop { display: none; }
}

/* ---------- Struttura ---------- */

.contenitore { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.contenitore-largo { max-width: var(--max-large); margin: 0 auto; padding: 0 16px; }

main { padding: 24px 0 56px; }

.scheda {
  background: var(--carta);
  border: 1px solid var(--grigio-chiaro);
  border-radius: var(--radius);
  padding: 22px;
  margin: 0 0 20px;
  box-shadow: var(--ombra);
}

.briciole {
  font-size: .85rem; color: var(--grigio);
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.briciole li::after { content: "›"; margin-left: 6px; color: var(--grigio-chiaro); }
.briciole li:last-child::after { content: ""; }
.briciole a { color: var(--grigio); }

.occhiello {
  display: inline-block; font-size: .75rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--verde-scuro); background: var(--verde-tinta);
  padding: 4px 9px; border-radius: 5px; margin-bottom: 10px;
}

.sommario { font-size: 1.1rem; color: var(--grigio); margin-bottom: 1.5em; }

/* ---------- Bottoni ---------- */

.btn {
  display: inline-block; font: inherit; font-weight: 700; font-size: 1rem;
  padding: 13px 22px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  min-height: 48px; /* bersaglio touch */
}
.btn-primario { background: var(--verde); color: #fff; }
.btn-primario:hover { background: var(--verde-scuro); color: #fff; }
[data-tema="scuro"] .btn-primario { color: #06120B; }
.btn-secondario {
  background: var(--carta); color: var(--inchiostro); border-color: var(--grigio-chiaro);
}
.btn-secondario:hover { background: var(--carta-2); color: var(--inchiostro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.gruppo-btn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Motore quiz ---------- */

.quiz { margin: 26px 0; }

.quiz-barra-avanzamento {
  height: 6px; background: var(--grigio-chiaro);
  border-radius: 3px; overflow: hidden; margin-bottom: 8px;
}
.quiz-barra-avanzamento > span {
  display: block; height: 100%; background: var(--verde);
  width: 0; transition: width .25s ease;
}
.quiz-stato {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--grigio); font-weight: 600; margin-bottom: 18px;
}
.quiz-timer { font-variant-numeric: tabular-nums; }
.quiz-timer.in-esaurimento { color: var(--rosso); }

.quiz-brano {
  background: var(--carta-2); border-left: 4px solid var(--verde);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px; margin-bottom: 22px;
}
.quiz-brano p:last-child { margin-bottom: 0; }

.quiz-domanda { font-size: 1.15rem; font-weight: 700; margin: 0 0 16px; }

.quiz-opzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-opzione {
  display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid var(--grigio-chiaro); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; background: var(--carta);
  min-height: 56px; transition: border-color .15s, background .15s;
}
.quiz-opzione:hover { border-color: var(--verde); background: var(--verde-tinta); }
.quiz-opzione input { margin: 5px 0 0; flex: none; width: 20px; height: 20px; accent-color: var(--verde); }
.quiz-opzione.giusta { border-color: var(--verde); background: var(--verde-tinta); }
.quiz-opzione.sbagliata { border-color: var(--rosso); background: var(--rosso-tinta); }
.quiz-opzione.bloccata { cursor: default; }
.quiz-opzione.bloccata:hover { border-color: var(--grigio-chiaro); background: var(--carta); }
.quiz-opzione.bloccata.giusta:hover { border-color: var(--verde); background: var(--verde-tinta); }
.quiz-opzione.bloccata.sbagliata:hover { border-color: var(--rosso); background: var(--rosso-tinta); }
.quiz-etichetta-esito { margin-left: auto; font-weight: 800; font-size: .8rem; flex: none; }
.quiz-opzione.giusta .quiz-etichetta-esito { color: var(--verde-scuro); }
.quiz-opzione.sbagliata .quiz-etichetta-esito { color: var(--rosso); }

.quiz-spiegazione {
  margin-top: 16px; padding: 14px 16px;
  background: var(--ambra-tinta); border-left: 4px solid var(--ambra);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: .97rem;
}
.quiz-spiegazione strong { color: var(--ambra); }
.quiz-spiegazione p:last-child { margin-bottom: 0; }

/* Nessun annuncio qui dentro: i clic accidentali sui pulsanti
   del quiz sono clic non validi per AdSense. */
.quiz-comandi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.quiz-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.quiz-audio-avviso { font-size: .85rem; color: var(--grigio); }
.quiz-trascrizione summary { cursor: pointer; font-weight: 700; color: var(--verde-scuro); }
.quiz-trascrizione[open] summary { margin-bottom: 10px; }

/* Battute del dialogo: due persone, due segni. */
.battuta-scena {
  font-style: italic; color: var(--grigio);
  border-bottom: 1px solid var(--grigio-chiaro);
  padding-bottom: 8px; margin-bottom: 12px !important;
}
.battuta { display: flex; gap: 10px; align-items: baseline; }
.battuta-segno {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff;
  background: var(--verde);
}
.battuta:nth-of-type(odd) .battuta-segno { background: var(--verde); }
.battuta:nth-of-type(even) .battuta-segno { background: var(--ambra); }
[data-tema="scuro"] .battuta-segno { color: #06120B; }

/* ---------- Firma: la barra della soglia ---------- */

.esito { text-align: center; padding: 8px 0 4px; }
.esito-punteggio { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.esito-punteggio.superato { color: var(--verde); }
.esito-punteggio.non-superato { color: var(--rosso); }
.esito-etichetta { font-size: 1.05rem; font-weight: 700; margin: 6px 0 22px; }

.soglia {
  position: relative; height: 34px; border-radius: 6px;
  background: var(--grigio-chiaro); overflow: visible; margin: 34px 0 10px;
}
.soglia-riempimento {
  height: 100%; border-radius: 6px 0 0 6px;
  background: var(--verde); width: 0; transition: width .5s ease;
}
.soglia-riempimento.non-superato { background: var(--rosso); }
.soglia-linea {
  position: absolute; top: -10px; bottom: -10px; width: 3px;
  background: var(--inchiostro); border-radius: 2px;
}
.soglia-linea::after {
  content: attr(data-etichetta);
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .75rem; font-weight: 800;
  color: var(--inchiostro); background: var(--carta);
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--grigio-chiaro);
}
.soglia-nota { font-size: .85rem; color: var(--grigio); text-align: center; }

.esito-ripartizione { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; }
.esito-ripartizione li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--carta-2); border-radius: 8px; font-size: .95rem;
}
.esito-ripartizione b { font-variant-numeric: tabular-nums; }

/* ---------- Slot pubblicitari ----------
   Altezza riservata: l'annuncio non deve spostare il testo quando carica.
   Mai a fianco dei comandi del quiz. */

.slot-annuncio {
  margin: 26px auto; text-align: center; overflow: hidden;
  background: transparent;
}
.slot-annuncio.riserva-orizzontale { min-height: 100px; }
@media (min-width: 800px) {
  .slot-annuncio.riserva-orizzontale { min-height: 90px; }
}
.slot-annuncio.riserva-quadrato { min-height: 280px; }
.slot-annuncio ins { display: block; }

/* ---------- Griglie e card ---------- */

.griglia { display: grid; gap: 16px; }
@media (min-width: 620px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .griglia-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block; background: var(--carta); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--radius); padding: 20px; text-decoration: none;
  color: var(--inchiostro); box-shadow: var(--ombra);
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { border-color: var(--verde); transform: translateY(-2px); color: var(--inchiostro); }
.card h3 { margin-top: 0; }
.card p { color: var(--grigio); font-size: .95rem; margin-bottom: 0; }
.card-meta {
  font-size: .8rem; font-weight: 700; color: var(--verde-scuro);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}

/* ---------- Avvisi ---------- */

.avviso {
  border-left: 4px solid var(--ambra); background: var(--ambra-tinta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px; margin: 22px 0; font-size: .95rem;
}
.avviso p:last-child { margin-bottom: 0; }
.avviso-titolo { font-weight: 800; margin-bottom: 4px; display: block; }

.disclaimer {
  border: 1px dashed var(--grigio-chiaro); border-radius: var(--radius);
  padding: 14px 16px; margin: 28px 0 0;
  font-size: .88rem; color: var(--grigio); background: var(--carta-2);
}
.disclaimer p:last-child { margin-bottom: 0; }

.aggiornato { font-size: .82rem; color: var(--grigio); margin-bottom: 1.5em; }

/* ---------- Tabelle ---------- */

.tabella-avvolgi { overflow-x: auto; margin: 20px 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--grigio-chiaro); }
th { background: var(--verde-tinta); font-weight: 700; color: var(--verde-scuro); }

/* ---------- Glossario ---------- */

.voce { border-top: 1px solid var(--grigio-chiaro); padding: 18px 0; }
.voce:first-of-type { border-top: none; }
.voce h3 { margin: 0 0 6px; }
.voce-esempio {
  border-left: 3px solid var(--verde); padding-left: 12px;
  color: var(--grigio); font-style: italic; margin: 8px 0 0;
}

/* ---------- Piede ---------- */

.piede {
  background: var(--carta); border-top: 1px solid var(--grigio-chiaro);
  padding: 40px 0 28px; font-size: .92rem;
}
.piede-griglia { display: grid; gap: 26px; }
@media (min-width: 700px) { .piede-griglia { grid-template-columns: repeat(4, 1fr); } }
.piede h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--grigio); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 7px; }
.piede a { color: var(--inchiostro); text-decoration: none; }
.piede a:hover { color: var(--verde); text-decoration: underline; }
.piede-coda {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--grigio-chiaro);
  color: var(--grigio); font-size: .85rem;
}

/* ---------- Banner cookie ---------- */

.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 620px; margin: 0 auto;
  background: var(--carta); border: 1px solid var(--grigio-chiaro);
  border-radius: var(--radius); padding: 18px;
  box-shadow: 0 8px 30px rgba(20, 32, 26, .18);
  font-size: .9rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin-bottom: 12px; }
.cookie-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-azioni .btn { padding: 10px 16px; font-size: .9rem; min-height: 44px; }

/* ---------- Utilità ---------- */

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[dir="rtl"] { text-align: right; }
.testo-centro { text-align: center; }