/**
 * A&B Compliance – Frontend-Stylesheet (neutrale Basis)
 *
 * Diese Datei wird auf jeder Seite geladen und hält sich an den
 * WordPress-Standardlook: weiße Flächen, 1px starke Rahmen in #c3c4c7,
 * 4px Radius, keine Tiefenebene, kein Anheben, kein dunkles Design.
 * So passen Einwilligungsbanner und Einstellungsdialog auch in
 * Kundenprojekte mit fremden Themes.
 *
 * Das A&B-eigene Tiefen-Design und das dunkle Design stehen in
 * assets/css/ab-theme-design.css und kommen nur bei aktivem Theme
 * "A&B Schulungen" hinzu (siehe EUWB_Frontend::ab_theme_design_active()).
 *
 * Was hier bleibt, weil es nicht am Theme hängen darf:
 *   Akzent #2271b1, Hover #135e96, Fokusrahmen 3px #005fcc nur bei
 *   Tastaturbedienung, Schaltflächen mindestens 44px hoch,
 *   umbruchfähige Beschriftung.
 */

/* Plugin-eigene Design-Variablen: Akzent, Fokus und ruhiger Rahmen. */
.euwb-legal-document,
.euwb-cookie-page,
.euwb-legal-links,
.euwb-button,
.euwb-consent,
.euwb-consent-modal {
	--euwb-accent: #2271b1;
	--euwb-accent-hover: #135e96;
	--euwb-on-accent: #fff;
	--euwb-focus: #005fcc;
	--euwb-border-muted: #c3c4c7;
}

.euwb-legal-document,
.euwb-cookie-page {
	color: inherit;
	font: inherit;
}

.euwb-legal-document section + section {
	margin-top: 2rem;
}

.euwb-legal-document address {
	font-style: normal;
}

.euwb-admin-preview-note {
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
}

.euwb-legal-links {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1rem max(1rem, calc((100% - 1200px) / 2));
	border-top: 1px solid currentColor;
	color: inherit;
	font: inherit;
	text-align: center;
	opacity: 0.85;
}

.euwb-legal-links a {
	color: inherit;
}

/* --- Schaltflächen ---------------------------------------------------------- */
/* Bewusst niedrige Spezifität (eine Klasse), damit Theme-Regeln wie
   `.site-main .euwb-button` und `body .euwb-consent__actions button` gewinnen.
   Radius 3px und 1px Rahmen entsprechen dem WordPress-Standard. */

.euwb-button,
.euwb-consent__actions button {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--euwb-accent);
	border-radius: 3px;
	background: var(--euwb-accent);
	color: var(--euwb-on-accent);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
	cursor: pointer;
}

/* Sekundäre Schaltflächen: weiße Fläche, ruhiger Rahmen, Akzent als Schrift. */
.euwb-consent__actions button[data-euwb-consent="necessary"],
.euwb-consent__actions button[data-euwb-open-settings] {
	border-color: var(--euwb-border-muted);
	background: #fff;
	color: var(--euwb-accent);
}

/* Der Fokusrahmen erscheint nur bei Tastaturbedienung, damit nach einem
   Mausklick kein Rahmen an der Schaltfläche oder am Schließkreuz hängen bleibt.
   Diese Regel gehört zur Barrierefreiheit und steht deshalb in der Basis. */
.euwb-button:focus-visible,
.euwb-consent__actions button:focus-visible,
.euwb-consent-modal button:focus-visible,
.euwb-consent-modal input:focus-visible {
	outline: 3px solid var(--euwb-focus);
	outline-offset: 2px;
}

/* Rückfallebene für Browser ohne :focus-visible. */
@supports not selector(:focus-visible) {
	.euwb-button:focus,
	.euwb-consent__actions button:focus,
	.euwb-consent-modal button:focus,
	.euwb-consent-modal input:focus {
		outline: 3px solid var(--euwb-focus);
		outline-offset: 2px;
	}
}

@media (hover: hover) {
	.euwb-button:hover,
	.euwb-consent__actions button:hover {
		border-color: var(--euwb-accent-hover);
		background: var(--euwb-accent-hover);
		color: var(--euwb-on-accent);
	}

	.euwb-consent__actions button[data-euwb-consent="necessary"]:hover,
	.euwb-consent__actions button[data-euwb-open-settings]:hover {
		border-color: var(--euwb-accent-hover);
		background: #f0f6fc;
		color: var(--euwb-accent-hover);
	}
}

/* --- Einwilligungsbanner ---------------------------------------------------- */

.euwb-consent {
	position: fixed;
	z-index: 999990;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	max-height: min(90vh, 720px);
	padding: 1rem;
	overflow: auto;
	background: #fff;
	color: #1d2327;
	border: 1px solid var(--euwb-border-muted);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.euwb-consent[hidden],
.euwb-consent-modal[hidden] {
	display: none;
}

.euwb-consent__inner {
	width: min(100%, 1100px);
	margin: 0 auto;
}

.euwb-consent h2,
.euwb-consent-modal h2 {
	margin: 0 0 0.75rem;
	color: inherit;
	font-size: 1.35rem;
	line-height: 1.3;
}

.euwb-consent p {
	margin: 0 0 1rem;
}

.euwb-consent__links a {
	color: inherit;
}

.euwb-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.euwb-consent__actions button {
	flex: 1 1 180px;
}

/* --- Einstellungsfenster ---------------------------------------------------- */

.euwb-consent-modal {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: 1rem;
	color: #1d2327;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.euwb-consent-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

.euwb-consent-modal__panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(100%, 680px);
	max-height: min(90vh, 760px);
	padding: 1.5rem;
	overflow: auto;
	border: 1px solid var(--euwb-border-muted);
	border-radius: 4px;
	background: #fff;
}

.euwb-consent-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* Jede Kategorie ist ein eigener Kasten mit ruhigem Rahmen. Im
   Einstellungsmenü bleibt dieser Kasten statisch: keine Reaktion bei Zeiger
   oder Fokus, damit die Liste ruhig wirkt. */
.euwb-consent-category {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	margin: 0.75rem 0;
	padding: 12px 14px;
	border: 1px solid var(--euwb-border-muted);
	border-radius: 4px;
	background: #fff;
}

.euwb-consent-category p,
.euwb-consent-category__description {
	display: block;
	margin: 0.25rem 0 0;
	font-weight: 400;
}

.euwb-consent-category input {
	width: 24px;
	height: 24px;
}

body.euwb-consent-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.euwb-consent {
		padding: 0.875rem;
	}

	.euwb-consent__actions {
		display: grid;
	}

	.euwb-consent__actions button {
		width: 100%;
	}

	.euwb-consent-modal__panel {
		padding: 1.25rem;
	}
}

/* Im Kontrastmodus tragen die Rahmen die Struktur. */
@media (forced-colors: active) {
	.euwb-button,
	.euwb-consent,
	.euwb-consent__actions button,
	.euwb-consent-modal__panel,
	.euwb-consent-category {
		border-style: solid;
	}
}