/* ============================================================================
   base.css — impianto comune a tutte le pagine del sito
   Estratto dai prototipi approvati: non cambiare i valori senza motivo.
   Ogni pagina carica questo, poi il proprio foglio.
   ============================================================================ */

/* ===== identità visiva: gli stessi valori di pagine-calzolerie.html ===== */
:root{
  --ink:#12143A;--ink-2:#1E2258;--bianco:#fff;--nebbia:#F3F5F9;--nebbia-2:#E7EBF2;--filo:#DFE4EE;
  --verde:#00A44E;--rosso:#DE1B1E;--grigio:#5B6180;--oro:#C8971C;--ambra:#B36B00;
  --display:"Space Grotesk",system-ui,sans-serif;--testo:"Inter",system-ui,sans-serif;--r:14px;
  /* distanze fra sezioni: tre valori con un nome, per non sommare margini */
  --sp-1:1.2rem;--sp-2:2.4rem;--sp-3:4rem;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:16.5px/1.7 var(--testo);-webkit-font-smoothing:antialiased}
/* height:auto e' obbligatorio insieme a max-width. Le immagini portano scritte
   larghezza e altezza vere — servono a non far saltare la pagina mentre
   caricano — ma se il foglio riduce solo la larghezza, l'altezza resta quella
   dell'originale e l'immagine si stira in verticale. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.dentro{max-width:1160px;margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.1}
h1{font-size:clamp(2rem,4vw,2.9rem)}
h2{font-size:1.5rem}
h3{font-size:1.15rem;letter-spacing:-.015em}
p{margin:0}
.occhiello{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:.9rem}
.occhiello::before{content:"";width:22px;height:2px;background:var(--verde);border-radius:2px}
.grigio{color:var(--grigio)}
.manca{color:#9AA0C0;font-style:italic}
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 1.5rem;border-radius:100px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:.92rem;font-family:var(--testo);cursor:pointer}
.bottone.vuoto{background:transparent;color:var(--ink);border-color:var(--filo)}
.bottone.mini{height:40px;padding:0 1.1rem;font-size:.85rem}
.bottone.verde{background:var(--verde);border-color:var(--verde)}
.bottone svg{flex:none}
a.filo{border-bottom:1px solid var(--verde)}
/* testata */
.testata{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--filo)}
.testata .dentro{display:flex;align-items:center;gap:1.4rem;height:74px}
.testata img.marchio{height:44px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:1.8rem;font-size:.95rem;color:var(--grigio)}
.menu a.qui{color:var(--ink);font-weight:500}
/* «Area formativa», la pastiglia della testata: al passaggio del mouse
   diventa verde con la scritta bianca, come gli altri pulsanti che portano
   alla scuola (Simone, 20 ottobre 2026). In home, sopra la copertina, la
   stessa regola sta in home.css. */
.menu a.bottone.evidenza{transition:background .15s,border-color .15s,color .15s}
.menu a.bottone.evidenza:hover,.menu a.bottone.evidenza:focus-visible{background:var(--verde);border-color:var(--verde);color:#fff}
/* «Area soci», accanto ad «Area formativa» (31 ottobre 2026): bianca col
   bordo blu e il lucchetto; al passaggio diventa blu piena. Sopra la
   copertina della home ha i suoi colori, in home.css. */
.menu a.bottone.area-soci{background:#fff;color:var(--ink);border-color:var(--ink)}
.menu a.bottone.area-soci:hover,.menu a.bottone.area-soci:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
/* con due pastiglie le voci stanno strette fra 941 e 1200 px: niente a capo
   dentro una voce, e un po' meno spazio fra l'una e l'altra */
.menu a{white-space:nowrap}
@media(min-width:941px) and (max-width:1200px){
  .menu{gap:1.05rem;font-size:.9rem}
  .testata .dentro{gap:1rem}
  .menu a.bottone.mini{padding:0 .9rem}
}
/* intestazione di pagina */
/* Banda di testata: fotografia + velina blu, come la copertina di base-25 */
.capo{position:relative;background:var(--ink);color:#fff;padding:3.2rem 0;overflow:hidden}
.capo .sfondo{position:absolute;inset:0}
.capo .sfondo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) brightness(.8) contrast(1.35)}
.capo .sfondo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 68% 30%, rgba(18,20,58,.20) 0%, rgba(18,20,58,.72) 55%, rgba(18,20,58,.95) 100%),
    linear-gradient(180deg, rgba(18,20,58,.66), rgba(18,20,58,.30) 42%, rgba(18,20,58,.96))}
.capo .dentro{position:relative}
.briciole{font-size:.85rem;color:#9AA0C0;margin-bottom:1rem}
.briciole a:hover{color:#fff}
.capo h1{color:#fff}
.capo .sotto{color:#A9AECD;margin-top:.8rem;max-width:36rem}
.tessera{display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.12);border-radius:100px;padding:.3rem .8rem;margin-top:1.1rem}
.blocco{border:1px solid var(--filo);border-radius:var(--r);padding:1.6rem;margin-bottom:var(--sp-1)}
.blocco h3{margin-bottom:.9rem}
a.contatto:hover,a.contatto:focus-visible{border-color:var(--verde);background:rgba(0,164,78,.05)}
a.contatto:hover .segno{background:var(--verde);color:#fff}
a.contatto.grosso:hover{background:#00913F;border-color:#00913F}
a.contatto.grosso:hover .segno{background:rgba(255,255,255,.28)}
.stella-piena{fill:var(--oro);stroke:var(--oro)}
.stella-vuota{fill:none;stroke:var(--ink);opacity:.4}
.avviso{background:rgba(0,164,78,.08);border-radius:var(--r);padding:1.1rem 1.3rem;font-size:.92rem;margin-top:var(--sp-1)}
/* colonna destra */
aside .foto{border-radius:var(--r);border:1px solid var(--filo);overflow:hidden;margin-bottom:var(--sp-1)}
aside .didascalia{font-size:.8rem;color:var(--grigio);margin-top:.5rem}
.stella-piena{fill:var(--oro);stroke:var(--oro)}
.stella-vuota{fill:none;stroke:var(--ink);opacity:.45}
.leaflet-container{font:14px var(--testo)}
.piede{background:var(--ink);color:#9AA0C0;padding:2.8rem 0 2.4rem;font-size:.9rem;margin-top:var(--sp-3);text-align:center}
/* tutto al centro: le voci del menu separate da un filo, poi le pagine
   legali, poi la riga dell'Associazione. Sul telefono le voci vanno a capo. */
.piede nav{display:flex;flex-wrap:wrap;justify-content:center;row-gap:.5rem}
.piede nav a{padding:0 .95rem;line-height:1.15;border-left:1px solid rgba(255,255,255,.35)}
.piede nav a:first-child{border-left:none}
.piede-menu a{color:#D9D9D9;font:400 .95rem var(--testo)}
.piede nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.piede nav.legali{margin-top:1.1rem;font-size:.84rem}
.piede nav.legali a{border-left-color:rgba(255,255,255,.2)}
.piede-social{display:flex;justify-content:center;gap:.8rem;margin-top:1.3rem}
.piede-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);color:#D9D9D9}
.piede-social a:hover{background:#fff;border-color:#fff;color:var(--ink)}
.piede-riga{margin:1.6rem 0 0;font-size:.84rem;line-height:1.7}
/* i pezzi della riga non si spezzano a meta': vanno a capo interi */
.piede-riga span{display:inline-block}
.piede-riga span + span::before{content:"–";opacity:.55;padding:0 .55rem}
@media(max-width:700px){
  /* sul telefono niente fili che restano a inizio riga: bastano gli spazi */
  .piede nav{gap:.55rem 1.3rem}
  .piede nav a{border-left:none;padding:0}
  .piede-riga span{display:block}
  .piede-riga span + span::before{content:none}
  .piede-riga br{display:none}
}

/* testo che serve solo a chi usa un lettore di schermo: c'e' ma non si vede */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- mappa su richiesta ---------------------------------------------------
   I riquadri della mappa non si caricano finche' non li chiede qualcuno:
   la maggior parte dei visitatori guarda i contatti e chiama. Cosi' la
   pagina e' piu' leggera e non consumiamo un servizio che non stiamo usando. */
.mappa-chiusa{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.8rem;text-align:center;padding:1.6rem;overflow:hidden;
  background:var(--nebbia-2) url(/media/sito/mappa-segnaposto.svg) center/cover no-repeat;
  border:1px solid var(--filo);border-radius:var(--r)}
/* velina appena accennata: il disegno deve restare riconoscibile */
.mappa-chiusa::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14)}
/* il testo sta su un cartellino bianco, non su tutta l'immagine schiarita */
.mappa-chiusa .riquadro-testo{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:.7rem;background:rgba(255,255,255,.5);border-radius:14px;
  padding:1.3rem 1.6rem;min-width:15rem;max-width:22rem;box-shadow:0 6px 24px rgba(18,20,58,.10);
  backdrop-filter:blur(2px)}
.mappa-chiusa .dove{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:1.02rem;color:var(--ink)}
.mappa-chiusa small{color:var(--grigio);font-size:.82rem;line-height:1.45}
/* con la riga d'avviso il cartellino si allarga: non deve mai toccare i bordi */
.mappa-chiusa .riquadro-testo{max-width:min(22rem,calc(100% - 2.2rem));min-width:0}

/* avviso delle bozze: si vede solo a chi ha la chiave, non fa parte del sito */
.avviso-bozze{background:#FFF4D6;border-bottom:1px solid #E8D9A8;color:#6B4E00;
  font-size:.92rem;padding:.7rem 26px;text-align:center}
.avviso-bozze a{border-bottom:1px solid currentColor;margin-left:.4rem}
.bottega.in-bozza{border-style:dashed;background:#FFFCF3}
.bottega.in-bozza .numero{background:#FFE9A8;color:#6B4E00}

/* due viste della scheda: barra sempre visibile in basso a destra */
.due-viste{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:.3rem;
  background:var(--ink);border-radius:100px;padding:.4rem;
  box-shadow:0 10px 30px rgba(18,20,58,.3)}
.due-viste a{font:500 .82rem var(--testo);color:#9AA0C0;padding:.5rem 1rem;border-radius:100px}
.due-viste a:hover{color:#fff}
.due-viste a.qui{background:#fff;color:var(--ink)}
@media(max-width:560px){
  .due-viste{left:16px;right:16px;bottom:12px;justify-content:center}
  .due-viste a{flex:1;text-align:center;padding:.55rem .6rem}
}

/* ===== telefono: impianto comune ======================================== */
@media(max-width:700px){
  .dentro{padding:0 18px}
  .capo{padding:2rem 0}
  .capo .briciole{font-size:.8rem;margin-bottom:.7rem}
  .testata .dentro{height:64px;gap:1rem}
  .blocco{padding:1.2rem 1.25rem}
  .mappa-chiusa{padding:1.1rem}
}

/* --- i testi scritti dalla redazione con i segni degli articoli ----------
   Tutto quello che esce da testo_in_html() — paragrafi, titoletti, elenchi,
   citazioni, immagini — si veste qui, una volta sola. Prima stava in
   associazione.css come .ass-corpo; dal 25 settembre lo usano anche le
   schede delle iniziative, e due copie della stessa regola si separano. */
.testo-scritto p{font-size:1.05rem;line-height:1.75;margin:0 0 1.1rem}
.testo-scritto h2,.testo-scritto h3{font-size:1.2rem;margin:1.8rem 0 .6rem}
.testo-scritto ul,.testo-scritto ol{margin:0 0 1.2rem;padding-left:1.3rem}
.testo-scritto li{margin-bottom:.5rem;line-height:1.7}
.testo-scritto blockquote{margin:1.4rem 0;padding-left:1.1rem;border-left:3px solid var(--verde);
  color:var(--grigio);font-size:1.05rem}
.testo-scritto img{border-radius:var(--r);margin:1.2rem 0}
/* I collegamenti dentro un testo scritto con la barra si devono riconoscere
   da soli: arancione — lo stesso dei pallini della Newsletter — e
   sottolineati (deciso da Simone il 5 ottobre 2026). UNA regola sola per gli
   articoli del Blognews (.corpo) e per le iniziative, l'associazione e i
   contatti (.testo-scritto): prima stava in notizie.css e valeva solo là. */
.corpo,.testo-scritto{--collegamento:#E8830A;--collegamento-scuro:#C46E00}
.corpo a,.testo-scritto a{color:var(--collegamento);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em}
.corpo a:hover,.corpo a:focus-visible,.testo-scritto a:hover,.testo-scritto a:focus-visible{color:var(--collegamento-scuro)}

/* le briciole non devono spezzare la riga a meta' parola */
.briciole{overflow-wrap:anywhere}

/* ==========================================================================
   IL MENU SUL TELEFONO
   Prima le voci si nascondevano e basta: restava solo «Area formativa», e
   dal telefono non si raggiungevano ne' le calzolerie ne' il Blognews.
   ========================================================================== */
.apri-menu{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--filo);
  background:#fff;border-radius:10px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.apri-menu span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s,opacity .18s}
body.menu-aperto .apri-menu span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-aperto .apri-menu span:nth-child(2){opacity:0}
body.menu-aperto .apri-menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:940px){
  .apri-menu{display:flex}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-top:1px solid var(--filo);
    box-shadow:0 18px 30px -20px rgba(18,20,58,.35);
    max-height:0;overflow:hidden;transition:max-height .22s ease}
  body.menu-aperto .menu{max-height:70vh}
  .menu a{padding:.9rem 26px;border-bottom:1px solid var(--filo);font-size:1rem}
  .menu a.qui{color:var(--ink);background:var(--nebbia)}
  .menu a.evidenza{margin:.9rem 26px 1.1rem;border-radius:100px;justify-content:center}
  /* le due pastiglie una sotto l'altra: la seconda senza lo spazio in più */
  .menu a.evidenza + a.evidenza{margin-top:0}
  .testata .dentro{position:relative}
}

/* --- la freccia fissa che riporta in cima ---------------------------------
   Arancione, in basso a destra. Nata per gli articoli del Blognews, dal
   7 ottobre 2026 sta anche in home: per questo la regola è qui e non più in
   notizie.css. Quando farla vedere lo decide torna-sommario.js. */
.torna-su{position:fixed;right:1.2rem;bottom:1.2rem;z-index:25;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:#E8830A;color:#fff;border:2px solid #fff;
  box-shadow:0 6px 20px rgba(18,20,58,.22);transition:opacity .2s,transform .2s,background .15s}
.torna-su:hover,.torna-su:focus-visible{background:#C46E00;color:#fff}
.torna-su:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.torna-su.nascosto{opacity:0;transform:translateY(.6rem);pointer-events:none}
@media(max-width:700px){.torna-su{right:.9rem;bottom:.9rem}}
@media print{.torna-su{display:none}}

/* --- la (i) «Come funziona la ricerca» ------------------------------------
   Un cerchietto accanto al pulsante «Cerca» che apre un riquadro sotto la
   barra. È un <details>: si apre e si chiude anche senza programmi. Nata per
   il Blognews, dal 9 ottobre 2026 sta anche nelle Calzolerie: per questo è
   qui. Il modulo che la contiene deve avere position:relative. */
.cerca-aiuto summary{list-style:none;cursor:pointer;width:30px;height:30px;border-radius:50%;border:1px solid var(--filo);
  background:#fff;color:var(--grigio);display:flex;align-items:center;justify-content:center;
  font:italic 600 .95rem Georgia,serif;user-select:none}
.cerca-aiuto summary::-webkit-details-marker{display:none}
.cerca-aiuto summary:hover,.cerca-aiuto[open] summary{border-color:var(--verde);color:var(--ink)}
.cerca-aiuto summary:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.cerca-aiuto-testo{position:absolute;left:0;top:calc(100% + .6rem);z-index:30;width:min(34rem,100%);background:#fff;
  border:1px solid var(--filo);border-radius:14px;padding:1rem 1.2rem;box-shadow:0 14px 34px -14px rgba(18,20,58,.35);
  font-size:.9rem;line-height:1.55;color:var(--grigio)}
.cerca-aiuto-testo p{margin:0 0 .5rem;color:var(--ink)}
.cerca-aiuto-testo ul{margin:0;padding-left:1.1rem}
.cerca-aiuto-testo li{margin-bottom:.35rem}
@media(max-width:640px){.cerca-aiuto summary{width:44px;height:44px}}

/* --- i segni del testo, su ogni pagina (26 ottobre 2026) ----------------
   Le redazioni permettono allineamento, colore del testo e immagini a
   sinistra o a destra: qui valgono per ogni .testo-scritto del sito (Eventi,
   L'associazione, la formazione…), come già in notizie.css e newsletter.css. */
.testo-scritto{display:flow-root}
.testo-scritto .testo-centro{text-align:center}
.testo-scritto .testo-destra{text-align:right}
.testo-scritto figure{margin:1.6rem 0}
.testo-scritto figure img{margin:0;width:100%;height:auto}
.testo-scritto figcaption{font-size:.86rem;color:var(--grigio);text-align:center;margin-top:.5rem}
.testo-scritto figure.foto-sinistra{float:left;width:46%;margin:.35rem 1.6rem 1rem 0}
.testo-scritto figure.foto-destra{float:right;width:46%;margin:.35rem 0 1rem 1.6rem}
.testo-scritto figure.foto-sinistra figcaption,.testo-scritto figure.foto-destra figcaption{text-align:left}
.testo-scritto h2,.testo-scritto h3,.testo-scritto hr,.testo-scritto blockquote{clear:both}
.testo-scritto hr{border:none;border-top:1px solid var(--filo);margin:2rem 0}
.testo-scritto .colore-verde{color:#007337}
.testo-scritto .colore-oro{color:#96700F}
.testo-scritto .colore-rosso{color:#C8171A}
.testo-scritto .colore-blu{color:#1F4FBF}
@media(max-width:700px){
  .testo-scritto figure.foto-sinistra,.testo-scritto figure.foto-destra{float:none;width:auto;margin:1.4rem 0}
  .testo-scritto figure.foto-sinistra figcaption,.testo-scritto figure.foto-destra figcaption{text-align:center}
}