/* ─────────────────────────────────────────────────────────────
   legal.css — stile condiviso delle pagine legali di FiBunnyCci
   (privacy, termini, note legali, crediti).

   Obiettivi:
   - leggibile su smartphone senza zoom (mobile-first)
   - contrasto conforme WCAG 2.1 AA
   - navigabile da tastiera con focus SEMPRE visibile
   - rispetta prefers-reduced-motion
   - nessuna risorsa esterna: font self-hosted, zero richieste a terzi
   ───────────────────────────────────────────────────────────── */

/* Font self-hosted — stesso file usato dal gioco, nessuna
   richiesta a fonts.googleapis.com / fonts.gstatic.com. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../assets/fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../assets/fonts/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg:        #14142a;
    --surface:   #1e1e3c;
    --surface-2: #262649;
    --text:      #ececf5;   /* su --bg ≈ 14.7:1 */
    --text-dim:  #b9b9d0;   /* su --bg ≈ 8.6:1  */
    --accent:    #9ecdff;   /* link su --bg ≈ 9.4:1 */
    --accent-2:  #ffd68a;
    --warn-bg:   #3a2f14;
    --warn-bd:   #b98b20;
    --border:    #37375f;
    --radius:    12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* 17px base: leggibile su schermi piccoli senza zoom */
    font-size: 17px;
    line-height: 1.65;
    /* rispetta il notch / barre di sistema su iPhone */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Skip link: primo elemento focusabile, per screen reader/tastiera ─── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #10102a;
    padding: 12px 18px;
    font-weight: 700;
    border-radius: 0 0 var(--radius) 0;
    z-index: 100;
}
.skip-link:focus {
    left: 0;
}

.wrap {
    max-width: 44rem;         /* ~70 caratteri per riga: ottimale per la lettura */
    margin: 0 auto;
    padding: 24px 20px 64px;
}

/* ─── Intestazione ─── */
.doc-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 28px;
}

.back-link {
    display: inline-block;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 0.95rem;
}

h1 {
    font-size: 1.85rem;
    line-height: 1.25;
    font-weight: 900;
    margin: 0 0 10px;
}

h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 40px 0 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--accent-2);
}
/* la prima h2 dopo l'intestazione non ha bisogno del filetto */
.doc-head + h2 { border-top: none; margin-top: 8px; padding-top: 0; }

h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 26px 0 8px;
}

p, li { margin: 0 0 14px; }

ul, ol { padding-left: 1.35em; margin: 0 0 16px; }
li { margin-bottom: 8px; }

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
a:hover { color: #ffffff; }

/* Focus visibile e ad alto contrasto su OGNI elemento interattivo */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.skip-link:focus-visible {
    outline: 3px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: 4px;
}

.meta {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0;
}

/* ─── Riquadri ─── */
.box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 0 0 20px;
}
.box > :last-child { margin-bottom: 0; }

.box-key {                      /* messaggio chiave, in evidenza */
    background: var(--surface-2);
    border-left: 4px solid var(--accent);
}

/* Segnaposto da compilare e punti da verificare: devono saltare all'occhio */
.todo {
    background: var(--warn-bg);
    border: 1px dashed var(--accent-2);
    color: #ffe9bd;
    border-radius: 6px;
    padding: 2px 7px;
    font-weight: 700;
    font-size: 0.92em;
    /* non spezzare il segnaposto a metà su schermi stretti */
    display: inline-block;
}

/* ─── Tabelle: scorrono da sole, il body non scorre mai in orizzontale ─── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;          /* sotto questa soglia si attiva lo scroll */
    font-size: 0.9rem;
}
caption {
    text-align: left;
    padding: 12px 14px;
    color: var(--text-dim);
    font-size: 0.88rem;
}
th, td {
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
th {
    background: var(--surface-2);
    font-weight: 800;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    word-break: break-word;
}

/* ─── Indice ─── */
.toc ol { margin: 0; }
.toc a { font-weight: 600; }

/* ─── Piè di pagina delle pagine legali ─── */
.doc-foot {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0.9rem;
}
.doc-foot nav a { margin-right: 16px; display: inline-block; margin-bottom: 6px; }

/* ─── Touch target ≥ 44×44 px su mobile (WCAG 2.5.5) ─── */
@media (max-width: 640px) {
    .doc-foot nav a,
    .back-link,
    .toc a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
    h1 { font-size: 1.55rem; }
    .wrap { padding: 18px 16px 56px; }
}

/* ─── Utenti che preferiscono meno animazioni ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Stampa: pagine legali stampabili in bianco e nero ─── */
@media print {
    body { background: #fff; color: #000; font-size: 11pt; }
    .skip-link, .back-link, .doc-foot nav { display: none; }
    a { color: #000; }
    .box, table, .table-scroll { border-color: #999; }
    h2 { color: #000; }
}

/* ══════════════════════════════════════════════════════════════════
   AVVISO SVILUPPO — DA RIMUOVERE AL LANCIO
   Per rimuoverlo: togli questo blocco e i <p class="dev-notice"> dalle
   quattro pagine legali. Cerca "AVVISO SVILUPPO" nel progetto.
   ══════════════════════════════════════════════════════════════════ */
.dev-notice {
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: rgba(255, 176, 32, 0.14);
    border: 1px solid rgba(255, 200, 90, 0.5);
    color: #ffdf9e;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}
.dev-notice strong { color: #ffc447; }

@media print {
    .dev-notice { border-color: #999; color: #000; background: none; }
    .dev-notice strong { color: #000; }
}