/**
 * Augenärzte Achern Accessibility – UI & global overrides
 * Nutzt FSE-Variablen wo vorhanden; logische Klassen für Anpassungen.
 */

/* ========== Schriftgrößen (rem-Skalierung über html) ========== */
/* Groß = früher „Sehr Groß“, Sehr Groß = noch größer */
html.aa-acc-font-large {
	font-size: 125%;
}
html.aa-acc-font-x-large {
	font-size: 150%;
}

/* ========== Hochkontrast (invertiert: schwarz, weiß, gelb als Akzent) ========== */
body.aa-acc-high-contrast {
	--wp--preset--color--base: #000000;
	--wp--preset--color--base-2: #000000;
	--wp--preset--color--contrast: #ffffff;
	--wp--preset--color--contrast-2: #ffffff;
	--wp--preset--color--primary: #ffffff;
	--wp--preset--color--secondary: #e0e0e0;
	--wp--preset--color--accent: #ffff00;
	--wp--preset--color--accent-5: #252420;
	--wp--preset--color--foreground: #ffffff;
	--wp--preset--color--background: #000000;
}
body.aa-acc-high-contrast,
body.aa-acc-high-contrast .wp-block-button__link,
body.aa-acc-high-contrast a {
	color: var(--wp--preset--color--contrast, #fff);
}
body.aa-acc-high-contrast a:hover,
body.aa-acc-high-contrast a:focus {
	color: var(--wp--preset--color--accent, #ffff00);
}
body.aa-acc-high-contrast .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast, #fff);
	color: var(--wp--preset--color--base, #000);
	border: 2px solid var(--wp--preset--color--contrast, #fff);
}

/* Hochkontrast: alle SVGs weiß (Filter) */
body.aa-acc-high-contrast img[src$=".svg"],
body.aa-acc-high-contrast svg {
	filter: brightness(0) invert(1);
}

/* ========== Tab-Button (Normal: weiß, größer; Kontrast: blau + gelber Outline) ========== */
.aa-acc-wrap {
	position: fixed;
	z-index: 999999;
	bottom: 0;
	right: 0;
	pointer-events: none;
}
.aa-acc-tab {
	pointer-events: auto;
	position: absolute;
	bottom: 1.5rem;
	right: 0;
	width: 76px;
	height: 76px;
	padding: 0;
	border: none;
	border-radius: 8px 0 0 8px;
	box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, box-shadow 0.2s, outline 0.2s;
}
.aa-acc-tab:hover,
.aa-acc-tab:focus {
	background: #f0f0f0;
	box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.2);
	outline: 2px solid rgba(0, 0, 0, 0.3);
	outline-offset: 2px;
}
/* Icon größer, Farbe bleibt wie im SVG (nicht überschreiben) */
.aa-acc-tab-icon {
	width: 52px;
	height: 52px;
	display: block;
	pointer-events: none;
}
/* Hochkontrast: Tab blau mit gelber Outline, Icon wird durch body-Regel weiß */
body.aa-acc-high-contrast .aa-acc-tab {
	background: #1a0089;
	outline: 2px solid #ffff00;
	outline-offset: 2px;
}
body.aa-acc-high-contrast .aa-acc-tab:hover,
body.aa-acc-high-contrast .aa-acc-tab:focus {
	background: #2500a8;
	outline: 2px solid #ffff00;
	outline-offset: 2px;
}

/* ========== Backdrop (Klick außerhalb schließt Drawer) ========== */
.aa-acc-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 999998;
}
.aa-acc-wrap.aa-acc-open .aa-acc-backdrop {
	pointer-events: auto;
	opacity: 1;
}

/* ========== Drawer (Slide-in von rechts) ========== */
.aa-acc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 280px;
	max-width: 90vw;
	height: 100vh;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #111);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.25s ease-out;
	pointer-events: auto;
	overflow: auto;
	z-index: 999999;
}
.aa-acc-wrap.aa-acc-open .aa-acc-drawer {
	transform: translateX(0);
}
body.aa-acc-high-contrast .aa-acc-drawer {
	background: var(--wp--preset--color--background, #000);
	color: var(--wp--preset--color--contrast, #fff);
	border-left: 2px solid var(--wp--preset--color--accent, #ffff00);
}

.aa-acc-panel-inner {
	padding: 1rem 1.25rem 1.5rem;
}

/* Schließen in eigener Zeile (Standard-WP-Block-Button) */
.aa-acc-panel-close-row {
	opacity: 0.85;
}
.aa-acc-panel-close-row .wp-block-button {
	width: 100%;
}
.aa-acc-panel-close-row .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.5rem 1rem;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	/* Kein Rand/Outline, der Layout verschiebt – Focus-Ring per box-shadow */
	border: 2px solid transparent;
	box-sizing: border-box;
}
.aa-acc-panel-close-row .wp-block-button__link:hover,
.aa-acc-panel-close-row .wp-block-button__link:focus {
	opacity: 1;
	outline: none;
	box-shadow: 0 0 0 2px currentColor;
}

/* ========== Steuerung: Hochkontrast als Switch ========== */
.aa-acc-control {
	margin-bottom: 1.25rem;
}
.aa-acc-control-contrast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.aa-acc-control-contrast .aa-acc-label {
	margin-bottom: 0;
	flex: 1;
}
.aa-acc-switch {
	position: relative;
	flex-shrink: 0;
	width: 2.75rem;
	height: 1.5rem;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.aa-acc-switch:hover,
.aa-acc-switch:focus {
	outline: 2px solid var(--wp--preset--color--primary, #1a0089);
	outline-offset: 2px;
}
.aa-acc-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.5rem - 8px);
	height: calc(1.5rem - 8px);
	border-radius: 50%;
	background: currentColor;
	transition: transform 0.2s;
}
.aa-acc-switch.aa-acc-active {
	background: var(--wp--preset--color--primary, #1a0089);
	border-color: var(--wp--preset--color--primary, #1a0089);
}
.aa-acc-switch.aa-acc-active .aa-acc-switch-knob {
	transform: translateX(1.25rem);
	background: var(--wp--preset--color--base, #fff);
}
body.aa-acc-high-contrast .aa-acc-switch.aa-acc-active {
	background: var(--wp--preset--color--accent, #ffff00);
	border-color: var(--wp--preset--color--accent, #ffff00);
}
body.aa-acc-high-contrast .aa-acc-switch.aa-acc-active .aa-acc-switch-knob {
	background: var(--wp--preset--color--background, #000);
}

/* ========== Steuerung: Schriftgröße (3 Stufen, Standard-WP-Block-Buttons) ========== */
.aa-acc-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.aa-acc-font-steps {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.aa-acc-font-steps .wp-block-button {
	width: 100%;
}
.aa-acc-font-steps .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	/* Kein Sprung: feste Border-Box, Focus-Ring per box-shadow statt outline/border */
	border: 2px solid transparent;
	box-sizing: border-box;
}
.aa-acc-font-steps .wp-block-button__link:hover,
.aa-acc-font-steps .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary, #1a0089);
	color: var(--wp--preset--color--base, #fff);
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary, #1a0089);
}
.aa-acc-font-steps .wp-block-button__link.aa-acc-active {
	background: var(--wp--preset--color--primary, #1a0089);
	color: var(--wp--preset--color--base, #fff);
	border-color: transparent;
}
body.aa-acc-high-contrast .aa-acc-font-steps .wp-block-button__link.aa-acc-active {
	background: var(--wp--preset--color--accent, #ffff00);
	color: var(--wp--preset--color--background, #000);
}
/* Verhindern, dass Theme-Transforms (z. B. translateY) im Drawer springen */
.aa-acc-drawer .wp-block-button__link {
	transform: none;
}