/* ==========================================================================
   LE PAGINE LEGALI
   --------------------------------------------------------------------------
   Privacy, cookie, termini, avvertenze, contatti. Un impianto solo: hanno la
   stessa forma e differiscono solo nel testo.

   ── PERCHE' NON SOMIGLIANO AL RESTO DEL SITO ──────────────────────────────
   Il resto di Kefero è scuro, centrato e cinematografico. Un documento legale
   no: si legge da fermi, riga per riga, e a volte si cerca una frase precisa
   per portarla a un avvocato. Colonna stretta, testo allineato a sinistra,
   righe alte, titoli che si distinguono da lontano. Un documento che si legge
   male è un documento che nessuno legge, e uno che nessuno legge non tutela
   nessuno.
   ========================================================================== */

.legale {
    max-width: 44rem;
    margin: var(--space-8) auto var(--space-9);
    padding: 0 var(--space-5);
    color: var(--text);
}

.legale__testa {
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--void-600);
}

.legale__titolo {
    margin: 0 0 var(--space-3);
    font-family: var(--type-family-display);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
}

.legale__sommario {
    margin: 0 0 var(--space-4);
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* La data dice quanto è vecchio ciò che si sta leggendo. Su un documento
   legale è la prima cosa che un avvocato guarda. */
.legale__data {
    margin: 0;
    color: var(--text-faint, var(--text-dim));
    font-family: var(--type-family-utility);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

/* L'avviso di lingua: si nota, ma non grida. È un'informazione, non un
   errore. */
.legale__avviso {
    margin: 0 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--accent-dim);
    border-radius: 0 0.4rem 0.4rem 0;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.55;
}

.legale__sezione {
    margin-bottom: var(--space-7);
}

.legale__sezione h2 {
    margin: 0 0 var(--space-3);
    font-family: var(--type-family-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--accent);
}

/* ── IL CORPO DEL TESTO ────────────────────────────────────────────────────
   Interlinea 1,75 e non 1,5: questi paragrafi sono più lunghi di qualunque
   altro sul sito, e una riga alta è ciò che permette all'occhio di ritrovare
   l'inizio di quella dopo. */
.legale__sezione p,
.legale__sezione li {
    color: var(--text-dim);
    font-size: 0.97rem;
    line-height: 1.75;
}

.legale__sezione p {
    margin: 0 0 var(--space-3);
}

.legale__sezione ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.2rem;
}

.legale__sezione li {
    margin-bottom: 0.6rem;
}

.legale__sezione a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* I nomi dei cookie: a spaziatura fissa, perché sono stringhe da confrontare
   con quello che si vede nelle impostazioni del browser. */
.legale code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-family: var(--type-family-utility);
    font-size: 0.88em;
    color: var(--text);
}

/* ── LE ALTRE PAGINE ───────────────────────────────────────────────────────
   Chi legge la privacy sta spesso cercando anche i contatti. Stanno qui, in
   fondo al documento, non solo nel piede. */
.legale__altre {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--void-600);
}

.legale__altre-eti {
    margin: 0 0 var(--space-3);
    color: var(--text-faint, var(--text-dim));
    font-family: var(--type-family-utility);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legale__altre ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legale__altre a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--void-600);
    padding-bottom: 2px;
}

.legale__altre a:hover,
.legale__altre a:focus-visible {
    color: var(--accent);
    border-color: var(--accent-dim);
}