/**
 * Background color schemes ("Hintergrundfarben + Text / UI-Elemente").
 *
 * Reusable section/background schemes from the Figma handoff. Each `has-scheme-*`
 * class sets six custom properties that components read to recolor themselves:
 *
 *   --ehm-scheme-bg          section background
 *   --ehm-scheme-fg          body / default text colour
 *   --ehm-scheme-heading     headline / title colour
 *   --ehm-scheme-accent      interactive accent (arrows, chevrons, dividers, dots)
 *   --ehm-scheme-divider     divider / rule colour
 *   --ehm-scheme-link-hover  inline text link hover colour
 *
 * Light schemes (Weiss, Leichtblau) keep the red Hanserot accent with dark text
 * and a Hanseblau divider; dark schemes flip text/accent/divider to white.
 *
 * `--ehm-scheme-heading` splits the headline colour away from the UI accent so
 * the two can differ per scheme. On Weiss headlines are Hanseblau while the
 * accent stays Hanserot; everywhere else heading and accent are still the same
 * colour, so existing components are unaffected.
 *
 * Components opt in by reading these vars (with their own fallbacks), e.g.
 * the accordion's title/arrow use --ehm-scheme-accent, while the News module's
 * heading and card titles use --ehm-scheme-heading.
 *
 * Each scheme matches two class hooks so it works both as a standalone section
 * class (`has-scheme-*`) and as a registered block-style variation
 * (`is-style-*`, e.g. on the accordion).
 */

[class*="has-scheme-"],
[class*="is-style-weiss"],
[class*="is-style-leichtblau"],
[class*="is-style-hanseblau"],
[class*="is-style-euroblau"],
[class*="is-style-tiefrot"],
[class*="is-style-hanserot"] {
	background-color: var( --ehm-scheme-bg );
	color: var( --ehm-scheme-fg );
}

/*
 * Inline text links inside a scheme (ticket #467).
 *
 * The scheme sets `color` on its container, but theme.json gives every link a
 * hard `color: schwarz-85` — which inheritance never overrides. Without the
 * first rule below a normal body link inside a Hanseblau section renders dark
 * grey on blue. So the rest state is pinned back to the scheme foreground, and
 * hover switches to the scheme's link colour: Hanseblau on the light schemes,
 * Eurogelb on the dark ones.
 *
 * Scope: only links in genuine body copy (paragraphs and list items). This is
 * deliberately narrow. Every EHM component that contains links — news-card,
 * teaser-card, calendar-entry, the footer, the flyout — styles them itself and
 * signals hover its own way (underline, opacity, a shift). A blanket `a` rule
 * here would reach into all of them and repaint a hover they never asked for,
 * which is how the news-card link picked up Eurogelb before this was narrowed.
 * A component that wants the scheme link colours can opt in by reading
 * --ehm-scheme-link-hover directly.
 *
 * Buttons are excluded too: they carry their own colour pair, and their hover
 * is a lift, not a colour change.
 *
 * The selectors deliberately run at class specificity rather than inside
 * :where(), because they must beat the `:root :where(a…)` rule theme.json
 * emits for :hover. Block-level overrides still win over both.
 */
[class*="has-scheme-"] p > a:not(.wp-element-button),
[class*="has-scheme-"] li > a:not(.wp-element-button),
[class*="is-style-weiss"] p > a:not(.wp-element-button),
[class*="is-style-weiss"] li > a:not(.wp-element-button),
[class*="is-style-leichtblau"] p > a:not(.wp-element-button),
[class*="is-style-leichtblau"] li > a:not(.wp-element-button),
[class*="is-style-hanseblau"] p > a:not(.wp-element-button),
[class*="is-style-hanseblau"] li > a:not(.wp-element-button),
[class*="is-style-euroblau"] p > a:not(.wp-element-button),
[class*="is-style-euroblau"] li > a:not(.wp-element-button),
[class*="is-style-tiefrot"] p > a:not(.wp-element-button),
[class*="is-style-tiefrot"] li > a:not(.wp-element-button),
[class*="is-style-hanserot"] p > a:not(.wp-element-button),
[class*="is-style-hanserot"] li > a:not(.wp-element-button) {
	color: var( --ehm-scheme-fg );
}

[class*="has-scheme-"] p > a:not(.wp-element-button):hover,
[class*="has-scheme-"] li > a:not(.wp-element-button):hover,
[class*="is-style-weiss"] p > a:not(.wp-element-button):hover,
[class*="is-style-weiss"] li > a:not(.wp-element-button):hover,
[class*="is-style-leichtblau"] p > a:not(.wp-element-button):hover,
[class*="is-style-leichtblau"] li > a:not(.wp-element-button):hover,
[class*="is-style-hanseblau"] p > a:not(.wp-element-button):hover,
[class*="is-style-hanseblau"] li > a:not(.wp-element-button):hover,
[class*="is-style-euroblau"] p > a:not(.wp-element-button):hover,
[class*="is-style-euroblau"] li > a:not(.wp-element-button):hover,
[class*="is-style-tiefrot"] p > a:not(.wp-element-button):hover,
[class*="is-style-tiefrot"] li > a:not(.wp-element-button):hover,
[class*="is-style-hanserot"] p > a:not(.wp-element-button):hover,
[class*="is-style-hanserot"] li > a:not(.wp-element-button):hover {
	color: var( --ehm-scheme-link-hover );
}

/* --- Light backgrounds: red accent, dark text, blue divider --- */
/*
 * Weiss is the one scheme where headline and accent differ: headlines are
 * Hanseblau, the UI accent stays Hanserot (ticket #422).
 */
.has-scheme-weiss,
.is-style-weiss {
	--ehm-scheme-bg: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-fg: var( --wp--preset--color--schwarz-85, #262626 );
	--ehm-scheme-heading: var( --wp--preset--color--hanseblau, #0166ca );
	--ehm-scheme-accent: var( --wp--preset--color--hanserot, #e72227 );
	--ehm-scheme-divider: var( --wp--preset--color--hanseblau, #0166ca );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover, #0166ca );
}

.has-scheme-leichtblau,
.is-style-leichtblau {
	--ehm-scheme-bg: var( --wp--preset--color--windblau, #e8f2fc );
	--ehm-scheme-fg: var( --wp--preset--color--schwarz-85, #262626 );
	--ehm-scheme-heading: var( --wp--preset--color--hanserot, #e72227 );
	--ehm-scheme-accent: var( --wp--preset--color--hanserot, #e72227 );
	--ehm-scheme-divider: var( --wp--preset--color--hanseblau, #0166ca );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover, #0166ca );
}

/* --- Dark backgrounds: white accent, white text, white divider --- */
.has-scheme-hanseblau,
.is-style-hanseblau {
	--ehm-scheme-bg: var( --wp--preset--color--hanseblau, #0166ca );
	--ehm-scheme-fg: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-heading: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-accent: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-divider: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover-inverse, #fbf560 );
}

.has-scheme-euroblau,
.is-style-euroblau {
	--ehm-scheme-bg: var( --wp--preset--color--euroblau, #213178 );
	--ehm-scheme-fg: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-heading: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-accent: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-divider: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover-inverse, #fbf560 );
}

.has-scheme-tiefrot,
.is-style-tiefrot {
	--ehm-scheme-bg: var( --wp--preset--color--tiefrot, #a8142e );
	--ehm-scheme-fg: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-heading: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-accent: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-divider: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover-inverse, #fbf560 );
}

.has-scheme-hanserot,
.is-style-hanserot {
	--ehm-scheme-bg: var( --wp--preset--color--hanserot, #e72227 );
	--ehm-scheme-fg: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-heading: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-accent: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-divider: var( --wp--preset--color--weiss, #fff );
	--ehm-scheme-link-hover: var( --wp--custom--link--hover-inverse, #fbf560 );
}