/*
 * Ernesto Sam — Child Theme
 * Morphing nav + organic WebGL background
 */

/* Standard CSS Stuff */
.site-branding {
	display: none !important;
}
/*
 * Background strategy:
 *   WebGL canvas owns the background entirely (alpha: false, opaque).
 *   body must be transparent so it doesn't paint over the canvas.
 *   Canvas sits at z-index:0, fixed, full-viewport.
 *   Content uses position:relative (no z-index) so it paints after the
 *   canvas by DOM order — on top — without creating a stacking context
 *   that would isolate h1's mix-blend-mode from seeing the canvas.
 */

/* Let the WebGL canvas own the background — body must not paint over it.
   html keeps the canvas fallback colour (set by early inline style in wp_head)
   so there's no white flash before the canvas renders. */
body {
	background: transparent !important;
}

/* Content sits above canvas via DOM order, no stacking context needed */
#page,
.site {
	position: relative;
}

/* ─── Footer: use current text color at reduced opacity for both modes ── */
.site-footer,
.site-footer .site-info,
.site-footer .site-info a,
.site-footer .site-info .sep {
	color: currentColor !important;
	opacity: 0.75;
}
.site-footer .site-info a:hover,
.site-footer .site-info a:focus {
	opacity: 1;
}

/* Accessibility mode: always black, full opacity */
body.high-contrast .site-footer,
body.high-contrast .site-footer .site-info,
body.high-contrast .site-footer .site-info a,
body.high-contrast .site-footer .site-info .sep {
	color: #000066 !important;
	opacity: 1 !important;
}

/* ─── Strip cream/surface background from structural elements ─────────── */
.site-header,
.site-header .header-container {
	background: transparent !important;
	background-color: transparent !important;
}

/* ─── Cards: blue border, transparent background ─────────────────────── */
.ernesto-card {
	background: transparent !important;
	background-color: transparent !important;
	border: 1.5px solid var(--color-primary, #0066ff) !important;
	box-shadow: none !important;
}

.ernesto-card:hover {
	border-color: var(--color-primary-hover, #0052cc) !important;
}

/* Override --bg-surface leaking into any other card-like blocks */
.wp-block-group.is-style-card,
.wp-block-group.has-background {
	background: transparent !important;
}

/* ─── H1 / titles: blend mode directly on element ────────────────────────
 *
 * mix-blend-mode applied to the element itself (not ::after) for cross-
 * browser compatibility — Safari doesn't composite ::after pseudo-elements
 * against fixed-position canvas layers.
 *
 * Light mode: color-burn #505050 against canvas → burns blob colours through
 *   letterforms. Fallback (if blend unsupported): readable dark gray.
 * Dark mode:  overlay rgba(255,255,255,0.85) → brightens/saturates blobs.
 *   Fallback: readable near-white.
 * ─────────────────────────────────────────────────────────────────────── */

h1, h2,
h1.wp-block-heading, h2.wp-block-heading,
.entry-title,
.page-title,
.site-title,
.hero-title,
.wp-block-heading[class*="is-style-"] {
	color: #505050 !important;
	mix-blend-mode: color-burn;
	-webkit-text-stroke: 0px;
	background-color: transparent !important;
	text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.20);
}

@media (prefers-color-scheme: dark) {
	h1, h2,
	h1.wp-block-heading, h2.wp-block-heading,
	.entry-title,
	.page-title,
	.site-title,
	.hero-title,
	.wp-block-heading[class*="is-style-"] {
		color: rgba(255, 255, 255, 0.85) !important;
		mix-blend-mode: overlay;
		text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.20);
	}
}

html.dark-mode h1, html.dark-mode h2,
html.dark-mode h1.wp-block-heading, html.dark-mode h2.wp-block-heading,
html.dark-mode .entry-title,
html.dark-mode .page-title,
html.dark-mode .site-title,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h1.wp-block-heading, [data-theme="dark"] h2.wp-block-heading,
[data-theme="dark"] .entry-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .site-title {
	color: rgba(255, 255, 255, 0.85) !important;
	mix-blend-mode: overlay;
	text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.20);
}

/* H2 inside nav panel: no blend — inherit nav text color */
#sam-nav h2 {
	mix-blend-mode: normal !important;
	color: var(--sam-nav-text) !important;
	background: none !important;
	-webkit-text-fill-color: unset !important;
	text-shadow: none !important;
}

/* ─── Safari: canvas compositing layers block mix-blend-mode ─────────── *
 * Safari puts position:fixed elements in their own compositing layer, so *
 * any mix-blend-mode on content above blends against white, not canvas.  *
 * Fallback: gradient text via -webkit-background-clip, matching the      *
 * warm blob palette (yellow → rose → lavender).                          *
 * html.is-safari is added synchronously in header.php before first paint.*
 * ──────────────────────────────────────────────────────────────────────── */
html.is-safari h1, html.is-safari h2,
html.is-safari h1.wp-block-heading, html.is-safari h2.wp-block-heading,
html.is-safari .entry-title,
html.is-safari .page-title,
html.is-safari .site-title,
html.is-safari .hero-title,
html.is-safari .wp-block-heading[class*="is-style-"] {
	background: linear-gradient(115deg, #b87800 0%, #c05870 55%, #7858a8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	mix-blend-mode: normal;
	text-shadow: none; /* can't combine text-shadow with background-clip:text */
	padding-bottom: 0.15em; /* prevent descenders (g, y, p…) being clipped */
}

/* Dark mode Safari: lighten the gradient so it reads on a dark canvas */
html.is-safari.dark-mode h1, html.is-safari.dark-mode h2,
html.is-safari.dark-mode h1.wp-block-heading, html.is-safari.dark-mode h2.wp-block-heading,
html.is-safari.dark-mode .entry-title,
html.is-safari.dark-mode .page-title,
html.is-safari.dark-mode .site-title,
html.is-safari.dark-mode .hero-title,
html.is-safari.dark-mode .wp-block-heading[class*="is-style-"] {
	background: linear-gradient(115deg, #ffd040 0%, #ff88aa 55%, #bb99ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ─── Buttons: color-burn / overlay blend (mirrors h1 treatment) ─────── *
 *                                                                         *
 * Light mode: background #505050 color-burns against the canvas →        *
 *   the button shape shows saturated blob hues; white text becomes the   *
 *   raw canvas colour (readable against the darker burned fill).         *
 * Dark mode: light bg with overlay → brightens/saturates blobs.         *
 * Safari: gradient fill (same palette as h1) because Safari can't        *
 *   composite mix-blend-mode against a fixed-position canvas.            *
 * High-contrast: plain navy/white, no blend.                             *
 * ─────────────────────────────────────────────────────────────────────── */

/* color-burn with #505050 in both modes:
   - Button fill: canvas color darkened through the button shape
   - Text (white): white in color-burn = base canvas color → effectively
     "transparent to the background" in light AND dark mode */
.wp-block-button__link,
.wp-element-button {
	background-color: #505050 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	border-color: transparent !important;
	mix-blend-mode: color-burn;
	text-shadow: none !important;
}

/* Safari: frosted-glass — backdrop-filter composites against the canvas
   correctly; blend modes on filled elements don't */
html.is-safari .wp-block-button__link,
html.is-safari .wp-element-button {
	background: rgba(255, 255, 255, 0.18) !important;
	-webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.1);
	backdrop-filter: blur(12px) saturate(200%) brightness(1.1);
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	color: #ffffff !important;
	mix-blend-mode: normal;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
html.is-safari.dark-mode .wp-block-button__link,
html.is-safari.dark-mode .wp-element-button {
	background: rgba(0, 0, 0, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}

/* High-contrast: plain, no blend */
body.high-contrast .wp-block-button__link,
body.high-contrast .wp-element-button {
	background-color: #000066 !important;
	color: #ffffff !important;
	mix-blend-mode: normal !important;
	border: 2px solid #000066 !important;
}
html.dark-mode body.high-contrast .wp-block-button__link,
html.dark-mode body.high-contrast .wp-element-button {
	background-color: #ffffff !important;
	color: #000000 !important;
	border-color: #ffffff !important;
}

/* ─── Text links: color-burn (mirrors h1 / button treatment) ────────── *
 * Targets content-area links only — excludes nav, buttons, footer.      *
 * Underline keeps them identifiable as links alongside body text.       */

.entry-content a,
.site-main a,
.wp-block-paragraph a,
.wp-block-list a,
.wp-block-group a {
	color: #505050 !important;
	mix-blend-mode: color-burn;
	text-decoration-color: rgba(80, 80, 80, 0.4);
	text-underline-offset: 3px;
}

@media (prefers-color-scheme: dark) {
	.entry-content a,
	.site-main a,
	.wp-block-paragraph a,
	.wp-block-list a,
	.wp-block-group a {
		color: rgba(255, 255, 255, 0.85) !important;
		mix-blend-mode: overlay;
		text-decoration-color: rgba(255, 255, 255, 0.4);
	}
}
html.dark-mode .entry-content a,
html.dark-mode .site-main a,
html.dark-mode .wp-block-paragraph a,
html.dark-mode .wp-block-list a,
html.dark-mode .wp-block-group a {
	color: rgba(255, 255, 255, 0.85) !important;
	mix-blend-mode: overlay;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* Safari: plain readable color, no blend */
html.is-safari .entry-content a,
html.is-safari .site-main a,
html.is-safari .wp-block-paragraph a,
html.is-safari .wp-block-list a,
html.is-safari .wp-block-group a {
	color: #7858a8 !important;
	mix-blend-mode: normal;
	text-decoration-color: rgba(120, 88, 168, 0.5);
}
html.is-safari.dark-mode .entry-content a,
html.is-safari.dark-mode .site-main a,
html.is-safari.dark-mode .wp-block-paragraph a,
html.is-safari.dark-mode .wp-block-list a,
html.is-safari.dark-mode .wp-block-group a {
	color: #bb99ff !important;
	text-decoration-color: rgba(187, 153, 255, 0.5);
}

/* High-contrast: plain underlined links */
body.high-contrast .entry-content a,
body.high-contrast .site-main a {
	color: #000066 !important;
	mix-blend-mode: normal !important;
	text-decoration: underline;
}
html.dark-mode body.high-contrast .entry-content a,
html.dark-mode body.high-contrast .site-main a {
	color: #ffffff !important;
}

/* Exclude buttons nested inside content areas */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button,
.site-main .wp-block-button__link,
.site-main .wp-element-button {
	text-decoration: none !important;
}

/* ─── Hide parent header nav; keep branding ─────────────────────────── */
.site-header .main-navigation,
.site-header .header-end,
.site-header .header-top-wrapper,
.site-header .menu-toggle,
.site-header .menu-close {
	display: none !important;
}

/* Keep a slim header for the logo only */
.site-header {
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: none !important;
}

/* ─── Full-page blob canvas ──────────────────────────────────────────── */
/* Opaque WebGL canvas — owns its own background, no CSS compositing needed.
   will-change: transform tells Safari "this layer updates every frame" so it
   never caches it as a static bitmap — required for the light/dark toggle to
   visually update the canvas in Safari. */
#sam-bg {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
	will-change: transform;
}


/* ─── Nav — unified expanding box ───────────────────────────────────── */
#sam-nav {
	position: fixed;
	top: 1.4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	/* Width is driven by content — shrinks to dada text when closed */
	width: max-content;
	/* Never collapse narrower than the toggle button tap target */
	min-width: 44px;
	background: var(--color-primary, #0066ff);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--button-border-radius, 18px);
	overflow: hidden;
	transition: width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Widen to fit note content */
#sam-nav.note-mode {
	width: min(88vw, 480px);
}

/* ─── Toggle — header row ────────────────────────────────────────────── */
#sam-nav-toggle {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.3em 0.55em;
	background: none;
	border: none;
	color: #ffffff;
	/* Match menu item typography exactly */
	font-family: var(--font-nav, var(--font-heading, var(--font-body, serif)));
	font-size: var(--font-size-nav, clamp(1.1rem, 2.8vw, 1.5rem));
	font-weight: var(--font-weight-nav, 300);
	line-height: 1;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.2s ease;
	/* iOS Safari: text-align:center + explicit line-height fix button flex centering */
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Dada label */
#sam-nav-label {
	transition: opacity 0.3s ease;
	line-height: 1;
	user-select: none;
	white-space: nowrap;
}

#sam-nav-label.fading {
	opacity: 0;
}

/* ─── Panel — expands inside the box via max-height ─────────────────── */
#sam-nav-panel {
	max-height: 0;
	overflow: hidden;
	border-top: 1px solid transparent;
	/* Bouncy open, snappy close */
	transition:
		max-height    0.5s cubic-bezier(0.34, 1.15, 0.64, 1),
		border-color  0.3s ease;
}

#sam-nav-panel.open {
	max-height: 80vh;
	overflow-y: auto;
	border-top-color: rgba(255, 255, 255, 0.25);
}

/* ─── Nav menu links ─────────────────────────────────────────────────── */
#sam-nav-menu {
	text-align: left;
	padding: 0.4rem 0 0.6rem;
}

#sam-nav-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}

/* Hide WordPress-generated inline sub-menus — JS handles them */
#sam-nav-menu .sub-menu { display: none; }

#sam-nav-menu li,
#sam-nav-submenu-list li {
	display: block;
	width: 100%;
}

#sam-nav-menu a,
#sam-nav-submenu-list a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	font-size: var(--font-size-nav, clamp(1.1rem, 2.8vw, 1.5rem));
	font-family: var(--font-nav, var(--font-heading, var(--font-body, serif)));
	font-weight: var(--font-weight-nav, 300);
	line-height: 1.3;
	padding: 0.3em 1.6em;
	letter-spacing: 0.02em;
	transition: opacity 0.2s ease;
}

#sam-nav-menu a:hover,
#sam-nav-menu a:focus-visible,
#sam-nav-submenu-list a:hover,
#sam-nav-submenu-list a:focus-visible {
	opacity: 0.75;
	outline: none;
}

#sam-nav-menu .current-menu-item a,
#sam-nav-menu .current_page_item a {
	font-weight: 600;
}

/* Parent item — subtle › indicator */
#sam-nav-menu .menu-item-has-children > a::after {
	content: ' ›';
	opacity: 0.6;
	font-style: normal;
}

/* Submenu list container */
#sam-nav-submenu-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	text-align: left;
	padding-bottom: 0.6rem;
}

/* ─── Accessibility menu — matches parent theme toolbar style ─────────── */
#sam-a11y-menu {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 10001;
	display: flex;
	align-items: center;
}

/* Icon button: matches nav box size/padding, black/white at 0.75 opacity */
#sam-a11y-btn {
	border-radius: var(--button-border-radius, 18px);
	background-color: transparent;
	color: rgba(0, 0, 0, 0.75);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.1rem, 2.8vw, 1.5rem);
	padding: 0.3em 0.55em;
	transition: background-color 0.15s ease, color 0.15s ease;
	line-height: 1;
}
/* Light mode hover: blue bg + white icon */
#sam-a11y-btn:hover,
#sam-a11y-btn[aria-expanded="true"] {
	background: #0000ff;
	color: #ffffff;
	opacity: 1;
}

/* Dark mode hover: white bg + blue icon */
@media (prefers-color-scheme: dark) {
	#sam-a11y-btn:hover,
	#sam-a11y-btn[aria-expanded="true"] {
		background: #ffffff;
		color: #0000ff;
	}
}
html.dark-mode #sam-a11y-btn:hover,
html.dark-mode #sam-a11y-btn[aria-expanded="true"] {
	background: #ffffff;
	color: #0000ff;
}
#sam-a11y-btn:focus-visible {
	outline: 3px solid var(--color-primary, #0066ff);
	outline-offset: 4px;
}

/* Dark mode: white at 0.75 opacity */
@media (prefers-color-scheme: dark) {
	#sam-a11y-btn { color: rgba(255, 255, 255, 0.75); }
}
html.dark-mode #sam-a11y-btn { color: rgba(255, 255, 255, 0.75); }

/* Panel: white bg, navy border — identical to parent theme's
   .accessibility-toolbar-panel */
#sam-a11y-panel {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background-color: #ffffff;
	border: 2px solid #000066;
	border-radius: 0.375rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	padding: 0.5rem;
	min-width: 200px;
	z-index: 9999;
}
#sam-a11y-panel[hidden] { display: none; }

/* Options: block buttons matching parent theme's .accessibility-option */
.sam-a11y-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: transparent;
	color: #000066;
	border: none;
	text-align: left;
	cursor: pointer;
	border-radius: 0.25rem;
	transition: background-color 0.15s ease, color 0.15s ease;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}
.sam-a11y-option:hover { background-color: #ffff00; color: #000000; }
.sam-a11y-option:focus-visible { outline: 2px solid #0000ff; outline-offset: 2px; }
.sam-a11y-option.active { background-color: #16a34a; color: #ffffff; }

/* ─── Note view & submenu view ───────────────────────────────────────── */

/* Back buttons (shared styles) */
#sam-nav-back,
#sam-nav-submenu-back {
	display: flex;
	align-items: center;
	gap: 0.3em;
	background: none;
	border: none;
	color: var(--sam-nav-text);
	font-family: var(--font-body, monospace);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0.6rem 1rem 0.4rem;
	margin-bottom: 0.4rem;
	opacity: 0.75;
	transition: opacity 0.2s ease, color 0.2s ease;
}

#sam-nav-back:hover,
#sam-nav-submenu-back:hover {
	opacity: 1;
	color: var(--sam-nav-text);
}

/* Note title */
.sam-note-title {
	font-family: var(--font-heading, var(--font-body, serif));
	font-size: clamp(1rem, 3vw, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sam-nav-text);
	padding: 0 1.2rem 0.6rem;
	margin: 0;
	border-bottom: 1px solid currentColor;
}

/* Note content — normalize Gutenberg output */
.sam-note-content {
	padding: 0.8rem 1.2rem 1rem;
	font-family: var(--font-body, sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sam-nav-text);
}

.sam-note-content p  { 
	margin: 0 0 0.8em; 
	color: var(--sam-nav-text);
}
.sam-note-content h1,
.sam-note-content h2,
.sam-note-content h3 {
	/* Override blob heading effect inside the panel */
	position: static !important;
	color: inherit !important;
	mix-blend-mode: normal !important;
	text-shadow: none !important;
	background: none !important;
	font-size: 1em;
	font-weight: 600;
	margin: 0.8em 0 0.3em;
	color: var(--sam-nav-text);
}
.sam-note-content h1::after,
.sam-note-content h2::after,
.sam-note-content h3::after { display: none !important; }

.sam-note-content a {
	color: var(--sam-nav-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.75;
}
.sam-note-content a:hover { opacity: 1; }

/* Loading state */
.sam-note-loading {
	text-align: center;
	padding: 2rem;
	opacity: 0.5;
	font-size: 1.5rem;
	animation: sam-note-pulse 1s ease-in-out infinite;
}
@keyframes sam-note-pulse {
	0%, 100% { opacity: 0.3; }
	50%       { opacity: 0.7; }
}

/* (barrierefrei toggle moved to #sam-a11y-panel — see above) */

/* ══════════════════════════════════════════════════════════════════════════
   BARRIEREFREI / HIGH-CONTRAST MODE
   Applied via body.high-contrast — set by:
     • PHP: ernesto_body_accessibility_classes() from ernesto_high_contrast cookie
     • JS:  sam-barrierefrei-toggle in nav.js (immediate, also sets cookie)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · Kill the WebGL canvas + standard nav; show accessible tile nav */
body.high-contrast #sam-bg  { display: none !important; }
body.high-contrast #sam-nav { display: none !important; }

/* ── Accessible tile navigation ──────────────────────────────────────────
   Rendered in PHP alongside #sam-nav; hidden normally, shown in high-
   contrast mode as a full-width bar of tiled links.                       */
#sam-a11y-nav { display: none; }

body.high-contrast #sam-a11y-nav {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	border-bottom: 3px solid #000066;
	z-index: 10000;
	padding: 0.6rem 1rem;
}

body.high-contrast #sam-a11y-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

body.high-contrast #sam-a11y-nav .menu li { display: block; }

/* Hide sub-menus — top-level items only in tile bar */
body.high-contrast #sam-a11y-nav .sub-menu { display: none !important; }

body.high-contrast #sam-a11y-nav .menu a {
	display: block;
	padding: 0.45rem 1rem;
	border: 2px solid #000066;
	border-radius: 4px;
	color: #000066 !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	font-family: 'Noto Sans', Arial, sans-serif !important;
	font-size: 0.95rem;
	background: #ffffff;
}
body.high-contrast #sam-a11y-nav .menu a:hover,
body.high-contrast #sam-a11y-nav .menu a:focus {
	background: #0000ff !important;
	color: #ffffff !important;
	border-color: #0000ff !important;
	outline: none;
}
body.high-contrast #sam-a11y-nav .menu .current-menu-item > a,
body.high-contrast #sam-a11y-nav .menu .current_page_item > a {
	background: #0000ff !important;
	color: #ffffff !important;
	border-color: #0000ff !important;
}

/* Push page content below the tile nav bar */
body.high-contrast .site-main,
body.high-contrast #page { padding-top: 72px !important; }

/* 2 · Plain white/black background (overrides customizer inline style) */
body.high-contrast,
body.high-contrast .site-header,
body.high-contrast .site-main {
	background: #ffffff !important;
	color: #000000 !important;
}

html.dark-mode body.high-contrast,
[data-theme="dark"] body.high-contrast {
	background: #000000 !important;
	color: #ffffff !important;
}

/* 3 · Strip blend effect in high-contrast — plain black text, no blending */
body.high-contrast h1,
body.high-contrast h1.wp-block-heading,
body.high-contrast .entry-title,
body.high-contrast .page-title,
body.high-contrast .site-title {
	color: #000000 !important;
	mix-blend-mode: normal !important;
	-webkit-text-fill-color: unset !important;
	text-shadow: none !important;
}

/* 4 · Nav — crisp black/white box */
body.high-contrast #sam-nav {
	background: #000000 !important;
	border-color: #000000 !important;
}

html.dark-mode body.high-contrast #sam-nav {
	background: #000000 !important;
	border-color: #ffffff !important;
}

body.high-contrast #sam-nav-toggle,
body.high-contrast #sam-nav-menu a,
body.high-contrast #sam-nav-submenu-list a,
body.high-contrast #sam-nav-back,
body.high-contrast #sam-nav-submenu-back {
	color: #ffffff !important;
}

html.dark-mode body.high-contrast #sam-nav-toggle,
html.dark-mode body.high-contrast #sam-nav-menu a,
html.dark-mode body.high-contrast #sam-nav-submenu-list a {
	color: #ffffff !important;
}

body.high-contrast #sam-nav-panel {
	border-top-color: rgba(255, 255, 255, 0.3) !important;
}

/* 5 · All links readable */
body.high-contrast a { color: #000000 !important; text-decoration: underline; }
html.dark-mode body.high-contrast a { color: #ffffff !important; }

/* 6 · Suppress all color variables & blob-related gradients */
body.high-contrast * {
	animation: none !important;
	transition-duration: 0.01ms !important;
}

/* 7 · Accessibility menu in high-contrast: black circle + white panel */
body.high-contrast #sam-a11y-btn {
	background: #000000 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	backdrop-filter: none !important;
}
body.high-contrast #sam-a11y-panel {
	background: #ffffff !important;
	border: 2px solid #000000 !important;
	backdrop-filter: none !important;
}
body.high-contrast .sam-a11y-option {
	color: #000000 !important;
}
body.high-contrast .sam-a11y-option + .sam-a11y-option {
	border-top-color: #000000 !important;
}
body.high-contrast .sam-a11y-option.active {
	background: #000000 !important;
	color: #ffffff !important;
}

/* ─── Alt text labels (barrierefrei mode) ────────────────────────────── */
/* Override parent theme's ernesto-alt-label colours for the child theme's
   black/white high-contrast scheme (parent uses navy #000066).           */
body.high-contrast .ernesto-alt-label {
	color: #000000;
	border-left-color: #000000;
}

html.dark-mode body.high-contrast .ernesto-alt-label {
	color: #ffffff;
	border-left-color: #ffffff;
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	#sam-nav-toggle:not(:hover):not(.open) { animation: none; }
	#sam-nav-panel { transition: opacity 0.2s ease; }
	#sam-nav-panel.open { transform: translateX(-50%) translateY(0) scale(1); }
	#sam-nav-menu a { transform: none; }
	#sam-nav-menu li.sam-visible a { transition: opacity 0.2s ease, color 0.2s ease; }
}