/*
 * COOKIE-CONSENT-01 (#890): the cookie banner and the click-to-load video placeholder.
 * Hand-written, loaded on every front-end page by inc/cookie-consent.php, scoped to .ra-consent and
 * .ra-consent-media. Home v3 look: Josefin Sans headings, Lato text, ONE brand purple for the buttons and links.
 * The purple is set here (not read from --rp-action, which is sage green under the legacy stylesheet and so made the
 * banner green on staging), with its own dark values under [data-theme="dark"] / .scheme_dark. Surfaces and text
 * still come from the site's --rp-* tokens; the values after each comma are the light Home v3 fallbacks. Mobile first.
 * "Reject all" and "Accept all" share ONE rule (.ra-consent__btn): same size, colour and weight.
 * The parent theme fights every <button> twice:
 *  1. a long :not() chain (specificity 0,6,1: uppercase, outlined, its own hover colours) that beats a plain class:
 *     each button rule here carries :not(#ra-consent-x), one ID more (the id is never on a page);
 *  2. its script adds the class .sc_button_hover_slide_left to every button, and that class sets an !important
 *     transparent background and a taupe sliding gradient, and on hover an !important text colour. That is what made
 *     "Accept all" and "Reject all" EMPTY taupe boxes on staging (Owner, 2026-10-08, after #901). Only !important beats
 *     !important, so the background, the gradient and the text colour of our buttons are !important too, and with the
 *     ID of rule 1 they win on specificity.
 */

.ra-consent[hidden],
.ra-consent__settings[hidden] {
	display: none !important;
}

/* The brand purple. Fills carry white text (5.0:1); text and outlines on the card use the darker --link (5.3:1+). */
.ra-consent,
.ra-consent-media,
.ra-consent-open {
	--ra-consent-action: #875fa3;
	--ra-consent-action-hover: #7a5395;
	--ra-consent-action-ink: #ffffff;
	--ra-consent-link: #7a5395;
}

html[data-theme="dark"] .ra-consent,
html[data-theme="dark"] .ra-consent-media,
html[data-theme="dark"] .ra-consent-open,
.scheme_dark .ra-consent,
.scheme_dark .ra-consent-media,
.scheme_dark .ra-consent-open {
	--ra-consent-action: #875fa3;
	--ra-consent-action-hover: #7a5395;
	--ra-consent-action-ink: #ffffff;
	--ra-consent-link: #b196cb;
}

.ra-consent {
	--ra-consent-ink: var(--rp-text, #3e4546);
	--ra-consent-muted: var(--rp-muted, #5f6667);
	--ra-consent-card: var(--rp-surface, #fbf8f3);
	--ra-consent-line: var(--rp-border, #dcd3c7);
	--ra-consent-head: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;

	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	box-sizing: border-box;
	padding: 12px;
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	pointer-events: none;
}

.ra-consent *,
.ra-consent *::before,
.ra-consent *::after {
	box-sizing: inherit;
}

.ra-consent__card {
	position: relative;
	max-width: 720px;
	max-height: calc(100vh - 24px);
	margin: 0 auto;
	padding: 20px 18px 18px;
	overflow-y: auto;
	color: var(--ra-consent-ink);
	background: var(--ra-consent-card);
	border: 1px solid var(--ra-consent-line);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
	pointer-events: auto;
}

.ra-consent__card:focus {
	outline: none;
}

.ra-consent__title {
	margin: 0 28px 6px 0;
	color: var(--ra-consent-ink);
	font-family: var(--ra-consent-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.ra-consent__text {
	margin: 0 0 14px;
	color: var(--ra-consent-ink);
}

.ra-consent__text a:not(#ra-consent-x),
.ra-consent__text a:not(#ra-consent-x):hover,
.ra-consent__text a:not(#ra-consent-x):focus {
	color: var(--ra-consent-link);
	text-decoration: underline;
}

.ra-consent__close:not(#ra-consent-x) {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--ra-consent-muted);
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	background-color: transparent !important;
	background-image: none !important;
	border: 0;
	border-radius: 999px; /* STYLE-ROUND-02: the same 44px round dismiss button as the menu's close (it was 6px) */
	cursor: pointer;
}

.ra-consent__close:not(#ra-consent-x):hover,
.ra-consent__close:not(#ra-consent-x):focus {
	color: var(--ra-consent-ink) !important;
	background-color: transparent !important;
	background-image: none !important;
}

.ra-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* One rule for both choices: equal weight. */
.ra-consent__btn:not(#ra-consent-x) {
	display: inline-block;
	flex: 1 1 140px;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	color: var(--ra-consent-action-ink) !important;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	height: auto;
	background-color: var(--ra-consent-action) !important;
	background-image: none !important;
	border: 2px solid var(--ra-consent-action);
	border-radius: 6px;
	cursor: pointer;
}

.ra-consent__btn:not(#ra-consent-x):hover,
.ra-consent__btn:not(#ra-consent-x):focus {
	color: var(--ra-consent-action-ink) !important;
	background-color: var(--ra-consent-action-hover) !important;
	background-image: none !important;
	border-color: var(--ra-consent-action-hover);
}

.ra-consent__more:not(#ra-consent-x) {
	display: inline-block;
	min-height: 44px;
	margin: 0;
	padding: 10px 8px;
	color: var(--ra-consent-link) !important;
	font: inherit;
	letter-spacing: 0;
	text-decoration: underline;
	text-transform: none;
	height: auto;
	background-color: transparent !important;
	background-image: none !important;
	border: 0;
	cursor: pointer;
}

.ra-consent__more:not(#ra-consent-x):hover,
.ra-consent__more:not(#ra-consent-x):focus {
	color: var(--ra-consent-link) !important;
	background-color: transparent !important;
	background-image: none !important;
}

.ra-consent__close:not(#ra-consent-x):focus-visible,
.ra-consent__btn:not(#ra-consent-x):focus-visible,
.ra-consent__more:not(#ra-consent-x):focus-visible,
.ra-consent__box:focus-visible,
.ra-consent-media__link:focus-visible {
	outline: 3px solid var(--ra-consent-link);
	outline-offset: 2px;
}

.ra-consent__settings {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ra-consent-line);
}

.ra-consent__cat {
	margin: 0 0 12px;
}

.ra-consent__cat-label {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 28px;
	font-weight: 700;
}

.ra-consent__box {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ra-consent-link);
}

.ra-consent__cat-text {
	margin: 2px 0 0 30px;
	color: var(--ra-consent-muted);
	font-size: 14px;
}

.ra-consent__save:not(#ra-consent-x) {
	width: 100%;
	margin-top: 4px;
}

@media (min-width: 768px) {
	.ra-consent {
		padding: 20px;
	}

	.ra-consent__card {
		padding: 22px 24px 20px;
	}

	.ra-consent__btn:not(#ra-consent-x) {
		flex: 0 0 auto;
		min-width: 150px;
	}

	.ra-consent__save:not(#ra-consent-x) {
		width: auto;
	}
}

/*
 * Desktop (>= 900 px): a low, wide strip, one line (it had a title line above, now visually hidden, PARITY-A row 4): the
 * sentence and "Cookie policy" on the left, the choices on the right. The markup is unchanged; the card becomes a
 * two-column grid. The settings panel, when opened, takes a full row below.
 */
@media (min-width: 900px) {
	.ra-consent {
		padding: 0 20px 16px;
	}

	.ra-consent__card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 28px;
		row-gap: 2px;
		align-items: center;
		max-width: 1100px;
		padding: 14px 24px 14px;
	}

	/* PARITY-A row 4: one line, not two (about 72px, not 104px), so the strip does not sit over "Shop now" on a laptop's first screen.
	   The title stays in the markup (it names the dialog) and is visually hidden; "Reject all" is the close button's choice. */
	.ra-consent__title {
		grid-column: 1 / -1;
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.ra-consent__close:not(#ra-consent-x) {
		display: none;
	}

	.ra-consent__text {
		grid-column: 1;
		margin: 0;
	}

	.ra-consent__actions {
		grid-column: 2;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.ra-consent__btn:not(#ra-consent-x) {
		min-width: 120px;
		min-height: 40px;
		padding: 8px 20px;
		white-space: nowrap;
	}

	.ra-consent__more:not(#ra-consent-x) {
		min-height: 40px;
		padding: 8px 6px;
	}

	.ra-consent__close:not(#ra-consent-x) {
		top: 8px;
		right: 12px;
		width: 32px;
		height: 32px;
	}

	.ra-consent__settings {
		grid-column: 1 / -1;
	}
}

/*
 * Phone (< 600 px): a compact strip, at most 96px high (PARITY-A row 4, LEAD 6247263259). The card was about 235px, a quarter of the
 * first screen, and covered "Shop now". The title stays in the markup (it names the dialog) but is visually hidden; the sentence is
 * two small lines; the three choices share one row, each 44px high, "Reject all" as easy to reach as "Accept all". The close button
 * is not shown: "Reject all" is the same choice. The markup, the script and the settings panel are unchanged; the settings panel,
 * when opened, is taller than the strip and scrolls inside the card.
 */
@media (max-width: 599px) {
	.ra-consent {
		padding: 6px;
	}

	.ra-consent__card {
		padding: 6px 10px;
		border-radius: 8px;
	}

	.ra-consent__title {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.ra-consent__close:not(#ra-consent-x) {
		display: none;
	}

	.ra-consent__text {
		margin: 0 0 4px;
		font-size: 12.5px;
		line-height: 1.35;
	}

	.ra-consent__actions {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.ra-consent__btn:not(#ra-consent-x) {
		flex: 1 1 0;
		min-width: 0;
		padding: 6px 8px;
		font-size: 14px;
	}

	.ra-consent__more:not(#ra-consent-x) {
		flex: 0 0 auto;
		padding: 6px 6px;
		font-size: 14px;
	}
}

/* Click-to-load video placeholder (YouTube). Sits in the page's own flow, in the reading width. */
.ra-consent-media {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 1.5em;
	padding: 24px 18px;
	color: var(--rp-text, #3e4546);
	text-align: center;
	background: var(--rp-surface, #fbf8f3);
	border: 1px solid var(--rp-border, #dcd3c7);
	border-radius: 8px;
}

.ra-consent-media__text {
	margin: 0 0 12px;
}

.ra-consent-media__link {
	display: inline-block;
	margin-left: 8px;
	padding: 10px 4px;
	color: var(--ra-consent-link);
}

.ra-consent-media .ra-consent__btn:not(#ra-consent-x) {
	flex: none;
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.ra-consent__card {
		animation: ra-consent-in 0.18s ease-out;
	}
}

@keyframes ra-consent-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* The "Change cookie settings" button on the cookie page (config/content/legal/cookies.html). */
.ra-consent-open:not(#ra-consent-x) {
	display: inline-block;
	min-height: 44px;
	margin: 6px 0 0;
	padding: 10px 18px;
	color: var(--ra-consent-action-ink) !important;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	height: auto;
	background-color: var(--ra-consent-action) !important;
	background-image: none !important;
	border: 2px solid var(--ra-consent-action);
	border-radius: 6px;
	cursor: pointer;
}

.ra-consent-open:not(#ra-consent-x):hover,
.ra-consent-open:not(#ra-consent-x):focus {
	color: var(--ra-consent-action-ink) !important;
	background-color: var(--ra-consent-action-hover) !important;
	background-image: none !important;
	border-color: var(--ra-consent-action-hover);
}

.ra-consent-open:not(#ra-consent-x):focus-visible {
	outline: 3px solid var(--ra-consent-link);
	outline-offset: 2px;
}