/*
Theme Name: Codedication Theme
Theme URI: https://codedication.com
Author: Codedication
Author URI: https://codedication.com
Description: A modern WordPress block theme crafted with dedication. Features Full Site Editing support, clean typography with Staatliches and Inter fonts, and a professional design system optimized for developers and agencies.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codedication-theme
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, one-column, wide-blocks

Codedication Theme - Crafted with Dedication
*/

/* ==========================================================================
   Modern CSS Base - theme.json handles design tokens
   ========================================================================== */

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

/* Modern typography enhancements */
body {
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Text wrap balance for headings (modern browsers) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	text-wrap: balance;
}

/* Text wrap pretty for paragraphs */
p,
.wp-block-paragraph {
	text-wrap: pretty;
}

/* Remove default block spacing from main structural elements */
:where(.wp-site-blocks) > main,
:where(.wp-site-blocks) > footer {
	margin-block-start: 0;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

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

/* Screen reader only - visually hidden but accessible */
.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link */
.skip-link {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	z-index: 100000;
	clip: auto;
	clip-path: none;
	inline-size: auto;
	block-size: auto;
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--lg);
}

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

/* ==========================================================================
   Interactive Elements - Transitions
   ========================================================================== */

/* Button transitions */
.wp-block-button__link {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--md);
	}
}

/* Card hover effects */
.wp-block-group.is-style-card {
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--preset--shadow--lg);
	}
}

/* Image hover */
.wp-block-image img {
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-image:hover img {
		transform: scale(1.02);
	}
}

/* Navigation hover */
.wp-block-navigation-item__content {
	transition: color 0.2s ease;
}

/* Social links */
.wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-social-links .wp-social-link:hover {
		transform: scale(1.1);
	}
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

input,
textarea,
select {
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}

/* ==========================================================================
   Block-specific Enhancements
   ========================================================================== */

/* Badge style */
.is-style-badge {
	display: inline-flex;
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Table enhancements */
.wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding-block: 0.75rem;
	padding-inline: 1rem;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--display);
	text-wrap: balance;
}

/* Separator */
.wp-block-separator {
	border-color: var(--wp--preset--color--border);
	opacity: 1;
}

/* Comments section */
.wp-block-comments {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* Pagination */
.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	block-size: 2.5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--sm);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	border-color: var(--wp--preset--color--primary);
}

/* Post navigation */
.wp-block-post-navigation-link {
	transition: color 0.2s ease;
}

.wp-block-post-navigation-link:hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Selection & Target
   ========================================================================== */

/* Text selection styling */
::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	color: var(--wp--preset--color--foreground);
}

/* Offset for anchor links (accounts for fixed header) */
:target {
	scroll-margin-block-start: var(--wp--custom--layout--header-height, 80px);
}

/* ==========================================================================
   Line Clamp - Excerpt truncation
   ========================================================================== */

/* Default excerpt truncation */
.wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--wp--custom--line-clamp--excerpt, 3);
	overflow: hidden;
}

/* Line clamp utility classes */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.line-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* ==========================================================================
   Spotlight Cards - Mouse tracking effect
   ========================================================================== */

/* Card with spotlight hover effect */
.is-style-spotlight {
	--spotlight-x: 50%;
	--spotlight-y: 50%;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			circle at var(--spotlight-x) var(--spotlight-y),
			color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent) 0%,
			transparent 60%
		),
		var(--wp--preset--color--card);
	transition: background var(--wp--custom--transition--base, 250ms ease);
}

/* Subtle border glow on spotlight cards */
.is-style-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background:
		radial-gradient(
			circle at var(--spotlight-x) var(--spotlight-y),
			color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent) 0%,
			transparent 50%
		);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--wp--custom--transition--base, 250ms ease);
}

.is-style-spotlight:hover::before {
	opacity: 1;
}

/* ==========================================================================
   Performance - CSS Containment
   ========================================================================== */

/* Containment for cards and spotlight - improves rendering performance */
.is-style-spotlight,
.is-style-card,
.wp-block-post-template > li {
	contain: layout style;
}

/* ==========================================================================
   Image Block Enhancements
   ========================================================================== */

/* Image with text wrap */
.wp-block-image.is-style-text-wrap {
	float: inline-start;
	margin-inline-end: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--30);
	max-inline-size: 50%;
}

@media (max-width: 600px) {
	.wp-block-image.is-style-text-wrap {
		float: none;
		margin-inline-end: 0;
		max-inline-size: 100%;
	}
}

/* Duotone hover effect */
.wp-block-image.is-style-duotone-hover {
	position: relative;
}

.wp-block-image.is-style-duotone-hover img {
	filter: grayscale(100%);
	transition:
		filter var(--wp--custom--transition--base, 250ms ease),
		transform var(--wp--custom--transition--base, 250ms ease);
}

.wp-block-image.is-style-duotone-hover:hover img {
	filter: grayscale(0%);
}

/* ==========================================================================
   Header - Scroll Reveal Effect
   ========================================================================== */

/* Target the header wrapper element */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 1000;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Account for WordPress admin bar when logged in */
.admin-bar header.wp-block-template-part {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

header.wp-block-template-part.is-hidden {
	transform: translateY(-100%);
}

header.wp-block-template-part.is-scrolled {
	box-shadow: var(--wp--preset--shadow--md);
}

/* Ensure inner content has proper background */
header.wp-block-template-part .site-header {
	background-color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Mobile Menu - Elegant Fullscreen Overlay
   ========================================================================== */

/* Overlay container */
.wp-block-navigation__responsive-container {
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary);
	animation: menuFadeIn 0.4s ease forwards;
}

@keyframes menuFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Menu content wrapper */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-block-size: 100vh;
	padding: var(--wp--preset--spacing--60);
	gap: 0;
}

/* Navigation items container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Individual menu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	transform: translateY(20px);
	animation: menuItemSlideIn 0.5s ease forwards;
	animation-delay: var(--animation-delay, 0s);
}

@keyframes menuItemSlideIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Menu item links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 4vw, 1.75rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.3;
	padding-block: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--primary-foreground);
	position: relative;
	display: inline-block;
}

/* Underline effect */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Hover state for text */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

/* Close button */
.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	inset-block-start: var(--wp--preset--spacing--50);
	inset-inline-end: var(--wp--preset--spacing--50);
	z-index: 100;
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary-foreground) 30%, transparent);
	border-radius: 50%;
	padding: var(--wp--preset--spacing--20);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--accent);
	transform: rotate(90deg);
}

.wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
	color: var(--wp--preset--color--primary-foreground);
}

/* Hamburger button */
.wp-block-navigation__responsive-container-open {
	background: transparent;
	border: none;
	padding: var(--wp--preset--spacing--20);
	cursor: pointer;
}

.wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	transition: color 0.2s ease;
}

.wp-block-navigation__responsive-container-open:hover svg {
	color: var(--wp--preset--color--accent);
}

/* Submenu in mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-foreground) 20%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(1rem, 4vw, 1.25rem);
	text-transform: none;
	letter-spacing: 0;
	color: color-mix(in srgb, var(--wp--preset--color--primary-foreground) 80%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Decorative elements */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--60);
	inset-inline-start: var(--wp--preset--spacing--60);
	inline-size: 80px;
	block-size: 3px;
	background: var(--wp--preset--color--accent);
	opacity: 0.5;
}

.wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--60);
	inset-inline-end: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--primary-foreground) 40%, transparent);
}

/* ==========================================================================
   Footer - Improved Link Visibility
   ========================================================================== */

/* Footer text visibility */
.site-footer,
.site-footer .has-secondary-color {
	color: color-mix(in srgb, var(--wp--preset--color--primary-foreground) 70%, transparent);
}

/* Footer links */
.site-footer a {
	color: var(--wp--preset--color--primary-foreground) !important;
	opacity: 0.85;
	text-decoration: none;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.site-footer a:hover {
	opacity: 1;
	color: var(--wp--preset--color--accent) !important;
}

/* Footer headings */
.site-footer h4 {
	color: var(--wp--preset--color--primary-foreground);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Social icons in footer */
.site-footer .wp-block-social-links .wp-social-link {
	transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Footer social icons - always on dark background */
.site-footer .wp-block-social-links .wp-social-link {
	background-color: rgba(255, 255, 255, 0.15) !important;
}

.site-footer .wp-block-social-links .wp-social-link svg {
	fill: #ffffff !important;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
	transform: scale(1.1);
	background-color: var(--wp--preset--color--accent) !important;
}

.site-footer .wp-block-social-links .wp-social-link:hover svg {
	fill: var(--wp--preset--color--accent-foreground) !important;
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

/* Dark mode variables - shared between media query and manual toggle
   Based on theme.json light colors:
   - Primary: #153045 → Dark: #1a3d57 (lighter for visibility)
   - Primary Hover: #1a3d57 → Dark: #234b6a
   - Accent: #EEAA66 → Keep same for brand consistency
   - Foreground: #153045 → Dark: #f1f5f9 (inverted)

   WCAG AA Accessibility fixes (v1.1.0):
   - Secondary: #94a3b8 → #cbd5e1 (4.8:1 on primary, was 3.2:1)
   - Muted-foreground: #94a3b8 → #b0bfcf (5.2:1 on card, was 4.0:1)
*/
:root {
	--dark-background: #0c1929;
	--dark-foreground: #f1f5f9;
	--dark-primary: #1a3d57;
	--dark-primary-foreground: #f1f5f9;
	--dark-primary-hover: #234b6a;
	--dark-secondary: #cbd5e1;
	--dark-secondary-foreground: #0c1929;
	--dark-accent: #EEAA66;
	--dark-accent-foreground: #153045;
	--dark-muted: #162536;
	--dark-muted-foreground: #b0bfcf;
	--dark-border: #2a4158;
	--dark-card: #162536;
	--dark-card-foreground: #f1f5f9;
}

/* Mixin-like approach: define dark styles that apply to both auto and manual */
@media (prefers-color-scheme: dark) {
	html:not(.light-mode) {
		--wp--preset--color--background: var(--dark-background);
		--wp--preset--color--foreground: var(--dark-foreground);
		--wp--preset--color--primary: var(--dark-primary);
		--wp--preset--color--primary-foreground: var(--dark-primary-foreground);
		--wp--preset--color--primary-hover: var(--dark-primary-hover);
		--wp--preset--color--secondary: var(--dark-secondary);
		--wp--preset--color--secondary-foreground: var(--dark-secondary-foreground);
		--wp--preset--color--accent: var(--dark-accent);
		--wp--preset--color--accent-foreground: var(--dark-accent-foreground);
		--wp--preset--color--muted: var(--dark-muted);
		--wp--preset--color--muted-foreground: var(--dark-muted-foreground);
		--wp--preset--color--border: var(--dark-border);
		--wp--preset--color--card: var(--dark-card);
		--wp--preset--color--card-foreground: var(--dark-card-foreground);
	}
}

/* Manual dark mode class (overrides system preference) */
html.dark-mode {
	--wp--preset--color--background: var(--dark-background);
	--wp--preset--color--foreground: var(--dark-foreground);
	--wp--preset--color--primary: var(--dark-primary);
	--wp--preset--color--primary-foreground: var(--dark-primary-foreground);
	--wp--preset--color--primary-hover: var(--dark-primary-hover);
	--wp--preset--color--secondary: var(--dark-secondary);
	--wp--preset--color--secondary-foreground: var(--dark-secondary-foreground);
	--wp--preset--color--accent: var(--dark-accent);
	--wp--preset--color--accent-foreground: var(--dark-accent-foreground);
	--wp--preset--color--muted: var(--dark-muted);
	--wp--preset--color--muted-foreground: var(--dark-muted-foreground);
	--wp--preset--color--border: var(--dark-border);
	--wp--preset--color--card: var(--dark-card);
	--wp--preset--color--card-foreground: var(--dark-card-foreground);
}

/* Dark mode element styles - apply when dark variables are active */
@media (prefers-color-scheme: dark) {
	html:not(.light-mode) body {
		background-color: var(--wp--preset--color--background);
		color: var(--wp--preset--color--foreground);
	}

	html:not(.light-mode) a:not(.wp-block-button__link):not(.wp-element-button) {
		color: var(--wp--preset--color--accent);
	}

	/* Preserve button text colors in dark mode */
	html:not(.light-mode) .wp-block-button__link.has-primary-foreground-color {
		color: var(--wp--preset--color--primary-foreground) !important;
	}

	/* Links inside accent backgrounds need contrasting color */
	html:not(.light-mode) .has-accent-background-color a,
	html:not(.light-mode) [class*="has-accent-background"] a {
		color: var(--wp--preset--color--accent-foreground) !important;
	}

	/* Links inside primary backgrounds */
	html:not(.light-mode) .has-primary-background-color a,
	html:not(.light-mode) [class*="has-primary-background"] a {
		color: var(--wp--preset--color--primary-foreground) !important;
	}

	html:not(.light-mode) .wp-block-image img {
		border: 1px solid var(--wp--preset--color--border);
	}

	html:not(.light-mode) input,
	html:not(.light-mode) textarea,
	html:not(.light-mode) select {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--foreground);
		border-color: var(--wp--preset--color--border);
	}

	html:not(.light-mode) input::placeholder,
	html:not(.light-mode) textarea::placeholder {
		color: var(--wp--preset--color--muted-foreground);
	}

	html:not(.light-mode) .wp-block-table th {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary-foreground);
	}

	html:not(.light-mode) .wp-block-table td {
		background-color: var(--wp--preset--color--card);
		border-color: var(--wp--preset--color--border);
	}

	html:not(.light-mode) pre,
	html:not(.light-mode) code {
		background-color: var(--wp--preset--color--muted);
		color: var(--wp--preset--color--foreground);
	}

	html:not(.light-mode) blockquote {
		border-color: var(--wp--preset--color--accent);
	}

	html:not(.light-mode) ::selection {
		background-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
		color: var(--wp--preset--color--foreground);
	}

	html:not(.light-mode) header.wp-block-template-part .site-header {
		background-color: var(--wp--preset--color--background);
	}

	html:not(.light-mode) .wp-block-group.is-style-card {
		background-color: var(--wp--preset--color--card);
		border-color: var(--wp--preset--color--border);
	}

	html:not(.light-mode) .is-style-spotlight {
		background:
			radial-gradient(
				circle at var(--spotlight-x) var(--spotlight-y),
				color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) 0%,
				transparent 60%
			),
			var(--wp--preset--color--card);
	}

	html:not(.light-mode) .site-footer {
		background-color: var(--wp--preset--color--primary);
	}

	html:not(.light-mode) .site-footer .has-secondary-color {
		color: var(--wp--preset--color--secondary) !important;
	}

	html:not(.light-mode) .site-footer a {
		color: var(--wp--preset--color--primary-foreground) !important;
	}

	html:not(.light-mode) .wp-block-query-pagination-numbers .page-numbers {
		background-color: var(--wp--preset--color--muted);
		border-color: var(--wp--preset--color--border);
		color: var(--wp--preset--color--foreground);
	}

	html:not(.light-mode) .wp-block-query .wp-block-group {
		background-color: var(--wp--preset--color--card);
	}

	html:not(.light-mode) .skip-link:focus {
		background-color: var(--wp--preset--color--card);
		color: var(--wp--preset--color--foreground);
	}

	html:not(.light-mode) .back-to-top {
		background-color: var(--wp--preset--color--accent) !important;
		color: var(--wp--preset--color--accent-foreground) !important;
	}

	html:not(.light-mode) .wp-block-social-links .wp-social-link {
		background-color: var(--wp--preset--color--muted) !important;
	}

	html:not(.light-mode) .wp-block-social-links .wp-social-link svg {
		fill: var(--wp--preset--color--foreground) !important;
	}

	html:not(.light-mode) .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--primary);
	}

	/* Outline and ghost buttons in dark mode */
	html:not(.light-mode) .wp-block-button.is-style-outline .wp-block-button__link {
		color: var(--wp--preset--color--foreground) !important;
		border-color: var(--wp--preset--color--foreground) !important;
	}

	html:not(.light-mode) .wp-block-button.is-style-ghost .wp-block-button__link {
		color: var(--wp--preset--color--foreground) !important;
	}
}

/* Manual dark mode element styles */
html.dark-mode body {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

html.dark-mode a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--wp--preset--color--accent);
}

/* Preserve button text colors in dark mode */
html.dark-mode .wp-block-button__link.has-primary-foreground-color {
	color: var(--wp--preset--color--primary-foreground) !important;
}

/* Links inside accent backgrounds need contrasting color */
html.dark-mode .has-accent-background-color a,
html.dark-mode [class*="has-accent-background"] a {
	color: var(--wp--preset--color--accent-foreground) !important;
}

/* Links inside primary backgrounds */
html.dark-mode .has-primary-background-color a,
html.dark-mode [class*="has-primary-background"] a {
	color: var(--wp--preset--color--primary-foreground) !important;
}

html.dark-mode .wp-block-image img {
	border: 1px solid var(--wp--preset--color--border);
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
	border-color: var(--wp--preset--color--border);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
	color: var(--wp--preset--color--muted-foreground);
}

html.dark-mode .wp-block-table th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

html.dark-mode .wp-block-table td {
	background-color: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--border);
}

html.dark-mode pre,
html.dark-mode code {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}

html.dark-mode blockquote {
	border-color: var(--wp--preset--color--accent);
}

html.dark-mode ::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	color: var(--wp--preset--color--foreground);
}

html.dark-mode header.wp-block-template-part .site-header {
	background-color: var(--wp--preset--color--background);
}

html.dark-mode .wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--border);
}

html.dark-mode .is-style-spotlight {
	background:
		radial-gradient(
			circle at var(--spotlight-x) var(--spotlight-y),
			color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) 0%,
			transparent 60%
		),
		var(--wp--preset--color--card);
}

html.dark-mode .site-footer {
	background-color: var(--wp--preset--color--primary);
}

html.dark-mode .site-footer .has-secondary-color {
	color: var(--wp--preset--color--secondary) !important;
}

html.dark-mode .site-footer a {
	color: var(--wp--preset--color--primary-foreground) !important;
}

html.dark-mode .wp-block-query-pagination-numbers .page-numbers {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground);
}

html.dark-mode .wp-block-query .wp-block-group {
	background-color: var(--wp--preset--color--card);
}

html.dark-mode .skip-link:focus {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--foreground);
}

html.dark-mode .back-to-top {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-foreground) !important;
}

html.dark-mode .wp-block-social-links .wp-social-link {
	background-color: var(--wp--preset--color--muted) !important;
}

html.dark-mode .wp-block-social-links .wp-social-link svg {
	fill: var(--wp--preset--color--foreground) !important;
}

html.dark-mode .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--primary);
}

/* Outline and ghost buttons in dark mode */
html.dark-mode .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--foreground) !important;
	border-color: var(--wp--preset--color--foreground) !important;
}

html.dark-mode .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--foreground) !important;
}

/* ==========================================================================
   Development Theme Toggle (remove in production)
   ========================================================================== */

.theme-toggle-dev {
	position: fixed;
	bottom: 5rem;
	right: 2rem;
	z-index: 10000;
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--wp--preset--color--card, #fff);
	border: 1px solid var(--wp--preset--color--border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-family: system-ui, sans-serif;
	font-size: 0.75rem;
}

.theme-toggle-dev button {
	padding: 0.5rem 0.75rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	background: transparent;
	color: var(--wp--preset--color--foreground, #153045);
	transition: background 0.2s;
}

.theme-toggle-dev button:hover {
	background: var(--wp--preset--color--muted, #FAFAFA);
}

.theme-toggle-dev button.active {
	background: var(--wp--preset--color--primary, #153045);
	color: var(--wp--preset--color--primary-foreground, #fff);
}

@media print {
	.theme-toggle-dev {
		display: none !important;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	/* Reset colors for print */
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	/* Page settings */
	@page {
		margin: 2cm;
		size: A4;
	}

	/* Typography adjustments */
	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	h1 { font-size: 24pt; }
	h2 { font-size: 20pt; }
	h3 { font-size: 16pt; }
	h4 { font-size: 14pt; }

	p, blockquote, ul, ol, dl, table, pre {
		page-break-inside: avoid;
	}

	/* Hide non-essential elements */
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation,
	.wp-block-search,
	.wp-block-social-links,
	.wp-block-comments,
	.wp-block-post-comments-form,
	.back-to-top,
	.skip-link,
	nav,
	aside,
	form,
	button,
	input,
	textarea,
	select,
	video,
	audio,
	iframe,
	embed,
	object,
	.no-print {
		display: none !important;
	}

	/* Show main content */
	main,
	article,
	.wp-block-group {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Images */
	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	.wp-block-image {
		margin-block: 1em !important;
		float: none !important;
	}

	/* Links - show URLs */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
		font-weight: normal;
		word-wrap: break-word;
	}

	/* Don't show URL for internal/anchor links */
	a[href^="#"]::after,
	a[href^="javascript:"]::after,
	a[href^="mailto:"]::after,
	a[href^="tel:"]::after {
		content: "";
	}

	/* Tables */
	table {
		border-collapse: collapse !important;
	}

	th, td {
		border: 1px solid #000 !important;
		padding: 0.5em !important;
	}

	/* Abbreviations - show full text */
	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	/* Code blocks */
	pre, code {
		border: 1px solid #ccc !important;
		page-break-inside: avoid;
	}

	/* Blockquotes */
	blockquote {
		border-left: 4px solid #000 !important;
		padding-left: 1em !important;
		margin-left: 0 !important;
	}

	/* Cards and special containers */
	.wp-block-group.is-style-card,
	.wp-block-group.is-style-spotlight {
		border: 1px solid #ccc !important;
		padding: 1em !important;
		margin-block: 1em !important;
	}

	/* Post meta */
	.wp-block-post-date,
	.wp-block-post-author-name,
	.wp-block-post-terms {
		font-size: 10pt;
	}

	/* Ensure proper orphans/widows */
	p {
		orphans: 3;
		widows: 3;
	}
}