/**
 * Modalità scura (si appoggia a quella di Twenty Twenty-One: classe .is-dark-theme
 * su <html> e <body>, attivata dalla preferenza del dispositivo o dal pulsante).
 *
 * Le fasce colorate (footer, titoli, slider) restano blu/rosse con testo bianco;
 * cambiano solo i testi sullo sfondo della pagina. Contrasti su #141b24:
 * testo 14.4:1, link 9.3:1, rosso 7.6:1.
 */

.is-dark-theme.is-dark-theme {
	--global--color-background: #141b24;
	--global--color-primary: #e3ebf5;
	--global--color-secondary: #e3ebf5;
	--global--color-border: #8fc1ff;

	--sfn-color-text: #e3ebf5;
	--sfn-color-link: #8fc1ff;
	--sfn-color-accent: #ff8a7f;
	--sfn-color-border: #8fc1ff;
	--sfn-color-border-soft: rgba(143, 193, 255, 0.2);
	--sfn-surface: #1d2632;
	--sfn-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	--sfn-chip-bg: rgba(143, 193, 255, 0.12);
	--sfn-card-bg: #1d2632;

	/* Bottoni: azzurro chiaro con testo scuro (9.3:1); in hover solo contorno */
	--sfn-button-bg: #8fc1ff;
	--sfn-button-text: #141b24;
	--sfn-button-border: #8fc1ff;
	--sfn-button-bg-hover: transparent;
	--sfn-button-text-hover: #8fc1ff;
	--sfn-button-border-hover: #8fc1ff;
}

/* Link: azzurro chiaro, rosso chiaro in hover (pulsanti esclusi) */
.is-dark-theme.is-dark-theme a:where(:not(.wp-block-button__link, .wp-block-file__button, .odn-button, .button)) {
	color: var(--sfn-color-link);
}

.is-dark-theme.is-dark-theme a:where(:not(.wp-block-button__link, .wp-block-file__button, .odn-button, .button)):hover,
.is-dark-theme.is-dark-theme a:where(:not(.wp-block-button__link, .wp-block-file__button, .odn-button, .button)):focus {
	color: var(--sfn-color-accent);
}

/* Voce di menu della pagina corrente: resta rossa */
.is-dark-theme.is-dark-theme .primary-navigation .current-menu-item > a:first-child,
.is-dark-theme.is-dark-theme .primary-navigation .current_page_item > a:first-child {
	color: var(--sfn-color-accent);
}

/* Nel menu mobile (fondo blu) i link restano bianchi */
@media only screen and (max-width: 480px) {

	.is-dark-theme.is-dark-theme .primary-navigation > .primary-menu-container a {
		color: #fff;
	}
}

/* Link e testi dentro le fasce colorate restano bianchi */
.is-dark-theme.is-dark-theme #my-footer a,
.is-dark-theme.is-dark-theme .wp-block-sanfilipponeri-slider .odn-slide a:not(.odn-button),
.is-dark-theme.is-dark-theme .entry-header.alignwide a,
.is-dark-theme.is-dark-theme .page-header.alignwide a {
	color: #fff;
}

/* Campi dei form: fondo scuro leggermente rialzato, testo chiaro, bordo azzurro */
.is-dark-theme.is-dark-theme input:not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.is-dark-theme.is-dark-theme select,
.is-dark-theme.is-dark-theme textarea {
	background-color: #1d2632;
	color: var(--sfn-color-text);
	border-color: var(--sfn-color-border);
}

.is-dark-theme.is-dark-theme ::placeholder {
	color: #9ab0c8;
}

/*
 * Blocchi con sfondo bianco (banner, riquadri): diventano un riquadro scuro
 * rialzato con testo chiaro, invece di restare macchie bianche.
 */
.is-dark-theme.is-dark-theme .has-white-background-color {
	background-color: #1d2632 !important;
	color: var(--sfn-color-text);
}

/*
 * Altri sfondi chiari della palette (pastello): restano, con testo scuro
 * per non avere chiaro su chiaro.
 */
.is-dark-theme.is-dark-theme :is(.has-green-background-color, .has-purple-background-color, .has-red-background-color, .has-orange-background-color, .has-yellow-background-color):not(.has-text-color),
.is-dark-theme.is-dark-theme :is(.has-green-background-color, .has-purple-background-color, .has-red-background-color, .has-orange-background-color, .has-yellow-background-color):not(.has-text-color) :is(p, li, h1, h2, h3, h4, h5, h6, a) {
	color: #004077;
}

/* Pulsante dello slider: come gli altri bottoni in modalità scura */
.is-dark-theme.is-dark-theme .wp-block-sanfilipponeri-slider .odn-button {
	background-color: var(--sfn-button-bg) !important;
	color: var(--sfn-button-text) !important;
}

/*
 * Logo: senza riquadro bianco. Se nel Customizer è caricato un "Logo per la
 * modalità scura" si usa quello, altrimenti il logo diventa bianco.
 */
.sfn-dark-logo {
	display: none;
}

.is-dark-theme.is-dark-theme .site-logo .sfn-dark-logo {
	display: inline-block;
}

.is-dark-theme.is-dark-theme .site-logo .custom-logo-link.has-dark-logo .custom-logo:not(.sfn-dark-logo) {
	display: none;
}

.is-dark-theme.is-dark-theme .site-logo .custom-logo-link:not(.has-dark-logo) .custom-logo {
	filter: brightness(0) invert(1);
}

/* Immagini (banner, locandine): un po' più smorzate del bianco pieno */
.is-dark-theme.is-dark-theme .entry-content img,
.is-dark-theme.is-dark-theme .wp-block-image img,
.is-dark-theme.is-dark-theme .post-thumbnail img {
	filter: brightness(0.8) contrast(1.05);
}

/* Twenty Twenty-One scurisce le immagini: non serve per logo e icone */
.is-dark-theme.is-dark-theme .custom-logo-link.has-dark-logo .custom-logo,
.is-dark-theme.is-dark-theme #my-footer img,
.is-dark-theme.is-dark-theme .wp-block-sanfilipponeri-slider img {
	filter: none;
}

/*
 * Pulsante della modalità scura: icona tonda con luna (attiva la modalità
 * scura) o sole (torna a quella chiara), con i colori dei bottoni.
 * Il testo "Modalità scura" resta per i lettori di schermo (font-size: 0),
 * lo stato è dato da aria-pressed.
 */
#dark-mode-toggler {
	font-size: 0;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--sfn-button-border);
	background: var(--sfn-button-bg);
	color: var(--sfn-button-text);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#dark-mode-toggler.fixed-bottom {
	bottom: 16px;
	right: 16px;
}

#dark-mode-toggler > span {
	display: none;
}

#dark-mode-toggler::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#dark-mode-toggler[aria-pressed="true"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M1.5 12H4M20 12h2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M1.5 12H4M20 12h2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8'/%3E%3C/svg%3E");
}

#dark-mode-toggler:hover,
#dark-mode-toggler:focus {
	background: var(--sfn-button-bg-hover);
	color: var(--sfn-button-text-hover);
	border-color: var(--sfn-button-border-hover);
}

/* In modalità chiara il fondo in hover è bianco: serve comunque un bordo visibile */
#dark-mode-toggler:focus-visible {
	outline: 2px solid var(--sfn-color-accent);
	outline-offset: 2px;
}