/* ================================================================
   EditNative Starter — Master CSS
   ================================================================

   ONE FILE TO STYLE EVERYTHING.

   This file exposes every design token as a CSS custom property.
   Copy this file, change the values below, and paste it as
   Additional CSS in the WordPress Site Editor to restyle your
   entire site instantly.

   HOW TO USE:
   1. Copy the :root block below
   2. Change any values you want
   3. Go to Appearance > Editor > Styles > Additional CSS
   4. Paste your modified :root block
   5. Save — done. Your entire site updates.

   Or: edit this file directly and redeploy.

   ================================================================ */


/* ================================================================
   1. COLOR TOKENS (reference — commented out)
   ================================================================
   These are your theme.json default colors for reference.
   Uncomment the :root block below to override them.
   While commented out, style variations (Dark, Warm, etc.) work.
   ================================================================ */

/*
:root {
	--wp--preset--color--base:           #ffffff;
	--wp--preset--color--contrast:       #111827;
	--wp--preset--color--primary:        #1e3a5f;
	--wp--preset--color--primary-dark:   #15294a;
	--wp--preset--color--accent:         #2563eb;
	--wp--preset--color--accent-dark:    #1d4ed8;
	--wp--preset--color--secondary:      #f0f4f8;
	--wp--preset--color--secondary-dark: #e2e8f0;
	--wp--preset--color--surface:        #f9fafb;
	--wp--preset--color--neutral:        #64748b;
	--wp--preset--color--neutral-dark:   #374151;
	--wp--preset--color--border:         #d1d5db;
	--wp--preset--color--primary-text:   #cbd5e1;
	--wp--preset--color--primary-muted:  #94a3b8;
}
*/
/* ↑ Uncomment the :root block above to override theme.json colors.
   While commented out, colors come from theme.json and style variations work.
   To restyle: uncomment, change values, or paste into Additional CSS. */


/* ================================================================
   2. TYPOGRAPHY TOKENS
   ================================================================
   Font sizes are set by theme.json and fluid by default.
   Override them here for global font size changes.
   ================================================================ */

/*
:root {
	--wp--preset--font-size--x-small:    0.8125rem;
	--wp--preset--font-size--small:      0.875rem;
	--wp--preset--font-size--medium:     1rem;
	--wp--preset--font-size--large:      1.2rem;
	--wp--preset--font-size--x-large:    1.6rem;
	--wp--preset--font-size--xx-large:   2.4rem;
	--wp--preset--font-size--xxx-large:  3.2rem;
}
*/


/* ================================================================
   3. SPACING TOKENS
   ================================================================
   The spacing scale controls padding, margins, and gaps.
   Override to change the rhythm of the entire layout.
   ================================================================ */

/*
:root {
	--wp--preset--spacing--10: 0.25rem;
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 0.75rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: clamp(2rem, 1.5rem + 1.25vw, 2.5rem);
	--wp--preset--spacing--70: clamp(3rem, 2rem + 2.5vw, 4rem);
	--wp--preset--spacing--80: clamp(3.5rem, 2rem + 3.75vw, 6rem);
	--wp--preset--spacing--90: clamp(4rem, 2rem + 5vw, 8rem);
}
*/


/* ================================================================
   4. SHADOW TOKENS
   ================================================================ */

/*
:root {
	--wp--preset--shadow--sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--wp--preset--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--wp--preset--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}
*/


/* ================================================================
   5. LAYOUT TOKENS
   ================================================================ */

/*
:root {
	--wp--style--global--content-size: 720px;
	--wp--style--global--wide-size:    1180px;
}
*/


/* ================================================================
   6. EDITNATIVE CUSTOM TOKENS
   ================================================================
   Additional design tokens not in theme.json.
   These control patterns and components.
   ================================================================ */

:root {
	/* Border radius */
	--en--radius--button:  6px;    /* Buttons, small interactive elements */
	--en--radius--card:    8px;    /* Cards, panels, grouped content */
	--en--radius--input:   6px;    /* Form inputs, search bars */

	/* Transitions */
	--en--transition:      0.15s ease;

	/* Icon sizing */
	--en--icon-size:       2rem;   /* Emoji/icon size in feature cards */

	/* Card shadow */
	--en--card-shadow:     var(--wp--preset--shadow--sm);   /* Subtle elevation for cards */
}


/* ================================================================
   7. BASE STYLES
   ================================================================
   Things theme.json cannot handle.
   ================================================================ */

/* Smooth scroll — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Focus ring — accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Selection highlight */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}


/* ================================================================
   8. BUTTON STYLES
   ================================================================ */

.wp-element-button,
.wp-block-button__link {
	border-radius: var(--en--radius--button);
	transition: background-color var(--en--transition),
	            color var(--en--transition),
	            border-color var(--en--transition),
	            box-shadow var(--en--transition);
}

/* Outline button defaults */
.is-style-outline .wp-block-button__link {
	border-width: 2px;
	border-color: currentColor;
}


/* ================================================================
   9. NAVIGATION STYLES
   ================================================================ */

.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--button);
	box-shadow: var(--wp--preset--shadow--md);
	padding: var(--wp--preset--spacing--20) 0;
}


/* ================================================================
   10. FORM INPUT STYLES
   ================================================================ */

.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--input);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	transition: border-color var(--en--transition);
}

.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}


/* ================================================================
   11. ACCORDION / DETAILS STYLES
   ================================================================ */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--wp--preset--spacing--30) 0;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}


/* ================================================================
   12. TABLE STYLES
   ================================================================ */

.wp-block-table {
	overflow-x: auto;           /* Prevent horizontal overflow on mobile */
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 400px;           /* Ensure tables scroll rather than crush columns */
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-table th {
	background-color: var(--wp--preset--color--surface);
	font-weight: 600;
	text-align: left;
}


/* ================================================================
   13. IMAGE & MEDIA STYLES
   ================================================================ */

.wp-block-image figcaption {
	margin-top: var(--wp--preset--spacing--20);
}


/* ================================================================
   14. CARD STYLES
   ================================================================
   Applied to pattern card groups via border-radius.
   Patterns use inline styles, but these provide fallback control.
   ================================================================ */

/* Feature grid, testimonial, pricing, contact card panels */
.wp-block-group[style*="border-radius:8px"],
.wp-block-group[style*="border-radius: 8px"] {
	box-shadow: var(--en--card-shadow);
	transition: box-shadow var(--en--transition);
}


/* ================================================================
   15. SKIP TO CONTENT — ACCESSIBILITY
   ================================================================ */

.skip-to-content {
	position: absolute;
	top: -100%;
	left: var(--wp--preset--spacing--50);
	z-index: 999;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--en--radius--button);
}

.skip-to-content:focus {
	top: var(--wp--preset--spacing--30);
}

/* Screen reader text — visually hidden but accessible */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}


/* ================================================================
   16. POST META SEPARATOR
   ================================================================
   Adds a dot separator between post date and author
   without polluting the DOM or screen readers.
   ================================================================ */

.wp-block-post-date + .wp-block-post-author-name::before {
	content: "\00b7";
	margin-inline-end: var(--wp--preset--spacing--30);
	margin-inline-start: var(--wp--preset--spacing--10);
}


/* ================================================================
   17. BROWSER MOCKUP STYLES
   ================================================================
   Used in hero section to show a visual preview of the theme.
   ================================================================ */

.en-browser-mockup {
	box-shadow: var(--wp--preset--shadow--lg);
	overflow: hidden;
}


/* ================================================================
   18. CARD HOVER EFFECTS
   ================================================================
   Subtle lift on hover for interactive-feeling cards.
   ================================================================ */

.wp-block-group[style*="border-radius:8px"]:hover,
.wp-block-group[style*="border-radius: 8px"]:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group[style*="border-radius:8px"],
	.wp-block-group[style*="border-radius: 8px"] {
		transition: box-shadow 0.2s ease, transform 0.2s ease;
	}
}


/* ================================================================
   19. HEADER CTA BUTTON
   ================================================================
   Smaller button styling for the header CTA.
   ================================================================ */

.en-header-cta .wp-block-button__link {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-weight: 600;
}


/* ================================================================
   20. CODE BLOCK IN SPLIT SECTIONS
   ================================================================
   Better styling for code blocks used as visual elements.
   ================================================================ */

.wp-block-code {
	tab-size: 2;
	line-height: 1.6;
}

.wp-block-code code {
	white-space: pre-wrap;
	word-break: break-word;
}


/* ================================================================
   21. RESPONSIVE REFINEMENTS
   ================================================================
   Mobile polish beyond what WordPress core handles.
   ================================================================ */

@media (max-width: 781px) {
	/* Reduce large vertical spacing on mobile — CLAUDE.md rule #10 */
	:root {
		--wp--preset--spacing--80: 2.5rem;
		--wp--preset--spacing--90: 3rem;
	}

	/* Ensure hero columns stack nicely */
	.has-primary-background-color .wp-block-columns {
		gap: var(--wp--preset--spacing--60);
	}

	/* Browser mockup gets slight margin on mobile */
	.en-browser-mockup {
		margin-top: var(--wp--preset--spacing--40);
	}
}


/* ================================================================
   22. COMPARISON TABLE STYLING
   ================================================================
   Checkmark / X visual treatment for comparison-table pattern only.
   Uses :not(.is-style-stripes) to avoid styling blog post tables
   that use striped style and may have different column order.
   ================================================================ */

.wp-block-table:not(.is-style-stripes) td:nth-child(2) {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.wp-block-table:not(.is-style-stripes) thead th:nth-child(2) {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}


/* ================================================================
   23. TRUST BADGE
   ================================================================ */

.en-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}


/* ================================================================
   MOBILE NAVIGATION OVERLAY
   ================================================================
   Full-screen mobile menu inspired by Apple/Uber:
   left-aligned, large bold links, generous spacing.
   ================================================================ */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--60);
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: var(--wp--preset--spacing--30) 0;
	display: block;
	width: 100%;
}

/* CTA button in mobile overlay — full width, prominent */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-buttons {
	width: 100%;
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-button {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content .wp-block-button__link {
	width: 100%;
	justify-content: center;
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Close button — top right, clean */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-close {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}


/* ================================================================
   QUICK RESTYLE EXAMPLE
   ================================================================

   Want a completely different look? Copy this block into
   Additional CSS and change the values:

   :root {
       --wp--preset--color--base:         #faf9f6;
       --wp--preset--color--contrast:     #1a1a1a;
       --wp--preset--color--primary:      #2d3436;
       --wp--preset--color--primary-dark: #1e2022;
       --wp--preset--color--accent:       #e17055;
       --wp--preset--color--accent-dark:  #d35400;
       --wp--preset--color--secondary:    #f5f0eb;
       --wp--preset--color--secondary-dark: #ebe3db;
       --wp--preset--color--surface:      #fdfcfa;
       --wp--preset--color--neutral:      #808080;
       --wp--preset--color--neutral-dark: #555555;
       --wp--preset--color--border:       #ddd;
       --en--radius--button: 20px;
       --en--radius--card:   12px;
   }

   That's it. Entire site restyled.

   ================================================================ */


/* ================================================================
   24. AI Prompt Copy Box
   =================================================================== */

.en-prompt-box {
	position: relative;
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--card, 8px);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--wp--preset--color--contrast);
}

.en-prompt-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border: none;
	border-radius: var(--en--radius--button, 6px);
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.en-prompt-copy-btn:hover {
	background: var(--wp--preset--color--accent-dark);
}

.en-prompt-copy-btn:active {
	transform: scale(0.97);
}

.en-prompt-copy-btn.copied {
	background: #16a34a;
}

@media (max-width: 781px) {
	.en-prompt-box {
		max-height: 300px;
		font-size: 0.8125rem;
	}
}


/* ================================================================
   25. BLOG POST ENHANCEMENTS
   ================================================================
   Styles for blog posts: last-updated badge, related posts,
   and internal link callout boxes.
   ================================================================ */

/* Last updated badge — shown at top of comparison posts */
.en-last-updated {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--neutral);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Related posts / internal link box at bottom of articles */
.en-related-posts {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--card);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	margin-top: var(--wp--preset--spacing--60);
}

.en-related-posts h3 {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}

.en-related-posts ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.en-related-posts li a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-weight: 500;
}

.en-related-posts li a:hover {
	text-decoration: underline;
}

/* Blog post key takeaway / highlight box */
.en-key-takeaway {
	border-left: 4px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border-radius: 0 var(--en--radius--card) var(--en--radius--card) 0;
	margin: var(--wp--preset--spacing--50) 0;
}

.en-key-takeaway p:last-child {
	margin-bottom: 0;
}

/* Blog post comparison table — striped variant for readability */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--base);
}


/* ================================================================
   26. LIST MARKER COLOR
   ================================================================ */

:root :where(li)::marker {
	color: var(--wp--preset--color--neutral);
}


/* ================================================================
   27. HORIZONTAL RULE
   ================================================================ */

:root :where(hr) {
	border-color: var(--wp--preset--color--border);
}


/* ================================================================
   28. SCROLLBAR STYLING (WebKit)
   ================================================================ */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--wp--preset--color--surface);
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--neutral);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--neutral-dark);
}


/* ================================================================
   29. COMMENT LIST STRUCTURE
   ================================================================ */

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-list .comment {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40) 0;
}

.comment-list .children {
	list-style: none;
	padding-left: var(--wp--preset--spacing--50);
	margin: 0;
}

.comment-author {
	font-weight: 600;
}

.comment-metadata {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--neutral);
}


/* ================================================================
   30. PASSWORD-PROTECTED POST FORM
   ================================================================ */

.post-password-form input[type="password"] {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--en--radius--input);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

.post-password-form input[type="password"]:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.post-password-form input[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--en--radius--button);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-weight: 600;
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-dark);
}


/* ================================================================
   31. REDUCED MOTION OVERRIDE
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ================================================================
   32. SUBMIT BUTTONS — MATCH WP ELEMENT BUTTON
   ================================================================ */

:root :where(input[type="submit"]),
:root :where(.wp-block-search__button) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--en--radius--button);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--en--transition);
}

:root :where(input[type="submit"]):hover,
:root :where(.wp-block-search__button):hover {
	background-color: var(--wp--preset--color--accent-dark);
}


/* ================================================================
   33. DARK MODE
   ================================================================
   Automatic OS preference detection + manual toggle.
   Colors match styles/dark.json variation.
   Toggle persists in localStorage, falls back to prefers-color-scheme.
   ================================================================ */

/* Dark mode color overrides — applied via data-theme attribute */
html[data-theme="dark"],
html[data-theme="dark"] body {
	--wp--preset--color--base:           #1C1917;
	--wp--preset--color--contrast:       #f1f5f9;
	--wp--preset--color--primary:        #60a5fa;
	--wp--preset--color--primary-dark:   #3b82f6;
	--wp--preset--color--secondary:      #292524;
	--wp--preset--color--secondary-dark: #44403c;
	--wp--preset--color--accent:         #60a5fa;
	--wp--preset--color--accent-dark:    #93c5fd;
	--wp--preset--color--neutral:        #a8a29e;
	--wp--preset--color--neutral-dark:   #d6d3d1;
	--wp--preset--color--border:         #44403c;
	--wp--preset--color--surface:        #231f1d;
	--wp--preset--color--primary-text:   #d6d3d1;
	--wp--preset--color--primary-muted:  #a8a29e;

	/* Shadows — stronger on dark backgrounds */
	--wp--preset--shadow--sm: 0 1px 3px 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.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

	/* Tell browser to use dark scrollbars, form controls, etc. */
	color-scheme: dark;
}

/* Smooth transitions when toggling — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html.en-theme-transition,
	html.en-theme-transition body,
	html.en-theme-transition header,
	html.en-theme-transition footer,
	html.en-theme-transition main,
	html.en-theme-transition .wp-block-group,
	html.en-theme-transition .wp-block-column,
	html.en-theme-transition .wp-block-cover,
	html.en-theme-transition .wp-element-button,
	html.en-theme-transition .wp-block-button__link,
	html.en-theme-transition .wp-block-navigation,
	html.en-theme-transition .wp-block-code,
	html.en-theme-transition .wp-block-table td,
	html.en-theme-transition .wp-block-table th,
	html.en-theme-transition .en-dark-toggle,
	html.en-theme-transition input,
	html.en-theme-transition textarea,
	html.en-theme-transition select {
		transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	}
}


/* ================================================================
   34. DARK MODE TOGGLE BUTTON
   ================================================================
   Fixed-position sun/moon toggle — always accessible.
   44px minimum touch target per WCAG 2.5.8.
   ================================================================ */

.en-dark-toggle {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: var(--wp--preset--shadow--md);
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.en-dark-toggle:hover {
	box-shadow: var(--wp--preset--shadow--lg);
	transform: scale(1.08);
}

.en-dark-toggle:active {
	transform: scale(0.92);
}

.en-dark-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.en-dark-toggle svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}