/*
 * Blanky Work – Dark mode
 *
 * The toggle in the header adds .is-dark to <html>. Each colour style supplies its
 * own dark values through settings.custom.dark in theme.json / styles/*.json
 * (--wp--custom--dark--*). The fallbacks below are the Navy style's values.
 *
 * The OS setting (prefers-color-scheme) is deliberately not followed: it would fight
 * with the style variations. Only the visitor's choice on the toggle counts.
 *
 * @package blanky-work
 * @since 1.7
 */

html.is-dark {
	--wp--preset--color--background: var(--wp--custom--dark--background, #0f1626);
	--wp--preset--color--surface: var(--wp--custom--dark--surface, #151e30);
	--wp--preset--color--foreground: var(--wp--custom--dark--foreground, #e8ecf3);
	--wp--preset--color--muted: var(--wp--custom--dark--muted, #cdb487);
	--wp--preset--color--accent: var(--wp--custom--dark--accent, #b89c6f);
	--wp--custom--work-deep-navy-rgb: var(--wp--custom--dark--foreground-rgb, 232, 236, 243);
	--wp--custom--work-off-white-rgb: var(--wp--custom--dark--background-rgb, 15, 22, 38);
	--wp--custom--work-gold-deep: var(--wp--custom--dark--muted, #cdb487);
	--work-band: var(--wp--custom--dark--band, #1c2840);
	--work-on-band: var(--wp--preset--color--foreground);
	--work-on-band-rgb: var(--wp--custom--dark--foreground-rgb, 232, 236, 243);
	color-scheme: dark;
}

/* Filled buttons: on a dark page the band colour is too close to the page, so they turn gold. */
html.is-dark .work-btn-fill a,
html.is-dark .work-hero-statement .work-btn-fill--gold a {
	background-color: var(--wp--preset--color--accent);
	background-image: none;
	color: var(--wp--preset--color--background);
}

html.is-dark .work-btn-fill a:hover,
html.is-dark .work-hero-statement .work-btn-fill--gold a:hover {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--background);
}

/* Gold surfaces carry the darkest colour as text; in dark mode that colour turns light, so they use the page colour instead. */
html.is-dark .work-contact-cta-btn,
html.is-dark .work-contact-cta-btn-wrap a,
html.is-dark .work-philosophy-badge,
html.is-dark .work-about-mission-badge,
html.is-dark .work-services-cta-btn a {
	color: var(--wp--preset--color--background);
}

/* The photo placeholder and the header bar follow the dark page. */
html.is-dark .work-hero-split-photo {
	background: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------------
   Toggle button
   ------------------------------------------------------------ */

.work-dark-toggle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--work-border-gold);
	border-radius: 50%;
	background: transparent;
	color: var(--work-deep-navy);
	cursor: pointer;
	transition: border-color 0.25s, color 0.25s;
}

.work-dark-toggle:hover {
	border-color: var(--work-muted-gold);
	color: var(--work-muted-gold-text);
}

.work-dark-toggle:focus-visible {
	outline: 2px solid var(--work-muted-gold);
	outline-offset: 2px;
}

.work-dark-toggle svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* The icon shows the current mode, as in Blanky Studio: a sun in light mode, a moon in dark mode. */
.work-dark-toggle__icon--dark {
	display: none;
}

html.is-dark .work-dark-toggle__icon--light {
	display: none;
}

html.is-dark .work-dark-toggle__icon--dark {
	display: inline-flex;
}