/* ═══════════════════════════════════════
   PAGINE LEGALI (privacy policy, cookie)
   Una colonna di testo lungo: niente griglie,
   solo una misura di riga leggibile e una
   gerarchia di titoli chiara.
   Stessa impaginazione della pagina press:
   fondo bianco, padding 100/40/120, titolo
   grande con --t-titolo.
═══════════════════════════════════════ */

.legale-section {
  background: var(--white);
  padding: 100px 40px 120px;
}

.legale-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.legale-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-titolo);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--dark);
  margin-bottom: 24px;
}

/* Data di ultimo aggiornamento, sotto al titolo */
.legale-data {
  font-size: var(--t-etichetta);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid-testo);
  margin-bottom: 64px;
}

/* Il testo prende tutta la larghezza del contenitore (1200px come nelle
   altre pagine). Qui c'era un limite a 75 caratteri per riga: tolto. */
.legale-testo {
  max-width: none;
}

.legale-testo p,
.legale-testo li {
  font-size: var(--t-testo);
  line-height: 1.65;
  color: var(--ink-testo);
}

.legale-testo p {
  margin-bottom: 20px;
}

/* Titolo di capitolo (le due informative) */
.legale-h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--dark);
  margin: 72px 0 24px;
  /* Arrivando da un'ancora (il "Cookie Policy" del footer punta a #cookie)
     il titolo si fermerebbe incollato al bordo alto della finestra: questo
     margine di scorrimento gli lascia aria sopra. */
  scroll-margin-top: 40px;
}

/* Il primo capitolo segue subito la data: niente stacco doppio */
.legale-testo > .legale-h2:first-child {
  margin-top: 0;
}

/* Paragrafo numerato */
.legale-h3 {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dark);
  margin: 40px 0 14px;
}

/* Sottotitolo interno a un paragrafo (es. "Dati di navigazione") */
.legale-h4 {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-testo);
  font-weight: 700;
  line-height: 1.4;
  color: var(--dark);
  margin: 28px 0 10px;
}

.legale-testo ul,
.legale-testo ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legale-testo li {
  margin-bottom: 8px;
}

.legale-testo li::marker {
  color: var(--mid-testo);
}

/* Elenco senza pallini, come i trattini dell'originale */
.legale-lista--trattini {
  list-style: none;
  padding-left: 0;
}

.legale-lista--trattini li {
  padding-left: 20px;
  position: relative;
}

.legale-lista--trattini li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--mid-testo);
}

.legale-testo a {
  color: var(--dark);
  text-decoration: none;
  /* Riga dipinta come background, cosi' resta sotto le parole anche a
     capo: stessa tecnica dei link servizio in homepage. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.legale-testo a:hover,
.legale-testo a:focus-visible {
  background-size: 0% 1px;
}

/* Blocco browser dell'informativa cookie: nome del browser e istruzioni */
.legale-browser {
  margin-top: 24px;
}

.legale-browser dt {
  font-weight: 700;
  color: var(--dark);
  font-size: var(--t-testo);
  margin-bottom: 6px;
}

.legale-browser dd {
  margin: 0 0 20px;
  font-size: var(--t-testo);
  line-height: 1.65;
  color: var(--ink-testo);
}

/* ── Mobile ──
   Stessa soglia del resto del sito (768px). La colonna e' gia' una
   sola: cambiano solo i margini e gli stacchi fra i capitoli. */
@media (max-width: 768px) {
  .legale-section {
    padding: 64px 24px 80px;
  }

  .legale-data {
    margin-bottom: 40px;
  }

  .legale-h2 {
    margin: 56px 0 20px;
  }

  .legale-h3 {
    margin: 32px 0 12px;
  }
}