/**
 * Consent UI — Elektrohertz.
 *
 * Loaded AFTER assets/vendor/klaro/klaro.css, which stays unmodified.
 *
 * ## How this works, and why the first attempt broke
 *
 * Klaro's stylesheet is written entirely as `var(--name, fallback)` with NO
 * `:root` block — the fallbacks are its defaults, and every one of them assumes
 * a DARK panel: `--dark1: #333` is the surface, `--light1: #fafafa` is the
 * TEXT. Setting a white background without also setting the text variable
 * produced #fafafa on white — a modal whose entire description was invisible,
 * which is exactly what shipped to staging first time round.
 *
 * So the palette is redefined at the top rather than patched rule by rule.
 * Klaro's whole stylesheet then follows, and the overrides below are only for
 * things variables cannot express: layout, and the two rules that are legal
 * constraints rather than taste.
 *
 * ⚠️ Four rules here are LEGAL CONSTRAINTS. They are marked. Restyling is fine;
 * flattening a marked rule is a compliance change.
 */

/* ------------------------------------------------------------------ palette */

/*
 * Neutral by intent. Klaro's defaults are a green "accept" against a grey
 * "decline", which is both off-brand here and the persuasion pattern rule 1
 * exists to prevent — the colours themselves were doing the nudging.
 *
 * One accent only: the brand orange, used for the switch (a state indicator)
 * and never to make one button more attractive than the other.
 */
#eh-klaro {
	--eh-cmp-surface:      #ffffff;
	--eh-cmp-surface-soft: #f7f9fb;
	--eh-cmp-ink:          #01204e;   /* headings */
	--eh-cmp-body:         #46586e;   /* body copy — AA on white */
	--eh-cmp-muted:        #6b7c92;
	--eh-cmp-border:       #dfe5ed;
	--eh-cmp-accent:       #ff5f00;
	--eh-cmp-accent-deep:  #c24500;

	/* Klaro's own variables, redefined. Order matters to nothing; presence does. */
	--font-family:       var(--eh-font, inherit);
	--title-font-family: var(--eh-font, inherit);
	--font-size:         14.5px;
	--border-radius:     6px;
	--border-width:      1px;
	--border-style:      solid;

	--dark1:  var(--eh-cmp-surface);   /* panel background */
	--dark2:  var(--eh-cmp-surface);
	--dark3:  var(--eh-cmp-border);
	--light1: var(--eh-cmp-body);      /* ⚠️ TEXT, not a background */
	--light2: var(--eh-cmp-muted);
	--light3: var(--eh-cmp-muted);
	--white2: var(--eh-cmp-surface-soft);
	--white3: var(--eh-cmp-border);

	--green1: var(--eh-cmp-ink);
	--green2: var(--eh-cmp-ink);
	--green3: var(--eh-cmp-accent);
	--blue1:  var(--eh-cmp-ink);
	--blue2:  var(--eh-cmp-ink);
	--button-text-color: #ffffff;

	--notice-max-width: 560px;
}

#eh-klaro .cookie-notice,
#eh-klaro .cookie-modal {
	font-family: var(--eh-font, inherit);
	color: var(--eh-cmp-body);
}

/* ------------------------------------------------------------- the notice */

/*
 * Full-width strip rather than Klaro's floating corner card: this is a
 * decision the visitor is being asked to make, not a toast.
 */
#eh-klaro .cookie-notice:not(.cn-embedded) {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: 100%;
	max-width: none;
	z-index: 1000;
	background: var(--eh-cmp-surface);
	color: var(--eh-cmp-body);
	border-top: 3px solid var(--eh-cmp-accent);
	border-radius: 0;
	box-shadow: 0 -6px 30px rgba(1, 32, 78, 0.14);
	/*
	 * Compact on purpose. The strip covers the page it interrupts, so every
	 * pixel of chrome is page the visitor cannot read until they answer.
	 *
	 * ⚠️ The saving comes from padding, leading and type size — NOT from the
	 * buttons. Those keep their 43px height and 128px width: they are the
	 * interactive part, they are the thing that must stay equally easy to hit,
	 * and shrinking a Decline button to save space is how an accessibility
	 * problem and a compliance problem arrive as one edit.
	 */
	padding: 13px var(--eh-gutter, 24px);
	font-size: 14px;
	line-height: 1.45;
}

#eh-klaro .cookie-notice .cn-body {
	max-width: var(--eh-maxw, 1440px);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 28px;
}

#eh-klaro .cookie-notice .cn-body > p:not(.cn-buttons) {
	flex: 1 1 420px;
	margin: 0;
	max-width: 82ch;
	color: var(--eh-cmp-body);
}

/*
 * The heading shares the row with the body copy from 900px up, instead of
 * taking a line of its own — on a wide screen that line was almost entirely
 * empty space.
 */
#eh-klaro .cookie-notice .cn-body h1,
#eh-klaro .cookie-notice .cn-body .eh-cn-title,
#eh-klaro .cookie-notice .cn-body .cn-title {
	flex: 1 0 100%;
	margin: 0;
	color: var(--eh-cmp-ink);
	font-size: 15px;
	font-weight: 800;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

@media (min-width: 900px) {
	#eh-klaro .cookie-notice .cn-body h1,
	#eh-klaro .cookie-notice .cn-body .eh-cn-title,
	#eh-klaro .cookie-notice .cn-body .cn-title {
		flex: 0 0 auto;
		align-self: center;
	}
	#eh-klaro .cookie-notice .cn-body > p:not(.cn-buttons):not(.eh-cn-title) {
		flex: 1 1 380px;
	}
}

#eh-klaro .cookie-notice .cn-ok {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

#eh-klaro a {
	color: var(--eh-cmp-accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#eh-klaro a:hover { color: var(--eh-cmp-accent); }

/* -------------------------------------------------------------- the modal */

/*
 * Wider and shorter than Klaro's default card. The content is two short
 * paragraphs and one switch; a tall narrow column made it read as far more
 * consequential — and more work — than it is.
 */
#eh-klaro .cookie-modal .cm-modal.cm-klaro {
	background: var(--eh-cmp-surface);
	color: var(--eh-cmp-body);
	max-width: 760px;
	width: calc(100% - 32px);
	border-radius: 8px;
	border: 1px solid var(--eh-cmp-border);
	box-shadow: 0 24px 60px rgba(1, 32, 78, 0.24);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
}

#eh-klaro .cookie-modal .cm-bg { background: rgba(1, 32, 78, 0.42); }

#eh-klaro .cookie-modal .cm-header {
	padding: 18px 28px 12px;
	border-bottom: 1px solid var(--eh-cmp-border);
}

/*
 * ⚠️ font-style: normal is load-bearing. The theme sets h1 italic (see the
 * hero), and Klaro's modal title IS an h1 — so it inherited the display italic
 * and the panel read as a piece of marketing rather than a settings dialog.
 */
#eh-klaro .cookie-modal .cm-header h1,
#eh-klaro .cookie-modal .cm-header .title {
	margin: 0 0 6px;
	color: var(--eh-cmp-ink);
	font-size: 19px;
	font-weight: 800;
	font-style: normal;
	letter-spacing: -0.01em;
	line-height: 1.25;
	padding-right: 44px;   /* clear of the close button */
}

/* ⚠️ The description was #fafafa on white before the palette above. Stated
   explicitly as well, because this is the sentence that tells a visitor what
   they are agreeing to and it must never silently disappear again. */
#eh-klaro .cookie-modal .cm-header p,
#eh-klaro .cookie-modal .cm-header span,
#eh-klaro .cookie-modal .cm-body p,
#eh-klaro .cookie-modal .cm-list-description,
#eh-klaro .cookie-modal li.cm-purpose p {
	color: var(--eh-cmp-body);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

#eh-klaro .cookie-modal .cm-body {
	padding: 2px 28px;
	overflow-y: auto;
}

#eh-klaro .cookie-modal .cm-body ul { margin: 0; padding: 0; }

#eh-klaro .cookie-modal li.cm-purpose,
#eh-klaro .cookie-modal li.cm-service {
	list-style: none;
	border-bottom: 1px solid var(--eh-cmp-border);
	padding: 12px 0;
	margin: 0;
}

#eh-klaro .cookie-modal li.cm-purpose:last-child { border-bottom: 0; }

/*
 * ⚠️ The switch used to sit ON TOP of its own label — "Statistics" was legible
 * only as "…cs". Klaro gives .cm-switch a fixed 50×30 inline-block and leaves
 * the label to flow around it, which collapses at this font size.
 *
 * Made explicit as a flex row: switch first, then the title. Deterministic
 * regardless of what Klaro's defaults do next release.
 */
#eh-klaro .cookie-modal .cm-list-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	cursor: pointer;
	position: static;
}

#eh-klaro .cookie-modal .cm-list-label .cm-switch {
	flex: 0 0 auto;
	order: -1;
	width: 44px;
	height: 24px;
	position: relative;
	margin: 0;
}

#eh-klaro .cookie-modal .cm-list-title {
	color: var(--eh-cmp-ink);
	font-weight: 700;
	font-size: 15px;
	position: static;
	display: inline;
}

#eh-klaro .cookie-modal .cm-list-label .slider {
	position: absolute;
	inset: 0;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #c3ccd8;
	box-shadow: none;
	transition: background 140ms ease;
}

#eh-klaro .cookie-modal .cm-list-label .slider::before,
#eh-klaro .cookie-modal .cm-list-label .slider.round::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(1, 32, 78, 0.3);
	transition: transform 140ms ease;
}

#eh-klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
	background: var(--eh-cmp-accent);
}

#eh-klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
	transform: translateX(20px);
}

/* Klaro renders the real checkbox off-screen; keep it reachable, not visible. */
#eh-klaro .cookie-modal .cm-list-input {
	position: absolute;
	opacity: 0;
	width: 44px;
	height: 24px;
	margin: 0;
}

#eh-klaro .cookie-modal .cm-services { margin-top: 8px; }

#eh-klaro .cookie-modal .cm-caret,
#eh-klaro .cookie-modal .cm-services .cm-caret a {
	color: var(--eh-cmp-accent-deep);
	font-size: 13px;
}

/* ------------------------------------------------------------ close button */

/*
 * Was a bare 24×20 SVG whose strokes inherited a light colour — it rendered as
 * an empty box in the corner and read as a broken element rather than a close
 * control.
 */
#eh-klaro .cookie-modal button.hide {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}

#eh-klaro .cookie-modal button.hide:hover { background: var(--eh-cmp-surface-soft); }

#eh-klaro .cookie-modal button.hide svg {
	width: 14px;
	height: 14px;
	stroke: var(--eh-cmp-muted);
	stroke-width: 2;
}

#eh-klaro .cookie-modal button.hide:hover svg { stroke: var(--eh-cmp-ink); }

/* ---------------------------------------------------------------- buttons */

#eh-klaro .cm-btn,
#eh-klaro .cn-buttons button,
#eh-klaro .cm-footer-buttons button {
	font-family: var(--eh-font, inherit);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	padding: 11px 22px;
	/*
	 * ⚠️ A FLOOR, not a width — and on its own that is not equal weight.
	 *
	 * German caught this: "Ablehnen" sat at the 128px floor while
	 * "Akzeptieren" grew to 142px on its own content, so Accept was physically
	 * the larger target in one language out of four. English, Italian and
	 * Croatian all happen to have similar-length pairs, which is exactly why
	 * checking one locale proves nothing here.
	 *
	 * The pair is equalised below. This floor stays for the third options.
	 */
	min-width: 128px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	margin: 0;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

/*
 * ⚠️ LEGAL CONSTRAINT 1 — Accept and Decline carry EQUAL VISUAL WEIGHT.
 *
 * Identical padding, font size, weight, min-width, radius and border width.
 * They differ only in fill: one solid ink, one outlined in the SAME ink. Both
 * meet AA on the surface behind them.
 *
 * This is the most commonly enforced cookie-banner defect in the EU, and the
 * first build failed it by accident — Klaro's untouched defaults painted Accept
 * green and Decline grey. Colour alone was doing the nudging. If a designer
 * asks for a more prominent Accept, that is a request to reintroduce a known
 * violation, not a styling preference.
 */
#eh-klaro .cm-btn.cm-btn-success,
#eh-klaro .cm-btn.cm-btn-accept-all,
#eh-klaro .cn-buttons button.cm-btn-success,
#eh-klaro .cm-footer-buttons button.cm-btn-accept-all {
	background: var(--eh-cmp-ink);
	color: #fff;
	border-color: var(--eh-cmp-ink);
}

#eh-klaro .cm-btn.cm-btn-decline,
#eh-klaro .cm-btn.cm-btn-danger,
#eh-klaro .cn-buttons button.cn-decline,
#eh-klaro .cm-footer-buttons button.cn-decline,
#eh-klaro [data-eh-decline-all] {
	background: transparent;
	color: var(--eh-cmp-ink);
	border-color: var(--eh-cmp-ink);
}

#eh-klaro .cm-btn.cm-btn-success:hover,
#eh-klaro .cm-btn.cm-btn-accept-all:hover,
#eh-klaro .cn-buttons button.cm-btn-success:hover {
	background: #012f70;
	border-color: #012f70;
}

#eh-klaro .cm-btn.cm-btn-decline:hover,
#eh-klaro .cn-buttons button.cn-decline:hover,
#eh-klaro [data-eh-decline-all]:hover {
	background: var(--eh-cmp-surface-soft);
}

/*
 * "Accept selected" and "Let me choose" are the quieter third options. Quieter
 * than BOTH of the two above — never quieter than one and not the other, which
 * would restore the asymmetry rule 1 removes.
 */
#eh-klaro .cm-btn.cm-btn-info:not(.cm-btn-accept-all),
#eh-klaro .cm-footer-buttons button.cm-btn-accept:not(.cm-btn-accept-all),
#eh-klaro .cn-buttons button.cm-btn-info,
#eh-klaro .cn-learn-more {
	background: transparent;
	color: var(--eh-cmp-muted);
	border-color: var(--eh-cmp-border);
	font-weight: 600;
}

#eh-klaro .cm-btn.cm-btn-info:not(.cm-btn-accept-all):hover,
#eh-klaro .cn-buttons button.cm-btn-info:hover,
#eh-klaro .cn-learn-more:hover {
	color: var(--eh-cmp-ink);
	border-color: var(--eh-cmp-muted);
}

#eh-klaro .cn-buttons,
#eh-klaro .cm-footer-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	margin: 0;
}

/*
 * ⚠️ LEGAL CONSTRAINT 1, enforced by layout rather than by hoping the words
 * come out the same length.
 *
 * Accept and Decline share one flex basis, so they are the SAME WIDTH in every
 * language regardless of how long the labels are. Verified in all four:
 * without this, German rendered 128 against 142.
 *
 * If a new locale or a reworded button ever appears, re-measure all four — a
 * button pair that is equal in the language you happen to speak is the easiest
 * version of this defect to ship.
 */
/* The NOTICE pair: equal by flex basis, and free to be narrow. */
#eh-klaro .cn-buttons button.cm-btn-success,
#eh-klaro .cn-buttons button.cm-btn-accept-all,
#eh-klaro .cn-buttons button.cn-decline,
#eh-klaro .cn-buttons button.cm-btn-decline {
	flex: 1 1 0;
	min-width: 128px;
	max-width: 200px;
}

/*
 * The MODAL pair, separately. It had the identical defect, found the same way
 * — German only: Ablehnen 128 against Akzeptieren 142. Fixing the notice and
 * not the settings panel would have left the asymmetry exactly where a
 * returning visitor goes to withdraw, which is the worse of the two places.
 *
 * ⚠️ Kept as its OWN rule rather than merged into the list above. Merging them
 * is what I did first, and the modal's wider floor then applied to the notice
 * too: its buttons went 128 to 152 and the strip grew from 90px back to 115px,
 * quietly undoing the compaction it had just been given. The two surfaces have
 * different space to spend and need different numbers.
 *
 * `Accept selected` is deliberately absent: it is the quiet third option and
 * sizes to its own content, quieter than both of the two that must match.
 */
#eh-klaro .cm-footer-buttons button.cm-btn-accept-all,
#eh-klaro .cm-footer-buttons button.cn-decline,
#eh-klaro .cm-footer-buttons button.cm-btn-decline,
#eh-klaro .cm-footer-buttons [data-eh-decline-all] {
	flex: 0 1 auto;
	min-width: 152px;
	max-width: 200px;
}

#eh-klaro .cookie-modal .cm-footer {
	padding: 14px 28px;
	border-top: 1px solid var(--eh-cmp-border);
	background: var(--eh-cmp-surface-soft);
	border-radius: 0 0 8px 8px;
}

#eh-klaro .cookie-modal .cm-powered-by { display: none; }

/* ------------------------------------------------------------------- focus */

/*
 * ⚠️ LEGAL CONSTRAINT 3 — keyboard operable with a VISIBLE focus ring.
 * Never replace with `outline: none`.
 */
#eh-klaro button:focus-visible,
#eh-klaro a:focus-visible,
#eh-klaro input:focus-visible + .cm-list-label .cm-switch,
#eh-klaro input:focus-visible {
	outline: 3px solid var(--eh-cmp-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/*
 * ⚠️ LEGAL CONSTRAINT 2 — no cookie wall. `mustConsent: false` enforces it;
 * this only stops a stylesheet reintroducing one. The notice must never take a
 * full-viewport backdrop.
 */
#eh-klaro .cookie-notice:not(.cn-modal) ~ .cm-bg { display: none; }

/* ------------------------------------------- the persistent control (footer) */

/*
 * ⚠️ LEGAL CONSTRAINT 4 — Art. 7(3), withdrawal as easy as consent. A real
 * <button>, so it is keyboard operable for free.
 */
.eh-consent-manage {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.eh-consent-manage:hover { color: var(--eh-on-dark-orange, #ff9e5e); }

.eh-consent-manage:focus-visible {
	outline: var(--eh-focus, 2px solid #ff5f00);
	outline-offset: var(--eh-focus-offset, 2px);
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 720px) {
	#eh-klaro .cookie-notice:not(.cn-embedded) { padding: 12px 16px; font-size: 13.5px; }
	#eh-klaro .cookie-notice .cn-body { gap: 2px 10px; }
	#eh-klaro .cookie-notice .cn-body .eh-cn-title { font-size: 14.5px; }
	#eh-klaro .cookie-notice .cn-ok { width: 100%; margin-top: 8px; }
	/*
	 * Buttons keep their 43px height; only the space around them is reclaimed.
	 *
	 * ⚠️ min-width drops to 0 here and `flex: 1 1 0` alone keeps the pair equal.
	 * Leaving the 128px desktop floor in place forced the two onto separate
	 * rows on a phone, which made the strip TALLER while trying to make it
	 * shorter — 161px to 197px in English. Equality must come from the flex
	 * basis, not from a floor, or the two requirements fight each other.
	 */
	#eh-klaro .cn-buttons button { padding: 11px 14px; }
	#eh-klaro .cn-buttons button.cm-btn-success,
	#eh-klaro .cn-buttons button.cm-btn-accept-all,
	#eh-klaro .cn-buttons button.cn-decline,
	#eh-klaro .cn-buttons button.cm-btn-decline { min-width: 0; max-width: none; }

	/* ⚠️ Equal width, so neither is the easy one to hit with a thumb. */
	#eh-klaro .cn-buttons button,
	#eh-klaro .cm-footer-buttons button { flex: 1 1 0; min-width: 0; }

	#eh-klaro .cookie-modal .cm-header { padding: 18px 18px 12px; }
	#eh-klaro .cookie-modal .cm-body   { padding: 4px 18px; }
	#eh-klaro .cookie-modal .cm-footer { padding: 14px 18px; }
	#eh-klaro .cookie-modal .cm-modal.cm-klaro { max-height: 88vh; }
}

@media (prefers-reduced-motion: reduce) {
	#eh-klaro * { transition: none !important; animation: none !important; }
}