/* Navigatore della prevenzione - stile pensato per il telefono e per chi legge con fatica:
   nessun testo sotto 0.9rem = 18px (controllato da test/test_accessibilita.py),
   caratteri grandi, contrasto alto (WCAG AAA sul testo), pulsanti da almeno 56px. */

:root {
  --testo: #111111;
  --testo-tenue: #333333;
  --sfondo: #ffffff;
  --sfondo-tenue: #f2f5f8;
  --primario: #0a4a82;       /* 9.2:1 su bianco */
  --primario-scuro: #06325a;
  --teal: #0e6f78;           /* 5.9:1 con testo bianco: seconda tinta della testata */
  --teal-chiaro: #e6f3f4;    /* fondo del menu e dell'area di condivisione */
  --accento: #c2410c;        /* arancio: SOLO per i pulsanti d'azione, 5.2:1 con testo bianco */
  --accento-scuro: #9a3412;
  --bordo: #5a6470;
  --avviso-sfondo: #7a1010;  /* 10.5:1 con testo bianco */
  --avviso-testo: #ffffff;
  --attenzione-sfondo: #fff4d6;
  --attenzione-bordo: #8a5a00;
  --ok-bordo: #1d6b35;
  --focus: #ffbf47;
  /* Etichette della pagina per età: testo scuro su fondo chiaro, il colore non è mai l'unica informazione */
  --lea-sfondo: #e3f3e7;
  --lea-bordo: #1d6b35;
  --regionale-sfondo: #fff1b8;
  --regionale-bordo: #8a5a00;
  --neonatale-sfondo: #e1eeff;
  --neonatale-bordo: #0a4a82;
  --estero-sfondo: #eeeeee;
  --estero-bordo: #5a6470;
  --raggio: 12px;
  --altezza-avviso: 6rem;    /* aggiornata da comune.js con l'altezza reale dell'avviso */
}

* { box-sizing: border-box; }

html { font-size: 125%; -webkit-text-size-adjust: 100%; }  /* 20px */

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  padding-bottom: calc(var(--altezza-avviso) + 1rem);
  overflow-wrap: anywhere; /* email e indirizzi web lunghi vanno a capo sui telefoni stretti */
}

a { color: var(--primario); text-underline-offset: 0.18em; }
a:hover { color: var(--primario-scuro); }

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

.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--primario); color: #fff; padding: 0.6rem 1rem; z-index: 100;
}
.salta:focus { left: 0.5rem; top: 0.5rem; }

.contenitore { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }

/* Testata e menu */
.testata { background: var(--primario); background-image: linear-gradient(120deg, var(--primario) 0%, var(--teal) 100%); color: #fff; border-bottom: 4px solid #fff; }
.testata .contenitore { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.marchio { display: block; text-align: center; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.marchio small { display: block; font-weight: 400; font-size: 0.9rem; }

.menu { background: var(--teal-chiaro); border-bottom: 1px solid #b3d4d8; }
.menu ul {
  list-style: none; margin: 0 auto; padding: 0.5rem 1rem;
  max-width: 44rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
}
.menu li { margin: 0; }
.menu li:first-child { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .menu ul { grid-template-columns: repeat(5, 1fr); }
  .menu li:first-child { grid-column: auto; }
}
.menu a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0.3rem 0.5rem;
  border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  color: var(--primario); background: #fff; border: 2px solid transparent;
}
.menu a[aria-current="page"] { border-color: var(--primario); }

main { padding-top: 1.2rem; padding-bottom: 1.5rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 1.8rem 0 0.6rem; }
h3 { font-size: 1.1rem; line-height: 1.35; margin: 1.2rem 0 0.4rem; }
p, ul, ol { margin: 0 0 0.9rem; }
li { margin-bottom: 0.35rem; }

.introduzione { font-size: 1.05rem; color: var(--testo-tenue); }

/* Moduli */
.campo { margin-bottom: 1.4rem; }
.campo > label, .campo legend { display: block; font-weight: 700; margin-bottom: 0.4rem; font-size: 1.05rem; }
.campo fieldset { border: 0; padding: 0; margin: 0; }
.aiuto { display: block; font-size: 0.9rem; color: var(--testo-tenue); margin-bottom: 0.4rem; }

input[type="number"], input[type="text"], input[type="month"], select {
  width: 100%; min-height: 3.2rem; padding: 0.5rem 0.8rem;
  font: inherit; color: var(--testo); background: #fff;
  border: 2px solid var(--bordo); border-radius: 8px;
}
input[type="number"] { max-width: 9rem; }

.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta label {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.2rem; padding: 0.4rem; border: 2px solid var(--bordo); border-radius: 8px;
  font-weight: 700; cursor: pointer; background: #fff;
}
.scelta input:checked + label { background: var(--primario); border-color: var(--primario); color: #fff; }
.scelta input:focus-visible + label { outline: 4px solid var(--focus); outline-offset: 2px; }

.errore { color: #8b0000; font-weight: 700; margin-top: 0.4rem; }

.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.5rem; padding: 0.6rem 1.3rem;
  font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  color: #fff; background: var(--accento); border: 2px solid var(--accento); border-radius: var(--raggio);
  cursor: pointer;
}
.pulsante:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: #fff; }
.pulsante.secondario { background: #fff; color: var(--primario); border-color: var(--primario); }
.pulsante.secondario:hover { background: var(--teal-chiaro); border-color: var(--primario); color: var(--primario-scuro); }
.pulsante.largo { width: 100%; }

/* Schede */
.scheda {
  border: 2px solid #c9d1da; border-left: 8px solid var(--primario);
  border-radius: var(--raggio); padding: 1rem 1rem 0.6rem; margin: 1rem 0 1.4rem; background: #fff;
}
.scheda h2, .scheda h3 { margin-top: 0; }
.scheda .dato { margin: 0 0 0.5rem; }
.scheda .dato strong { display: inline-block; min-width: 5.5rem; }
.scheda.futuro { border-left-color: var(--bordo); background: var(--sfondo-tenue); }

.promemoria { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed #9aa5b1; }
.conferma { font-weight: 700; color: var(--ok-bordo); margin-top: 0.6rem; }

.nota-attenzione {
  background: var(--attenzione-sfondo); border: 2px solid var(--attenzione-bordo);
  border-radius: var(--raggio); padding: 0.8rem 1rem; margin: 1rem 0;
}
.da-verificare { background: var(--attenzione-sfondo); border-left: 6px solid var(--attenzione-bordo); padding: 0.5rem 0.8rem; font-weight: 700; }

.fonte { font-size: 0.9rem; color: var(--testo-tenue); margin-top: -0.4rem; }
.fonte a { color: var(--testo-tenue); }

.telefoni { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.telefoni a { min-height: 3.2rem; }

details {
  border: 2px solid #c9d1da; border-radius: var(--raggio); margin: 0 0 0.8rem; background: #fff;
}
summary {
  cursor: pointer; padding: 0.8rem 1rem; font-weight: 700; min-height: 3.2rem; list-style-position: inside;
}
details[open] summary { border-bottom: 1px solid #c9d1da; }
details > div { padding: 0.8rem 1rem 0.2rem; }

.filtri { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; }
.filtri .pulsante { min-height: 3rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; background: var(--primario); border-color: var(--primario); }
.filtri .pulsante:hover { background: var(--primario-scuro); border-color: var(--primario-scuro); }
.filtri .pulsante[aria-pressed="false"] { background: #fff; color: var(--primario); }

/* Avviso fisso sui sintomi: sempre visibile in fondo allo schermo */
.avviso-sintomi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--avviso-sfondo); color: var(--avviso-testo);
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom));
  font-size: 0.9rem; line-height: 1.4; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}
.avviso-sintomi p { max-width: 44rem; margin: 0 auto; }
.avviso-sintomi a { color: #fff; font-weight: 800; white-space: nowrap; }

.piede { border-top: 1px solid #c9d1da; margin-top: 2rem; padding: 1rem 0; font-size: 0.9rem; color: var(--testo-tenue); }

/* Condivisione: link semplici verso WhatsApp, LinkedIn e Telegram, più "Copia link" (js/comune.js) */
.condividi { background: var(--teal-chiaro); border: 2px solid #b3d4d8; border-radius: var(--raggio); padding: 0.8rem 1rem 0.4rem; margin: 2rem 0 0; }
.condividi h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.condividi ul { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.condividi li { margin: 0; }
.condividi a, .condividi button {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%;
  min-height: 3.2rem; padding: 0.3rem 0.4rem; font: inherit; font-size: 0.9rem; font-weight: 700; text-decoration: none; cursor: pointer;
  overflow-wrap: normal; word-break: normal;  /* il body spezza ovunque: qui i nomi dei servizi restano interi */
  color: var(--primario); background: #fff; border: 2px solid var(--primario); border-radius: 8px;
}
.condividi a:hover, .condividi button:hover { background: var(--sfondo-tenue); color: var(--primario-scuro); }
.condividi svg { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.condividi .esito { min-height: 1.6rem; margin: 0 0 0.4rem; font-weight: 700; color: var(--ok-bordo); }
@media (min-width: 40rem) {
  .condividi ul { grid-template-columns: repeat(4, 1fr); }
}

.fuori-schermo { position: fixed; left: -9999px; }  /* niente style="" inline: la CSP lo vieta */
.nascosto { display: none !important; }

@media (min-width: 40rem) {
  h1 { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .avviso-sintomi { position: static; }
  .menu, .promemoria, .salta, .condividi { display: none; }
}

/* Pagine per Regione (generate da strumenti/genera_sito.mjs) */
.elenco-regioni { columns: 2 14rem; padding-left: 1.2rem; }
.elenco-regioni li { break-inside: avoid; }
.stato-verifica { font-weight: 700; }

/* Il carattere a spaziatura fissa di default è più piccolo: lo riportiamo alla dimensione del testo. */
code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 1em; }

/* Tre scelte con testo più lungo: una sotto l'altra, a tutta larghezza. */
.scelte-tre { grid-template-columns: 1fr; }
.scelte-tre .scelta label { justify-content: flex-start; padding: 0.5rem 0.9rem; text-align: left; }

/* Pagina "Tutti gli screening, per età" (generata da strumenti/genera_sito.mjs) */
.etichetta {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--testo);
  border: 2px solid; border-radius: 999px; padding: 0.15rem 0.7rem;
}
.pallino { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: currentColor; flex: none; }
.etichetta-lea { background: var(--lea-sfondo); border-color: var(--lea-bordo); }
.etichetta-lea .pallino { background: var(--lea-bordo); }
.etichetta-regionale { background: var(--regionale-sfondo); border-color: var(--regionale-bordo); }
.etichetta-regionale .pallino { background: var(--regionale-bordo); }
.etichetta-neonatale { background: var(--neonatale-sfondo); border-color: var(--neonatale-bordo); }
.etichetta-neonatale .pallino { background: var(--neonatale-bordo); }
.etichetta-estero { background: var(--estero-sfondo); border-color: var(--estero-bordo); }
.etichetta-estero .pallino { background: #fff; border: 2px solid var(--estero-bordo); }
.legenda { list-style: none; padding: 0; }
.legenda li { margin: 0 0 0.6rem; }
/* Fasce d'età: pillole compatte su più righe, ciascuna è un link alla sua sezione */
.linea-eta { list-style: none; padding: 0; margin: 0.8rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.linea-eta li { margin: 0; }
.linea-eta a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0 0.6rem;
  border: 2px solid var(--primario); border-radius: 999px; font-weight: 700; text-decoration: none;
}
.linea-eta a:hover { background: var(--teal-chiaro); }
.gruppo-eta { border-top: 2px solid #c9d1da; padding-top: 0.4rem; }
.voci { list-style: none; padding: 0; }
.voce { border: 2px solid #c9d1da; border-radius: var(--raggio); padding: 0.8rem 1rem 0.4rem; margin: 0 0 1rem; background: #fff; }
.voce h3 { margin: 0.4rem 0; }
.voce .dato { margin: 0 0 0.6rem; }
.voce .fonte { margin-top: 0; }
/* Testo fisso in cima alla pagina: ben visibile, ma calmo (niente rosso) */
.avviso-fisso {
  background: var(--attenzione-sfondo); border: 2px solid var(--attenzione-bordo); border-radius: var(--raggio);
  padding: 0.5rem 0.8rem; font-size: 0.95rem; line-height: 1.45; font-weight: 700; color: var(--testo);
}
.azione-con-testo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.azione-con-testo p { margin: 0; flex: 1 1 12rem; color: var(--testo-tenue); }
.filtri-elenco { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .filtri-elenco { grid-template-columns: 1fr 1fr; } }