/* Pagine pubbliche della corsia «cassa» (docs/specifiche/cassa.md §3.1, §9.3): le pagine legali e quelle rifatte da
   WordPress (.pg-legale), le fisarmoniche, il modulo contatti, il video al clic (/scienza) e il pannello dei messaggi.
   Colori e misure solo dalle variabili di ev.css; il disegno delle pagine statiche di oggi sta in css/pagine/<famiglia>.css. */

/* ---------- pagine legali e WordPress ---------- */
.pg-legale {
  max-width: 46rem; margin: 0 auto; padding: calc(var(--testata) + clamp(2rem, 6vw, 4rem)) 20px 4.5rem;
  color: var(--inchiostro); overflow-wrap: anywhere;
}
.pg-legale h1, .pg-legale .titolo-pagina {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); line-height: 1.1; margin: 0 0 1.75rem; max-width: 18em;
}
.pg-legale h2 { font-size: 1.45rem; margin: 2.5rem 0 1rem; }
.pg-legale h3 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.pg-legale h4, .pg-legale h5, .pg-legale h6 { font-family: var(--testo); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.pg-legale p, .pg-legale li { color: #D9D4EA; max-width: none; }
.pg-legale p:empty { display: none; }
.pg-legale ul, .pg-legale ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.pg-legale li { margin-bottom: 0.4rem; }
.pg-legale a { color: var(--lavanda); }
.pg-legale strong, .pg-legale b { color: var(--inchiostro); }
.pg-legale table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9rem; display: block; overflow-x: auto; }
.pg-legale th, .pg-legale td { border: 1px solid var(--linea-forte); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.pg-legale th { background: var(--superficie); }
.pg-legale img, .pg-legale figure img { max-width: 100%; height: auto; border-radius: var(--r-medio); }
.pg-legale figure, .pg-legale .immagine { margin: 1.5rem 0; }
.pg-legale hr, .pg-legale .separatore { border: 0; border-top: 1px solid var(--linea); margin: 2rem 0; }
.pg-legale .azioni-wp { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.pg-legale .pulsante { text-decoration: none; }
.pg-legale .fisarmoniche { margin: 1.5rem 0; border-top: 1px solid var(--linea); }

/* ---------- «Le tue scelte» in testa a cookie e privacy policy ---------- */
.pg-legale .data { color: var(--tenue); font-size: 0.9rem; }
.pg-legale .scelte { margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--r-grande); background: var(--superficie); border: 1px solid var(--linea-forte); }
.pg-legale .scelte h2 { margin-top: 0; }
.pg-legale .scelte button, .pg-legale button[data-ev-consenso] {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--inchiostro); border: 1px solid var(--linea-forte); font: 600 0.95rem/1 var(--testo);
}
.pg-legale .scelte button:hover, .pg-legale button[data-ev-consenso]:hover { border-color: var(--lavanda); background: rgba(196, 181, 253, 0.06); }

/* ---------- cookie del sito nuovo nella cookie policy (R-36): tabella al computer, schede al telefono ---------- */
.cookie-del-sito { margin: 2rem 0 2.5rem; padding: 1.25rem 1.25rem 0.5rem; border: 1px solid var(--linea-forte); border-radius: var(--r-grande); background: var(--superficie); }
.cookie-del-sito h2 { margin-top: 0; }
.pg-legale .cookie-del-sito table { display: table; font-size: 0.88rem; }
.cookie-del-sito code { font-size: 0.85rem; color: var(--lavanda); white-space: normal; }
@media (max-width: 40rem) {
  .pg-legale .cookie-del-sito table, .cookie-del-sito tbody, .cookie-del-sito tr, .cookie-del-sito td { display: block; width: 100%; }
  .cookie-del-sito thead { display: none; }
  .cookie-del-sito tr { border: 1px solid var(--linea-forte); border-radius: var(--r-medio); padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
  .pg-legale .cookie-del-sito td { border: 0; padding: 0.25rem 0; }
  .cookie-del-sito td::before { content: attr(data-etichetta); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tenue); }
}

/* ---------- fisarmoniche (le «toggle» di oggi) ---------- */
.fisarmonica { border-bottom: 1px solid var(--linea); }
.fisarmonica > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 0.85rem 0;
}
.fisarmonica > summary::-webkit-details-marker { display: none; }
.fisarmonica > summary h3, .fisarmonica > summary h2 { font-size: 1.05rem; margin: 0; font-family: var(--testo); font-weight: 600; }
.fisarmonica > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--lavanda); border-bottom: 2px solid var(--lavanda);
  transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 4px;
}
.fisarmonica[open] > summary::after { transform: rotate(-135deg); }
.fisarmonica-testo { padding: 0 0 1.1rem; }
.fisarmonica-testo > :last-child { margin-bottom: 0; }

/* ---------- modulo contatti (R-39) ---------- */
.contatti { margin: 2.5rem 0 1rem; padding: 1.75rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-grande); }
.contatti h2 { margin-top: 0; }
.modulo-contatti textarea { min-height: 9rem; resize: vertical; }
.modulo-contatti .pulsante { width: 100%; min-height: 52px; border-radius: 999px; background: var(--sfumatura); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.esito-contatti { font-size: 1.1rem; color: var(--verde); margin: 0; }
.avviso-contatti { color: var(--rosso); }
@media (min-width: 40rem) { .modulo-contatti .pulsante { width: auto; } }

/* ---------- video esterno al clic (/scienza): l'iframe nasce solo dopo il tocco ---------- */
.video-esterno { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-medio); overflow: hidden; background: var(--superficie-2); }
.video-esterno iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-esterno [data-video-avvia] {
  position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.28), transparent 60%), var(--superficie-2);
  color: var(--inchiostro); border: 0; cursor: pointer; font: 600 1rem/1.2 var(--testo);
}
.video-esterno [data-video-avvia]::before {
  content: ""; width: 64px; height: 64px; border-radius: 50%; background: var(--sfumatura) center / 22px no-repeat;
  box-shadow: var(--ombra-viola);
  -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); mask: radial-gradient(circle, #000 70%, transparent 71%);
}

/* ---------- pannello: messaggi del modulo contatti ---------- */
.messaggi-pannello .messaggio { border: 1px solid var(--linea); border-radius: var(--r-medio); padding: 1rem 1.1rem; margin: 0 0 0.9rem; background: var(--superficie); }
.messaggi-pannello .messaggio.da-leggere { border-color: rgba(168, 85, 247, 0.55); }
.messaggi-pannello .messaggio-testa { font-size: 0.92rem; margin-bottom: 0.5rem; }
.messaggi-pannello .messaggio-testo { white-space: pre-wrap; max-width: none; }
.messaggi-pannello .azioni form { display: inline; }

/* ---------- comparse allo scorrimento: solo con JavaScript e senza movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) { .anima .reveal, .anima .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } }