/* ==========================================================================
   Pagina legale — Privacy & Cookie Policy
   Caricato SOLO da privacy.html, dopo style.css: qui stanno unicamente i
   blocchi che la landing non usa. Tutto il resto (container, badge, footer,
   focus, skip link) arriva gia da style.css, e per questo va caricato prima.

   Il documento e lungo e fatto quasi solo di testo: le scelte qui sotto
   servono a renderlo leggibile, non a decorarlo. Misura di riga contenuta,
   gerarchia dei titoli evidente, indice per saltare al punto che interessa.

   Indice
     1. Testata
     2. Corpo del documento
     3. Riquadri delle finalita
     4. Chiusura
     5. Media query
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Testata
   -------------------------------------------------------------------------- */

.legal-hero {
  padding-block: var(--space-3xl);
  color: var(--color-white);
  background-color: var(--color-blue);
}

/* Stessa misura e stesso centraggio di `.legal`: sono le due meta di una
   colonna sola, e devono partire dalla stessa verticale. Sta dentro
   `.container`, non lo sostituisce — cosi i margini laterali della pagina
   restano fuori dagli 800px, come nel corpo del documento. */
.legal-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: var(--container-text);
  margin-inline: auto;
}

/* Ritorno alla landing. E il primo elemento della testata perche chi arriva
   qui da un link del footer ha bisogno soprattutto di poter tornare indietro. */
.legal-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-footer-text);
  text-decoration: none;
}

.legal-hero__back:hover {
  color: var(--color-white);
}

.legal-hero__title {
  font-size: var(--text-5xl);
}

.legal-hero__subtitle {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

.legal-hero__meta {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
}

/* --------------------------------------------------------------------------
   2. Corpo del documento
   -------------------------------------------------------------------------- */

/* La misura di riga e il vincolo principale di una pagina di puro testo:
   oltre le ~90 battute l'occhio fatica a ritrovare l'inizio della riga
   successiva. `--container-text` tiene la colonna entro quella soglia. */
.legal {
  max-width: var(--container-text);
  margin-inline: auto;
}

.legal__section {
  margin-top: var(--space-2xl);
  /* Compensa l'ancora: senza, il titolo raggiunto dall'indice finirebbe
     appiccicato al bordo superiore della finestra. */
  scroll-margin-top: var(--space-xl);
}

.legal__section:first-child {
  margin-top: 0;
}

.legal__section h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-4xl);
  color: var(--color-blue);
}

.legal__section h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--text-2xl);
}

.legal__section p {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  /* Il documento contiene indirizzi e-mail e URL: senza questo, su schermo
     stretto uscirebbero dalla colonna invece di andare a capo. */
  overflow-wrap: break-word;
}

.legal__section ul {
  margin-top: var(--space-md);
  padding-left: var(--space-lg);
  list-style: disc;
}

.legal__section li {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
}

/* I riferimenti e-mail e ai siti esterni restano riconoscibili anche a
   colori spenti: la sottolineatura non e decorativa, e il secondo segnale
   richiesto da WCAG 1.4.1 oltre al colore. */
.legal a:not(.btn) {
  color: var(--color-green);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal a:not(.btn):hover {
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   3. Riquadri delle finalita
   -------------------------------------------------------------------------- */

/* Le tre finalita (navigazione, contatti, esercizio dei diritti) hanno tutte
   la stessa struttura: base giuridica, conservazione, natura del
   conferimento. Il riquadro rende visibile che sono voci parallele e non un
   discorso continuo. */
.legal__purpose {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid #dfe4ea;
  border-radius: var(--radius-sm);
}

/* Il titolo e il primo elemento del riquadro: lo stacco dall'alto lo da gia
   il padding, quindi va tolto il margine che tutti gli h3 del documento
   ereditano da `.legal__section h3` — sommandosi darebbero il doppio dello
   spazio degli altri lati. */
.legal__purpose-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-top: 0;
  font-size: var(--text-2xl);
}

/* La lettera identificativa della finalita (A, B, C) */
.legal__purpose-letter {
  flex-shrink: 0;
  color: var(--color-green);
}

/* Coppie voce/valore: `<dl>` e la struttura corretta: sono definizioni,
   non righe di tabella. La griglia a due colonne arriva da tablet in su. */
.legal__facts {
  margin-top: var(--space-md);
}

.legal__facts dt {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.legal__facts dd {
  margin-top: var(--space-xs);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* La prima coppia non ha nulla sopra da cui staccarsi: lo spazio lo porta
   gia la lista. Senza questo, sotto al titolo se ne accumulerebbe il doppio.
   `:first-child` basta a prevalere anche sui valori della media query, che
   non alza la specificita. */
.legal__facts dt:first-child,
.legal__facts dt:first-child + dd {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Chiusura
   -------------------------------------------------------------------------- */

.legal__updated {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  border-top: 1px solid #dfe4ea;
}

/* --------------------------------------------------------------------------
   5. Media query — tablet (>= 640px)
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .legal-hero {
    padding-block: var(--space-4xl);
  }

  .legal__purpose {
    padding: var(--space-xl);
  }

  /* Da qui la colonna e larga abbastanza per mettere voce e valore
     affiancati: il riquadro si legge a colpo d'occhio invece che riga a riga.
     Sotto questa soglia restano incolonnati, altrimenti il valore finirebbe
     compresso in pochi centimetri. */
  .legal__facts {
    display: grid;
    grid-template-columns: 13rem 1fr;
    column-gap: var(--space-lg);
  }

  .legal__facts dt,
  .legal__facts dd {
    margin-top: var(--space-md);
  }
}