/* ============================================================
   Pagine pubbliche legali (termini, cancellazione dei dati)
   Stessi colori e caratteri delle pagine di accesso di Wamia.
   ============================================================ */
:root {
    --wamia-navy: #0b1f24;
    --wamia-green: #0ea886;
    --wamia-green-dark: #01705f;
    --wamia-cream: #f1f7f4;
    --wamia-ink: #0a1a1f;
    --wamia-muted: rgba(10, 26, 31, 0.62);
    --wamia-line: rgba(11, 31, 36, 0.12);
    --font-display: 'Montserrat', system-ui, sans-serif;
}

body.legale {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--wamia-cream);
    color: var(--wamia-ink);
}

/* --- Testata ------------------------------------------------ */
.legale-hero {
    background: linear-gradient(135deg, #06151a, #0b1f24 70%, #16343b);
    color: #fff;
    padding: 2.6rem 0 3.6rem;
}
.legale-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #a9d9ae;
}
.legale-hero h1 {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0.5rem 0 0.6rem;
}
.legale-hero p { color: rgba(255, 255, 255, 0.78); max-width: 640px; margin: 0; }
.legale-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.2rem; font-size: 0.84rem; }
.legale-meta span { color: rgba(255, 255, 255, 0.7); }
.legale-meta i { color: #a9d9ae; margin-right: 0.35rem; }

/* --- Corpo -------------------------------------------------- */
.legale-corpo { margin-top: -2.2rem; padding-bottom: 3rem; }

.legale-card {
    background: #fff; border: 1px solid var(--wamia-line); border-radius: 20px;
    box-shadow: 0 18px 40px -28px rgba(11, 31, 36, 0.45);
}

.legale-breve { padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; }
.legale-breve h2 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.9rem; }
.legale-breve ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .legale-breve ul { grid-template-columns: repeat(3, 1fr); } }
.legale-breve li { display: flex; gap: 0.65rem; font-size: 0.88rem; line-height: 1.45; }
.legale-breve li i { color: var(--wamia-green-dark); margin-top: 0.2rem; }

/* Indice: a lato e fisso sotto la navbar su schermi larghi, sopra al testo sui piccoli. */
.legale-indice { padding: 1.1rem 1.2rem; position: sticky; top: 84px; }
.legale-indice h2 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--wamia-muted); margin-bottom: 0.6rem; }
.legale-indice ol { list-style: none; padding: 0; margin: 0; counter-reset: voce; }
.legale-indice li a {
    display: block; padding: 0.32rem 0.55rem; border-radius: 8px;
    font-size: 0.86rem; color: var(--wamia-ink); text-decoration: none;
}
.legale-indice li a:hover, .legale-indice li a:focus-visible { background: rgba(14, 168, 134, 0.14); color: var(--wamia-green-dark); }
@media (max-width: 991.98px) { .legale-indice { position: static; margin-bottom: 1.4rem; } }

.legale-testo { padding: 1.8rem 2rem; }
@media (max-width: 575.98px) { .legale-testo { padding: 1.3rem 1.2rem; } }
.legale-testo section { scroll-margin-top: 90px; }
.legale-testo section + section { border-top: 1px solid var(--wamia-line); margin-top: 1.4rem; padding-top: 1.4rem; }
.legale-testo h2 {
    display: flex; align-items: baseline; gap: 0.6rem;
    font-size: 1.12rem; font-weight: 700; margin-bottom: 0.6rem;
}
.legale-testo h2 .numero {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    color: var(--wamia-green-dark); font-size: 1.25rem; min-width: 1.6rem;
}
.legale-testo h2 a.ancora { margin-left: auto; font-size: 0.8rem; color: var(--wamia-muted); opacity: 0; text-decoration: none; }
.legale-testo section:hover h2 a.ancora, .legale-testo h2 a.ancora:focus-visible { opacity: 1; }
.legale-testo p, .legale-testo li { font-size: 0.95rem; line-height: 1.65; color: rgba(10, 26, 31, 0.86); }
.legale-testo ul { padding-left: 1.2rem; }
.legale-testo a { color: var(--wamia-green-dark); }

.legale-piede { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; justify-content: space-between; align-items: center;
    margin-top: 1.6rem; font-size: 0.85rem; color: var(--wamia-muted); }
.legale-piede a { color: var(--wamia-green-dark); }
.btn-legale {
    border: 1px solid var(--wamia-line); background: #fff; border-radius: 999px;
    padding: 0.35rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--wamia-ink);
}
/* Tabella dei permessi (privacy §5) e nota in evidenza */
.legale-tabella { font-size: 0.88rem; margin: 1rem 0 1.2rem; }
.legale-tabella caption { caption-side: top; font-size: 0.78rem; color: var(--wamia-muted); padding-top: 0; }
.legale-tabella th { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wamia-muted);
    border-bottom-color: var(--wamia-line); }
.legale-tabella td { vertical-align: top; border-bottom-color: var(--wamia-line); line-height: 1.5; }
.legale-tabella td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) { .legale-tabella td:first-child { white-space: normal; } }
.legale-testo .legale-nota {
    background: rgba(14, 168, 134, 0.1); border-left: 3px solid var(--wamia-green);
    border-radius: 0 12px 12px 0; padding: 0.9rem 1.1rem; font-size: 0.9rem;
}

.btn-legale:hover { border-color: var(--wamia-green); color: var(--wamia-green-dark); }

/* ============================================================
   /meta/cancellazione-dati (classi cd-): le fonti dei dati coi loro loghi ufficiali, le schede «Cosa vuoi
   togliere?» e le strade per ciascuna fonte.
   ============================================================ */
/* Il gettone di una fonte: il logo su bianco, o il glifo ufficiale sul colore del marchio. */
.cd-gettone {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 11px;
    background: #fff; border: 1px solid var(--wamia-line); font-size: 1.1rem; color: var(--wamia-ink);
}
.cd-gettone img { width: 58%; height: 58%; object-fit: contain; }
.cd-gettone.is-facebook { background: #0866ff; border-color: #0866ff; color: #fff; }
.cd-gettone.is-whatsapp { background: #25d366; border-color: #25d366; color: #fff; font-size: 1.2rem; }
.cd-gettone.is-azienda { background: rgba(11, 31, 36, 0.06); color: #16343b; font-size: 0.95rem; }
.cd-pila img { width: 46%; height: 46%; }
.cd-pila img + img { margin-left: -2px; }

.cd-hero { padding-bottom: 4.2rem; }
.cd-fonti { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.3rem; }
.cd-fonti a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.8rem 0.25rem 0.28rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9);
    text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.cd-fonti a:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.cd-fonti a:focus-visible { outline: 2px solid #a9d9ae; outline-offset: 2px; }
.cd-fonti .cd-gettone { width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.85rem; border-color: transparent; }
.cd-fonti .cd-gettone.is-azienda { background: #fff; }

/* L'esito di una richiesta arrivata da Facebook. */
.cd-esito {
    display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.5rem; margin-bottom: 1.4rem;
    border-color: rgba(31, 122, 58, 0.35); background: linear-gradient(180deg, #f3fbf6, #fff);
}
.cd-esito h2 { font-size: 1.05rem; font-weight: 700; margin: 0.15rem 0 0.4rem; }
.cd-esito-ico { font-size: 1.7rem; color: #1f7a3a; line-height: 1; }
.cd-codice {
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.9rem; color: var(--wamia-ink);
    padding: 0.1rem 0.45rem; border-radius: 6px; background: rgba(11, 31, 36, 0.06); word-break: break-all;
}

/* Cosa vuoi togliere: una scheda per dato, con percorso, effetto e la scorciatoia nel profilo. */
.cd-breve { padding: 1.4rem 1.5rem 1.5rem; margin-bottom: 1.4rem; }
@media (max-width: 575.98px) { .cd-breve { padding: 1.15rem 1rem; } }
.cd-breve-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.cd-breve-testa h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0; }
.cd-subito {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; color: var(--wamia-green-dark); background: rgba(14, 168, 134, 0.12);
}
.cd-voci { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
@media (min-width: 768px) { .cd-voci { grid-template-columns: 1fr 1fr; } }
.cd-voce {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.8rem; align-content: start;
    padding: 0.95rem 1rem; border-radius: 16px; border: 1px solid var(--wamia-line); background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cd-voce:hover { border-color: rgba(14, 168, 134, 0.45); box-shadow: 0 10px 24px -18px rgba(11, 31, 36, 0.5); }
.cd-voce h3 { font-size: 0.95rem; font-weight: 700; margin: 0.25rem 0 0.3rem; }
.cd-voce-testo p { font-size: 0.85rem; line-height: 1.45; color: rgba(10, 26, 31, 0.72); margin: 0; }
.cd-voce-testo .cd-percorso {
    display: inline-block; margin-bottom: 0.4rem; padding: 0.2rem 0.5rem; border-radius: 8px;
    background: rgba(11, 31, 36, 0.045); font-size: 0.78rem; color: rgba(10, 26, 31, 0.8);
}
.cd-voce-azioni { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin-top: 0.35rem; }
.cd-apri {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; text-decoration: none; color: #fff; background: var(--wamia-navy);
    transition: background 0.15s ease;
}
.cd-apri:hover { background: #16343b; color: #fff; }
.cd-apri i { font-size: 0.7rem; }
.cd-dettagli { font-size: 0.8rem; font-weight: 600; color: var(--wamia-green-dark); }
.cd-voce.is-pericolo .cd-apri { background: #9b2f24; }
.cd-voce.is-pericolo .cd-apri:hover { background: #7f251c; }
.cd-apri:focus-visible, .cd-dettagli:focus-visible { outline: 2px solid var(--wamia-navy); outline-offset: 2px; }

/* Il testo: ogni sezione col logo della sua fonte, e le strade per toglierla una per riga, con da dove. */
.cd-testo h2 { align-items: center; gap: 0.7rem; }
.cd-testo h2 .cd-gettone { width: 2rem; height: 2rem; border-radius: 10px; font-size: 1rem; }
.cd-come { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wamia-muted); margin: 1rem 0 0.5rem; }
.legale-testo ul.cd-strade { list-style: none; padding: 0; margin: 0.6rem 0 0.9rem; display: grid; gap: 0.5rem; }
.cd-strade li {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.8rem; align-items: start;
    padding: 0.7rem 0.85rem; border-radius: 12px; background: rgba(11, 31, 36, 0.03);
}
.legale-testo .cd-strade li { font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 575.98px) { .cd-strade li { grid-template-columns: 1fr; gap: 0.3rem; } }
.cd-da {
    justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.12rem 0.55rem; border-radius: 999px; background: #fff; border: 1px solid var(--wamia-line);
    font-size: 0.74rem; font-weight: 700; color: var(--wamia-green-dark); white-space: nowrap;
}
.cd-da.is-meta { color: #0064e0; }

/* Eliminazione dell'account: i tre tempi, in fila. */
.legale-testo ol.cd-tempi { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.5rem; counter-reset: tempo; }
@media (min-width: 768px) { .legale-testo ol.cd-tempi { grid-template-columns: repeat(3, 1fr); } }
.cd-tempi li {
    position: relative; padding: 0.75rem 0.9rem 0.75rem 2.6rem; border-radius: 12px; border: 1px solid var(--wamia-line);
    counter-increment: tempo;
}
.cd-tempi li::before {
    content: counter(tempo); position: absolute; left: 0.8rem; top: 0.8rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700;
    background: rgba(14, 168, 134, 0.14); color: var(--wamia-green-dark);
}
.cd-tempi b { display: block; font-size: 0.88rem; }
.legale-testo .cd-tempi span { font-size: 0.84rem; color: var(--wamia-muted); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
    .cd-fonti a, .cd-voce, .cd-apri { transition: none; }
}

@media print {
    .wamia-nav, .legale-indice, .legale-azioni, .cd-fonti, .cd-voce-azioni { display: none !important; }
    .legale-hero { background: none; color: #000; padding: 0 0 1rem; }
    .legale-hero p, .legale-meta span { color: #333; }
    .legale-corpo { margin-top: 0; }
    .legale-card { box-shadow: none; border: none; }
}