/**
 * Cookie-Banner an die Theme-Tokens binden.
 *
 * Die Bibliothek gestaltet sich vollständig über `--cc-*`-Variablen. Hier werden
 * sie auf die Presets aus theme.json gelegt, damit der Banner nicht wie ein
 * Fremdkörper aussieht. Jede Zuweisung nennt einen Rückfallwert: Das Plugin muss
 * auch ohne das Elterngeld-Buddy-Theme brauchbar aussehen – etwa während eines
 * Theme-Wechsels, also genau dann, wenn der Banner am wenigsten fehlen darf.
 *
 * Farben und Radien stehen in theme.json. Wer sie dort ändert, ändert sie hier
 * mit; ein zweites Mal pflegen muss man nichts.
 */

#cc-main {
	--cc-font-family: var( --wp--preset--font-family--body, Inter, system-ui, sans-serif );

	--cc-bg: var( --wp--preset--color--base, #ffffff );
	--cc-primary-color: var( --wp--preset--color--contrast, #201923 );
	--cc-secondary-color: var( --wp--preset--color--muted, #6f6471 );
	--cc-link-color: var( --wp--preset--color--primary, #ff0066 );

	--cc-btn-primary-bg: var( --wp--preset--color--primary, #ff0066 );
	--cc-btn-primary-color: var( --wp--preset--color--base, #ffffff );
	--cc-btn-primary-border-color: var( --wp--preset--color--primary, #ff0066 );
	--cc-btn-primary-hover-bg: var( --wp--preset--color--primary-dark, #d90057 );
	--cc-btn-primary-hover-color: var( --wp--preset--color--base, #ffffff );
	--cc-btn-primary-hover-border-color: var( --wp--preset--color--primary-dark, #d90057 );

	/*
	 * „Nur Notwendiges" ist die Zweitschaltfläche, aber kein Stiefkind: gleiche
	 * Größe, lesbarer Kontrast, nur ohne Farbfläche. Ein Banner, der die
	 * Ablehnung optisch versteckt, ist keine wirksame Einwilligung.
	 */
	--cc-btn-secondary-bg: var( --wp--preset--color--cream, #fff9f6 );
	--cc-btn-secondary-color: var( --wp--preset--color--contrast, #201923 );
	--cc-btn-secondary-border-color: var( --wp--preset--color--line, #eadfe5 );
	--cc-btn-secondary-hover-bg: var( --wp--preset--color--peach, #ffe9e3 );
	--cc-btn-secondary-hover-color: var( --wp--preset--color--contrast, #201923 );
	--cc-btn-secondary-hover-border-color: var( --wp--preset--color--muted, #6f6471 );

	--cc-cookie-category-block-bg: var( --wp--preset--color--cream, #fff9f6 );
	--cc-cookie-category-block-border: var( --wp--preset--color--line, #eadfe5 );
	--cc-cookie-category-block-hover-bg: var( --wp--preset--color--peach, #ffe9e3 );
	--cc-cookie-category-block-hover-border: var( --wp--preset--color--line, #eadfe5 );
	--cc-cookie-category-expanded-block-bg: var( --wp--preset--color--base, #ffffff );
	--cc-cookie-category-expanded-block-hover-bg: var( --wp--preset--color--cream, #fff9f6 );

	--cc-separator-border-color: var( --wp--preset--color--line, #eadfe5 );
	--cc-section-category-border: var( --wp--preset--color--line, #eadfe5 );
	--cc-footer-bg: var( --wp--preset--color--cream, #fff9f6 );
	--cc-footer-color: var( --wp--preset--color--muted, #6f6471 );
	--cc-footer-border-color: var( --wp--preset--color--line, #eadfe5 );

	--cc-toggle-on-bg: var( --wp--preset--color--primary, #ff0066 );
	--cc-toggle-off-bg: var( --wp--preset--color--muted, #6f6471 );
	--cc-toggle-readonly-bg: var( --wp--preset--color--line, #eadfe5 );
	--cc-toggle-readonly-knob-bg: var( --wp--preset--color--base, #ffffff );
	--cc-toggle-readonly-knob-icon-color: var( --wp--preset--color--muted, #6f6471 );

	--cc-btn-border-radius: var( --wp--custom--radius--pill, 999px );
	--cc-modal-border-radius: var( --wp--custom--radius--large, 24px );
	--cc-pm-toggle-border-radius: var( --wp--custom--radius--pill, 999px );

	/*
	 * Die Kategorieblöcke brauchen einen sichtbaren Rand. `line` allein ist auf
	 * der cremefarbenen Fläche kaum zu erkennen – deshalb dieselbe Farbfamilie,
	 * nur kräftiger: `muted` auf ein Drittel heruntergemischt.
	 */
	--cc-cookie-category-block-border: color-mix( in srgb, var( --wp--preset--color--muted, #6f6471 ) 32%, transparent );
	--cc-cookie-category-block-hover-border: color-mix( in srgb, var( --wp--preset--color--muted, #6f6471 ) 48%, transparent );

	/*
	 * Der Banner muss über der klebenden Kopfzeile liegen, aber unter nichts
	 * Wichtigem sonst. Die Kopfzeile arbeitet im Theme mit z-index 100.
	 */
	--cc-z-index: 1000;

	--cc-overlay-bg: rgba( 32, 25, 35, 0.6 );
}

/*
 * Radius der Kategorieblöcke geraderücken.
 *
 * Die Bibliothek benutzt `--cc-btn-border-radius` doppelt: für echte Buttons und
 * für die Kategorieblöcke samt Titelzeile und aufgeklapptem Text. Für einen
 * Button ist die Pillenform richtig, für einen 58 Pixel hohen Block wird daraus
 * ein Stadion – und aufgeklappt wandert die Rundung um den ganzen Fließtext.
 * Deshalb bleibt die Variable auf Pille (die Buttons brauchen sie) und die
 * Blöcke bekommen hier den mittleren Radius zugewiesen.
 */
/*
 * Die Selektoren nennen `.pm__section--toggle` mit, obwohl es kürzer ginge: Die
 * Regeln der Bibliothek tun das auch, und wer hier eine Klasse wegkürzt,
 * verliert das Spezifitätsduell – dann steht der Radius wieder auf Pille.
 */
#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
	border-radius: var( --wp--custom--radius--medium, 18px );
}

/*
 * Aufgeklappt bilden Titel und Text einen Block: unten am Titel und oben am Text
 * keine Rundung, sonst sieht man die Naht.
 */
#cc-main .pm__section--toggle.is-expanded .pm__section-title {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/*
 * Aufgeklappt biegt die Bibliothek die Randfarbe auf eine Hintergrundvariable um
 * (`--cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg)`).
 * Bei uns ist das Creme – der Rand verschwände also ausgerechnet dort, wo der
 * Block am größten ist. Hier bekommt er dieselbe Farbe wie im zugeklappten
 * Zustand zurück.
 */
#cc-main .pm__section--toggle.is-expanded {
	--cc-cookie-category-block-border: color-mix( in srgb, var( --wp--preset--color--muted, #6f6471 ) 32%, transparent );
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/*
 * Der Hinweisblock ohne Schalter – bei uns die Reichweitenmessung – zieht seinen
 * Rand aus der Trennlinienfarbe. Die ist für eine Trennlinie richtig und für
 * eine Umrandung zu blass.
 */
#cc-main .pm__section {
	border-color: color-mix( in srgb, var( --wp--preset--color--muted, #6f6471 ) 24%, transparent );
}

/*
 * Cookie-Tabellen waagerecht scrollbar machen.
 *
 * Fünf Spalten passen nicht in einen 640 Pixel breiten Dialog, erst recht nicht
 * auf einem Telefon. Ohne Scrollen quetscht die Bibliothek die Spalten zusammen,
 * bis „HTTP-Cookie" über zwei Zeilen bricht. Eine Tabelle, die man nicht lesen
 * kann, erfüllt die Informationspflicht nicht – da hilft es nicht, dass die
 * richtigen Werte drinstehen.
 *
 * ACHTUNG, hier lag schon ein Fehler: Es muss die TABELLE scrollen, nicht der
 * umgebende `.pm__section-desc-wrapper`. Der enthält auch die Dienstschalter und
 * den Fließtext – liegt das Scrollen dort, wandern beim Scrollen die
 * Beschriftungen „Google Tag Manager" und „Meta-Pixel" aus dem Bild und der
 * Absatz wird links abgeschnitten.
 *
 * `display: block` macht aus der Tabelle einen scrollenden Kasten. Die
 * Mindestbreite gehört dann an `thead` und `tbody`, nicht an die Tabelle selbst –
 * sonst wächst der Kasten mit und scrollt nie. Die Spalten bleiben trotzdem
 * ausgerichtet; nachgemessen: Kopf- und Datenzellen stehen an identischen
 * Positionen.
 */
#cc-main .pm__section-table {
	display: block;
	width: 100%;
	overflow-x: auto;
}

#cc-main .pm__section-table thead,
#cc-main .pm__section-table tbody {
	min-width: 46em;
}

#cc-main .pm__section-table th,
#cc-main .pm__section-table td {
	hyphens: none;
	overflow-wrap: normal;
}

/*
 * Name und Typ sind kurze, technische Angaben – die sollen nicht umbrechen,
 * sonst sucht man `lastExternalReferrerTime` über drei Zeilen zusammen.
 */
#cc-main .pm__section-table td:first-child,
#cc-main .pm__section-table td:nth-child(3) {
	white-space: nowrap;
}

/*
 * Die Fläche des Banners folgt der Kartenoptik des Themes: weiche Kante, ruhiger
 * Schatten, keine harte Linie.
 */
#cc-main .cm,
#cc-main .pm {
	box-shadow: 0 12px 32px rgba( 32, 25, 35, 0.14 );
}

#cc-main .cm__title,
#cc-main .pm__title {
	font-family: var( --wp--preset--font-family--heading, Manrope, system-ui, sans-serif );
}

/*
 * Der Banner sitzt unten links und darf auf schmalen Geräten nicht die halbe
 * Seite verdecken – dort spannt er über die volle Breite, mit Luft zum Rand.
 */
@media ( max-width: 640px ) {
	#cc-main {
		--cc-modal-margin: 12px;
	}
}

/*
 * Wer weniger Bewegung eingestellt hat, bekommt sie auch hier nicht. Das Theme
 * hält es an anderen Stellen genauso.
 */
@media ( prefers-reduced-motion: reduce ) {
	#cc-main {
		--cc-modal-transition-duration: 0s;
	}
}

/**
 * Zurückgehaltene Einbettungen.
 *
 * Der Platzhalter behält das Seitenverhältnis des Rahmens nicht bei – er weiß
 * nicht, wie groß der Inhalt sein wird, und ein geratenes Format wäre bei jedem
 * zweiten Video falsch. Stattdessen wächst er mit seinem Text.
 *
 * Die Farben kommen aus theme.json, der Knopf erbt über `wp-element-button` die
 * Gestalt aller anderen Knöpfe. Eigene Werte hätten hier nur die eine Aufgabe,
 * beim nächsten Farbwechsel übersehen zu werden.
 */
.eb-blockiert {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--cream);
}

/* Solange nichts freigegeben ist, nimmt der Rahmen keinen Platz ein. */
.eb-blockiert:not( .eb-blockiert--frei ) > iframe {
	display: none;
}

.eb-blockiert__hinweis {
	padding: var(--wp--preset--spacing--40, 1.5rem);
	text-align: center;
}

.eb-blockiert--frei .eb-blockiert__hinweis {
	display: none;
}

.eb-blockiert__text {
	margin: 0 0 1rem;
}

.eb-blockiert__fussnote {
	margin: 1rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

/*
 * Nach der Freigabe verschwindet der Kasten und der Inhalt steht da, wo er ohne
 * Blocker gestanden hätte. Ein Rahmen um ein Video, den es nur gibt, weil dort
 * einmal ein Hinweis stand, wäre eine Narbe.
 */
.eb-blockiert--frei {
	border: 0;
	background: none;
}

.eb-blockiert--frei > iframe {
	display: block;
	max-width: 100%;
}

/**
 * Datenschutz und Impressum im Auswahlfenster.
 *
 * Die erste Ebene bekommt ihre Fußzeile von der Bibliothek und damit auch deren
 * Gestaltung. Hier ist es unser eigenes Element, also bilden wir dieselbe Optik
 * mit denselben `--cc-*`-Variablen nach – sonst sähe die zweite Ebene aus wie von
 * einer anderen Website.
 */
/*
 * Die Selektoren tragen `#cc-main`, wie alle anderen in dieser Datei auch: Die
 * Bibliothek gestaltet die Fußzeile über `#cc-main .pm__footer > *`, und dagegen
 * kommt eine einzelne Klasse nicht an. Hier stand das schon einmal ohne Präfix –
 * die Regeln waren dann im Stylesheet vorhanden, trafen das Element und hatten
 * trotzdem keine Wirkung.
 */
#cc-main .eb-pm-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	width: 100%;
	margin-top: .25rem;
	padding-top: 1rem;
	border-top: 1px solid var( --cc-separator-border-color );
}

#cc-main .eb-pm-links a {
	font-size: .875rem;
	color: var( --cc-link-color, var( --cc-primary-color ) );
	text-decoration: underline;
}

/*
 * Die Fußzeile darf umbrechen, sonst quetschen sich Knöpfe und Links in eine
 * Zeile und die Knopfbeschriftungen brechen mitten im Wort.
 */
#cc-main .pm__footer {
	flex-wrap: wrap;
}