/*
 * The consent interface.
 *
 * Enqueued only when a consent-requiring technology is actually configured, so
 * a campaign that measures nothing pays nothing for this file.
 *
 * Campaign-neutral: palette and type by theme.json preset slug, never by value.
 *
 * THE GEOMETRY IS THE COMPLIANCE SURFACE. Three properties, and each one is
 * here because of a specific failure it prevents:
 *
 *  - position: fixed, so the notice OVERLAYS and never inserts into flow. An
 *    in-flow banner pushes the document down on arrival, which is a layout
 *    shift on every first visit.
 *  - a bottom-anchored SOLID BAND, not a full-screen modal, so the reader can
 *    still see and read the page — including the mandatory EU communication —
 *    while deciding.
 *  - the band reserves its own height as REAL TRAILING PADDING on <body>, so a
 *    reader who scrolls to the very bottom while the notice is open can still
 *    reach the mandatory band underneath it. THAT is what stops a bottom-anchored
 *    dialog from obscuring a mandatory element: the page genuinely gets longer,
 *    the element does not move, and the interface never has to be repositioned.
 *
 * A PREVIOUS VERSION OF THIS FILE USED `scroll-padding-block-end` FOR THAT THIRD
 * PROPERTY AND WAS WRONG. `scroll-padding` is an inset applied to scroll-into-view
 * operations on a scroll container; it does NOT extend the scrollable area and has
 * no effect on where the document bottom comes to rest. Measured at 390x844 the
 * band covered 185px of the mandatory band — including both dietary-guideline
 * hyperlinks — with no way for the reader to reveal it. Do not reintroduce it:
 * only a property that adds block size to the document can reserve this space.
 *
 * The reservation is applied by the same pre-paint attribute that sets visibility,
 * so it is in effect BEFORE first paint and contributes zero CLS. The CSS values
 * below are a deliberately generous worst case; consent.js measures the band it
 * actually rendered and narrows --eu-consent-h to `height + 8px`. That is why the
 * reservation stays correct for German and French copy, which is longer than the
 * English it was authored against and does not exist yet to be measured.
 *
 * Whether it obscures anything remains a MEASUREMENT, taken per breakpoint and
 * per language against real browser chrome. If it ever would, the interface
 * moves. Never the mandatory element.
 */

.eu-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 90; /* Below --eu-z-skiplink (100), above everything else. */
	background-color: var(--eu-page);
	border-top: 1px solid var(--eu-hair-strong);
	padding: var(--wp--preset--spacing--24, 24px) var(--eu-gutter);
	/* Never a shadow, a blur or a glass effect. A hairline is the separator. */
	box-shadow: none;
	backdrop-filter: none;
}

/*
 * CSS decides visibility, not JavaScript. The pre-paint statement in
 * inc/consent.php sets the state; the element ships with the `hidden`
 * attribute so that with JavaScript disabled it stays hidden — which is
 * correct, because with JavaScript disabled nothing non-essential can load and
 * there is therefore nothing to consent to.
 */
.eu-consent[hidden] {
	display: none;
}

/*
 * The band's own height, reserved as real document length so the mandatory EU
 * communication band can always be scrolled clear of the notice.
 *
 * The fallbacks are the worst case for the widest translated copy at each band,
 * not the measured English height: at 390px the English band measures 369.6px,
 * so 384px carries it plus a line of German compounding. consent.js replaces
 * these with the height it actually measured, so the fallback only ever governs
 * the interval before the deferred script runs — during which the reader cannot
 * have reached the document bottom anyway.
 */
/*
 * THE CUSTOM PROPERTY IS DECLARED ON <html> AND THE PADDING IS APPLIED TO
 * <body>, AND THAT SPLIT IS DELIBERATE.
 *
 * consent.js narrows the reservation by setting --eu-consent-h as an INLINE
 * style on <html>. Declaring the breakpoint values on `body` instead put a
 * declaration on the element that would otherwise inherit them, so body's own
 * value shadowed the inherited inline one and the measured height was silently
 * discarded: at 768px the band measured 200.6px, the JS asked for 209px, body
 * held 176px, and 24.6px of the mandatory EU band stayed covered. Declaring
 * them on <html> means the inline style simply wins, which is the whole point
 * of measuring.
 */
html[data-eu-consent='pending'] {
	--eu-consent-h: 384px;
}

@media (min-width: 480px) {
	html[data-eu-consent='pending'] {
		--eu-consent-h: 256px;
	}
}

@media (min-width: 768px) {
	html[data-eu-consent='pending'] {
		--eu-consent-h: 176px;
	}
}

html[data-eu-consent='pending'] body {
	padding-block-end: var(--eu-consent-h, 384px);
}

.eu-consent__inner {
	display: grid;
	gap: var(--wp--preset--spacing--16, 16px);
	max-inline-size: var(--eu-container);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.eu-consent__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--wp--preset--spacing--32, 32px);
	}
}

.eu-consent__title {
	margin-block-end: var(--wp--preset--spacing--8, 8px);
}

.eu-consent__text {
	/*
	 * 16px floor, and 1.6 line-height. This is the first interactive component
	 * a reader meets, and on a campaign with an older target audience that
	 * makes its legibility a content requirement rather than a courtesy.
	 */
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	max-width: 68ch;
}

.eu-consent__text a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/*
 * ACCEPT AND REJECT ARE THE SAME OBJECT. Identical box, identical type,
 * identical border, no fill on either, side by side at the same level. There is
 * no visual hierarchy here for a dark pattern to live in, and a later change
 * that made one of them quieter would be visible in this rule rather than
 * hidden in a variant class.
 */
.eu-consent__actions {
	display: grid;
	gap: var(--wp--preset--spacing--12, 12px);
}

@media (min-width: 480px) {
	.eu-consent__actions {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

.eu-consent__btn {
	appearance: none;
	/*
	 * border-box, so the hover state below can thicken the border WITHOUT
	 * changing the button's outer size. A hover that resizes its own control
	 * moves the control out from under the pointer, and on a 48px target that
	 * is a real usability defect rather than a cosmetic one.
	 */
	box-sizing: border-box;
	background: none;
	border: 1px solid currentColor;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--nav, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* >=48px of target, above the 44px minimum, for the same audience reason. */
	min-block-size: 48px;
	min-inline-size: 8rem;
	padding-inline: var(--wp--preset--spacing--24, 24px);
	cursor: pointer;
}

.eu-consent__btn:hover {
	/*
	 * The border thickens. Nothing fills, no colour changes, and this is NOT a
	 * box-shadow: an inset ring here would be the second undocumented use of a
	 * property this theme holds at `none` everywhere, and the build asserts
	 * that. A border is what a border should be.
	 */
	border-width: 2px;
}

/* The persistent withdrawal control, in the footer meta row. */
.eu-consent-control {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	cursor: pointer;
	/* A real target, not a 13px word. */
	min-block-size: 44px;
}

/*
 * The control opens a dialog that only JavaScript can open, so with JavaScript
 * disabled it is removed from layout AND from the accessibility tree rather
 * than left as a dead control. The .eu-js gate is the parent's existing
 * mechanism for exactly this.
 */
html:not(.eu-js) .eu-consent-control {
	display: none;
}

@media print {
	.eu-consent,
	.eu-consent-control {
		display: none;
	}
}

/* The interface takes no part in any motion behaviour. */
@media (prefers-reduced-motion: reduce) {
	.eu-consent,
	.eu-consent__btn {
		transition: none;
		animation: none;
	}
}