/* Tema scuro (fonte: base/src/assets/css/tema-scuro.css, copiato nei siti). Vale quando <html> ha data-tema-attivo="scuro":
   lo imposta lo script in testa a base.njk (scelta salvata o, in automatico, preferenza del sistema) e assets/js/tema.js
   (tre icone nel piè di pagina). Senza JavaScript il sito resta chiaro.
   --ink nei siti è sia colore dei titoli sia sfondo di pulsanti e riquadri: qui diventa chiaro per i testi, mentre
   --marca conserva il colore del marchio per gli sfondi. */
:root[data-tema-attivo="scuro"] {
  color-scheme: dark;
  --marca: var(--primario, #1d4d3c);
  --fondo: color-mix(in oklch, var(--marca) 12%, #0c0f13);
  --fondo-2: color-mix(in oklch, var(--marca) 16%, #141920);
  --fondo-tenue: color-mix(in oklch, var(--marca) 18%, #11151b);
  --carta: color-mix(in oklch, var(--marca) 14%, #171c23);
  --testo: #e4e7ec;
  --testo-2: #a6adb6;
  --ink: color-mix(in oklch, var(--marca) 22%, #f1f3f6);
  --ink-2: color-mix(in oklch, var(--marca) 30%, #d9dde3);
  --accento: color-mix(in oklch, var(--marca) 35%, #b9d4ff);
  --accento-tenue: color-mix(in oklch, var(--marca) 30%, #1a2029);
  --linea: rgba(255, 255, 255, .1);
  --bordo-forte: rgba(255, 255, 255, .2);
  --avviso-fondo: #2c2412;
  --avviso-bordo: #a8862e;
  --avviso-testo: #f0d58a;
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}

/* Sfondi chiari scritti nei fogli dei siti → superfici scure */
[data-tema-attivo="scuro"] .skip:focus, [data-tema-attivo="scuro"] .menu summary,
[data-tema-attivo="scuro"] .kpi > div, [data-tema-attivo="scuro"] .scheda, [data-tema-attivo="scuro"] .loghi__voce,
[data-tema-attivo="scuro"] .hero-partecipata__logo, [data-tema-attivo="scuro"] .tabella-scroll, [data-tema-attivo="scuro"] .clienti li,
[data-tema-attivo="scuro"] .pannello, [data-tema-attivo="scuro"] .banner, [data-tema-attivo="scuro"] .tempo > li::before,
[data-tema-attivo="scuro"] .albero__nodo, [data-tema-attivo="scuro"] .passi li, [data-tema-attivo="scuro"] .ordina__voce,
[data-tema-attivo="scuro"] .immobile, [data-tema-attivo="scuro"] .partecipata, [data-tema-attivo="scuro"] .organigramma__scheda,
[data-tema-attivo="scuro"] .modulo input, [data-tema-attivo="scuro"] .modulo select, [data-tema-attivo="scuro"] .modulo textarea {
  background-color: var(--carta);
  color: var(--testo);
  border-color: var(--linea);
}
/* Menu a tendina (solo schermi stretti: su desktop il menu non ha sfondo) */
@media (max-width: 1180px) {
  [data-tema-attivo="scuro"] .menu[open] nav { background-color: var(--fondo); border-color: var(--linea); }
}
[data-tema-attivo="scuro"] .testata { background: color-mix(in oklch, var(--fondo) 86%, transparent); }
[data-tema-attivo="scuro"] .effetti .testata--scorrimento { background-color: color-mix(in oklch, var(--fondo) 95%, transparent); box-shadow: 0 1px 0 var(--linea), 0 8px 24px -18px rgba(0, 0, 0, .8); }
[data-tema-attivo="scuro"] .hero:not(.hero--scuro):not(.hero--foto) { background: linear-gradient(180deg, var(--fondo-tenue) 0%, var(--fondo) 100%); }
[data-tema-attivo="scuro"] .sezione--grigia { background-color: var(--fondo-2); }
[data-tema-attivo="scuro"] .partecipata__immobile { background: var(--fondo-2); }
[data-tema-attivo="scuro"] .ri-dettaglio, [data-tema-attivo="scuro"] .ri-cerca, [data-tema-attivo="scuro"] .ri-segmenti, [data-tema-attivo="scuro"] #ri-ordina { background: var(--fondo-2); color: var(--testo); }
[data-tema-attivo="scuro"] .immobile__chip { background: var(--fondo-2); color: var(--accento-2); }
/* rampa delle strisce invertita: sul fondo scuro il passo più scuro diventa il più chiaro */
:root[data-tema-attivo="scuro"] { --rampa-1: color-mix(in oklch, var(--primario) 45%, white); --rampa-2: color-mix(in oklch, var(--primario) 70%, white); --rampa-3: var(--primario); --rampa-4: color-mix(in oklch, var(--primario) 60%, black); --rampa-5: color-mix(in oklch, var(--primario) 32%, black); }

/* Sfondi nel colore del marchio (pulsanti, hero scure, riquadri evidenziati) */
[data-tema-attivo="scuro"] .btn, [data-tema-attivo="scuro"] .sezione--blu, [data-tema-attivo="scuro"] .hero--scuro,
[data-tema-attivo="scuro"] .hero--foto, [data-tema-attivo="scuro"] .kpi--target > div, [data-tema-attivo="scuro"] .pillar:nth-child(3)::before,
[data-tema-attivo="scuro"] .esito, [data-tema-attivo="scuro"] .barre__evidenza .barre__barra, [data-tema-attivo="scuro"] .sottomenu,
[data-tema-attivo="scuro"] .albero__nodo--radice, [data-tema-attivo="scuro"] .ordina__voce[aria-pressed="true"], [data-tema-attivo="scuro"] .immobile__vuota,
[data-tema-attivo="scuro"] .organigramma__radice, [data-tema-attivo="scuro"] .organigramma__quota--controllata, [data-tema-attivo="scuro"] .organigramma__punto--controllata {
  background-color: color-mix(in oklch, var(--marca) 80%, #ffffff);
  border-color: color-mix(in oklch, var(--marca) 80%, #ffffff);
}
[data-tema-attivo="scuro"] .btn, [data-tema-attivo="scuro"] .ordina__voce[aria-pressed="true"], [data-tema-attivo="scuro"] .albero__nodo--radice,
[data-tema-attivo="scuro"] .organigramma__radice, [data-tema-attivo="scuro"] .organigramma__quota--controllata { color: #fff; }
[data-tema-attivo="scuro"] .organigramma__area-testa { background-color: var(--fondo-2); }
[data-tema-attivo="scuro"] .organigramma__logo { filter: grayscale(1) brightness(0) invert(1) opacity(.7); }
[data-tema-attivo="scuro"] .btn--chiaro { background-color: transparent; color: var(--ink); border-color: var(--bordo-forte); }
[data-tema-attivo="scuro"] .btn:hover { background-color: var(--marca); border-color: var(--accento); }
[data-tema-attivo="scuro"] .btn--chiaro:hover { background-color: rgba(255, 255, 255, .06); }
[data-tema-attivo="scuro"] .hero--scuro .btn { background: #fff; color: var(--marca) !important; border-color: #fff; }
[data-tema-attivo="scuro"] .hero--scuro .btn--chiaro { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); }

/* Logo della testata: versione ufficiale chiara (la stessa del piè di pagina); il marchio SVG di Thaleia segue già il colore del testo */
.marchio__chiaro { display: none !important; }
[data-tema-attivo="scuro"] .marchio__scuro { display: none !important; }
[data-tema-attivo="scuro"] .marchio__chiaro { display: block !important; }
[data-tema-attivo="scuro"] .logo-partecipata { filter: brightness(0) invert(.82); }

/* Ombre al passaggio del mouse (effetti.css): scure anche se --ink è chiaro */
@media (hover: hover) {
  [data-tema-attivo="scuro"] .effetti .scheda--link:hover, [data-tema-attivo="scuro"] .effetti .immobile:hover,
  [data-tema-attivo="scuro"] .effetti .vetrina__voce:hover, [data-tema-attivo="scuro"] .effetti .partecipata:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -16px rgba(0, 0, 0, .7);
  }
}

/* Scelta del tema nel piè di pagina: tre icone affiancate, quella attiva evidenziata */
.piede__agg .tema-scelta { flex: none; margin: 0; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; }
.tema-scelta button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer; transition: opacity .2s, background-color .2s; }
.tema-scelta button:hover { opacity: 1; }
.tema-scelta button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
.tema-scelta button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); opacity: 1; }
.tema-scelta svg { width: 15px; height: 15px; display: block; }
.piede__agg .tema-scelta .sr-only { margin: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piede__agg { display: flex; align-items: center; justify-content: space-between; gap: 16px; }