/* ==================================================================
   SUITE GD PRO — le pagine legali
   ==================================================================

   Foglio SEPARATO da quello della vetrina, e non e' una duplicazione
   evitabile.

   vetrina.css non contiene solo tipografia: contiene regole che
   smontano il tema - nascondono intestazione, titolo, menu e pie' di
   pagina - perche' la vetrina rimpiazza la pagina. Una pagina legale
   invece deve restare dentro il sito: chi ci arriva dal pie' di pagina
   deve poter tornare indietro.

   Qui c'e' solo cio' che serve a far leggere un testo lungo.
   ================================================================== */

:root{
  /* Inchiostro da registro, carta, righe, e il verde dei bolli */
  --inchiostro:#16232F;
  --inchiostro-soft:#4A5A68;
  --carta:#FBFAF6;
  --carta-alt:#F3F1EA;
  --riga:#D6DBE0;
  --bollo:#1F6F5C;
  --bollo-chiaro:#E7F0ED;
  /* Tinta del solo blocco AI: piu' tenue di --bollo-chiaro, che le righe
     dei limiti in cima alla tabella usano gia'. Con la stessa tinta i due
     blocchi si sarebbero letti come la stessa cosa. */
  --ai-fondo:#F1F6F4;
  --ottone:#B08A2E;
  --max:1120px;
}

/* =========================================================================
 * LE PAGINE LEGALI
 *
 * SI REGGONO DA SOLE, SENZA IL CONTENITORE DELLA VETRINA.
 *
 * Prima erano scritte sotto .sgds-vetrina, per ereditarne caratteri e colori.
 * Ma quella classe fa molto altro in questo foglio: nasconde intestazione,
 * titolo, menu e pie' di pagina del tema e apre tutti i contenitori. Su una
 * landing e' voluto - rimpiazza la pagina - su una pagina legale la lasciava
 * nuda, senza nemmeno un modo per tornare al sito.
 *
 * Qui le regole stanno in piedi da sole. Le variabili di colore vivono su
 * :root, quindi restano disponibili anche fuori dal contenitore.
 *
 * E la pagina resta dentro il tema: intestazione, titolo e pie' restano al
 * loro posto. Cambia la tipografia del testo, non l'impianto del sito.
 * ====================================================================== */

.sgds-legale {
    /*
     * LA MISURA GIUSTA PER QUESTO DOCUMENTO, NON PER UN DOCUMENTO QUALSIASI.
     *
     * Prima erano 46rem, applicando la regola dei ~70 caratteri per riga: e'
     * la misura corretta per un testo discorsivo, oltre la quale l'occhio
     * fatica a ritrovare l'inizio della riga successiva.
     *
     * Ma questa pagina non e' solo discorsiva: contiene quattro tabelle, alcune
     * a tre colonne di testo. In 46rem le celle si comprimevano al punto che
     * una frase come "secondo le condizioni dell'account dello studio" andava a
     * capo tre volte, e la tabella - che dovrebbe rendere la cosa piu' chiara -
     * diventava la parte piu' faticosa da leggere.
     *
     * La regola era giusta, il documento no. Qui si allarga fino a dare aria
     * alle tabelle, e si compensa sul testo: il corpo un filo piu' grande e
     * l'interlinea generosa tengono la lettura comoda anche su righe piu'
     * lunghe.
     */
    max-width: 58rem;
    margin: 0 auto;
    padding: 8px 0 56px;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--inchiostro, #16232F);
    box-sizing: border-box;
}

/*
 * IL TESTO DISCORSIVO RESTA STRETTO, LE TABELLE NO.
 *
 * Allargare tutto avrebbe risolto le tabelle rovinando i paragrafi: righe da
 * novanta caratteri, che si leggono male anche se sembrano ordinate.
 *
 * Paragrafi ed elenchi restano quindi sulla misura da lettura; tabelle e
 * riquadri usano tutta la larghezza. La differenza non si nota - il testo e'
 * allineato a sinistra e le tabelle partono dallo stesso bordo - ma si legge.
 */
.sgds-legale > p,
.sgds-legale > ul,
.sgds-legale > ol {
    max-width: 44rem;
}

/*
 * IL CONTENITORE DEL TEMA SI APRE, MA SOLO QUI.
 *
 * I temi a blocchi impongono una larghezza al contenuto - spesso 620 pixel -
 * pensata per gli articoli del blog. Dentro quella, il massimo dichiarato qui
 * sopra non serve a niente: la pagina resta stretta comunque.
 *
 * Si apre quindi il contenitore, ma soltanto quando contiene DAVVERO una
 * pagina legale - :has() - e soltanto la larghezza: niente margini azzerati,
 * niente intestazioni nascoste, niente !important. Il resto del sito non se ne
 * accorge, e questa pagina resta una pagina del sito, non una landing.
 */
.entry-content:has(.sgds-legale),
.wp-block-post-content:has(.sgds-legale),
.page-content:has(.sgds-legale) {
    max-width: none;
}

.sgds-legale h2,
.sgds-legale h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--inchiostro, #16232F);
}

.sgds-legale h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 2.4em 0 .6em;
    padding-top: 1.2em;
    border-top: 1px solid var(--riga, #D6DBE0);
}

.sgds-legale h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.4em; }

.sgds-legale h3 {
    font-size: 1.1rem;
    margin: 1.8em 0 .4em;
}

.sgds-legale p { margin: 0 0 1.1em; }

.sgds-legale ul,
.sgds-legale ol { margin: 0 0 1.2em 1.3em; padding-left: .4em; }

.sgds-legale li { margin-bottom: .45em; }

/*
 * Il riquadro "In breve" in cima a ogni pagina: e' la sola parte che molti
 * leggeranno, quindi si stacca dal resto invece di confondersi col testo.
 */
.sgds-legale blockquote {
    margin: 0 0 2.4em;
    padding: 18px 22px;
    background: var(--carta-alt, #F3F1EA);
    border-left: 3px solid var(--bollo, #1F6F5C);
    border-radius: 0 8px 8px 0;
    font-style: normal;
}

.sgds-legale blockquote p:last-child { margin-bottom: 0; }

/*
 * LE TABELLE SCORRONO INVECE DI SCHIACCIARSI.
 *
 * Alcune hanno tre colonne di testo: su un telefono, comprimendole, le parole
 * si spezzano lettera per lettera. Meglio lasciarle scorrere in orizzontale.
 */
.sgds-legale table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.6em;
    font-size: .93rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sgds-legale th,
.sgds-legale td {
    text-align: left;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--riga, #D6DBE0);
    vertical-align: top;
}

.sgds-legale th {
    font-weight: 600;
    border-bottom: 2px solid var(--inchiostro, #16232F);
    white-space: nowrap;
}

.sgds-legale a { color: var(--bollo, #1F6F5C); }

.sgds-legale strong { font-weight: 600; }

/*
 * IL SEGNAPOSTO NON COMPILATO SI VEDE, E DEVE DAR FASTIDIO.
 *
 * Se un dato obbligatorio manca, il testo direbbe una frase incompleta che
 * nessuno nota finche' non la legge chi non deve. Meglio un rettangolo giallo
 * evidente: brutto e' esattamente cio' che serve perche' venga compilato.
 */
.sgds-legale .sgds-legale-manca {
    background: #fef08a;
    color: #713f12;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .9em;
}

@media (max-width: 720px) {
    .sgds-legale { font-size: .96rem; }
    .sgds-legale h2 { font-size: 1.25rem; }
}

/* ==================================================================
   BARRA E PIEDE: NON STANNO PIU' QUI.
   ==================================================================

   C'erano regole proprie per una barra e un pie' scritti apposta per
   queste pagine. Somigliavano a quelli della vetrina senza esserlo, e
   due barre quasi uguali sono peggio di due diverse: chi passa dalla
   home a "Privacy" nota lo scarto senza saper dire cosa sia cambiato.

   Ora queste pagine usano lo stesso guscio della home - stesso
   contenitore .sgds-vetrina, stessa barra, stesso pie' - quindi le
   regole arrivano da vetrina.css e qui non servono. Riscriverle
   significherebbe averne due copie che prima o poi divergono.

   Qui resta solo cio' che riguarda il TESTO lungo, che la vetrina non
   ha e non puo' sapere come trattare.
   ================================================================== */

/*
 * Il contenitore della vetrina impagina a larghezza piena; il testo di una
 * pagina legale no. La colonna resta stretta e centrata dentro quella.
 */
.sgds-vetrina .sgds-legale {
    margin: 0 auto;
    padding: 40px 0 64px;
}