/* Modalità scura: regole scritte a mano.
 * Le inversioni dei colori del tema sono generate in automatico da inc/dark-mode.php;
 * qui solo la base, il pulsante e le eccezioni che il generatore non può dedurre. */

html[data-theme="dark"] {color-scheme: dark;}
html[data-theme="dark"] body {background-color: #181818; color: #ececec;}

/* ! Pulsante (a sinistra dell'hamburger) */
.mynav .vp-tema-toggle {
	position: absolute; right: 70px; top: 11px; z-index: 999;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin: 0; padding: 0;
	background: transparent; border: 0; border-radius: 50%;
	color: #ffffff; cursor: pointer;
	transition: opacity 0.2s ease;
}
.mynav .vp-tema-toggle:hover {background: transparent; color: #ffffff; opacity: 0.6;}
.mynav .vp-tema-toggle:focus-visible {outline: 1px solid #ffffff; outline-offset: 2px;}
.vp-tema-toggle .vp-tema-sole {display: none;}
html[data-theme="dark"] .vp-tema-toggle .vp-tema-luna {display: none;}
html[data-theme="dark"] .vp-tema-toggle .vp-tema-sole {display: block;}

/* ! Loghi "Nostre collaborazioni": scuri su trasparente o su fondo bianco (es. Fendi Casa).
 * Invertiti diventano chiari; lo screen fa sparire il rettangolo nero dei loghi su fondo bianco. */
html[data-theme="dark"] .row_loghiwall .wpb_single_image img {filter: grayscale(1) invert(1); mix-blend-mode: screen;}

/* ! Scheda prodotto: riga cataloghi (grigio #D9D9D6) come il fondo pagina */
html[data-theme="dark"] .catalogoprodotto {background-color: #181818;}

/* ! Cataloghi, schede e documenti: in hover il link diventa chiaro, l'icona deve diventare scura */
html[data-theme="dark"] .rigacatalogo a:hover svg,
html[data-theme="dark"] .rigaschede a:hover svg {fill: #181818;}

/* ! Pulsante invio dei form: in hover niente bordo grigio, il bordo resta del colore del pulsante */
html[data-theme="dark"] .wpcf7-form [type="submit"]:hover,
html[data-theme="dark"] .wpcf7-submit:hover {border-color: #ececec;}

/* ! Home: carosello prodotti e riga video (grigio #D9D9D6, il secondo impostato in WPBakery) */
html[data-theme="dark"] #owlprodotti::after {background: #000000;}
html[data-theme="dark"] .vc_row-has-fill:has(.row_owlvideo) {background-color: #181818 !important;}

/* ! Animazione: la modalità nuova si allarga a cerchio dal pulsante (js/darkmode.js) */
::view-transition-old(root),
::view-transition-new(root) {animation: none; mix-blend-mode: normal;}