/**
 * Socialdemocrazia SD — Design System
 * Unica fonte dei colori del portale (sito istituzionale + Giornale).
 * Per cambiare palette o tema: si toccano SOLO questi token.
 * Portabile: le classi .sd-* e i token --sd-* si riusano as-is in React/.NET.
 */

/* ==========================================================================
   TOKEN — TEMA CHIARO (predefinito)
   ========================================================================== */
:root {
    /* Marca */
    --sd-blue-dark: #0e2945;
    --sd-blue-darkest: #081a2d;
    --sd-blue-navy: #173b61;
    --sd-blue-accent: #1e40af;
    --sd-red: #b3202d;
    --sd-red-hover: #991b1b;
    --sd-red-soft: #ffb3bc;
    --sd-red-text: #b3202d;
    --sd-blue-mid: #1e5a9e;
    --sd-white: #ffffff;

    /* Sfondi */
    --sd-bg-body: #ffffff;
    --sd-bg-alt: #f8fafc;
    --sd-bg-soft: #f1f5f9;
    --sd-bg-card: #ffffff;
    --sd-bg-warm: #fdf2f2;
    --sd-bg-warn: #fffbeb;
    --sd-bg-info: #e0f2fe;
    --sd-bg-ok: #dcfce7;
    --sd-bg-danger: #fee2e2;

    /* Testi */
    --sd-text-main: #0f172a;
    --sd-text-body: #334155;
    --sd-text-body2: #475569;
    --sd-text-muted: #64748b;
    --sd-text-light: #6d7f95;
    --sd-text-on-dark: #cbd5e1;
    --sd-text-on-dark-2: #94a3b8;
    --sd-text-on-dark-3: #a5c6e8;
    --sd-heading: #0e2945;
    --sd-link: #173b61;

    /* Esiti leggibili su fondo scuro (tessera, testate): versioni chiare fisse */
    --sd-ok-on-dark: #7bd39a;
    --sd-red-on-dark: #ff8f9b;

    /* Bordi */
    --sd-border: #e2e8f0;
    --sd-border-strong: #cbd5e1;
    --sd-border-subtle: #edf2f7;
    --sd-border-danger: #f3c1c5;
    --sd-ok-text: #166534;
    --sd-info-text: #0369a1;
    --sd-warn-text: #b26a00;
    --sd-border-ok: #bde3cd;

    /* Tipografia */
    --sd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sd-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
}

/* ==========================================================================
   TOKEN — TEMA SCURO (si attiva con html.tema-scuro)
   ========================================================================== */
html.tema-scuro {
    --sd-bg-body: #0f1720;
    --sd-bg-alt: #141d2a;
    --sd-bg-soft: #182234;
    --sd-bg-card: #1a2332;
    --sd-bg-warm: #2a1a1e;
    --sd-bg-warn: #2a2416;
    --sd-bg-info: #16324a;
    --sd-bg-ok: #16311f;
    --sd-bg-danger: #3a1d21;
    --sd-red-text: #ff8f9b;
    --sd-blue-mid: #7aa7d9;
    --sd-border-ok: #2a4a36;

    --sd-text-main: #e6edf5;
    --sd-text-body: #d7e2ee;
    --sd-text-body2: #c3d1e0;
    --sd-text-muted: #9fb0c3;
    --sd-text-light: #7e90a6;
    --sd-heading: #e6edf5;
    --sd-link: #bcd6f2;

    --sd-border: #2a3648;
    --sd-border-strong: #3a4a60;
    --sd-border-subtle: #223044;
    --sd-border-danger: #5a2a30;
    --sd-ok-text: #7bd39a;
    --sd-info-text: #7ec3e8;
    --sd-warn-text: #e0a34e;
    --sd-ok-on-dark: #7bd39a;
    --sd-red-on-dark: #ff8f9b;

    color-scheme: dark;
}

html.tema-scuro,
html.tema-scuro body {
    background-color: var(--sd-bg-body);
}

/* I padding non devono mai far sforare gli elementi: regola unica, prima in 5 punti */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Alias brevi delle app di amministrazione: un solo :root condiviso, prima in sd-admin-shell.css */
:root {
    --rd-blu: var(--sd-blue-navy);
    --rd-blu-scuro: var(--sd-blue-dark);
    --rd-rosso: var(--sd-red);
    --rd-rosso-scuro: var(--sd-red-hover);
    --rd-sfondo: var(--sd-bg-alt);
    --rd-card: var(--sd-bg-card);
    --rd-bordo: var(--sd-border);
    --rd-testo: var(--sd-text-main);
    --rd-testo-muto: var(--sd-text-muted);
    --rd-verde: var(--sd-ok-text);
    --rd-ambra: var(--sd-warn-text);
    --rd-bluetto: var(--sd-blue-mid);
}

/* Griglie dei form: 2/3 colonne su desktop, una sola sotto i 640px */
.sd-form-grid { display:grid; grid-template-columns:1fr 1fr; }
.sd-form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px) {
    .sd-form-grid, .sd-form-grid-3 { grid-template-columns:1fr; }
}

/* Campi dei form pubblici: un solo stile invece della stessa stringa copiata */
.sd-field {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--sd-border-strong);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Riquadri di esito dei form: un solo stile invece delle mappe [sfondo, testo] copiate */
.sd-alert {
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-weight: 600;
}
.sd-alert--ok { background: var(--sd-bg-ok); color: var(--sd-ok-text); }
.sd-alert--warn { background: var(--sd-bg-warn); color: var(--sd-warn-text); }
.sd-alert--danger { background: var(--sd-bg-danger); color: var(--sd-red-text); }
.sd-alert--info { background: var(--sd-bg-info); color: var(--sd-info-text); }
.sd-alert--muted { background: var(--sd-bg-soft); color: var(--sd-text-muted); }

/* Riquadri con titolo (avvisi dell'area riservata): i colori vengono dalla classe sd-alert--* */
.sd-quadro { max-width: 640px; border: none; }
.sd-quadro-titolo { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.sd-quadro-testo { font-size: 14px; line-height: 1.6; }
.sd-quadro-testo a { color: inherit; font-weight: 700; text-decoration: underline; }

.sd-tema-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--sd-white);
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    transition: background 0.2s;
}
.sd-tema-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.sd-tema-toggle .icona-sole { display: none; }
html.tema-scuro .sd-tema-toggle .icona-luna { display: none; }
html.tema-scuro .sd-tema-toggle .icona-sole { display: block; }

/* ==========================================================================
   CLASSI COLORE (per i contenuti nuovi: niente colori inline)
   ========================================================================== */
/* Sfondi */
.sd-bg-card { background-color: var(--sd-bg-card); }
.sd-bg-alt { background-color: var(--sd-bg-alt); }
.sd-bg-soft { background-color: var(--sd-bg-soft); }
.sd-bg-warm { background-color: var(--sd-bg-warm); }
.sd-bg-warn { background-color: var(--sd-bg-warn); }
.sd-bg-info { background-color: var(--sd-bg-info); }
.sd-bg-ok { background-color: var(--sd-bg-ok); }
.sd-bg-danger { background-color: var(--sd-bg-danger); }
.sd-bg-dark { background-color: var(--sd-blue-dark); }

/* Testi */
.sd-t-dark { color: var(--sd-blue-dark); }
.sd-t-navy { color: var(--sd-blue-navy); }
.sd-t-main { color: var(--sd-text-main); }
.sd-t-body { color: var(--sd-text-body); }
.sd-t-body2 { color: var(--sd-text-body2); }
.sd-t-muted { color: var(--sd-text-muted); }
.sd-t-light { color: var(--sd-text-light); }
.sd-t-white { color: var(--sd-white); }
.sd-t-on-dark { color: var(--sd-text-on-dark); }
.sd-t-red { color: var(--sd-red); }
.sd-t-accent { color: var(--sd-red); }

/* Bordi */
.sd-b { border: 1px solid var(--sd-border); }
.sd-b-strong { border: 1px solid var(--sd-border-strong); }
.sd-b-subtle { border: 1px solid var(--sd-border-subtle); }

/* ==========================================================================
   COMPATIBILITÀ: colori generati dagli attributi dei blocchi (Gutenberg)
   Sono pochi e non sostituibili con var() negli attributi: si rimappano qui.
   ========================================================================== */
html.tema-scuro .has-background[style*="background-color:#f8fafc"] { background-color: var(--sd-bg-alt) !important; }
html.tema-scuro .has-background[style*="background-color:#ffffff"],
html.tema-scuro .has-background[style*="background-color:#fff"] { background-color: var(--sd-bg-card) !important; }

/* ==========================================================================
   TITOLI: il tema impone un blu fisso agli h1-h6 (illeggibile su fasce scure).
   I titoli senza colore esplicito ereditano dal contesto; le classi .sd-* e
   gli stili espliciti restano comunque prioritari.
   ========================================================================== */
body h1, body h2, body h3, body h4, body h5, body h6 { color: inherit; }

/* ==========================================================================
   CONTENUTO: griglie a colonne fisse scritte a mano dentro due pagine
   (Contatti: "1fr 1.3fr"; Il Partito: "1.8fr 1.2fr"). Quando la pagina era
   larga 672px il modulo finiva in una colonna da 185px; ora che la fascia
   prende tutta la larghezza le due colonne ci stanno. Restano a una colonna
   solo quando lo spazio non basta (telefono, tablet stretto).
   ========================================================================== */
@media (max-width: 1000px) {
    .sd-section [style*="grid-template-columns:1fr 1.3fr"],
    .sd-section [style*="grid-template-columns:1.8fr 1.2fr"] { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   BLOG su telefono: le intestazioni di sezione (titolo + link affiancati, con
   etichette lunghe tipo "Documenti & Approfondimenti") allargavano la pagina
   a 455px. Vanno a capo invece di sfondare.
   ========================================================================== */
@media (max-width: 760px) {
    .section-header { flex-wrap: wrap; max-width: 100%; }
    .section-header a { white-space: normal; }

    /* Bottoni con etichette lunghe ("Scarica lo Statuto (PDF)", "Invia la domanda
       di adesione") e righe affiancate scritte a mano nel contenuto: vanno a capo
       invece di spingere la pagina oltre lo schermo. */
    .sd-btn-download, .sd-btn-tesseramento { white-space: normal; max-width: 100%; }
    .sd-section [style*="display:flex"], .sd-section [style*="display: flex"] { flex-wrap: wrap !important; }

    /* Righe affiancate del sito (schede documento, tappe dei congressi): vanno a
       capo invece di spingere la pagina oltre lo schermo. */
    .sd-doc-card, .sd-timeline-item { flex-wrap: wrap; }
    .sd-doc-card > *, .sd-timeline-item > * { min-width: 0; }
}