/**
 * The Complianz cookie banner, drawn to the design file's Cookie consent
 * (Complianz) page, 170:2.
 *
 * Frames: Consent banner 170:92 (desktop), 170:385 (phone), Consent banner:
 * preferences 170:193 and 170:476, and the Manage consent tab 170:304.
 *
 * Complianz prints its own stylesheet after this one, so equal specificity
 * would lose. Its colours and sizes are set through its own custom properties
 * first; everything else is scoped under the container id so it wins without
 * !important. Visibility is left to Complianz: this file never sets display on
 * a category or a button that Complianz hides, so categories switched off in
 * the wizard stay hidden.
 *
 * Phones get a full width sheet at the bottom with stacked buttons. From 600
 * (the theme's first breakpoint) it is a box, bottom left, 32 from the edges.
 */

/* Complianz's own knobs, mapped to the theme tokens. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	--cmplz_banner_width: calc(var(--wp--preset--spacing--128) * 3 + var(--wp--preset--spacing--48) + var(--wp--preset--spacing--8));
	--cmplz_banner_background_color: var(--wp--preset--color--base);
	--cmplz_banner_border_color: var(--wp--preset--color--line);
	--cmplz_banner_border_radius: var(--wp--custom--radius--square);
	--cmplz_banner_margin: var(--wp--preset--spacing--12);
	--cmplz_title_font_size: var(--wp--preset--font-size--heading-s);
	--cmplz_text_font_size: var(--wp--preset--font-size--body-s);
	--cmplz_text_line_height: 1.5625;
	--cmplz_text_color: var(--wp--preset--color--contrast);
	--cmplz_hyperlink_color: var(--wp--preset--color--contrast-muted);
	--cmplz_link_font_size: var(--wp--preset--font-size--body-s);
	--cmplz_category_body_font_size: var(--wp--preset--font-size--body-s);
	--cmplz_category_header_title_font_size: var(--wp--preset--font-size--label);
	--cmplz_button_font_size: var(--wp--preset--font-size--label);
	--cmplz_button_border_radius: var(--wp--custom--radius--pill);
	--cmplz_button_accept_background_color: transparent;
	--cmplz_button_accept_border_color: var(--wp--preset--color--line);
	--cmplz_button_accept_text_color: var(--wp--preset--color--contrast);
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: var(--wp--preset--color--line);
	--cmplz_button_deny_text_color: var(--wp--preset--color--contrast);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--wp--preset--color--line);
	--cmplz_button_settings_text_color: var(--wp--preset--color--contrast);
	--cmplz_slider_active_color: var(--wp--preset--color--inverse);
	--cmplz_slider_bullet_color: var(--wp--preset--color--on-inverse);

	/* Phone sheet: a rule along the top edge only. */
	--cmplz_banner_border_width: var(--wp--custom--stroke--field) 0 0 0;
}

/* The surface. One wrapping flex row carries every part: full width parts take
   a line each, the two buttons share a line, and the Preferences link sits on
   the links line beside the documents. That order is also the DOM order, so
   the tab order follows what you see. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	position: fixed;
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
	transform: none;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--wp--preset--spacing--12);
	row-gap: var(--wp--preset--spacing--16);
	width: 100%;
	min-width: 0;
	max-width: 100%;
	max-height: 100vh;
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--4));
	border-style: solid;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--contrast);
	animation: fadeIn var(--wp--custom--duration--base) var(--wp--custom--easing--enter);
}

@media (min-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		--cmplz_banner_border_width: var(--wp--custom--stroke--field);

		bottom: var(--wp--preset--spacing--32);
		left: var(--wp--preset--spacing--32);
		width: var(--cmplz_banner_width);
		max-width: calc(100% - var(--wp--preset--spacing--32) * 2);
		max-height: calc(100vh - var(--wp--preset--spacing--32) * 2);
		row-gap: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
		padding: var(--wp--preset--spacing--24) calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--4));
	}
}

/* The display above outranks Complianz's own hide, so restate it. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed {
	display: none;
}

/* Parts the design does not draw. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-header,
#cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-body,
#cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-information {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* Title: Heading/S. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	display: block;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
	/* Complianz hides the title below 425; the design keeps it on phones. */
	display: block;
	margin: 0;
	justify-self: start;
	text-align: start;
	font-size: var(--wp--preset--font-size--heading-s);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
}

/* Body: the message, or the categories once Preferences is open. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
	/* Complianz scrolls the body on its own, which clips the focus ring on the
	   toggles. The whole banner scrolls instead (it has a max height). */
	max-height: none;
	overflow: visible;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	width: auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
	color: var(--wp--preset--color--contrast);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-message {
	display: none;
}

/* Buttons: the site's secondary button. Equal width, because saying no must be
   as easy as saying yes. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: contents;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-save-preferences) {
	box-sizing: border-box;
	flex: 1 1 100%;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2)) calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--4));
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-save-preferences):hover {
	background-color: var(--wp--preset--color--line-subtle);
}

/* Pressed: the stroke thickens to 2.5 without moving anything. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-save-preferences):active {
	background-color: var(--wp--preset--color--line-subtle);
	box-shadow: inset 0 0 0 calc(var(--wp--custom--stroke--error) - var(--wp--custom--stroke--field)) var(--wp--preset--color--line);
}

/* Phones stack the buttons 12 apart inside a 16 rhythm. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-accept {
	margin-top: calc(var(--wp--preset--spacing--12) - var(--wp--preset--spacing--16));
}

@media (min-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-save-preferences) {
		flex: 1 1 calc(50% - var(--wp--preset--spacing--12) / 2);
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-accept {
		margin-top: var(--wp--preset--spacing--4);
	}
}

/* With Preferences open: Save my choice, then Allow analytics. Saving with
   Statistics off is the same as No, thanks, so the design drops that button. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-deny {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-accept {
	order: 1;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible > .cmplz-documents {
	order: 2;
}

/* Preferences is a button in Complianz but a link in the design: Label, ink,
   underlined, first on the links line. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	flex: 0 0 auto;
	width: auto;
	min-height: 0;
	/* The line's gap is 12, the links sit 16 apart. */
	margin: 0 var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--square);
	background: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0.005em;
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--underline--rest);
	text-underline-position: from-font;
	text-underline-offset: 0.12em;
	transition: text-decoration-thickness var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
	/* Preferences and the document links differ in size, as drawn, so they
	   share a text baseline rather than a top edge. */
	align-self: baseline;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-offset: 0.1em;
}

/* Documents: Body/S, muted ink, 16 apart. */
#cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-documents {
	flex: 1 1 0;
	align-self: baseline;
	min-width: 0;
	margin: 0;
	justify-content: flex-start;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents ul {
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: var(--wp--preset--spacing--16);
	row-gap: 0;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents li {
	margin: 0;
	line-height: 1.5625;
}

/* Complianz hides a document it has no page for but keeps its list item,
   which would still take a gap. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents li:has(> .cmplz-hidden:only-child) {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
	/* The same underline as Preferences, so the three read as one line. */
	text-decoration-thickness: var(--wp--custom--underline--rest);
	text-underline-position: from-font;
	text-underline-offset: 0.12em;
	/* Complianz switches off link transitions; bring the theme's back. */
	transition: text-decoration-thickness var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

/* Categories: a hairline above each, the name and its description on the
   left, the Toggle on the right. The description is always shown, so the
   disclosure chevron has nothing to do. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories.cmplz-fade-in {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
	width: auto;
	animation: fadeIn var(--wp--custom--duration--base) var(--wp--custom--easing--enter);
}

/* Low specificity on purpose: Complianz's rules that hide unused categories
   must still win over this display. */
.cmplz-cookiebanner :where(.cmplz-category) {
	display: grid;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--wp--preset--spacing--16);
	row-gap: var(--wp--preset--spacing--4);
	align-items: start;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2)) 0;
	border-top: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
	background: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
	display: contents;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--contrast);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
	display: block;
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.5625;
	color: var(--wp--preset--color--contrast-muted);
}

/* The Toggle component: a 44 by 26 pill with an 18 knob, 4 in from the edge. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-header > .cmplz-banner-checkbox,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-header > .cmplz-always-active {
	grid-column: 2;
	grid-row: 1 / span 2;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox {
	display: block;
	position: relative;
	width: calc(var(--wp--preset--spacing--32) + var(--wp--preset--spacing--12));
	height: calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--2));
	margin: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
	display: block;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
	top: var(--wp--preset--spacing--4);
	left: var(--wp--preset--spacing--4);
	width: calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--2));
	height: calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--2));
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--line);
	transition: transform var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

/* On, and Locked on (the always active category). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active .cmplz-banner-checkbox .cmplz-label::before {
	padding: 0;
	border-color: var(--wp--preset--color--inverse);
	background-color: var(--wp--preset--color--inverse);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active .cmplz-banner-checkbox .cmplz-label::after {
	left: var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--on-inverse);
	transform: translateX(calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--2)));
}

/* The site's focus ring, drawn on the track. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before {
	box-shadow: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Always active: the Locked on Toggle stands in for Complianz's "Always active"
   text. The words stay in the markup for screen readers; they are only drawn
   at no size. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	display: block;
	font-size: 0;
	line-height: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label {
	display: block;
	opacity: 0.55;
	cursor: default;
}

/* After a choice: the Cookie choices pill, bottom left. A secondary button on
   the page surface so it stays legible over whatever scrolls beneath it.
   Complianz slides the tab with an animation that pins bottom, so the
   animation is switched off on every state it sets one. */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:hover,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:focus,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:active {
	animation: none;
	bottom: var(--wp--preset--spacing--24);
	left: var(--wp--preset--spacing--24);
	right: auto;
	height: auto;
	min-width: 0;
	padding: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2)) calc(var(--wp--preset--spacing--24) + var(--wp--preset--spacing--4));
	border: var(--wp--custom--stroke--field) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0.005em;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--enter);
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:hover {
	background-color: var(--wp--preset--color--line-subtle);
}

#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:active {
	background-color: var(--wp--preset--color--line-subtle);
	box-shadow: inset 0 0 0 calc(var(--wp--custom--stroke--error) - var(--wp--custom--stroke--field)) var(--wp--preset--color--line);
}

/* Complianz removes the outline on press; keep the keyboard ring. */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

@media (min-width: 600px) {
	#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn,
	#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:hover,
	#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:focus,
	#cmplz-manage-consent .cmplz-manage-consent.cmplz-btn:active {
		bottom: var(--wp--preset--spacing--32);
		left: var(--wp--preset--spacing--32);
	}
}

/* Fade in 180ms, and not at all for a reader who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories.cmplz-fade-in {
		animation: none;
	}
}