/*
 * Stile delle pagine legali: Privacy Policy, Cookie Policy, Termini e
 * Condizioni.
 *
 * FOGLIO SEPARATO, e caricato SOLO su quelle tre pagine (vedi
 * inc/enqueue.php, dte_stile_legale). Tre ragioni:
 *
 * 1. input.css sfiora le tremila righe e serve tutto il sito. Queste regole
 *    valgono per tre pagine su venti: farle pesare su ogni visita della home
 *    sarebbe pagare sempre per quello che serve quasi mai.
 * 2. Sono regole tipografiche di un documento lungo, un genere a se': gerarchia
 *    di intestazioni fino al quarto livello, tabelle, numerazione delle
 *    sezioni. Non hanno niente da spartire con il resto del sito e mescolarle
 *    renderebbe piu' difficile capire dove mettere le mani.
 * 3. Un testo legale si modifica in momenti diversi dal resto del sito, spesso
 *    da persone diverse: tenere il suo stile in un file suo rende innocuo
 *    rimetterci mano.
 *
 * NON passa da Tailwind: e' CSS puro, cosi' non serve una seconda catena di
 * compilazione. Usa le variabili di marca gia' definite in style-built.css,
 * che viene caricato prima.
 *
 * Regola di contrasto: qui il fondo resta scuro, quindi l'oro si puo' usare
 * come testo (12,21:1 sul nero) ma il bronzo no (2,86:1). Vale l'inverso solo
 * sulle superfici avorio, che in queste pagine non ci sono.
 */

/* --------------------------------------------------------------------
   INTESTAZIONE DEL DOCUMENTO
   Che informativa e' e a che data. Non e' un dettaglio editoriale: chi
   legge deve poter capire se sta guardando la versione in vigore, e i tre
   documenti si rimandano l'un l'altro proprio a questa riga.
   -------------------------------------------------------------------- */

.prosa .documento-meta {
    margin-bottom: 2.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--filo);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--su-nero-tenue);
}

.prosa .documento-meta strong {
    color: var(--oro);
}

/* --------------------------------------------------------------------
   GERARCHIA DELLE INTESTAZIONI
   Il documento parte dall'H1 del template e scende fino al quarto livello.
   Senza una scala netta, quattromila parole diventano un muro unico: e'
   esattamente come uscivano prima di questo foglio.
   -------------------------------------------------------------------- */

.prosa h3 {
    margin-top: 2.8rem;
    margin-bottom: 0.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--filo);
    font-family: var(--display);
    font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--avorio);
}

/* La prima sezione non ha bisogno del filo sopra: sopra c'e' gia' la riga
   dell'intestazione con il suo. Senza questa regola i due fili finivano uno
   sotto l'altro con in mezzo il vuoto, come una sezione dimenticata. */
.prosa > h3:first-child,
.prosa .documento-meta + h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.prosa h4 {
    margin-top: 2rem;
    margin-bottom: 0.6rem;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--oro);
}

.prosa h5 {
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

/* --------------------------------------------------------------------
   TABELLE
   Nella privacy policy sono le due che appaiano ogni finalita' alla sua base
   giuridica e ogni dato al suo tempo di conservazione; nella cookie policy
   l'elenco di cosa viene salvato sul dispositivo. Sono il punto che un
   controllo formale guarda per primo, quindi devono restare leggibili anche
   su uno schermo stretto.
   -------------------------------------------------------------------- */

.prosa table {
    width: 100%;
    margin: 1.8rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
    /* La tabella scorre dentro il suo riquadro invece di allargare la pagina:
       tre colonne di testo non stanno in 360px, e senza questo la pagina
       intera scorrerebbe in orizzontale. */
    display: block;
    overflow-x: auto;
}

.prosa table th {
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid rgba(255, 185, 31, .45);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--oro);
    white-space: nowrap;
}

.prosa table td {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--filo);
    vertical-align: top;
    line-height: 1.55;
    color: var(--su-nero);
}

/* La prima colonna e' sempre il nome della cosa descritta: va distinta dal
   testo che la spiega. */
.prosa table td:first-child {
    font-weight: 600;
    color: #fff;
}

.prosa table tr:last-child td {
    border-bottom: 0;
}

/* --------------------------------------------------------------------
   RIQUADRI IN EVIDENZA
   Nel documento originale erano box colorati; qui sono citazioni, che e' il
   modo in cui il resto del tema segnala un blocco che sta a se'.
   -------------------------------------------------------------------- */

.prosa blockquote {
    margin: 1.8rem 0;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--oro);
    background: var(--fondo-alto);
    color: var(--su-nero);
    font-style: normal;
}

.prosa blockquote h5 {
    margin-top: 0;
    color: var(--oro);
}

.prosa blockquote > *:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------
   IL PULSANTE DELLE PREFERENZE COOKIE
   Sta dentro il testo della cookie policy, nel punto in cui si spiega come
   revocare il consenso. Deve sembrare un comando, non un link nel mezzo di
   un paragrafo: e' l'unico posto del documento in cui si agisce invece di
   leggere.
   -------------------------------------------------------------------- */

.prosa button[data-consent-action] {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--oro);
    border-radius: 2px;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--oro);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.prosa button[data-consent-action]:hover {
    background: var(--oro);
    /* Su fondo oro il testo torna nero: l'oro su oro non si legge, e l'avorio
       su oro sta a 1,48:1. */
    color: var(--inchiostro);
}

.prosa button[data-consent-action]:focus-visible {
    outline: 3px solid var(--oro);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------
   MISURE DI LETTURA
   Un documento legale si legge tutto d'un fiato o non si legge affatto: la
   riga va tenuta corta e l'interlinea generosa.
   -------------------------------------------------------------------- */

.prosa p,
.prosa li {
    line-height: 1.75;
}

.prosa ul,
.prosa ol {
    margin-top: 0.8rem;
}

/* I collegamenti dentro un testo lungo devono vedersi senza urlare: l'oro e'
   gia' definito in input.css, qui si allarga solo lo stacco della
   sottolineatura perche' con l'interlinea maggiore restava attaccata. */
.prosa a {
    text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .prosa h3 {
        margin-top: 2.2rem;
        padding-top: 1.2rem;
    }

    .prosa table {
        font-size: 0.85rem;
    }

    .prosa table th,
    .prosa table td {
        padding: 0.6rem 0.7rem;
    }
}

/* --------------------------------------------------------------------
   TABELLE IMPILABILI SU TELEFONO
   Una tabella a tre colonne dentro 343px non ci sta: scorre di lato, e la
   colonna che scompare e' l'ultima, cioe' proprio quella che spiega a cosa
   serve il cookie. Sotto i 640px ogni riga diventa una scheda e ogni cella
   si porta dietro il nome della sua colonna, altrimenti impilata sarebbe un
   elenco di valori senza sapere di cosa parlano.

   Serve la classe .tabella--impilabile e l'attributo data-etichetta sulle
   celle: le tabelle a due colonne non ne hanno bisogno e restano tabelle.
   -------------------------------------------------------------------- */

@media (max-width: 640px) {
    .prosa table.tabella--impilabile {
        display: block;
        overflow-x: visible;
    }

    .prosa table.tabella--impilabile thead,
    .prosa table.tabella--impilabile tr:first-child {
        /* L'intestazione sparisce: il suo contenuto ricompare come etichetta
           dentro ogni cella, dove serve davvero. */
        display: none;
    }

    .prosa table.tabella--impilabile tr {
        display: block;
        margin-bottom: 1.2rem;
        padding: 1rem 1.1rem;
        background: var(--fondo-alto);
        border: 1px solid var(--filo);
        border-radius: 4px;
    }

    .prosa table.tabella--impilabile td {
        display: block;
        padding: 0 0 0.7rem;
        border-bottom: 0;
    }

    .prosa table.tabella--impilabile td:last-child {
        padding-bottom: 0;
    }

    .prosa table.tabella--impilabile td::before {
        content: attr(data-etichetta);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--oro);
    }

    /* La prima colonna e' il nome tecnico del cookie: a schermo stretto va
       spezzato dove serve, altrimenti "wordpress_logged_in_..." allarga la
       scheda oltre il bordo. */
    .prosa table.tabella--impilabile td:first-child {
        overflow-wrap: anywhere;
    }
}