/* ==========================================================================
   Cookie consent banner (template-parts/cookie-banner.php)

   Fixed to the bottom of the viewport, full-fluid (never a fixed pixel width,
   never 100vw, so it cannot cause horizontal scrolling at 320px). Its own
   height is capped and it scrolls internally, and the page gets matching bottom
   padding while the banner is open, so it never sits on top of content a mobile
   visitor still needs to read.

   Every colour, size, radius, shadow and duration comes from the design tokens.
   ========================================================================== */

.cookie-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--color-surface);
	color: var(--color-text);
	border-top: 3px solid var(--color-primary-800);
	box-shadow: var(--shadow-xl);
}

.cookie-banner[hidden] {
	display: none;
}

/* Keep the last of the page reachable while the banner is open. */
body:has(.cookie-banner:not([hidden])) {
	padding-bottom: 22rem;
}

@media (min-width: 900px) {
	body:has(.cookie-banner:not([hidden])) {
		padding-bottom: 12rem;
	}
}

.cookie-banner__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-5) var(--container-padding) var(--space-6);
	display: grid;
	gap: var(--space-4);
}

.cookie-banner__title {
	margin: 0;
	font-size: var(--text-lg);
	color: var(--color-primary-900);
}

.cookie-banner__title:focus-visible {
	outline: 3px solid var(--color-accent-700);
	outline-offset: 4px;
}

.cookie-banner__text {
	margin: 0;
	max-width: 70ch;
	font-size: var(--text-sm);
	color: var(--color-neutral-700);
}

.cookie-banner__policy {
	margin: 0;
	font-size: var(--text-sm);
}

.cookie-banner__policy a {
	color: var(--color-link);
	font-weight: 500;
}

.cookie-banner__policy a:hover,
.cookie-banner__policy a:focus {
	color: var(--color-link-hover);
}

/* ---- the no-JavaScript notice -------------------------------------------
   Shown until the script marks the banner ready; the buttons are the mirror
   image, so a visitor never sees a control that could not store anything. */

.cookie-banner__nojs {
	margin: 0;
	max-width: 70ch;
	font-size: var(--text-sm);
	color: var(--color-neutral-700);
	background: var(--color-neutral-100);
	border-left: 3px solid var(--color-accent-700);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
}

.cookie-banner--ready .cookie-banner__nojs,
.cookie-banner:not(.cookie-banner--ready) .cookie-banner__actions,
.cookie-banner:not(.cookie-banner--ready) .cookie-banner__panel {
	display: none;
}

/* ---- per-category settings ---------------------------------------------- */

.cookie-banner__categories {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-4);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

@media (min-width: 720px) {
	.cookie-banner__categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cookie-banner__category {
	list-style: none;
	background: var(--color-neutral-50);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
}

.cookie-banner__choice {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.cookie-banner__checkbox {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--color-accent-700);
	flex: 0 0 auto;
}

.cookie-banner__label {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary-900);
}

.cookie-banner__always {
	display: inline-block;
	margin-left: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-800);
}

.cookie-banner__description {
	display: block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--color-neutral-700);
}

/* ---- actions -------------------------------------------------------------
   "Accept all" and "Reject non-essential" are the same size, weight and shape:
   neither is visually favoured. Both carry light text on a token colour dark
   enough for WCAG AA. */

.cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.cookie-banner__btn {
	flex: 1 1 14rem;
	min-height: 2.9rem;
	padding: var(--space-3) var(--space-5);
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-neutral-50);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

.cookie-banner__btn--accept {
	background: var(--color-accent-700);
	border-color: var(--color-accent-700);
}

.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus {
	background: var(--color-accent-800);
	border-color: var(--color-accent-800);
}

.cookie-banner__btn--reject,
.cookie-banner__btn--save {
	background: var(--color-primary-700);
	border-color: var(--color-primary-700);
}

.cookie-banner__btn--reject:hover,
.cookie-banner__btn--reject:focus,
.cookie-banner__btn--save:hover,
.cookie-banner__btn--save:focus {
	background: var(--color-primary-800);
	border-color: var(--color-primary-800);
}

.cookie-banner__btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.cookie-banner__btn[hidden] {
	display: none;
}

.cookie-banner__toggle {
	flex: 0 0 auto;
	background: none;
	border: 2px solid var(--color-primary-700);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-5);
	min-height: 2.9rem;
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary-800);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

.cookie-banner__toggle:hover,
.cookie-banner__toggle:focus {
	background: var(--color-primary-800);
	color: var(--color-neutral-50);
}

.cookie-banner__btn:focus-visible,
.cookie-banner__toggle:focus-visible,
.cookie-banner__checkbox:focus-visible {
	outline: 3px solid var(--color-accent-700);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cookie-banner__btn,
	.cookie-banner__toggle {
		transition: none;
	}

	.cookie-banner__btn:hover {
		transform: none;
	}
}

/* ---- the footer "Cookie settings" control ------------------------------- */

.site-footer__cookie-settings {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- a third-party embed held back until consent ------------------------
   Stands in for the iframe that inc/cookie-consent.php did not print, at a
   comfortable size so the section never collapses to nothing. */

.cookie-embed-block {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	align-content: center;
	min-height: 12rem;
	margin-block: var(--space-6);
	padding: var(--space-6);
	background: var(--color-neutral-100);
	border: 1px dashed var(--color-neutral-400);
	border-radius: var(--radius-lg);
	color: var(--color-text);
}

.cookie-embed-block__text {
	margin: 0;
	max-width: 60ch;
	font-size: var(--text-sm);
	color: var(--color-neutral-700);
}

.cookie-embed-block__host {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-neutral-600);
}

.cookie-embed-block__button {
	min-height: 2.9rem;
	padding: var(--space-3) var(--space-5);
	background: var(--color-primary-700);
	border: 2px solid var(--color-primary-700);
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-neutral-50);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-default);
}

.cookie-embed-block__button:hover,
.cookie-embed-block__button:focus {
	background: var(--color-primary-800);
	border-color: var(--color-primary-800);
}

.cookie-embed-block__button:focus-visible {
	outline: 3px solid var(--color-accent-700);
	outline-offset: 2px;
}