/* ============================================================
   BLOG FACILE, Camp ComeUnaVolta (13/10/2026)
   Kit per gli articoli a lettura facile: stessa lingua visiva delle
   email ricche (riquadri, numeri grandi, elenchi con segni, pulsante),
   ma con i token di site.css. Si carica DOPO site.css e vale solo
   dentro <div class="prose facile">. Niente JavaScript.

   Dopo ogni modifica a questo file va aggiornato a mano il ?v= nelle
   pagine che lo usano (deploy.py versiona solo site.css, site.js e
   tracking.js): prime 8 cifre dell'md5 del file.

   ------------------------------------------------------------
   MARKUP DEI COMPONENTI (da copiare identico)
   ------------------------------------------------------------

   0. Corpo dell'articolo
      <div class="prose facile"> ...paragrafi, h2, componenti... </div>

   1. In breve (tre punti numerati, in cima)
      <aside class="in-breve" aria-label="In breve">
        <p class="kit-etichetta">In breve</p>
        <ol>
          <li><strong>Frase che dice la cosa.</strong> Una frase che la spiega.</li>
          <li>...</li>
          <li>...</li>
        </ol>
      </aside>

   2. Numero grande (una cifra + una riga che la spiega)
      <figure class="numero">
        <p class="numero__cifra"><span class="numero__pre">circa</span>1,5 <span class="numero__unita">volte</span></p>
        <figcaption>La riga che spiega la cifra.</figcaption>
      </figure>
      (.numero__pre e .numero__unita sono facoltativi)

   3. Due numeri a confronto (il primo in evidenza)
      <div class="numeri-confronto">
        <p class="kit-etichetta">Titolo del confronto</p>
        <div class="numeri-confronto__coppia">
          <figure class="numero"><p class="numero__cifra">7,8%</p><figcaption>primo gruppo</figcaption></figure>
          <figure class="numero numero--tenue"><p class="numero__cifra">3,5%</p><figcaption>secondo gruppo</figcaption></figure>
        </div>
      </div>
      (senza confronto, due numeri di pari peso: niente numero--tenue)

   4. Barre di confronto (larghezza = percentuale, con --v)
      <figure class="barre">
        <figcaption class="kit-etichetta">Titolo del grafico</figcaption>
        <div class="barre__riga">
          <p class="barre__testo"><span>Etichetta del gruppo</span><b>24,2%</b></p>
          <div class="barre__binario" aria-hidden="true"><span style="--v:24.2%"></span></div>
        </div>
        <div class="barre__riga barre__riga--tenue"> ...come sopra... </div>
        <p class="barre__fonte">Fonte: ...</p>
      </figure>

   5. Cosa fare (elenco con spunte, in fondo)
      <aside class="cosa-fare" aria-label="Cosa fare">
        <p class="kit-etichetta">Cosa fare</p>
        <ul>
          <li><strong>Azione.</strong> Una frase che la spiega.</li>
        </ul>
      </aside>

   6. Citazione evidenziata (voce di un genitore)
      <figure class="voce">
        <blockquote><p>Parole del genitore, senza virgolette.</p></blockquote>
        <figcaption>Una mamma, sotto un post su Instagram</figcaption>
      </figure>

   7. Da sapere (avvertenza, al massimo una per articolo)
      <aside class="da-sapere" aria-label="Da sapere">
        <p class="kit-etichetta">Da sapere</p>
        <p>Testo dell'avvertenza, due o tre frasi.</p>
      </aside>

   8. Il punto (riassunto che chiude ogni H2 del corpo, FAQ e Camp esclusi)
      <aside class="il-punto" aria-label="Il punto">
        <p class="kit-etichetta">Il punto</p>
        <p>Due o tre frasi scorrevoli che dicono a un genitore cosa significa
        quella parte. Frasi vere, mai a telegramma, niente elenchi di dati.</p>
      </aside>
      Chi legge solo In breve + i riquadri Il punto + Cosa fare deve capire
      tutto il pezzo. Numeri in grafica (2, 3, 4): uno o due per articolo.

   COLORI: solo riquadri chiari (bianco, panna) col verde del sito; niente
   ocra/oro, in nessun componente. Contrasto del testo almeno 4,5:1.
   ============================================================ */

/* ---------- 0. Corpo: paragrafi corti, testo grande, grassetto che si vede ---------- */
.prose.facile{max-width:700px}
.prose.facile > p{font-size:clamp(1.13rem,1.07rem + .3vw,1.25rem); line-height:1.8; margin-bottom:1.25rem; max-width:62ch}
.prose.facile > p:first-of-type::first-letter{font-size:3.6rem}
.prose.facile h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.1rem); line-height:1.2; margin:3.2rem 0 1.1rem}
.prose.facile h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.45rem); line-height:1.3; margin:2.2rem 0 .7rem}
.prose.facile li{font-size:clamp(1.08rem,1.04rem + .25vw,1.18rem); line-height:1.7}
.prose.facile strong{
  font-weight:800; color:var(--bosco);
  background:linear-gradient(transparent 62%, rgba(74,124,89,.18) 62%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* etichetta comune dei riquadri (stesso ruolo dell'occhiello delle email) */
.kit-etichetta{
  margin:0 0 .9rem; font-family:"Figtree",sans-serif; font-weight:800;
  font-size:.86rem; line-height:1.3; letter-spacing:.12em; text-transform:uppercase;
  color:var(--verde-scuro);
}

/* ---------- 1. In breve ---------- */
.in-breve{
  background:#fff; border:1.5px solid var(--bordo); border-top:5px solid var(--verde-scuro);
  border-radius:var(--r); padding:1.5rem 1.4rem 1.2rem; margin:0 0 2.4rem;
}
.in-breve ol{list-style:none; margin:0; padding:0; counter-reset:breve}
.in-breve li{
  counter-increment:breve; position:relative; padding:0 0 1.1rem 3.1rem; margin:0;
  font-size:clamp(1.1rem,1.05rem + .3vw,1.22rem); line-height:1.55; color:var(--inchiostro);
}
.in-breve li + li{border-top:1px solid var(--bordo); padding-top:1.1rem}
.in-breve li::before{
  content:counter(breve); position:absolute; left:0; top:0;
  width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-content:center;
  background:var(--verde-scuro); color:#fff; font-family:"Fraunces",serif; font-weight:700; font-size:1.1rem; line-height:1;
}
.in-breve li + li::before{top:1.1rem}
.in-breve li:last-child{padding-bottom:0}

/* ---------- 2. Numero grande ---------- */
.numero{
  margin:2rem 0; background:var(--panna-2); color:var(--inchiostro);
  border-radius:var(--r); padding:1.5rem 1.4rem 1.4rem; text-align:center;
}
.numero__cifra{
  margin:0; font-family:"Fraunces",serif; font-weight:700; color:var(--verde-scuro);
  font-size:clamp(3rem,2.3rem + 3vw,4.4rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.numero__pre{display:block; font-family:"Figtree",sans-serif; font-weight:700; font-size:1rem; letter-spacing:.04em; color:var(--inchiostro); margin-bottom:.35rem}
.numero__unita{font-size:.5em; font-weight:600}
.numero figcaption{margin:.8rem auto 0; max-width:34ch; font-size:1.08rem; line-height:1.45; color:var(--inchiostro)}

/* ---------- 3. Due numeri a confronto ---------- */
.numeri-confronto{margin:2rem 0}
.numeri-confronto__coppia{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.numeri-confronto .numero{margin:0; padding:1.3rem .9rem 1.2rem}
.numeri-confronto .numero__cifra{font-size:clamp(2.3rem,1.8rem + 2.4vw,3.4rem)}
.numeri-confronto .numero figcaption{font-size:1rem}
.numero--tenue{background:#fff; border:1.5px solid var(--bordo); color:var(--inchiostro)}
.numero--tenue .numero__cifra{color:var(--inchiostro-2)}
.numero--tenue figcaption,.numero--tenue .numero__pre{color:var(--inchiostro)}

/* ---------- 4. Barre di confronto ---------- */
.barre{margin:2rem 0; background:#fff; border:1.5px solid var(--bordo); border-radius:var(--r); padding:1.4rem 1.4rem 1.1rem}
.barre__riga + .barre__riga{margin-top:1.2rem}
.barre__testo{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 .45rem; font-size:1.05rem; line-height:1.35; color:var(--inchiostro)}
.barre__testo b{flex:none; font-family:"Fraunces",serif; font-weight:700; font-size:1.7rem; line-height:1; color:var(--arancio-azione); font-variant-numeric:lining-nums tabular-nums}
.barre__binario{height:1.1rem; background:var(--panna-2); border-radius:100px; overflow:hidden}
.barre__binario span{display:block; height:100%; width:var(--v,0%); background:var(--arancio-azione); border-radius:100px}
.barre__riga--tenue .barre__testo b{color:var(--inchiostro-2)}
.barre__riga--tenue .barre__binario span{background:var(--inchiostro-2)}
.barre__fonte{margin:1rem 0 0; font-size:.88rem; line-height:1.4; color:var(--inchiostro-2)}

/* ---------- 5. Cosa fare ---------- */
.cosa-fare{background:#EDF4EF; border:1.5px solid var(--verde); border-radius:var(--r); padding:1.5rem 1.4rem 1.3rem; margin:2.4rem 0}
.cosa-fare ul{list-style:none; margin:0; padding:0}
.prose.facile .cosa-fare li{position:relative; margin:0; padding:0 0 0 2.6rem; font-size:clamp(1.1rem,1.05rem + .3vw,1.22rem); line-height:1.55; color:var(--inchiostro)}
.prose.facile .cosa-fare li + li{margin-top:1rem}
.cosa-fare li::before{
  content:""; position:absolute; left:0; top:.1rem; width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--verde-scuro);
}
.cosa-fare li::after{
  content:""; position:absolute; left:.62rem; top:.43rem; width:.45rem; height:.8rem;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg);
}

/* ---------- 6. Citazione evidenziata ---------- */
.voce{margin:2rem 0; background:#fff; border:1.5px solid var(--bordo); border-radius:var(--r); padding:1.3rem 1.4rem 1.2rem}
.voce blockquote{margin:0; padding:0; border:0}
.voce blockquote::before{content:"\201C"; display:block; font-family:"Fraunces",serif; font-weight:700; font-size:3.4rem; line-height:.7; color:var(--arancio-azione); margin:.3rem 0 .2rem}
.voce blockquote p{margin:0; font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:clamp(1.25rem,1.15rem + .5vw,1.45rem); line-height:1.45; color:var(--inchiostro)}
.voce figcaption{margin-top:.8rem; font-size:.98rem; line-height:1.4; color:var(--inchiostro-2)}

/* ---------- 7. Da sapere ---------- */
.da-sapere{background:#FBF3E1; border:1.5px solid var(--bordo); border-left:6px solid var(--arancio-testo); border-radius:var(--r); padding:1.3rem 1.4rem 1.2rem; margin:2rem 0}
.da-sapere .kit-etichetta{color:var(--arancio-testo)}
.da-sapere p:not(.kit-etichetta){margin:0; font-size:clamp(1.08rem,1.04rem + .25vw,1.18rem); line-height:1.65; color:var(--inchiostro)}
.da-sapere p + p:not(.kit-etichetta){margin-top:.7rem}

/* ---------- 8. Il punto ---------- */
.il-punto{background:#fff; border:1.5px solid var(--bordo); border-left:6px solid var(--verde-scuro); border-radius:var(--r); padding:1.3rem 1.4rem 1.25rem; margin:2.2rem 0 .4rem}
.il-punto p:not(.kit-etichetta){margin:0; font-size:clamp(1.1rem,1.05rem + .3vw,1.22rem); line-height:1.65; color:var(--inchiostro)}
.il-punto p + p:not(.kit-etichetta){margin-top:.7rem}

/* ---------- Telefono (375 px) ---------- */
@media (max-width:480px){
  .in-breve,.cosa-fare,.barre,.voce,.da-sapere,.il-punto{padding-inline:1.1rem}
  .in-breve li{padding-left:2.8rem}
  .numeri-confronto__coppia{gap:.6rem}
  .numeri-confronto .numero{padding-inline:.6rem}
  .numeri-confronto .numero figcaption{font-size:.98rem}
  .barre__testo{font-size:1rem}
  .barre__testo b{font-size:1.5rem}
}