/*
 * Compendion Dark Mode.
 *
 * Drei Signalquellen, eine CSS-Quelle:
 *   1. System: `@media (prefers-color-scheme: dark)` — greift, wenn kein
 *      expliziter Wunsch per JS gesetzt ist.
 *   2. Forced dark: `html[data-color-scheme="dark"]` — JS hat explizit Dark
 *      gewaehlt, gilt unabhaengig vom System-Setting.
 *   3. Forced light: `html[data-color-scheme="light"]` — Modus sperrt Dark
 *      auch bei System-Dark aus (`:not([data-color-scheme="light"])`-Guard).
 *
 * Wir ueberschreiben ausschliesslich die strukturellen Tokens (`base`,
 * `contrast`, `surface`, `line`, `muted`) — die Markenfarben (`primary`,
 * `secondary`, `accent`, `compendion`) bleiben unveraendert, damit das
 * Branding tragend bleibt.
 *
 * Die Werte stehen bewusst hier und nicht in `theme.json`: theme.json
 * kennt keine Dark-Mode-Variante fuer Custom-Properties, eine zweite
 * Palette wuerde nur den Picker im Editor doppeln.
 *
 * Geladen nach `compendion-base` und vor `compendion-components`, damit
 * Component-Layer-Tints (z. B. `color-mix(... contrast 10%, transparent)`)
 * die invertierten Werte sehen. Cascade-Reihenfolge ueber die
 * Enqueue-Dependencies in `functions.php` garantiert.
 *
 * Web-Archiv hat ein eigenes `--cwa-*`-System (siehe
 * `compendion-web-archive.css`) und bringt seinen Dark-Block selbst mit —
 * diese Datei greift dort bewusst nicht ein.
 */

/* ── Color-Scheme Toggle Button ──────────────────────────────────────── */

/*
 * Der Toggle sitzt in `.compendion-network-kicker-row` im Header.
 * Drei Zustands-Icons (auto / dark / light) — nur jeweils das aktive
 * sichtbar. JS setzt `data-mode` auf dem Button-Element.
 */

.compendion-network-kicker-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	line-height: 1.2;
}

/*
 * Inneres `<p>` des Kickers: WordPress-Default-Margins killen, sonst hebelt
 * der Absatz die Flex-Vertikalzentrierung aus und macht die Header-Zeile
 * unnoetig hoch. WP-Globalstyle `.is-layout-flex > * { margin: 0 }` greift
 * hier nicht, weil die Row eigenes `display: flex` nutzt und nicht das
 * WP-Layout-System.
 */
.compendion-network-kicker-row .compendion-network-kicker {
	margin: 0;
	line-height: 1.2;
}

.compendion-color-scheme-toggle {
	/* Reset */
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	color: var(--wp--preset--color--muted, #888);
	transition: color 150ms ease, background-color 150ms ease;
	flex-shrink: 0;
}

.compendion-color-scheme-toggle:hover,
.compendion-color-scheme-toggle:focus-visible {
	color: var(--wp--preset--color--contrast, #111);
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 8%, transparent);
	outline: none;
}

.compendion-color-scheme-toggle svg {
	width: 0.85rem;
	height: 0.85rem;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Icon-Sichtbarkeit je Modus */
.compendion-color-scheme-toggle .csm-icon { display: none; }

.compendion-color-scheme-toggle:not([data-mode]) .csm-icon--auto,
.compendion-color-scheme-toggle[data-mode="auto"] .csm-icon--auto { display: block; }
.compendion-color-scheme-toggle[data-mode="dark"]  .csm-icon--dark  { display: block; }
.compendion-color-scheme-toggle[data-mode="light"] .csm-icon--light { display: block; }

/* ── System Dark (nur wenn nicht per JS auf Light gezwungen) ─────────── */

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) :root,
	html:not([data-color-scheme="light"]) body {
		--wp--preset--color--base: #141414;
		--wp--preset--color--contrast: #e8e8e8;
		--wp--preset--color--surface: #242424;
		--wp--preset--color--line: #333333;
		--wp--preset--color--muted: #aaaaaa;
	}

	html:not([data-color-scheme="light"]) :root {
		color-scheme: dark;
	}

	/*
	 * Link-Override fuer Dark-Mode.
	 *
	 * Default `elements.link.color.text` in Style-Variations zeigt oft auf
	 * `secondary`. Bei Sub-Sites mit dunkler Sekundaerfarbe (ENT
	 * `secondary = #075102`) bricht das auf `--base = #141414` (Dark-Mode-
	 * Hintergrund) die WCAG-AA-Lesbarkeit. Wir hellen die jeweils aktive
	 * `primary`-Marken-Farbe per `color-mix` mit weiss auf — das bleibt
	 * Markenfarbe je Site, wird aber auf dunklem Grund lesbar.
	 *
	 * Buttons (`.wp-element-button`, `.wp-block-button__link`) bleiben
	 * unangetastet: die haben eigene Background-/Vordergrund-Paare aus
	 * der Style-Variation und wuerden mit einem generischen Link-Color-
	 * Override unleserlich.
	 *
	 * Master-Site: `primary = #F5D80E` (gelb), 70% gelb + 30% weiss =
	 * helles Pastellgelb auf #141414 — passt zur Marke und ist klar lesbar.
	 *
	 * Quelle: COMPENDION_STATUS_BOARD Eintrag "Dark Mode: Link-Kontrast",
	 * Variante C (Design-Finalisierung).
	 */
	html:not([data-color-scheme="light"]) a:not(.wp-element-button):not(.wp-block-button__link) {
		color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, #ffffff);
	}

	html:not([data-color-scheme="light"]) a:not(.wp-element-button):not(.wp-block-button__link):hover,
	html:not([data-color-scheme="light"]) a:not(.wp-element-button):not(.wp-block-button__link):focus-visible {
		color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, #ffffff);
	}

	/*
	 * Kicker-Override fuer Dark-Mode.
	 *
	 * `.compendion-kicker` (components.css) erbt `color: secondary`. Bei
	 * Sub-Sites mit sehr dunkler Sekundaerfarbe (VUD secondary=#181716)
	 * wird der Kicker auf #141414 praktisch unsichtbar. Gleicher Fix wie
	 * bei Links: primary 70% + weiss gibt einen hellen, site-spezifischen
	 * Farbton mit ausreichend Kontrast (>= WCAG AA).
	 */
	html:not([data-color-scheme="light"]) .compendion-kicker {
		color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, #ffffff);
	}

	/*
	 * Outline-Button-Textfarbe.
	 *
	 * components.css setzt color:on-primary auf ALLE .wp-element-button.
	 * Fuer gefuellte Buttons ist das korrekt (dunkle Schrift auf farbigem
	 * Hintergrund). Fuer Outline-/Ghost-Buttons ist es falsch: sie haben
	 * transparent als Hintergrund, ihr Text muss gegen den Seitenhintergrund
	 * kontrasten — und der ist im Dark Mode #141414.
	 *
	 * on-primary ist site-spezifisch oft dunkel (VUD #181716):
	 * #181716 auf #141414 = ~1:1, unsichtbar.
	 *
	 * Fix: contrast (#e8e8e8) statt on-primary. Die hoehere Spezifitaet
	 * dieses Selektors schlaegt components.css (0,1,0 vs 0,4,1 hier).
	 */
	html:not([data-color-scheme="light"]) .wp-block-button[class*="is-style-outline"] .wp-block-button__link {
		color: var(--wp--preset--color--contrast);
	}

	/*
	 * Gefuellter-Button-Hover.
	 *
	 * WP-Global: hover-Hintergrund = contrast 85% transparent (= near-white
	 * im Dark Mode). Das ergibt einen harten Flash vom farbigen Button zu
	 * fast-Weiss. Override: Hover vertieft die Primarfarbe (80% primary +
	 * schwarz) und setzt hellen Text — bleibt im Farbton, kein Weiss-Flash.
	 */
	html:not([data-color-scheme="light"]) :where(.wp-element-button:hover, .wp-block-button__link:hover) {
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, #000000);
		color: var(--wp--preset--color--contrast);
	}

	/* Outline-Button-Hover: nur leichter Tint statt Vollflaeche */
	html:not([data-color-scheme="light"]) .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	}
}

/* ── Forced Dark (explizit per JS gesetzt) ───────────────────────────── */

html[data-color-scheme="dark"] :root,
html[data-color-scheme="dark"] body {
	--wp--preset--color--base: #141414;
	--wp--preset--color--contrast: #e8e8e8;
	--wp--preset--color--surface: #242424;
	--wp--preset--color--line: #333333;
	--wp--preset--color--muted: #aaaaaa;
}

html[data-color-scheme="dark"] :root {
	color-scheme: dark;
}

html[data-color-scheme="dark"] a:not(.wp-element-button):not(.wp-block-button__link) {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, #ffffff);
}

html[data-color-scheme="dark"] a:not(.wp-element-button):not(.wp-block-button__link):hover,
html[data-color-scheme="dark"] a:not(.wp-element-button):not(.wp-block-button__link):focus-visible {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 50%, #ffffff);
}

html[data-color-scheme="dark"] .compendion-kicker {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, #ffffff);
}

html[data-color-scheme="dark"] .wp-block-button[class*="is-style-outline"] .wp-block-button__link {
	color: var(--wp--preset--color--contrast);
}

html[data-color-scheme="dark"] :where(.wp-element-button:hover, .wp-block-button__link:hover) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, #000000);
	color: var(--wp--preset--color--contrast);
}

html[data-color-scheme="dark"] .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}