/* mochela.it — stile del sito, dal design system "mochela.it"
   Font: Fredoka ed Exo 2, SIL OFL 1.1 (licenze in /fonts/). Nessuna risorsa esterna. */

@font-face{font-family:"Fredoka";src:url("/fonts/fredoka-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url("/fonts/fredoka-500.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Fredoka";src:url("/fonts/fredoka-600.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Exo 2";src:url("/fonts/exo2-400.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Exo 2";src:url("/fonts/exo2-600.woff") format("woff");font-weight:600;font-display:swap}

:root{
  /* token del design system, tema chiaro */
  --surface:#F5F9FC;
  --surface-raised:#FFFFFF;
  --line:#DCE6EF;
  --ink:#1E2A3A;
  --ink-muted:#5A6878;
  --verde:#00FF41;
  --verde-profondo:#00992A;
  --azione:#007A2A;
  --punto:#FF2800;
  --cielo:#CFE6F7;
  --marchio:#07090B;         /* fondo della testata: nero, in entrambi i temi (logo con alone ritagliato) */
  --su-marchio:#EEF3F8;

  --sans:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tech:"Exo 2",system-ui,sans-serif;

  --space-1:4px;--space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;

  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#111923;
    --surface-raised:#1A2431;
    --line:#2B3847;
    --ink:#EEF3F8;
    --ink-muted:#9AA8B8;
    --azione:#00FF41;
    --cielo:#1F3A55;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
}
::selection{background:var(--verde);color:#1E2A3A}
.wrap{max-width:70ch;margin:0 auto;padding:0 20px}
a{color:var(--azione);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover,a:focus-visible{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--azione);outline-offset:3px;border-radius:var(--radius-sm)}
p{margin:0 0 var(--space-4)}
strong{font-weight:600}

/* ---- testata ---- */
.testata{background:var(--marchio);color:var(--su-marchio)}
.testata .wrap{position:relative;padding-top:56px;padding-bottom:var(--space-8)}
.logo{margin:0;line-height:0}
.logo img{display:block;width:min(380px,78vw);height:auto}
.motto{margin:var(--space-4) 0 0;font-size:18px;color:var(--su-marchio)}
.alto{position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:14px}
.lingua{display:flex;gap:6px;font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.08em}
.lingua a,.lingua span{display:inline-block;padding:2px 10px;border-radius:var(--radius-full);border:1px solid #3A4450;color:var(--su-marchio);text-decoration:none}
.lingua a:hover,.lingua a:focus-visible{border-color:var(--verde);color:var(--verde)}
.lingua .attiva{background:var(--verde);border-color:var(--verde);color:#1E2A3A}
/* pulsante Codice, nella barra in alto (fuori dal menu dal 14 ottobre 2026): bordo grigio come le lingue */
.codice-alto{display:inline-block;padding:2px 12px;border-radius:var(--radius-full);border:1px solid #3A4450;color:var(--su-marchio);text-decoration:none;font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.08em}
.codice-alto:hover,.codice-alto:focus-visible{border-color:var(--verde);color:var(--verde)}
.codice-alto[aria-current="page"]{background:var(--verde);border-color:var(--verde);color:#1E2A3A}

/* ---- contenuto ---- */
main{padding:var(--space-8) 0 var(--space-4)}
.forte{font-weight:600}
section{margin:0 0 48px}
.stato{
  display:inline-flex;align-items:center;gap:var(--space-2);
  margin:0 0 var(--space-6);
  padding:4px 12px;
  border-radius:var(--radius-full);
  background:var(--surface-raised);
  border:1px solid var(--line);
  font-family:var(--tech);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
}
.stato::before{
  content:"";width:10px;height:10px;border-radius:var(--radius-full);background:var(--punto);
  animation:pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa{50%{opacity:.25}}
h2.sez{margin:0 0 var(--space-4);font-size:24px;line-height:1.2;font-weight:600}
.lead{font-size:20px;line-height:1.55}
em{font-style:normal;font-weight:600;color:var(--azione)}

/* citazione */
.citazione{margin:var(--space-8) 0 var(--space-6);padding:var(--space-4) var(--space-6);border-left:6px solid var(--verde);background:var(--surface-raised);border-radius:0 var(--radius-md) var(--radius-md) 0}
.citazione blockquote{margin:0}
.citazione blockquote p{margin:0;font-size:22px;line-height:1.35;font-weight:500}
.citazione figcaption{margin-top:var(--space-2);font-size:14px;color:var(--ink-muted)}

.posta{font-size:20px;font-weight:500;margin:0 0 var(--space-2)}
.nota{font-size:15px;color:var(--ink-muted);border-left:3px solid var(--line);padding-left:var(--space-4);margin:var(--space-6) 0}

/* ---- codice QR (sempre scuro su bianco, anche nel tema scuro: si deve poter inquadrare) ---- */
.qr{margin:0 0 var(--space-4)}
.qr img{display:block;width:220px;height:220px;border-radius:var(--radius-sm)}

/* ---- piede ---- */
footer{border-top:1px solid var(--line);padding:var(--space-6) 0 60px;font-size:14px;color:var(--ink-muted)}
footer p{margin:0 0 var(--space-4)}
.punti{display:block;margin-top:var(--space-4)}
.punti circle{fill:var(--line)}
.punti .uno{fill:var(--punto)}

/* ---- menu (dentro la testata, su fondo nero in entrambi i temi) ---- */
.menu{margin:var(--space-6) 0 0}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 6px}
.menu a{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);border:1px solid #3A4450;color:var(--su-marchio);text-decoration:none;font-weight:500;font-size:15px}
.menu a:hover,.menu a:focus-visible{border-color:var(--verde);color:var(--verde)}
.menu a[aria-current="page"]{background:var(--verde);border-color:var(--verde);color:#1E2A3A}
.testata .logo a{display:inline-block;line-height:0;border-radius:var(--radius-sm)}
.titolo-pagina{margin:var(--space-6) 0 0;font-size:34px;line-height:1.15;font-weight:600;color:var(--su-marchio)}
.titolo-pagina+.motto{margin-top:var(--space-2)}

/* ---- titoli interni ---- */
h3{margin:var(--space-6) 0 var(--space-2);font-size:19px;line-height:1.3;font-weight:600}
h2.sez::after{content:"";display:block;width:36px;height:4px;margin-top:10px;border-radius:var(--radius-full);background:var(--verde)}

/* ---- indice della pagina ---- */
.indice{margin:0 0 40px;padding:var(--space-4) var(--space-6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);font-size:15px}
.indice p{margin:0 0 var(--space-2);font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.indice ol{margin:0;padding-left:1.3em}
.indice p.altro-nerd{margin:var(--space-4) 0 0;font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.indice li{margin:2px 0}

/* ---- schede ---- */
.schede{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-4);margin:var(--space-6) 0}
.scheda{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-4) var(--space-2);border-top:4px solid var(--verde)}
.scheda h3{margin:0 0 var(--space-2);font-size:18px}
.scheda p{font-size:15px;line-height:1.5}
.scheda .altro{font-weight:500}

/* ---- elenchi ---- */
main ul,main ol{padding-left:1.3em;margin:0 0 var(--space-4)}
main li{margin:0 0 var(--space-2)}
.voci{list-style:none;padding:0}
.voci li{position:relative;padding-left:22px}
.voci li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:var(--radius-full);background:var(--verde-profondo)}

/* ---- etichette di stato ---- */
.etichetta{display:inline-block;vertical-align:1px;margin-left:6px;padding:0 9px;border-radius:var(--radius-full);font-family:var(--tech);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7;white-space:nowrap}
.etichetta.attivo{background:var(--verde);color:#1E2A3A}
.etichetta.previsto{border:1px dashed var(--ink-muted);color:var(--ink-muted)}
.etichetta.scelta{border:1px solid var(--azione);color:var(--azione)}

/* ---- tabelle ---- */
.tabella{width:100%;overflow-x:auto;margin:0 0 var(--space-6)}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
th,td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
tr:last-child td{border-bottom:0}
code{font-family:var(--tech);font-size:.92em;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 5px;overflow-wrap:anywhere}

/* ---- riquadro "limiti" e "da completare" ---- */
.limiti{background:var(--surface-raised);border:1px solid var(--line);border-left:6px solid var(--punto);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-4) var(--space-6) var(--space-2);margin:0 0 var(--space-6)}
.dacompletare{background:#FFF3CD;color:#5C4400;padding:0 4px;border-radius:4px;font-weight:500}

/* ---- schema della rete (SVG nel testo: solo classi, niente stili in linea) ---- */
.schema{margin:var(--space-6) 0;padding:var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
.schema svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.schema figcaption{margin-top:var(--space-2);font-size:14px;color:var(--ink-muted);text-align:center}
.s-tunnel{stroke:var(--verde-profondo);stroke-width:4;fill:none}
.s-tunnel-guida{stroke:var(--verde);stroke-width:10;fill:none;opacity:.25}
.s-nodo{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.s-nodo-posta{fill:var(--surface);stroke:var(--azione);stroke-width:3}
.s-testo{fill:var(--ink);font-family:var(--sans);font-size:17px;font-weight:600}
.s-piccolo{fill:var(--ink-muted);font-family:var(--sans);font-size:13px}
.s-lucchetto{fill:var(--verde-profondo)}
.s-punto{fill:var(--punto)}
.s-dati{fill:var(--cielo);stroke:var(--ink-muted);stroke-width:1}
.s-mini{fill:var(--ink-muted);font-family:var(--sans);font-size:11px}
.s-persona{fill:var(--punto)}
.s-utente-testo{fill:var(--punto);font-family:var(--sans);font-size:16px;font-weight:600}
.s-utente-linea{stroke:var(--punto);stroke-width:2.5;stroke-dasharray:6 5;fill:none}

/* ---- piede ---- */
.piede-menu{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 var(--space-4);padding:0;list-style:none}
.piede-menu a{color:var(--ink-muted)}

@media (max-width:560px){
  .titolo-pagina{font-size:27px}
  .menu a{font-size:15px;padding:3px 11px}

  body{font-size:16px}
  .testata .wrap{padding-top:100px}
  .lead{font-size:18px}
  .citazione blockquote p{font-size:19px}
}
@media (prefers-reduced-motion:reduce){ .stato::before{animation:none} }

/* pagina Accedi: voce del menu e pulsante */
.accedi{display:inline-block;padding:2px 12px;border-radius:var(--radius-full);border:1px solid var(--punto);color:var(--su-marchio);text-decoration:none;font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.08em}
.accedi:hover,.accedi:focus-visible{border-color:var(--verde);color:var(--verde)}
.accedi[aria-current="page"]{background:var(--punto);color:#fff}
.entra{margin:var(--space-6) 0 var(--space-4)}
.bottone{display:inline-block;padding:12px 28px;border-radius:var(--radius-full);background:var(--verde);color:#1E2A3A;font-weight:600;font-size:19px;text-decoration:none}
.bottone:hover,.bottone:focus-visible{background:var(--verde-profondo);color:#fff}

/* pagina Sostieni: i dodici mesi dell'anno, pieni quelli coperti dalle donazioni */
.mesi{margin:var(--space-6) 0;padding:var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md)}
.mesi ol{list-style:none;margin:0 0 var(--space-2);padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.mesi li{height:22px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface)}
.mesi li.pieno{background:var(--verde);border-color:var(--verde-profondo)}
.mesi p{margin:0;font-family:var(--tech);font-size:15px;letter-spacing:.02em}

/* pulsante Sostienici, nella barra in alto accanto ad Accedi: pieno, verde, il colore del marchio */
.sostienici{display:inline-block;padding:2px 12px;border-radius:var(--radius-full);border:1px solid var(--verde);background:var(--verde);color:#1E2A3A;text-decoration:none;font-family:var(--tech);font-weight:600;font-size:13px;letter-spacing:.08em}
.sostienici:hover,.sostienici:focus-visible{background:transparent;color:var(--verde)}
.sostienici[aria-current="page"]{background:transparent;color:var(--verde)}
/* telefoni stretti: i pulsanti in alto (Codice, Sostienici, Accedi, lingue) stanno nei margini
   e, se non ci stanno in una riga, vanno su due, allineati a destra (14 ottobre 2026) */
@media (max-width:440px){
  .alto{left:16px;right:16px;flex-wrap:wrap;justify-content:flex-end;gap:8px}
}