/**
 * Color Mode Overrides — Light Matrix
 *
 * Dark Matrix is the default (defined in theme.json).
 * These rules override CSS custom properties for light mode.
 */

/* ── Auto mode: follow OS preference ── */
@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) {
		--wp--preset--color--base: #FAFAFA;
		--wp--preset--color--surface: #F0F0F0;
		--wp--preset--color--surface-raised: #F1F1F1;
		--wp--preset--color--accent-matrix: #003100;
		--wp--preset--color--accent-matrix-dim: #006B22;
		--wp--preset--color--sage: #7A9068;
		--wp--preset--color--moss: #3D4E30;
		--wp--preset--color--amber: #B8895A;
		--wp--preset--color--rust: #A04A25;
		--wp--preset--color--stone: #6B6660;
		--wp--preset--color--text-primary: #003100;
		--wp--preset--color--text-secondary: #113111;
		--wp--preset--color--text-muted: #313131;
		--wp--preset--color--border: #C16931;
		--wp--preset--color--error: #DC2626;
		--wp--preset--color--success: #00882A;
		--wp--preset--color--warning: #D49700;
		--wp--preset--shadow--sm: 0 1px 2px 0 rgba(0,0,0,0.08);
		--wp--preset--shadow--md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
		--wp--preset--shadow--lg: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);
		--wp--preset--shadow--glow: 0 0 12px rgba(0,136,42,0.2), 0 0 4px rgba(0,136,42,0.1);
	}
}

/* ── Explicit light selection ── */
html[data-theme="light"] {
	--wp--preset--color--base: #FAFAFA;
	--wp--preset--color--surface: #F0F0F0;
	--wp--preset--color--surface-raised: #F1F1F1;
	--wp--preset--color--accent-matrix: #003100;
	--wp--preset--color--accent-matrix-dim: #006B22;
	--wp--preset--color--sage: #7A9068;
	--wp--preset--color--moss: #3D4E30;
	--wp--preset--color--amber: #B8895A;
	--wp--preset--color--rust: #A04A25;
	--wp--preset--color--stone: #6B6660;
	--wp--preset--color--text-primary: #003100;
	--wp--preset--color--text-secondary: #113111;
	--wp--preset--color--text-muted: #313131;
	--wp--preset--color--border: #C16931;
	--wp--preset--color--error: #DC2626;
	--wp--preset--color--success: #00882A;
	--wp--preset--color--warning: #D49700;
	--wp--preset--shadow--sm: 0 1px 2px 0 rgba(0,0,0,0.08);
	--wp--preset--shadow--md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
	--wp--preset--shadow--lg: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);
	--wp--preset--shadow--glow: 0 0 12px rgba(0,136,42,0.2), 0 0 4px rgba(0,136,42,0.1);
}

/* ── Site logo: dark/light switching ── */
.site-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-logo {
	display: block;
	height: 60px;
	width: auto;
	object-fit: contain;
}

/* Default (dark theme): show dark logo, hide light */
.site-logo--light {
	display: none;
}

/* Auto mode: OS prefers light → show light logo */
@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) .site-logo--dark {
		display: none;
	}
	html:not([data-theme="dark"]) .site-logo--light {
		display: block;
	}
}

/* Explicit light: show light logo */
html[data-theme="light"] .site-logo--dark {
	display: none;
}
html[data-theme="light"] .site-logo--light {
	display: block;
}

/* ── Hero matrix rain ── */
.hero-matrix {
	position: relative;
	overflow: hidden;
}

.hero-matrix > *:not(#matrix-rain):not(div:has(#matrix-rain)) {
	position: relative;
	z-index: 1;
}

.hero-matrix p,
.hero-matrix h1,
.hero-matrix .wp-block-buttons {
	position: relative;
	z-index: 1;
}

.hero-matrix h1 {
	text-shadow:
		0 0 20px rgba(0, 255, 65, 0.5),
		0 0 40px rgba(0, 0, 0, 0.8),
		0 0 60px rgba(0, 0, 0, 0.6);
}

.hero-matrix p {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.8);
}

.hero-matrix .wp-block-button__link {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) .hero-matrix h1 {
		text-shadow:
			0 0 20px rgba(0, 136, 42, 0.4),
			0 0 40px rgba(255, 255, 255, 0.8),
			0 0 60px rgba(255, 255, 255, 0.6);
	}
	html:not([data-theme="dark"]) .hero-matrix p {
		text-shadow: 0 1px 3px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.95), 0 0 40px rgba(255, 255, 255, 0.8);
	}
	html:not([data-theme="dark"]) .hero-matrix .wp-block-button__link {
		box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
	}
}

html[data-theme="light"] .hero-matrix h1 {
	text-shadow:
		0 0 20px rgba(0, 136, 42, 0.4),
		0 0 40px rgba(255, 255, 255, 0.8),
		0 0 60px rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .hero-matrix p {
	text-shadow: 0 1px 3px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.95), 0 0 40px rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .hero-matrix .wp-block-button__link {
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
}

/* ── Toggle button ── */
.color-mode-toggle {
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem;
	transition: color 250ms, border-color 250ms;
}

.color-mode-toggle svg {
	display: block;
}

.color-mode-toggle:hover,
.color-mode-toggle:focus-visible {
	color: var(--wp--preset--color--accent-matrix);
	border-color: var(--wp--preset--color--accent-matrix);
	outline: none;
}