/* ============================================================================
   modulo.css — il modulo «Scrivi all'Associazione»

   Era scritto dentro newsletter.css, e per questo in fondo alla rivista si
   vedeva vestito mentre nella pagina dell'Associazione usciva nudo: stesso
   modulo, regole che quella pagina non caricava.

   Adesso sta qui — CONTORNO COMPRESO: il riquadro bianco, il titolo, la
   frase sotto. Le regole sono le stesse di prima, copiate senza toccarle: il
   modulo della newsletter non cambia di un pixel.

   Questo foglio lo carica OGNI pagina del sito, anche quelle senza modulo:
   pesa due chili di niente, e in cambio toglie di mezzo l'unico modo di
   sbagliare — dimenticarsi di caricarlo e ritrovarsi il modulo nudo.
   ============================================================================ */

.modulo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.modulo label{display:block;font-size:.85rem;color:var(--grigio)}
.modulo input,.modulo textarea{width:100%;margin-top:.3rem;font:1rem var(--testo);color:var(--ink);
  border:1px solid var(--filo);border-radius:10px;padding:.6rem .85rem;background:var(--carta)}
.modulo .lungo{grid-column:1 / -1}
.modulo textarea{resize:vertical;min-height:7rem}
.modulo .sotto{grid-column:1 / -1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* IL CAMPO TRAPPOLA. Non ha una regola da nessuna parte e finora si VEDEVA:
   in cima al modulo compariva un campo «Sito web» che nessuno deve compilare.
   Chi lo compilava si sentiva dire che il messaggio era partito, e invece
   veniva buttato. Si nasconde senza display:none, che i programmi leggono. */
.modulo .niente{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* La spunta del consenso: quadratino a sinistra, testo accanto. Senza questa
   regola prendeva la larghezza degli altri campi — il 100% — e finiva sopra
   la frase, in mezzo alla riga. */
.modulo .spunta{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.modulo .spunta input{width:auto;flex:none;margin:.15rem 0 0;padding:0}
.modulo .spunta span{font-size:.9rem;color:var(--grigio);line-height:1.5}
.modulo .spunta a{border-bottom:1px solid var(--ambra)}

/* --- quello che il modulo risponde ------------------------------------- */
.modulo-fatto{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1.2rem;
  background:#E8F6EE;border:1px solid #9FD9BA;border-radius:12px;padding:.9rem 1.1rem;
  color:#00602E;font-size:.95rem}
.modulo-fatto .segno{flex:none;width:22px;height:22px;border-radius:50%;background:var(--verde);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-top:.1rem}
.modulo-fatto b{display:block}
.modulo-fatto button{margin-left:auto;flex:none;border:1px solid #9FD9BA;background:#fff;
  color:#00602E;border-radius:100px;padding:.3rem 1rem;font:500 .85rem var(--testo);cursor:pointer}
.modulo-fatto button:hover{background:#00602E;color:#fff;border-color:#00602E}
.modulo-avviso{margin-bottom:.8rem;background:#FDECEC;border:1px solid #F0B4B4;border-radius:12px;
  padding:.8rem 1.1rem;color:#8A1113;font-size:.92rem}
.modulo-prova,.modulo-spento{margin-bottom:1rem;background:#FFF4D6;border:1px solid #E8D9A8;
  border-radius:12px;padding:.8rem 1.1rem;color:#6B4E00;font-size:.9rem;line-height:1.55}
.modulo-spento a{border-bottom:1px solid currentColor}
/* IL PULSANTE, SOLO QUELLO DEL MODULO.
   Questa regola arrivava da newsletter.css, dove «.bottone» senza altro
   davanti va bene: quel foglio lo carica solo la rivista. Qui no — modulo.css
   lo carica TUTTO il sito, e una regola generica avrebbe dipinto di arancio
   ogni pulsante di ogni pagina. Da qui in avanti vale la regola: in un foglio
   condiviso non si scrive mai una classe generica.

   Il colore è scritto in cifre e non preso da --ambra: l'arancio della rivista
   e quello del sito sono diversi, e il modulo deve essere identico ovunque.
   Fra i due si usa il più scuro, che è anche l'unico leggibile: bianco
   sull'arancio della rivista fa 2,7 a 1, su questo 4,2. */
.modulo .bottone{display:inline-flex;align-items:center;justify-content:center;height:48px;
  padding:0 1.6rem;border-radius:100px;background:#B36B00;color:#fff;border:1px solid #B36B00;
  font:500 .95rem var(--testo);cursor:pointer}
.modulo .bottone:hover{background:#8A5200;border-color:#8A5200}
.modulo .nota{font-size:.82rem;color:var(--grigio);margin:0}


@media(max-width:760px){
  .modulo{grid-template-columns:1fr}
}

/* --- il contorno: il riquadro bianco e il titolo --- */
.scrivici{padding:3.4rem 0}
/* Il raggio e la misura del titolo sono scritti in cifre, non presi dalle
   variabili della pagina: i due fogli — quello del sito e quello della
   rivista — hanno misure proprie, e il modulo finirebbe con gli angoli e il
   titolo diversi da una pagina all'altra. Il riferimento è il modulo della
   newsletter, e questi sono i suoi.
   Il titolo porta anche la sua classe perché una regola di pagina come
   «.ass-contatti h2» non gli cambi la misura sotto. */
.modulo-riquadro{background:#fff;border:1px solid var(--filo);border-radius:16px;
  padding:2.2rem 2.4rem}
.modulo-riquadro h2.modulo-titolo{font-size:1.5rem;line-height:1.2}
.modulo-riquadro .spiega{color:var(--grigio);margin:.6rem 0 1.6rem}