/* ==========================================================================
   custom.css — quello che vale solo su dasettimo.it.

   style.css e' la struttura del sito; qui stanno le aggiunte che non fanno
   parte della copia dell'originale: le due pagine legali, che l'originale non
   aveva (i link in fondo portavano a due pagine inesistenti). Si carica dopo
   style.css, quindi vince sulle sue regole senza bisogno di !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pagine legali (privacy e cookie policy)
   -------------------------------------------------------------------------- */

/* Le pagine legali non hanno la foto d'apertura: il titolo deve stare sotto
   la testata, non dietro. */
.policy { padding-top: calc(var(--sec-pad) + var(--header-h)); }
.policy__corpo { max-width: 820px; }
.policy__corpo h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: 30px; }
.policy__corpo h2 { font-size: 26px; line-height: 1.3; margin: 44px 0 14px; }
.policy__corpo h3 { font-size: 20px; line-height: 1.35; margin: 28px 0 10px; }
.policy__corpo p,
.policy__corpo li { color: var(--ink); }
.policy__corpo ul { margin: 0 0 18px 20px; display: grid; gap: 7px; list-style: disc; }
.policy__corpo hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.policy__corpo a { color: var(--teal); text-decoration: underline; }
/* Le tabelle del documento sorgente diventano coppie etichetta-valore: in
   pagina si leggono, e si incollano, senza barre verticali. */
.policy__dl { margin: 0 0 20px; display: grid; gap: 10px; }
.policy__dl dt { font-weight: 600; color: var(--teal-deep); }
.policy__dl dd { margin: 0 0 6px; color: var(--ink); }

/* --------------------------------------------------------------------------
   Contrasto: dove il colore dell'originale non si stacca dal suo sfondo
   --------------------------------------------------------------------------
   Misurato con operativo/scripts/misura-contrasto-reale.mjs, che conta i
   pixel davvero dipinti dal glifo e non il colore dichiarato: a 13-15px con
   un bastoni stretto l'inchiostro è poco e il rapporto crolla anche quando i
   due colori sul contagocce sembrano a posto.
   -------------------------------------------------------------------------- */

/* Il sabbia #d9b99b è nato sul fondo ottanio. Sul fondo chiaro arriva a
   1,74:1, cioè si legge appena. Stessa tinta, stessa saturazione, più scura:
   solo fuori dalle sezioni scure. */
:root { --sand-dark: #8a5f33; }
.sec--light .eyebrow,
.sec--light2 .eyebrow,
.sec--white .eyebrow { color: var(--sand-dark); }

/* Il credito in fondo era sabbia su ottanio: 4,41 contro i 4,5 richiesti.
   Bianco, come il resto della riga. */
.site-footer__legal a { color: var(--white); }

/* Le voci di menu sono bianche su ottanio a 13px: l'inchiostro è poco e il
   misurato si ferma a 3,34. Un corpo appena più grande, e il grigio-bianco
   dello stato di riposo portato a pieno bianco. */
.nav__list a { font-size: 15px; color: rgba(255, 255, 255, .92); }

/* Le pagine legali non hanno la foto d'apertura: con la testata trasparente
   le voci bianche finivano su #f5f9f9, cioè invisibili (1,03:1). Lì la
   testata porta il suo fondo. */
.policy-page .site-header { background: var(--teal); }

/* Il velo sulla foto di sezione era .42: il testo bianco sopra misurava 2,9
   perché sotto c'era un verde chiaro (137,145,132). Portato a .62, che è il
   minimo con cui il paragrafo passa. */
.sec__foto::after { background: rgba(4, 48, 64, .62); }

/* La riga in fondo: il credito è dentro .site-footer__bar, non in un
   contenitore con la classe legal. */
.site-footer__bar a { color: var(--white); }

/* --------------------------------------------------------------------------
   Domande frequenti
   --------------------------------------------------------------------------
   Non c'erano sull'originale. Servono a chi arriva dalla ricerca con una
   domanda secca (orari, parcheggio, asporto) e a chi legge la pagina dentro
   una risposta generata: lì vince il testo che risponde, non quello che
   descrive. Aperte e chiuse col <details> del browser, nessuna libreria.
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 0; max-width: 880px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 46px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--teal);
  transition: color var(--dur) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }
/* Il segno è una croce che diventa un meno: ruota, non cambia. */
.faq summary::after,
.faq summary::before {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 16px; height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq summary::before { transform: translateY(-50%); }
.faq summary::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq details > p {
  margin: 0 0 24px;
  padding-right: 46px;
  color: var(--ink);
}
.faq details > p a { color: var(--teal); text-decoration: underline; }

/* Apertura morbida: l'altezza passa da 0 ad auto. Su Chrome basta il CSS; dove
   manca interpolate-size (Safari, Firefox) la anima js/faq-morbide.js.
   Dentro @supports: Safari conosce ::details-content ma non interpolate-size,
   e con block-size 0 la risposta restava chiusa sotto l'animazione del JS. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) {
    .faq details::details-content { transition: none; }
  }
}

/* Sulle sezioni scure la stessa cosa, coi colori girati. */
.sec--teal .faq details,
.sec--teal .faq details:first-of-type { border-color: var(--line-light); }
.sec--teal .faq summary { color: var(--white); }
.sec--teal .faq summary:hover { color: var(--sand); }
.sec--teal .faq details > p { color: rgba(255, 255, 255, .86); }

@media (max-width: 767px) {
  .faq summary { font-size: 18px; padding: 18px 38px 18px 0; }
  .faq details > p { padding-right: 0; }
}