/*
 * Dark mode for the front end only (not loaded in the editor).
 * Follows the OS setting unless the visitor picked one with the header toggle,
 * which sets <html data-theme="light|dark"> (see functions.php and theme-toggle.js).
 *
 * The palette block is duplicated on purpose: once for the OS preference, once for the toggle.
 */

:root {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #11161c;
		--wp--preset--color--contrast: #e8e4da;
		--wp--preset--color--accent-1: #f2c230;
		--wp--preset--color--accent-2: #ff8a75;
		--wp--preset--color--accent-3: #7db8ff;
		--wp--preset--color--accent-4: #9ea9b5;
		--wp--preset--color--accent-5: #1b232c;
		--wp--preset--color--accent-6: #2b3541;
		--diy-ink-fixed: #18212b;
	--diy-raised: #171e26;
		--diy-raised: #171e26;
		--diy-hero-text: #b9c2cc;
		--diy-footer-bg: #0b0f13;
		--diy-tip-bg: rgba(242, 194, 48, 0.12);
		--diy-warn-bg: rgba(255, 138, 117, 0.12);
		--diy-info-bg: rgba(125, 184, 255, 0.12);
		--diy-code-border: #2b3541;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #11161c;
	--wp--preset--color--contrast: #e8e4da;
	--wp--preset--color--accent-1: #f2c230;
	--wp--preset--color--accent-2: #ff8a75;
	--wp--preset--color--accent-3: #7db8ff;
	--wp--preset--color--accent-4: #9ea9b5;
	--wp--preset--color--accent-5: #1b232c;
	--wp--preset--color--accent-6: #2b3541;
	--diy-ink-fixed: #18212b;
	--diy-hero-text: #b9c2cc;
	--diy-footer-bg: #0b0f13;
	--diy-tip-bg: rgba(242, 194, 48, 0.12);
	--diy-warn-bg: rgba(255, 138, 117, 0.12);
	--diy-info-bg: rgba(125, 184, 255, 0.12);
	--diy-code-border: #2b3541;
}

/* Everything below only applies when the dark variables are active (--diy-ink-fixed is only set in dark mode). */

/* Elements that sit on the yellow accent keep dark ink. */
.diy-brand-mark {
	color: var(--diy-ink-fixed, var(--wp--preset--color--contrast));
	box-shadow: 2px 2px 0 var(--diy-ink-fixed, var(--wp--preset--color--contrast));
}

.has-accent-1-background-color {
	color: var(--diy-ink-fixed, inherit);
}

.has-accent-1-background-color .wp-block-button__link {
	background-color: var(--diy-ink-fixed, var(--wp--preset--color--contrast));
	color: #ffffff;
}

.has-accent-1-background-color .wp-block-button__link:hover {
	background-color: #000000;
}

.diy-topic-badge {
	background: var(--diy-ink-fixed, var(--wp--preset--color--contrast));
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6);
}

/* Hero intro paragraph has a fixed colour in the template. */
.diy-hero p.has-text-color:not(.is-style-margin-note) {
	color: var(--diy-hero-text, #3d4752) !important;
}

/* Footer is "contrast" coloured in light mode; keep it a deep panel in dark mode. */
.diy-footer.has-contrast-background-color {
	background-color: var(--diy-footer-bg, var(--wp--preset--color--contrast)) !important;
	color: #e8e4da !important;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.diy-footer.has-contrast-background-color a {
	color: #e8e4da !important;
}

/* Callouts */
.wp-block-group.is-style-sticky-note {
	background: var(--diy-tip-bg, #fff6c7);
}

.wp-block-group.is-style-warning-note {
	background: var(--diy-warn-bg, #fdecea);
}

.wp-block-group.is-style-info-note {
	background: var(--diy-info-bg, #e8f0fb);
}

/* Code blocks are already dark; add an edge so they don't melt into the page. */
.wp-block-post-content pre,
.wp-block-code {
	box-shadow: inset 0 0 0 1px var(--diy-code-border, transparent);
}

/* Slightly soften photos and screenshots at night. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wp-block-post-content img {
		filter: brightness(0.92);
	}
}

:root[data-theme="dark"] .wp-block-post-content img {
	filter: brightness(0.92);
}

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

.diy-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	flex-shrink: 0;
}

.diy-theme-toggle:hover {
	border-color: var(--wp--preset--color--contrast);
}

.diy-theme-toggle svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* Show the moon in light mode (click for dark) and the sun in dark mode. */
.diy-theme-toggle .diy-icon-sun {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .diy-theme-toggle .diy-icon-sun {
		display: block;
	}
	:root:not([data-theme="light"]) .diy-theme-toggle .diy-icon-moon {
		display: none;
	}
}

:root[data-theme="dark"] .diy-theme-toggle .diy-icon-sun {
	display: block;
}

:root[data-theme="dark"] .diy-theme-toggle .diy-icon-moon {
	display: none;
}

/* Highlighter marks: in dark mode the words turn yellow with a thin underline stroke (a band behind dark ink would cut the letters). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) :is(.diy-hero, .wp-block-heading) mark {
		background: linear-gradient(180deg, transparent 86%, var(--wp--preset--color--accent-1) 86%, var(--wp--preset--color--accent-1) 94%, transparent 94%);
		color: var(--wp--preset--color--accent-1);
	}
}

:root[data-theme="dark"] :is(.diy-hero, .wp-block-heading) mark {
	background: linear-gradient(180deg, transparent 86%, var(--wp--preset--color--accent-1) 86%, var(--wp--preset--color--accent-1) 94%, transparent 94%);
	color: var(--wp--preset--color--accent-1);
}