/* DiluxOne Color Schemes — the switcher, the logo swap and the few colors the
 * palette alone does not reach. Scheme-dependent values are custom properties:
 * their light values live here and includes/palette.php redefines them for
 * dark, so each rule below is written once and works for both schemes. */

:root {
	--dxo-cs-button-bg: var(--ast-global-color-0);
	--dxo-cs-button-bg-hover: var(--ast-global-color-1);
	--dxo-cs-surface: var(--ast-global-color-4);
	--dxo-cs-logo-light: inline-block;
	--dxo-cs-logo-dark: none;
	--dxo-cs-control-bg: rgb(255 255 255 / 92%);
}

/* ---------- Logo ---------- */
.custom-logo-link .custom-logo:not(.dxo-cs-logo-dark) { display: var(--dxo-cs-logo-light); }
.custom-logo-link .dxo-cs-logo-dark { display: var(--dxo-cs-logo-dark); }

/* ---------- Buttons: white text needs the deep blue in both schemes ---------- */
:is(.entry-content, .site-header, .ast-builder-layout-element) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background),
.ast-header-button-1 .ast-custom-button {
	background-color: var(--dxo-cs-button-bg);
	border-color: var(--dxo-cs-button-bg);
}
:is(.entry-content, .site-header, .ast-builder-layout-element) .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible),
.ast-header-button-1 .ast-custom-button:hover {
	background-color: var(--dxo-cs-button-bg-hover);
	border-color: var(--dxo-cs-button-bg-hover);
}

/* ---------- Cards sit on a raised surface ---------- */
.is-style-dxo-card { background: var(--dxo-cs-surface); }

/* ---------- DiluxOne Slider controls ---------- */
.wp-block-diluxone-slider { --dxs-control-bg: var(--dxo-cs-control-bg); }
.wp-block-diluxone-slider .dxs__dot:not([aria-current="true"]) { background: var(--dxo-cs-dot-bg, var(--dxs-control-bg)); }

/* ---------- Switcher ---------- */
.dxo-cs-switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ast-global-color-7);
	border-radius: 999px;
	background: var(--ast-global-color-4);
	vertical-align: middle;
}
.dxo-cs-option {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ast-global-color-8);
	cursor: pointer;
	line-height: 0;
}
.dxo-cs-option:hover { color: var(--ast-global-color-2); background: transparent; }
.dxo-cs-option[aria-pressed="true"],
.dxo-cs-option[aria-pressed="true"]:hover {
	background: var(--ast-global-color-2);
	color: var(--ast-global-color-4);
}
.dxo-cs-option:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}
.dxo-cs-option svg { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.dxo-cs-option { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* ---------- Content for one scheme only ---------- */
/* Add the class dxo-cs-only-light or dxo-cs-only-dark to any block (Advanced
 * → Additional CSS class) to show it only in that scheme: an image made for a
 * light background next to its version for a dark one, for example. */
.dxo-cs-only-light { display: var(--dxo-cs-logo-light) !important; }
.dxo-cs-only-dark { display: var(--dxo-cs-logo-dark) !important; }