/* ==========================================================================
   LEGAL PAGE — stile per pagine di testo legale (Privacy Policy, Cookie
   Policy, Termini & Condizioni). Caricato solo sulle pagine che lo
   richiedono (via @section Head dalla cshtml), non globalmente dal Layout.

   Pattern: container ristretto per line-length ottimale (~50rem), header
   con label/h1/subtitle, blocchi numerati con h2 sectioning + h3 di
   sottosezione. Ripristina list-style per ul/ol (base.css rimuove i marker
   liste a livello globale).
   ========================================================================== */

/* Container variant per testi long-form: line-length ~70-80 ch (50rem) */
.container--narrow {
    max-width: 50rem;
}

.section--legal {
    padding-block: var(--space-16) var(--space-20);
}

/* Article wrapper — typography defaults per testo legale */
.legal-content {
    color: var(--color-ink-600);
    line-height: var(--lh-relaxed);
    font-size: var(--fs-md);
}

/* ---------- Header documento (label brand + titolo + sottotitolo) ---------- */
.privacy-header {
    text-align: center;
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-line-200);
}

.privacy-header .label {
    display: block;
    color: var(--color-brand-text);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.privacy-header h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-light);
    font-size: var(--fs-3xl);
    color: var(--color-ink-800);
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .privacy-header h1 {
        font-size: var(--fs-4xl);
    }
}

.privacy-header > p {
    color: var(--color-ink-500);
    font-size: var(--fs-sm);
    max-width: 36rem;
    margin-inline: auto;
}

/* ---------- Blocchi numerati ---------- */
.privacy-block {
    margin-bottom: var(--space-12);
}

.privacy-block:last-child {
    margin-bottom: 0;
}

.privacy-block h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xl);
    color: var(--color-ink-800);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-5);
    /* scroll-margin per ancore #titolare, #cookie, ecc.: senza questo
       l'header sticky coprirebbe il titolo quando si naviga via fragment. */
    scroll-margin-top: var(--space-20);
}

@media (min-width: 768px) {
    .privacy-block h2 {
        font-size: var(--fs-2xl);
    }
}

.privacy-block h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: var(--fs-lg);
    color: var(--color-ink-800);
    margin-block: var(--space-8) var(--space-3);
}

.privacy-block p {
    margin-bottom: var(--space-4);
}

.privacy-block p:last-child {
    margin-bottom: 0;
}

/* Liste — ripristino marker (base.css applica list-style:none globale) */
.privacy-block ul,
.privacy-block ol {
    margin-block: var(--space-4);
    padding-left: var(--space-6);
}

.privacy-block ul {
    list-style: disc outside;
}

.privacy-block ol {
    list-style: decimal outside;
}

.privacy-block ol[type="a"] {
    list-style-type: lower-alpha;
}

.privacy-block li {
    margin-bottom: var(--space-3);
}

.privacy-block li:last-child {
    margin-bottom: 0;
}

/* ---------- Link inline ---------- */
.privacy-block a {
    color: var(--color-brand-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* URL lunghi (link cookie/Garante) non devono rompere il layout su mobile */
    overflow-wrap: anywhere;
}

.privacy-block a:hover,
.privacy-block a:focus-visible {
    color: var(--color-brand-text-hover);
}

/* ---------- Enfasi tipografica ---------- */
.privacy-block strong {
    color: var(--color-ink-800);
    font-weight: var(--fw-semibold);
}

.privacy-block em {
    font-style: italic;
}

/* ---------- Inventario cookie (tabella cookie policy) ----------
   Wrapper con overflow-x per evitare che la tabella a 4 colonne rompa
   il layout su mobile. La table mantiene min-width per garantire la
   leggibilita' delle colonne anche dentro al wrapper scrollabile. */
.cookie-table-wrapper {
    margin-block: var(--space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-line-200);
}

.cookie-table {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    color: var(--color-ink-600);
}

/* Header di sezione (Necessari, Analitici, Marketing): full-width banner */
.cookie-table__group {
    background-color: var(--color-bg-warm);
    color: var(--color-ink-800);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-3) var(--space-4);
}

/* Riga di header colonne (Nome, Definizione, Durata, Tipo) */
.cookie-table thead tr:nth-child(2) th {
    background-color: var(--color-bg-warm-dark);
    color: var(--color-ink-800);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-block: 1px solid var(--color-line-200);
}

.cookie-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-line-100);
    vertical-align: top;
    line-height: var(--lh-snug);
}

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

/* Riga "vuota" per sezioni placeholder (Analitici / Marketing futuri) */
.cookie-table__empty {
    text-align: center;
    color: var(--color-ink-500);
    padding-block: var(--space-5);
}