/* =========================================================================
   TEMA SCURO - Renzo Canton Assicurazioni

   Questo foglio contiene SOLO le sovrascritture del tema scuro. Non e'
   avvolto in una media query: e' l'attributo media del tag <link> a
   decidere quando si applica.

     media="(prefers-color-scheme: dark)"  -> automatico (impostazione di
                                             fabbrica, funziona anche senza
                                             JavaScript)
     media="all"                           -> scuro forzato dall'utente
     media="not all"                       -> chiaro forzato dall'utente

   Lo script in testa a ogni pagina riscrive quell'attributo prima del
   primo disegno, quindi il tema scelto non lampeggia al caricamento.

   Spec: docs/superpowers/specs/2026-09-08-dark-mode-design.md
   ========================================================================= */


/* --- Le variabili portano i colori del TESTO ---------------------- */
:root {
    --superficie: #12293F;      /* schede e riquadri */
    --superficie-alt: #0F2337;  /* fasce alternate */
    --bordo: #1E3A55;

    --testo: #E8EFF7;
    --grigio: #9DB2C7;
    --grigio-scuro: #C4D2E0;

    --blu-scuro: #E8EFF7;       /* titoli (22 usi come testo) */
    --blu-primario: #4DA3FF;    /* testo e icone accento */
    --azzurro: #4DA3FF;         /* link ed etichette */

    /* usate solo come sfondo: si scuriscono da sole */
    --grigio-chiaro: #0F2337;
    --azzurro-chiaro: #12314F;

    /* --bianco resta #FFFFFF: serve ai testi sui fondi blu */

    /* le ombre chiare non si percepiscono su fondo scuro */
    --ombra: 0 4px 24px rgba(0, 0, 0, 0.45);
    --ombra-hover: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* --- Sfondi di pagina --------------------------------------------- */
body,
.intro,
.servizi,
.polizze,
.certificazioni,
.contatti { background: #0B1B2E; }

/* --- Superfici: le schede che erano bianche ------------------------ */
.feature-card,
.servizio-card,
.polizza-card,
.porto-tag,
.chi-siamo-floating-card,
.privacy-wrap,
.privacy-list-numbered > li,
.privacy-retention-card,
.partner-logo { background: var(--superficie); }

/* .nav ha uno sfondo proprio SOLO da mobile, dove e' il pannello a scomparsa.
   Su desktop e' una fila di link dentro l'header: dargli uno sfondo dipingeva
   un rettangolo di un blu diverso sopra la fascia del logo. */
@media (max-width: 768px) {
    .nav { background: var(--superficie); }
}

.header {
    background: rgba(11, 27, 46, 0.95);
    border-bottom: 1px solid var(--bordo);
}

/* --- Bordi --------------------------------------------------------- */
.lang-switch,
.theme-switch,
.servizio-card,
.polizza-card,
.porto-tag,
.certificazioni,
.privacy-list-numbered > li,
.privacy-retention-card,
.partner-logo,
.nav a,
.mappa { border-color: var(--bordo); }

/* --- Sezioni blu: restano blu -------------------------------------- */
.page-hero,
.cta-section { background: linear-gradient(135deg, #08203A 0%, #12406E 100%); }

.footer { background: #071322; }

.chi-siamo-img { background: linear-gradient(135deg, #12406E, #1B5FA8); }

/* --- Bottoni ------------------------------------------------------- */
.btn-primary { background: #0F5FB0; color: #FFFFFF; }
.btn-primary:hover { background: #1B7AD6; }

.btn-white { background: var(--superficie); color: var(--testo); }
.btn-white:hover { background: #1B3E63; }

.btn-outline:hover { background: #0F5FB0; color: #FFFFFF; }

.logo-icon,
.servizio-card:hover .servizio-icon { background: #0F5FB0; }

.hamburger span { background: var(--testo); }

.cookie-accept,
.privacy-cta:hover { background: #0F5FB0; color: #FFFFFF; }

/* --- Certificazione DNV: il marchio resta sulla sua pastiglia bianca */
.cert-logo { background: #FFFFFF; color: #003B7A; }
/* .cert-dnv e .sofistica-logo-img restano bianchi: usano --bianco */

/* Bollino DNV nell'header: la pastiglia resta bianca, com'e' giusto per il
   marchio di un ente certificatore. Su fondo scuro il bordo grigio chiaro
   diventa un alone: si toglie. */
.dnv-badge { border-color: transparent; }

/* Selettore del tema: separatore e stati sul fondo scuro */
.theme-switch .sep { color: var(--bordo); }
.theme-switch button { color: var(--grigio); }
.theme-switch button[aria-pressed="true"] { color: var(--azzurro); }

/* --- Modulo contatti ----------------------------------------------- */
.form-group input,
.form-group textarea,
.form-group select {
    background: #0E2438;
    border-color: var(--bordo);
    color: var(--testo);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: #7E93A8; }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--azzurro);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.20);
}

.form-privacy input[type="checkbox"] { accent-color: #4DA3FF; }

/* --- Messaggi di stato: il codice colore resta invariato ------------ */
.form-feedback.success {
    background: #0E2A1B;
    border-color: #2E7D46;
    color: #B7E6C4;
}

.form-feedback.error {
    background: #2A1113;
    border-color: #C0392B;
    color: #F3B7B2;
}

/* --- Riquadro di avviso nelle pagine legali ------------------------- */
.privacy-notice {
    background: linear-gradient(135deg, #2A2311, #33290F);
    border-left-color: #E0A800;
    color: var(--testo);
}

/* --- Logo dell'header: versione bianca ------------------------------ */
.header .logo-img { content: url('logo-white.png'); }

/* --- Mappa Google: iframe esterno, si puo' solo attenuare ----------- */
.mappa iframe { filter: brightness(0.85) contrast(1.05); }