/**
 * Wordpress Theme Frontend Styles
 * 
 * Barrierefreiheit, Performance und moderne CSS-Features
 */

/* ===========================
   CSS Custom Properties & Color System
   =========================== */

:root {
	/* Light Mode Colors - WCAG AA Compliant */
	--accessibility-toolbar-bg: #f8fafc;
	--accessibility-toolbar-border: #e2e8f0;
	
	--control-bg: #ffffff;
	--control-text: #334155;
	--control-border: #cbd5e1;
	
	--control-hover-bg: #f1f5f9;
	--control-hover-text: #1e293b;
	--control-hover-border: #3b82f6;
	
	--control-active-bg: #3b82f6;
	--control-active-text: #ffffff;
	--control-active-border: #2563eb;
	
	--control-focus-ring: rgba(59, 130, 246, 0.2);
	--control-group-bg: #ffffff;
	
	/* Enhanced Theme Colors */
	--theme-bg-primary: #ffffff;
	--theme-bg-secondary: #f8fafc;
	--theme-text-primary: #1e293b;
	--theme-text-secondary: #374151;
	--theme-text-muted: #4b5563;
	
	--theme-accent: #3b82f6;
	--theme-accent-hover: #2563eb;
	--theme-success: #059669;
	--theme-warning: #d97706;
	--theme-error: #dc2626;
	
	--theme-border: #e2e8f0;
	--theme-border-strong: #cbd5e1;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Colors - WCAG AA Compliant */
[data-color-scheme="dark"] {
	--accessibility-toolbar-bg: #1e293b;
	--accessibility-toolbar-border: #334155;
	
	--control-bg: #334155;
	--control-text: #e2e8f0;
	--control-border: #475569;
	
	--control-hover-bg: #475569;
	--control-hover-text: #f1f5f9;
	--control-hover-border: #60a5fa;
	
	--control-active-bg: #3b82f6;
	--control-active-text: #ffffff;
	--control-active-border: #2563eb;
	
	--control-focus-ring: rgba(96, 165, 250, 0.3);
	--control-group-bg: #334155;
	
	/* Enhanced Theme Colors - Dark */
	--theme-bg-primary: #0f172a;
	--theme-bg-secondary: #1e293b;
	--theme-text-primary: #f1f5f9;
	--theme-text-secondary: #cbd5e1;
	--theme-text-muted: #94a3b8;
	
	--theme-accent: #60a5fa;
	--theme-accent-hover: #3b82f6;
	--theme-success: #10b981;
	--theme-warning: #f59e0b;
	--theme-error: #ef4444;
	
	--theme-border: #334155;
	--theme-border-strong: #475569;
	
	/* Dark shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Auto mode - always uses dark mode styling */
@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme]) {
		--accessibility-toolbar-bg: #1e293b;
		--accessibility-toolbar-border: #334155;
		
		--control-bg: #334155;
		--control-text: #e2e8f0;
		--control-border: #475569;
		
		--control-hover-bg: #475569;
		--control-hover-text: #f1f5f9;
		--control-hover-border: #60a5fa;
		
		--control-active-bg: #3b82f6;
		--control-active-text: #ffffff;
		--control-active-border: #2563eb;
		
		--control-focus-ring: rgba(96, 165, 250, 0.3);
		--control-group-bg: #334155;
		
		--theme-bg-primary: #0f172a;
		--theme-bg-secondary: #1e293b;
		--theme-text-primary: #f1f5f9;
		--theme-text-secondary: #cbd5e1;
		--theme-text-muted: #94a3b8;
		
		--theme-accent: #60a5fa;
		--theme-accent-hover: #3b82f6;
		
		--theme-border: #334155;
		--theme-border-strong: #475569;
		
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
		--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
	}
}

/* ===========================
   CSS Reset & Base Styles
   =========================== */

/* Box-Sizing Reset */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Remove default margins */
body, h1, h2, h3, h4, h5, h6, p, 
figure, blockquote, dl, dd {
	margin: 0;
}

/* System Font Stack für optimale Performance */
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--theme-text-primary);
	background-color: var(--theme-bg-primary);
	transition: color 0.3s ease, background-color 0.3s ease;
}

/* Fluid Typography mit clamp() - Base Size */
html {
	font-size: 16px; /* Base size - will be modified by font-size controls */
	transition: font-size 0.2s ease;
}

/* Base heading sizes - will scale with font-size controls */
h1 { font-size: clamp(1.75rem, 4vw, 3rem); color: var(--theme-text-primary); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); color: var(--theme-text-primary); }
h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); color: var(--theme-text-primary); }
h4 { font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--theme-text-primary); }
h5 { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--theme-text-primary); }
h6 { font-size: clamp(0.875rem, 1vw, 1rem); color: var(--theme-text-primary); }

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

.accessibility-toolbar {
	position: fixed;
	z-index: 100000; /* Higher than WordPress admin bar (99999) */
	background: var(--accessibility-toolbar-bg);
	border: 1px solid var(--accessibility-toolbar-border);
	box-shadow: var(--shadow-md);
}

/* SVG Icon General Styling */
.accessibility-toolbar .icon svg,
.accessibility-toolbar svg.icon {
	display: block;
	width: 16px;
	height: 16px;
	color: currentColor;
	fill: currentColor;
	stroke: currentColor;
	flex-shrink: 0;
}

.accessibility-toolbar .flag svg,
.accessibility-toolbar svg.flag {
	display: block;
	width: 20px;
	height: 15px;
	flex-shrink: 0;
	border-radius: 2px;
}

/* Top Position (default) */
.accessibility-toolbar[data-position="top"],
.accessibility-toolbar:not([data-position]) {
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	padding: 0.5rem 0;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* Adjust for WordPress admin bar when user is logged in */
body.admin-bar .accessibility-toolbar[data-position="top"],
body.admin-bar .accessibility-toolbar:not([data-position]) {
	top: 32px; /* WordPress admin bar height */
}

/* Mobile admin bar adjustment */
@media screen and (max-width: 782px) {
	body.admin-bar .accessibility-toolbar[data-position="top"],
	body.admin-bar .accessibility-toolbar:not([data-position]) {
		top: 46px; /* Mobile WordPress admin bar height */
	}
}

.accessibility-toolbar[data-position="top"] .accessibility-controls,
.accessibility-toolbar:not([data-position]) .accessibility-controls {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	gap: 0.75rem;
	padding: 0 2rem;
	width: 100%;
	max-width: none;
}

/* Right Position */
.accessibility-toolbar[data-position="right"] {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	padding: 0.75rem 0.5rem;
	border-right: none;
	border-radius: 8px 0 0 8px;
	max-width: 60px;
	width: auto;
}

.accessibility-toolbar[data-position="right"] .accessibility-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
}

/* Left Position */
.accessibility-toolbar[data-position="left"] {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	padding: 0.75rem 0.5rem;
	border-left: none;
	border-radius: 0 8px 8px 0;
	max-width: 60px;
	width: auto;
}

.accessibility-toolbar[data-position="left"] .accessibility-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
}

/* Adjust side positions for admin bar */
body.admin-bar .accessibility-toolbar[data-position="right"],
body.admin-bar .accessibility-toolbar[data-position="left"] {
	top: calc(50% + 16px); /* Offset by half admin bar height */
}

/* Vertical layout adjustments for side positions */
.accessibility-toolbar[data-position="right"] .accessibility-control,
.accessibility-toolbar[data-position="left"] .accessibility-control {
	min-width: 40px;
	min-height: 40px;
	padding: 0.5rem;
	justify-content: center;
}

.accessibility-toolbar[data-position="right"] .font-size-controls,
.accessibility-toolbar[data-position="left"] .font-size-controls {
	flex-direction: column;
	width: 40px;
}

.accessibility-toolbar[data-position="right"] .language-switcher,
.accessibility-toolbar[data-position="left"] .language-switcher {
	position: relative;
}

/* Adjust language dropdown position for side toolbars */
.accessibility-toolbar[data-position="right"] .language-dropdown {
	right: 100%;
	left: auto;
	top: 0;
	margin-right: 8px;
}

.accessibility-toolbar[data-position="left"] .language-dropdown {
	left: 100%;
	right: auto;
	top: 0;
	margin-left: 8px;
}

.accessibility-control {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0.4rem 0.8rem;
	background: transparent;
	border: 1px solid var(--control-border);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--control-text);
	box-shadow: none;
	opacity: 0.8;
}

.accessibility-control:hover,
.accessibility-control:focus-visible {
	background: var(--control-hover-bg);
	border-color: var(--control-hover-border);
	color: var(--control-hover-text);
	outline: none;
	box-shadow: 0 0 0 2px var(--control-focus-ring);
	transform: none;
	opacity: 1;
}

.accessibility-control:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 0 0 3px var(--control-focus-ring), var(--shadow-sm);
}

/* Font Size Controls */
.font-size-controls {
	display: flex;
	align-items: stretch;
	gap: 2px;
	border: 1px solid var(--control-border);
	border-radius: 6px;
	padding: 2px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: none;
	height: 40px;
}

.font-size-controls .accessibility-control {
	border: none;
	border-radius: 4px;
	min-width: 36px;
	min-height: auto;
	height: auto;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	box-shadow: none;
	background: transparent;
	opacity: 0.7;
}

.font-size-controls .accessibility-control:hover,
.font-size-controls .accessibility-control:focus-visible {
	background: rgba(59, 130, 246, 0.15);
	color: var(--control-hover-text);
	border: none;
	box-shadow: none;
	transform: none;
	opacity: 1;
}

.font-size-controls .accessibility-control[data-active="true"] {
	background: var(--control-active-bg);
	color: var(--control-active-text);
	border-color: var(--control-active-border);
	box-shadow: 0 0 0 2px var(--control-focus-ring);
}

/* Language Switcher */
.language-switcher {
	position: relative;
}

.language-toggle {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4rem 0.8rem;
	min-width: 60px;
	min-height: 40px;
	height: 40px;
}

.language-toggle .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.language-toggle .language-code {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.75rem;
}

.language-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	background: var(--control-bg);
	border: 1px solid var(--control-border);
	border-radius: 6px;
	box-shadow: var(--shadow-md);
	min-width: 150px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	z-index: 1001;
}

.language-switcher.is-open .language-dropdown,
.language-toggle[aria-expanded="true"] + .language-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.language-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	color: var(--control-text);
	font-size: 0.875rem;
	transition: background-color 0.2s ease;
}

.language-option:hover {
	background: var(--control-hover-bg);
	color: var(--control-hover-text);
}

.language-option.active {
	background: var(--control-active-bg);
	color: var(--control-active-text);
	font-weight: 600;
}

.language-option:first-child {
	border-radius: 5px 5px 0 0;
}

.language-option:last-child {
	border-radius: 0 0 5px 5px;
}

.language-option .flag {
	width: 20px;
	height: 15px;
	flex-shrink: 0;
}

/* Seizure Safe Toggle */
.seizure-safe-toggle {
	position: relative;
	padding: 0.4rem 0.8rem;
	min-width: 40px;
	min-height: 40px;
	height: 40px;
}

.seizure-safe-toggle.active {
	background: var(--control-active-bg);
	color: var(--control-active-text);
	border-color: var(--control-active-border);
}

.seizure-safe-toggle .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	filter: grayscale(0);
	transition: filter 0.2s ease;
}

.seizure-safe-toggle.active .icon {
	filter: grayscale(100%);
}

/* Focus Mode Toggle */
.focus-mode-toggle {
	position: relative;
	padding: 0.4rem 0.8rem;
	min-width: 40px;
	min-height: 40px;
	height: 40px;
}

.focus-mode-toggle.active {
	background: var(--control-active-bg);
	color: var(--control-active-text);
	border-color: var(--control-active-border);
}

.focus-mode-toggle .icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Color Scheme Toggle */
.color-scheme-toggle {
	position: relative;
	padding: 0.4rem 0.8rem;
	min-width: 40px;
	min-height: 40px;
	height: 40px;
}

.color-scheme-toggle .icon {
	display: none;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Enhanced color scheme toggle icons - Light/Dark only */
[data-color-scheme="light"] .color-scheme-toggle .light-icon {
	display: inline;
}

[data-color-scheme="light"] .color-scheme-toggle .dark-icon {
	display: none;
}

[data-color-scheme="dark"] .color-scheme-toggle .dark-icon {
	display: inline;
}

[data-color-scheme="dark"] .color-scheme-toggle .light-icon {
	display: none;
}

/* Default state shows light icon */
:root:not([data-color-scheme]) .color-scheme-toggle .light-icon {
	display: inline;
}

:root:not([data-color-scheme]) .color-scheme-toggle .dark-icon {
	display: none;
}

/* Auto mode follows system preference but uses dark mode styling */
@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme]) .color-scheme-toggle .light-icon {
		display: none;
	}
	
	:root:not([data-color-scheme]) .color-scheme-toggle .dark-icon {
		display: inline;
	}
}

/* ===========================
   Barrierefreiheit (WCAG 2.1 AA)
   =========================== */

/* Skip Link Styles */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
	text-decoration: none;
	background-color: var(--theme-bg-secondary);
	color: var(--theme-text-primary);
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	border-radius: 3px;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: var(--shadow-lg);
	outline: 3px solid var(--theme-accent);
	outline-offset: 2px;
}

/* Focus Visible für alle interaktiven Elemente */
:focus-visible {
	outline: 2px solid var(--theme-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Focus für Buttons und Links */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--theme-accent);
	outline-offset: 2px;
}

/* Entfernt Outline bei Mausklick, behält sie bei Tastatur */
:focus:not(:focus-visible) {
	outline: none;
}

/* Screen Reader Only Text */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	position: static !important;
	overflow: visible;
	display: block;
	padding: 0.75rem 1rem;
	background: var(--theme-bg-secondary);
	color: var(--theme-text-primary);
	z-index: 100000;
}

/* Announcement region styling */
#wp-live-region {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===========================
   Reduced Motion Support
   =========================== */

@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;
	}
}

/* ===========================
   Seizure Safe Mode
   =========================== */

[data-seizure-safe="true"] *,
[data-seizure-safe="true"] *::before,
[data-seizure-safe="true"] *::after {
	animation: none !important;
	transition: none !important;
	transform: none !important;
}

[data-seizure-safe="true"] {
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
}

[data-seizure-safe="true"] img,
[data-seizure-safe="true"] video {
	filter: brightness(0.8) contrast(0.9);
}

[data-seizure-safe="true"] .wp-block-image img:hover,
[data-seizure-safe="true"] a:hover {
	transform: none !important;
	filter: none !important;
}

/* Remove all flashing/blinking effects */
[data-seizure-safe="true"] *[class*="blink"],
[data-seizure-safe="true"] *[class*="flash"],
[data-seizure-safe="true"] *[class*="pulse"] {
	animation: none !important;
}

/* ===========================
   Focus Mode
   =========================== */

[data-focus-mode="true"] {
	/* Reduced color contrast for less distraction */
	--theme-accent: #7c3aed;
	--theme-accent-hover: #6d28d9;
	--theme-text-secondary: #6b7280;
	--theme-text-muted: #9ca3af;
}

/* Hide decorative elements */
[data-focus-mode="true"] .wp-block-social-links,
[data-focus-mode="true"] .wp-block-tag-cloud,
[data-focus-mode="true"] .wp-block-categories,
[data-focus-mode="true"] .wp-block-latest-posts {
	display: none !important;
}

/* Simplify navigation */
[data-focus-mode="true"] .wp-block-navigation {
	opacity: 0.6;
}

[data-focus-mode="true"] .wp-block-navigation:hover,
[data-focus-mode="true"] .wp-block-navigation:focus-within {
	opacity: 1;
}

/* Reduce sidebar distractions */
[data-focus-mode="true"] .wp-block-group:has(.wp-block-widget-group) {
	opacity: 0.4;
	filter: blur(1px);
	transition: opacity 0.3s ease, filter 0.3s ease;
}

[data-focus-mode="true"] .wp-block-group:has(.wp-block-widget-group):hover {
	opacity: 1;
	filter: none;
}

/* Enhanced content focus */
[data-focus-mode="true"] .wp-block-post-content,
[data-focus-mode="true"] .entry-content {
	background: rgba(255, 255, 255, 0.02);
	border-radius: 8px;
	padding: 1.5rem;
	margin: 1rem 0;
}

[data-focus-mode="true"] h1,
[data-focus-mode="true"] h2,
[data-focus-mode="true"] h3 {
	border-left: 3px solid var(--theme-accent);
	padding-left: 1rem;
	margin-left: -1rem;
}

/* Reduce motion even more */
[data-focus-mode="true"] * {
	transition-duration: 0.1s !important;
	animation-duration: 0.1s !important;
}

/* ===========================
   Layout Utilities
   =========================== */

/* Container mit Root Padding Aware */
.wp-site-blocks {
	padding-left: var(--wp--preset--spacing--50, 1.5rem);
	padding-right: var(--wp--preset--spacing--50, 1.5rem);
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wp-site-blocks > * {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-left: auto;
	margin-right: auto;
}

.wp-site-blocks > .alignfull {
	max-width: none;
	margin-left: calc(-1 * var(--wp--preset--spacing--50, 1.5rem));
	margin-right: calc(-1 * var(--wp--preset--spacing--50, 1.5rem));
	width: auto;
}

/* Enhanced header styling */
.wp-block-template-part[data-area="header"] {
	background-color: var(--theme-bg-secondary);
	border-bottom: 1px solid var(--theme-border);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Site Branding */
.site-branding {
	gap: 1rem;
}

.site-branding .wp-block-site-logo {
	flex-shrink: 0;
}

.site-branding .wp-block-site-title {
	margin: 0;
	line-height: 1.2;
}

.site-branding .wp-block-site-title a {
	text-decoration: none;
	color: var(--theme-text-primary);
	transition: color 0.2s ease;
}

.site-branding .wp-block-site-title a:hover {
	color: var(--theme-accent);
}

.site-branding .wp-block-site-tagline {
	margin: 0;
	color: var(--theme-text-primary);
	opacity: 0.8;
	font-style: italic;
}

/* Override WordPress block color classes for better contrast */
.wp-block-site-tagline.has-text-color.has-text-secondary-color {
	color: var(--theme-text-primary) !important;
	opacity: 0.8;
}

/* Content area styling */
.wp-block-group.alignfull {
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary);
}

/* Links */
a {
	color: var(--theme-accent);
	transition: color 0.2s ease;
}

a:hover {
	color: var(--theme-accent-hover);
}

/* Enhanced Dark Mode Styles */
[data-color-scheme="dark"] {
	--wp--preset--color--base: #0f172a;
	--wp--preset--color--contrast: #f1f5f9;
	--wp--preset--color--accent: #334155;
	--wp--preset--color--muted: #94a3b8;
	--wp--preset--color--primary: #60a5fa;
	--wp--preset--color--secondary: #3b82f6;
}

[data-color-scheme="dark"] .wp-site-blocks,
[data-color-scheme="dark"] .wp-block-group,
[data-color-scheme="dark"] body {
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary);
}

[data-color-scheme="dark"] .wp-block-navigation,
[data-color-scheme="dark"] .wp-block-search,
[data-color-scheme="dark"] .wp-block-button {
	color: var(--theme-text-primary);
}

[data-color-scheme="dark"] .wp-block-navigation-link a {
	color: var(--theme-text-secondary);
}

[data-color-scheme="dark"] .wp-block-navigation-link a:hover {
	color: var(--theme-accent);
}

/* ===========================
   Font Size Controls
   =========================== */

/* Dynamic Font Size Classes - Fixed Implementation */
html[data-font-size="small"] {
	font-size: 14px;
}

html[data-font-size="normal"] {
	font-size: 16px;
}

html[data-font-size="large"] {
	font-size: 18px;
}

html[data-font-size="x-large"] {
	font-size: 20px;
}

/* Ensure accessibility controls aren't affected by font size changes */
.accessibility-toolbar,
.accessibility-control {
	font-size: 0.875rem !important;
}

/* Font size scaling for all text elements */
[data-font-size="small"] body,
[data-font-size="small"] p,
[data-font-size="small"] li,
[data-font-size="small"] span,
[data-font-size="small"] div,
[data-font-size="small"] .wp-block-paragraph {
	font-size: 0.875rem;
}

[data-font-size="large"] body,
[data-font-size="large"] p,
[data-font-size="large"] li,
[data-font-size="large"] span,
[data-font-size="large"] div,
[data-font-size="large"] .wp-block-paragraph {
	font-size: 1.125rem;
}

[data-font-size="x-large"] body,
[data-font-size="x-large"] p,
[data-font-size="x-large"] li,
[data-font-size="x-large"] span,
[data-font-size="x-large"] div,
[data-font-size="x-large"] .wp-block-paragraph {
	font-size: 1.25rem;
}

/* Scale headings proportionally */
[data-font-size="small"] h1 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
[data-font-size="small"] h2 { font-size: clamp(1.25rem, 2.5vw, 2rem); }
[data-font-size="small"] h3 { font-size: clamp(1.125rem, 2vw, 1.75rem); }
[data-font-size="small"] h4 { font-size: clamp(1rem, 1.5vw, 1.25rem); }
[data-font-size="small"] h5 { font-size: clamp(0.875rem, 1.25vw, 1.125rem); }
[data-font-size="small"] h6 { font-size: clamp(0.75rem, 1vw, 1rem); }

[data-font-size="large"] h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
[data-font-size="large"] h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); }
[data-font-size="large"] h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
[data-font-size="large"] h4 { font-size: clamp(1.25rem, 2.25vw, 1.75rem); }
[data-font-size="large"] h5 { font-size: clamp(1.125rem, 1.75vw, 1.5rem); }
[data-font-size="large"] h6 { font-size: clamp(1rem, 1.25vw, 1.25rem); }

[data-font-size="x-large"] h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
[data-font-size="x-large"] h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
[data-font-size="x-large"] h3 { font-size: clamp(1.75rem, 3.5vw, 3rem); }
[data-font-size="x-large"] h4 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
[data-font-size="x-large"] h5 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
[data-font-size="x-large"] h6 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }

/* ===========================
   Components
   =========================== */

/* Navigation Accessibility */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 0.75rem;
	min-width: 44px;
	min-height: 44px;
}

/* Fix navigation list structure for accessibility */
.wp-block-navigation ul.wp-block-navigation__container > *:not(li) {
	display: contents;
}

.wp-block-navigation ul.wp-block-page-list > *:not(li) {
	display: contents;
}

/* Ensure list items are properly structured */
.wp-block-navigation li:not(.wp-block-navigation-item) {
	list-style: none;
}

/* Remove any non-list elements from being rendered as list items */
.wp-block-navigation ul > script,
.wp-block-navigation ul > template {
	display: none;
}

/* Search Form */
.wp-block-search__button {
	min-height: 44px;
	padding: 0.5rem 1rem;
}

.wp-block-search__input {
	min-height: 44px;
	padding: 0.5rem;
}

/* Comments */
.wp-block-post-comments {
	margin-top: var(--wp--preset--spacing--60, 2rem);
}

.comment-reply-link,
.comment-edit-link {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ===========================
   High Contrast Mode
   =========================== */

@media (prefers-contrast: high) {
	.accessibility-control {
		border-width: 3px;
		font-weight: 700;
	}
	
	.accessibility-control:focus-visible {
		box-shadow: 0 0 0 3px var(--control-focus-ring), var(--shadow-lg);
	}

	:root {
		--theme-accent: #0050d8;
		--theme-accent-hover: #0066ff;
		--theme-text-secondary: #1a202c;
		--theme-text-muted: #2d3748;
	}
	
	*:focus-visible {
		outline-width: 3px;
	}
	
	.wp-block-button__link {
		border: 2px solid currentColor;
	}
	
	/* Ensure all text has sufficient contrast in high contrast mode */
	.wp-block-site-tagline,
	.wp-block-site-tagline.has-text-color {
		color: #1a202c !important;
		opacity: 1 !important;
	}
}

/* ===========================
   Mobile Responsive
   =========================== */

@media (max-width: 768px) {
	.accessibility-toolbar {
		padding: 0.5rem 0;
	}
	
	.accessibility-controls {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 0.5rem var(--wp--preset--spacing--40, 1rem);
		justify-content: space-between;
		align-items: center;
	}
	
	.accessibility-control {
		min-width: 44px;
		min-height: 44px;
		font-size: 0.8rem;
		padding: 0.5rem 0.8rem;
	}
	
	.color-scheme-toggle {
		min-width: 50px;
		padding: 0.5rem 1rem;
		order: 2;
	}
	
	.font-size-controls {
		order: 1;
		flex: 1;
		justify-content: center;
	}
	
	.font-size-controls .accessibility-control {
		flex: 1;
		max-width: 70px;
	}
	
	.is-hidden-mobile { display: none !important; }
	.is-visible-mobile { display: block; }
}

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

@media print {
	/* Hide non-essential elements */
	.accessibility-toolbar,
	.wp-block-navigation,
	.wp-block-search,
	.skip-link,
	.wp-block-comments-form,
	.wp-block-social-links,
	#wpadminbar {
		display: none !important;
	}
	
	/* Reset colors for print */
	body {
		color: #000 !important;
		background: #fff !important;
	}
	
	/* Ensure links are visible */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		font-weight: normal;
	}
	
	/* Avoid page breaks inside elements */
	h1, h2, h3, h4, h5, h6,
	img, figure, blockquote {
		page-break-inside: avoid;
	}
	
	/* Ensure headings don't get separated from content */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
	
	/* Better image printing */
	img {
		max-width: 100% !important;
	}
}

/* ===========================
   Performance Optimizations
   =========================== */

/* Lazy Loading Placeholder */
img[loading="lazy"] {
	background: var(--theme-bg-secondary);
}

/* Contain Layout Reflow */
.wp-block-image,
.wp-block-video,
.wp-block-embed {
	contain: layout;
}

/* Font Display Swap for Web Fonts */
@font-face {
	font-display: swap;
}

/* ===========================
   Utility Classes
   =========================== */

/* Text Utilities */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* Spacing Utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* Visibility */
.is-hidden { display: none !important; }
.is-visible-mobile { display: none; }

/* ===========================
   Smooth Scrolling
   =========================== */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
	
	/* Scroll Padding für Fixed Header */
	html {
		scroll-padding-top: 120px; /* Adjusted for accessibility toolbar */
	}
}

/* Enhanced focus styles for better accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--theme-accent);
	outline-offset: 2px;
	border-radius: 3px;
}