/**
 * Build Break Automate - Dark Mode
 *
 * Overrides the --wp--preset--color--* custom properties that WordPress
 * generates from theme.json. Because every block pattern and template
 * references these variables, the entire site flips automatically.
 *
 * Activated via [data-theme="dark"] on <html>.
 * Toggle logic lives in assets/js/dark-mode.js.
 */

/* ========================================================================
   Dark Mode - Custom Property Overrides
   ======================================================================== */

[data-theme="dark"] {
	/* Page backgrounds */
	--wp--preset--color--white: #0f172a;
	--wp--preset--color--surface: #141c2e;
	--wp--preset--color--surface-alt: #1a2437;

	/* Text */
	--wp--preset--color--text-primary: #e2e8f0;
	--wp--preset--color--text-secondary: #94a3b8;
	--wp--preset--color--text-light: #64748b;

	/* Brand - primary flips to light for headings on dark bg */
	--wp--preset--color--primary: #e2e8f0;
	--wp--preset--color--secondary: #7db4e8;

	/* Accent stays warm but slightly brighter for contrast */
	--wp--preset--color--accent: #fbbf24;
	--wp--preset--color--accent-hover: #f59e0b;

	/* Borders */
	--wp--preset--color--border: #1e293b;

	/* Code blocks - slightly deeper than page bg */
	--wp--preset--color--code-bg: #0c1220;
	--wp--preset--color--code-text: #e2e8f0;

	/* Gradients - darker variants */
	--wp--preset--gradient--hero-gradient: linear-gradient(135deg, #070d1a 0%, #0f1f38 100%);
	--wp--preset--gradient--accent-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

	/* Shadows - stronger for depth on dark surfaces */
	--wp--preset--shadow--sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
	--wp--preset--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
	--wp--preset--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

	color-scheme: dark;
}

/* ========================================================================
   Component-Level Dark Overrides
   ======================================================================== */

/* Header - dark bg instead of white */
[data-theme="dark"] .site-header,
[data-theme="dark"] .wp-block-group.has-white-background-color {
	background-color: #0f172a !important;
}

/* Service cards & post cards */
[data-theme="dark"] .brk-service-card,
[data-theme="dark"] .brk-post-card {
	background-color: #1a2437 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	border-color: #1e293b !important;
}

[data-theme="dark"] .brk-service-card:hover,
[data-theme="dark"] .brk-post-card:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Post cards with explicit border */
[data-theme="dark"] .brk-post-card.has-border-color {
	border-color: #1e293b !important;
}

/* CTA buttons - keep amber vibrant, ensure text contrast */
[data-theme="dark"] .wp-block-button__link,
[data-theme="dark"] .wp-element-button {
	color: #0f172a !important;
}

/* The header Contact CTA is a navigation item, not a button block, so the rule
   above never matched it. It sets its own text to the primary colour, which
   flips to #e2e8f0 in dark mode: near-white on amber, about 1.35:1. Pin it to
   the light-mode navy, which reads about 10.7:1 on the same background. */
[data-theme="dark"] .wp-block-navigation-item--cta,
[data-theme="dark"] .wp-block-navigation-item--cta a,
[data-theme="dark"] .wp-block-navigation-item--cta .wp-block-navigation-item__content {
	color: #0f172a !important;
}

/* Outline buttons on dark */
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
	color: #e2e8f0 !important;
	border-color: #e2e8f0 !important;
}

[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hero sections - already dark, just deepen slightly */
[data-theme="dark"] [class*="hero-gradient"] {
	background: linear-gradient(135deg, #070d1a 0%, #0f1f38 100%) !important;
}

/* CTA banner section */
[data-theme="dark"] .has-secondary-background-color {
	background-color: #0c1a30 !important;
}

/* Footer - already dark, darken further to maintain hierarchy */
[data-theme="dark"] .site-footer,
[data-theme="dark"] .has-primary-background-color {
	background-color: #060b14 !important;
}

/* Separators / borders */
[data-theme="dark"] .wp-block-separator,
[data-theme="dark"] hr {
	border-color: #1e293b !important;
	color: #1e293b !important;
}

/* Post content borders (used in blog archive) */
[data-theme="dark"] [style*="border-bottom-color"] {
	border-bottom-color: #1e293b !important;
}

/* Links in dark mode */
[data-theme="dark"] a {
	color: #7db4e8;
}

[data-theme="dark"] a:hover {
	color: #fbbf24;
}

/* Headings that had explicit primary color */
[data-theme="dark"] .has-primary-color {
	color: #e2e8f0 !important;
}

/* Text-secondary and text-light explicit classes */
[data-theme="dark"] .has-text-secondary-color {
	color: #94a3b8 !important;
}

[data-theme="dark"] .has-text-light-color {
	color: #64748b !important;
}

/* Accent color class */
[data-theme="dark"] .has-accent-color {
	color: #fbbf24 !important;
}

/* White text on dark hero/cta stays white */
[data-theme="dark"] .has-white-color {
	color: #e2e8f0 !important;
}

/* Subscribe form */
[data-theme="dark"] .brk-subscribe-form input[type="email"] {
	background: #1a2437;
	border-color: #2a3a52;
	color: #e2e8f0;
}

[data-theme="dark"] .brk-subscribe-form input[type="email"]::placeholder {
	color: #64748b;
}

/* Contact page elements */
[data-theme="dark"] .has-surface-background-color {
	background-color: #141c2e !important;
}

[data-theme="dark"] .has-surface-alt-background-color {
	background-color: #1a2437 !important;
}

/* Inline code */
[data-theme="dark"] code:not([class*="language-"]) {
	background: #1a2437;
	color: #fbbf24;
}

/* Blockquotes */
[data-theme="dark"] .wp-block-quote {
	border-left-color: #fbbf24 !important;
}

/* Footer links override */
[data-theme="dark"] footer a,
[data-theme="dark"] .site-footer a {
	color: #64748b !important;
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .site-footer a:hover {
	color: #fbbf24 !important;
}

/* ========================================================================
   Dark Mode Toggle Button
   ======================================================================== */

.brk-theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
	color: var(--wp--preset--color--text-secondary, #475569);
}

.brk-theme-toggle:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .brk-theme-toggle:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

.brk-theme-toggle svg {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Show sun in dark mode, moon in light mode */
.brk-theme-toggle .icon-moon {
	display: block;
}
.brk-theme-toggle .icon-sun {
	display: none;
}

[data-theme="dark"] .brk-theme-toggle .icon-moon {
	display: none;
}
[data-theme="dark"] .brk-theme-toggle .icon-sun {
	display: block;
	color: #fbbf24;
}

/* ========================================================================
   Transition (applied after initial load to prevent flash)
   ======================================================================== */

html.brk-transitions-enabled,
html.brk-transitions-enabled *,
html.brk-transitions-enabled *::before,
html.brk-transitions-enabled *::after {
	transition:
		background-color 0.3s ease,
		color 0.2s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease !important;
}

/* Don't transition these - they'd look weird */
html.brk-transitions-enabled .wp-block-button__link,
html.brk-transitions-enabled a {
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		transform 0.1s ease !important;
}

/* ========================================================================
   OS-Level prefers-color-scheme (before JS loads, prevents flash)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--wp--preset--color--white: #0f172a;
		--wp--preset--color--surface: #141c2e;
		--wp--preset--color--surface-alt: #1a2437;
		--wp--preset--color--text-primary: #e2e8f0;
		--wp--preset--color--text-secondary: #94a3b8;
		--wp--preset--color--text-light: #64748b;
		--wp--preset--color--primary: #e2e8f0;
		--wp--preset--color--secondary: #7db4e8;
		--wp--preset--color--accent: #fbbf24;
		--wp--preset--color--accent-hover: #f59e0b;
		--wp--preset--color--border: #1e293b;
		--wp--preset--color--code-bg: #0c1220;
		--wp--preset--color--code-text: #e2e8f0;
		color-scheme: dark;
	}
}