/*
 * emo2026, cookie consent banner.
 *
 * Self-owned consent UI (replaces the Cookie Notice plugin). Consumes the
 * shared design tokens; only banner-local values live as --consent-* here.
 *
 * Markup is rendered server-side in inc/cookie-consent.php and toggled by
 * assets/js/cookie-consent.js. Everything is scoped under .emo-consent.
 */

.emo-consent {
	--consent-max:      560px;
	--consent-shadow:   0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
	/* Alpha inks: opaque mid-grays would sit flat on the glass
	   (spec section 5), so the muted text carries alpha instead. */
	--consent-fg-muted: color-mix(in srgb, var(--color-brand-ink) 64%, transparent);
	--consent-fg-faint: color-mix(in srgb, var(--color-brand-ink) 48%, transparent);

	position: fixed;
	left: 50%;
	bottom: var(--space-5);
	z-index: 9999;
	width: calc(100% - (2 * var(--space-4)));
	max-width: var(--consent-max);
	transform: translate(-50%, 0);
}

.emo-consent[hidden] {
	display: none;
}

/* Entrance: the glass materializes, rise + scale + blur animate together
   (spec section 5), at the 250ms cap for an appearing CSS surface.
   Reduced-motion users get a plain fade (policy block at the end). */
.emo-consent__card {
	position: relative;          /* anchors the close control */
	background: var(--color-bg-translucent-strong);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--consent-shadow);
	padding: var(--space-5) var(--space-6) var(--space-6);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	animation: emo-consent-in var(--motion-duration-base) var(--motion-ease-emphasized) both;
}

@keyframes emo-consent-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
		-webkit-backdrop-filter: saturate(100%) blur(0px);
		backdrop-filter: saturate(100%) blur(0px);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}
}

/* Exit mirrors the entry path with the inverse easing (spec section 4):
   cookie-consent.js adds .is-leaving, flips hidden on animationend (with
   a timeout fallback), then removes the class. */
.emo-consent.is-leaving .emo-consent__card {
	animation: emo-consent-out var(--motion-duration-base) var(--motion-ease-standard-out) both;
}

@keyframes emo-consent-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}
	to {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
		-webkit-backdrop-filter: saturate(100%) blur(0px);
		backdrop-filter: saturate(100%) blur(0px);
	}
}

.emo-consent__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	line-height: var(--line-height-tight);
}

/* The consent script parks focus on this heading when the banner opens by
 * itself on first load (plugin assets/js/cookie-consent.js, show()). That hop
 * is deliberate: the banner renders last in wp_footer, so without it keyboard
 * users reach it behind every control on the page. Chromium counts a scripted
 * focus as :focus-visible while no pointer gesture has happened yet, and at
 * load that is always true, so a heading that is not a control drew a focus
 * ring. Usability test 2026-09-09, P1: "Cookie focus bug on first load".
 * Both pseudo-classes are needed; :focus-visible alone leaves the ring. The
 * buttons in the card keep their own ring, only the heading loses it. */
.emo-consent__title:focus,
.emo-consent__title:focus-visible {
	outline: none;
}

.emo-consent__text {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--consent-fg-muted);
}

.emo-consent__text a {
	color: var(--color-link);
	text-decoration: none;
}

.emo-consent__text a:hover,
.emo-consent__text a:focus-visible {
	text-decoration: underline;
}

/* ---------- Actions ---------- */
.emo-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: flex-end;
}

.emo-consent__btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	line-height: var(--line-height-tight);
	cursor: pointer;
	/* Transform is in the list so the press scale eases back on release. */
	transition: background var(--motion-duration-fast) var(--motion-ease-standard),
	            border-color var(--motion-duration-fast) var(--motion-ease-standard),
	            opacity var(--motion-duration-fast) var(--motion-ease-standard),
	            transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.emo-consent__btn--primary {
	background: var(--color-cta);
	color: var(--color-cta-ink);
}

.emo-consent__btn--primary:hover {
	background: var(--color-cta-hover);
}

.emo-consent__btn--ghost {
	background: transparent;
	border-color: var(--color-border-hairline);
	color: var(--color-text-primary);
}

.emo-consent__btn--ghost:hover {
	background: var(--color-overlay-hover);
}

/* Press on pointer-down (spec section 1): the duration override sits
   INSIDE :active so the press snaps and the release eases back. */
.emo-consent__btn:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

.emo-consent__btn--primary:active {
	background: color-mix(in srgb, var(--color-cta) 88%, #000);
}

.emo-consent__btn--ghost:active {
	background: var(--color-overlay-press);
}

.emo-consent__btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ---------- Close, returning visitors only ----------
 * A way out without a new decision (spec section 8, no trapped states).
 * Rendered hidden; cookie-consent.js unhides it only when a stored
 * consent already exists, a first visit still requires a choice. */
.emo-consent__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;   /* circle: square close button */
	background: transparent;
	color: var(--consent-fg-muted);
	font-size: var(--font-size-18);
	line-height: 1;
	cursor: pointer;
	transition: background var(--motion-duration-fast) var(--motion-ease-standard),
	            color var(--motion-duration-fast) var(--motion-ease-standard);
}

/* The display above would beat the UA [hidden] rule. */
.emo-consent__close[hidden] {
	display: none;
}

.emo-consent__close:hover {
	background: var(--color-overlay-hover);
	color: var(--color-text-primary);
}

.emo-consent__close:active {
	background: var(--color-overlay-press);
	transition-duration: var(--motion-duration-press);
}

.emo-consent__close:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ---------- Preferences view ---------- */
.emo-consent__cats {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: grid;
	gap: var(--space-4);
}

.emo-consent__cat {
	border-top: 1px solid var(--color-border-hairline-translucent);
	padding-top: var(--space-4);
}

.emo-consent__cat-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.emo-consent__cat-name {
	flex: 1 1 auto;
	font-size: var(--font-size-16);
	font-weight: 600;
}

.emo-consent__cat-desc {
	margin: var(--space-1) 0 0;
	font-size: var(--font-size-12);
	line-height: var(--line-height-base);
	color: var(--consent-fg-faint);
}

/* Pill switch built from a visually-hidden checkbox + sibling span. */
.emo-consent__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.emo-consent__switch {
	flex: 0 0 auto;
	position: relative;
	width: 44px;
	height: 26px;
	border-radius: var(--radius-pill);
	background: var(--grey-300);
	transition: background var(--motion-duration-base) var(--motion-ease-standard);
	cursor: pointer;
}

.emo-consent__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-bg-base);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.emo-consent__toggle:checked + .emo-consent__switch {
	background: var(--color-accent);
}

.emo-consent__toggle:checked + .emo-consent__switch::after {
	transform: translateX(18px);
}

.emo-consent__toggle:focus-visible + .emo-consent__switch {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* "Necessary" is permanently on. */
.emo-consent__switch--locked {
	background: var(--color-accent);
	opacity: 0.5;
	cursor: not-allowed;
}

.emo-consent__switch--locked::after {
	transform: translateX(18px);
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.emo-consent { bottom: 0; width: 100%; }
	.emo-consent__card { border-radius: var(--radius-card) var(--radius-card) 0 0; }
	.emo-consent__actions { justify-content: stretch; }
	.emo-consent__btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Reduced motion ----------
 * Entry keeps a short opacity fade (comprehension aid, spec section 7),
 * the rise/scale/blur ride is dropped; the exit is instant via JS; the
 * switch knob and button press jump without easing, the background press
 * on the buttons stays as pointer-down feedback. Sits at the end of the
 * file so it wins every source-order tie. */
@media (prefers-reduced-motion: reduce) {
	.emo-consent__card {
		animation: emo-consent-fade var(--motion-duration-fast) ease both;
	}

	.emo-consent.is-leaving .emo-consent__card {
		animation: none;
	}

	.emo-consent__switch,
	.emo-consent__switch::after {
		transition-duration: 0ms;
	}

	.emo-consent__btn:active {
		transform: none;
	}
}

@keyframes emo-consent-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Material fallbacks ----------
 * Every translucent surface carries both (spec section 5): near-solid
 * without blur, and solid plus a defined contrasting border. */
@media (prefers-reduced-transparency: reduce) {
	.emo-consent__card {
		background: var(--color-bg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.emo-consent__card {
		background: var(--color-bg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-color: var(--color-text-primary);
	}
}