/*
 * Einwilligungsbanner (Plan 06-02): feste Fläche am unteren Rand, schiebt keinen Inhalt (D-11).
 * Farben aus den Theme-Variablen mit festen Rückfallwerten, damit die Prüfseite ohne Theme dieselben Werte zeigt.
 * "Akzeptieren" und "Ablehnen" sind dieselbe Komponente (.mr-consent__btn), keine ist hervorgehoben (D-12).
 * Sichtbarer Fokus mit mindestens 2 px, Zielgrösse mindestens 44 px, keine Animation.
 *
 * Plan 06-08 (D-12, D-14, D-15): zweite Ebene mit nativen Kontrollkästchen und sichtbaren Beschriftungen,
 * "Einstellungen" als Textknopf, Fussknopf "Cookie-Einstellungen" wie die Nachbarlinks im Fuss. Das Banner nimmt
 * höchstens 40 % der Höhe des Fensters ein und rollt innen; solange es sichtbar ist, bekommt die Seite unten Abstand
 * und `scroll-padding-bottom` in seiner Höhe (`--mr-consent-h` aus consent.js, Pitfall 12).
 */

/* Cascade Layers (07-06, D-06): dieselbe Reihenfolge wie im Theme; das Banner gehört zu components. */
@layer reset, base, tokens, layout, components, utilities;

@layer components {
/* Phase 6 (Pitfall 4): `hidden` gewinnt auch gegen fremdes Autoren-CSS (z. B. `section.mr-consent{display:flex}` aus
   einem anderen Plugin). Erlaubt nach IMPORTANT_ALLOWLIST `[hidden]` (07-17): einfacher Selektor, nur display: none. */
.mr-consent[hidden],
.mr-consent__prefs[hidden],
.mr-consent-footer[hidden] {
	display: none !important;
}

html.mr-consent-open {
	scroll-padding-bottom: var(--mr-consent-h, 0px);
}

/*
 * 07-17 (UI-SPEC Consent Banner, G1-19): feste Fläche am unteren Rand, auf dem Desktop höchstens 1180 px breit und
 * zentriert, oben 8 px gerundet, Schatten --mr-shadow-md, Innenabstand 16 px (mobil) bzw. 24 px. Höchstens 40 % der
 * Fensterhöhe, rollt innen und gibt das Rollen nicht an die Seite weiter. Über Kopf (z-index 1000) und Werbeflächen.
 */
.mr-consent {
	--mr-consent-text: var(--mr-black, #111827);
	--mr-consent-muted: var(--mr-gray-dark, #374151);
	--mr-consent-border: var(--mr-border, #e5e7eb);
	--mr-consent-accent: var(--mr-blue, #2563eb);
	--mr-consent-pad: 1rem;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1001;
	box-sizing: border-box;
	max-width: 1180px;
	max-height: 40vh;
	margin: 0 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Die klebende Fusszeile der zweiten Ebene verdeckt keinen fokussierten Schalter (2.4.11). */
	scroll-padding-bottom: 5rem;
	padding: var(--mr-consent-pad);
	border: 1px solid var(--mr-consent-border);
	border-bottom: 0;
	border-radius: var(--mr-radius-lg, 8px) var(--mr-radius-lg, 8px) 0 0;
	background: var(--mr-bg-card, #fff);
	box-shadow: var(--mr-shadow-md, 0 4px 16px rgb(17 24 39 / 0.12));
	color: var(--mr-consent-text);
	font-size: var(--mr-fs-body, 1rem);
	line-height: var(--mr-lh-small, 1.5);
	overflow-wrap: anywhere;
}

@media (min-width: 769px) {
	.mr-consent {
		--mr-consent-pad: 1.5rem;
	}
}

.mr-consent *,
.mr-consent *::before,
.mr-consent *::after {
	box-sizing: border-box;
	animation: none;
	transition: none;
}

.mr-consent__title {
	margin: 0 0 0.5rem;
	color: var(--mr-consent-text);
	font-size: var(--mr-fs-body, 1rem);
	line-height: 1.3;
	font-weight: 700;
}

.mr-consent__text {
	margin: 0 0 0.5rem;
	color: var(--mr-consent-muted);
	font-size: var(--mr-fs-small, 0.875rem);
}

.mr-consent a {
	color: var(--mr-consent-accent);
	text-decoration: underline;
}

/*
 * Plan 06-11 (2.5.8): der Datenschutzlink steht im Fliesstext (Ausnahme für Links im Text), bekommt aber trotzdem eine
 * Fläche von mindestens 24 px Höhe. Innenabstand oben und unten an einem Inline-Element vergrössert die Klickfläche,
 * ohne die Zeilenhöhe oder den Umbruch des Satzes zu ändern.
 */
.mr-consent__privacy a {
	padding-block: 0.25rem;
}

/*
 * Erste Ebene (07-17, D-12): „Akzeptieren“ und „Ablehnen“ in zwei gleich breiten Spalten (50/50 auch bei 320 px),
 * „Einstellungen“ darunter; ab 769 px alle drei in einer Reihe, die Textschaltfläche rechts daneben.
 */
.mr-consent__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.75rem;
}

@media (min-width: 769px) {
	.mr-consent__actions {
		grid-template-columns: repeat(2, minmax(0, 14rem)) auto;
		justify-content: start;
	}
}

/* Dieselbe Komponente für beide Wahlknöpfe und „Auswahl speichern“: schwarz, 44 px hoch, gleiches Gewicht. */
.mr-consent__btn {
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1rem;
	border: 2px solid var(--mr-consent-text);
	border-radius: var(--mr-radius-sm, 4px);
	background: var(--mr-consent-text);
	color: var(--mr-bg-card, #fff);
	font: inherit;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}

.mr-consent__btn:hover {
	text-decoration: underline;
}

.mr-consent__btn:focus-visible,
.mr-consent a:focus-visible {
	outline: 3px solid var(--mr-consent-accent);
	outline-offset: 2px;
}

/* „Einstellungen“: Textschaltfläche, unterstrichen, dunkelgrau, 44 px hoch. */
.mr-consent__link {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 0.25rem;
	border: 0;
	background: none;
	color: var(--mr-consent-muted);
	font: inherit;
	font-size: var(--mr-fs-small, 0.875rem);
	line-height: 1.25;
	text-decoration: underline;
	cursor: pointer;
}

@media (min-width: 769px) {
	.mr-consent__link {
		grid-column: auto;
	}
}

.mr-consent__link:hover {
	color: var(--mr-consent-text);
}

.mr-consent__link:focus-visible,
.mr-consent__check:focus-visible {
	outline: 3px solid var(--mr-consent-accent);
	outline-offset: 2px;
}

.mr-consent__prefs {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--mr-consent-border);
}

/*
 * Offene zweite Ebene (G1-19, Verifikation Runde 1): die Erklärsätze der ersten Ebene treten zurück, damit die Ebene
 * in den 40 % Fensterhöhe sichtbar beginnt (Überschrift, Wahlknöpfe, «Dienste auswählen», erster Schalter, klebende
 * Fusszeile). Die Beschreibung je Dienst steht unter seinem Schalter; Titel, Datenschutzlink und «Einstellungen» bleiben,
 * damit Fokus auf dem Textknopf, Ziel des Fussknopfs (Titel) und der Weg zur Datenschutzerklärung erhalten bleiben.
 */
.mr-consent:has(> .mr-consent__prefs:not([hidden])) > .mr-consent__text:not(.mr-consent__privacy) {
	display: none;
}

/*
 * Zweite Ebene (G1-19): „Auswahl speichern“ steht in einer Fusszeile, die am unteren Rand des Banners klebt; ihr Rand
 * oben zeigt, dass der Bereich darüber rollt. Die Fläche reicht über den Innenabstand bis an die Kante des Banners.
 */
.mr-consent__prefs .mr-consent__actions {
	position: sticky;
	bottom: calc(-1 * var(--mr-consent-pad));
	display: flex;
	flex-wrap: wrap;
	margin: 0.75rem calc(-1 * var(--mr-consent-pad)) calc(-1 * var(--mr-consent-pad));
	padding: 0.75rem var(--mr-consent-pad) var(--mr-consent-pad);
	border-top: 1px solid var(--mr-consent-border);
	background: var(--mr-bg-card, #fff);
}

.mr-consent__prefs .mr-consent__btn {
	flex: 0 1 14rem;
}

.mr-consent__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mr-consent__legend {
	margin: 0 0 0.5rem;
	padding: 0;
	font-weight: 700;
}

/* Ab 769 px stehen die Dienste nebeneinander, damit beide Schalter über der klebenden Fusszeile sichtbar sind (G1-19). */
@media (min-width: 769px) {
	.mr-consent__fieldset {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
}

.mr-consent__option {
	margin: 0 0 0.75rem;
}

.mr-consent__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 44px;
	font-weight: 700;
	cursor: pointer;
}

/*
 * Schalter (UI-SPEC Second layer): natives Kontrollkästchen ohne Systemaussehen, 24 px. Aus: weiss mit 2 px Rand in
 * --mr-gray-mid; an: blaue Fläche mit weissem Haken (nicht nur Farbe). Unter erzwungenen Farben das Systemkästchen.
 */
.mr-consent__check {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	appearance: none;
	border: 2px solid var(--mr-gray-mid, #6b7280);
	border-radius: var(--mr-radius-sm, 4px);
	background: var(--mr-bg-card, #fff) no-repeat center / 16px 16px;
	cursor: pointer;
}

.mr-consent__check:checked {
	border-color: var(--mr-consent-accent);
	background-color: var(--mr-consent-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mr-consent__desc {
	margin: 0 0 0 calc(24px + 0.625rem);
	color: var(--mr-consent-muted);
	font-size: var(--mr-fs-small, 0.875rem);
}

.mr-consent-footer {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mr-consent-footer__btn {
	min-height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mr-gray-mid, #6b7280);
	font: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.mr-consent-footer__btn:hover {
	color: var(--mr-black, #111827);
}

.mr-consent-footer__btn:focus-visible {
	outline: 3px solid var(--mr-blue, #2563eb);
	outline-offset: 2px;
}

/*
 * Plan 06-11 (D-14), 07-17: erzwungene Farben. Der Schatten fällt dort weg, deshalb trennt ein Rahmen in Systemfarbe das
 * Banner von der Seite (oben 2 px, seitlich 1 px); Wahlknöpfe, Links und Fokusrahmen nehmen die passenden Systemfarben,
 * die Schalter das Systemkästchen.
 */
@media (forced-colors: active) {
	.mr-consent {
		border: 1px solid CanvasText;
		border-top-width: 2px;
		border-bottom: 0;
		box-shadow: none;
	}

	.mr-consent__btn {
		border-color: ButtonText;
	}

	.mr-consent__prefs,
	.mr-consent__prefs .mr-consent__actions {
		border-top-color: CanvasText;
	}

	.mr-consent__check {
		appearance: auto;
	}

	.mr-consent a,
	.mr-consent__link {
		color: LinkText;
	}

	/* 07-09: der Knopf «Cookie-Einstellungen» in der Fussnavigation ist als Link gestaltet; unterstrichen bleibt er
	   ohne Rand als Bedienelement erkennbar. */
	.mr-consent-footer__btn {
		text-decoration: underline;
	}

	.mr-consent__btn:focus-visible,
	.mr-consent a:focus-visible,
	.mr-consent__link:focus-visible,
	.mr-consent__check:focus-visible,
	.mr-consent-footer__btn:focus-visible {
		outline-color: Highlight;
	}
}

/*
 * Plan 06-11 (D-14): keine Bewegung mit reduzierter Bewegung. Das Banner hat keine Übergänge; diese Regel hält das auch
 * gegen spätere Regeln des Themes fest. mr.css setzt `scroll-behavior: smooth` für die ganze Seite. Solange das Banner
 * offen ist, löst es selbst Rollbewegungen aus (scroll-padding hält den Fokus über dem Banner), deshalb rollt die Seite
 * dann ohne Animation.
 */
@media (prefers-reduced-motion: reduce) {
	html.mr-consent-open {
		scroll-behavior: auto;
	}

	.mr-consent,
	.mr-consent *,
	.mr-consent-footer__btn {
		animation: none !important;
		transition: none !important;
	}
}
} /* @layer components */

/* Ausserhalb der Layer (07-06, Research Pattern 1): WordPress setzt body { padding: 0px } ohne Layer (Wurzel-Abstand aus
   theme.json); nur diese Regel muss es überschreiben, damit die Seite unter dem offenen Banner Abstand behält.
   Festgehalten in tests/lib/css-gates.mjs (UNLAYERED_ALLOWLIST). */
html.mr-consent-open body {
	padding-bottom: var(--mr-consent-h, 0px);
}