/*
 * Complianz consent banner, restyled to the Eleventh Space brand.
 *
 * Enqueued only while Complianz is active (inc/assets.php). Complianz writes
 * its settings as --cmplz_* custom properties on :root; redefining them on the
 * banner element wins whatever order the two stylesheets load in, so the
 * Complianz colour/appearance settings no longer need touching on either site.
 * The few properties it does not expose as variables are overridden below
 * with a `body` prefix, one step more specific than the plugin's own rules.
 *
 * Cream panel with Espresso type, square corners, and the site's tracked
 * uppercase labels. Accept and Deny share one style so rejecting is exactly
 * as prominent as accepting (ICO guidance); View preferences is secondary.
 * To switch to an Espresso panel, swap --es-consent-bg / --es-consent-ink.
 */

.cmplz-cookiebanner {
	--es-consent-bg: var( --wp--preset--color--base, #f0eeed );
	--es-consent-ink: var( --wp--preset--color--contrast, #3d251d );
	--es-consent-hover: var( --wp--preset--color--contrast-alt, #703319 );
	--es-consent-rule: color-mix( in srgb, var( --es-consent-ink ) 18%, transparent );

	--cmplz_banner_background_color: var( --es-consent-bg );
	--cmplz_banner_border_color: var( --es-consent-rule );
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 0;
	--cmplz_text_color: var( --es-consent-ink );
	--cmplz_hyperlink_color: var( --es-consent-ink );
	--cmplz_title_font_size: 13px;
	--cmplz_text_font_size: 14px;
	--cmplz_text_line_height: 1.45;
	--cmplz_link_font_size: 13px;
	--cmplz_category_body_font_size: 13px;
	--cmplz_category_header_title_font_size: 13px;
	--cmplz_category_header_active_font_size: 12px;
	--cmplz_category_header_always_active_color: var( --es-consent-ink );
	--cmplz_button_border_radius: 0;
	--cmplz_button_font_size: 13px;
	--cmplz_button_accept_background_color: var( --es-consent-ink );
	--cmplz_button_accept_border_color: var( --es-consent-ink );
	--cmplz_button_accept_text_color: var( --es-consent-bg );
	--cmplz_button_deny_background_color: var( --es-consent-ink );
	--cmplz_button_deny_border_color: var( --es-consent-ink );
	--cmplz_button_deny_text_color: var( --es-consent-bg );
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var( --es-consent-ink );
	--cmplz_button_settings_text_color: var( --es-consent-ink );
	--cmplz_slider_active_color: var( --es-consent-ink );
	--cmplz_slider_inactive_color: color-mix( in srgb, var( --es-consent-ink ) 35%, transparent );
	--cmplz_slider_bullet_color: var( --es-consent-bg );
}

body .cmplz-cookiebanner {
	box-shadow: 0 1.25rem 3rem rgba( 61, 37, 29, 0.18 );
	font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif );
}

/* Title as the site's section labels: Work Sans 600, 2px tracking, uppercase. */
body .cmplz-cookiebanner .cmplz-header .cmplz-title {
	font-weight: 600;
	letter-spacing: 0.125rem;
	line-height: 0.9375rem;
	text-transform: uppercase;
}

body .cmplz-cookiebanner .cmplz-close {
	color: var( --es-consent-ink );
}

body .cmplz-cookiebanner .cmplz-close:hover {
	color: var( --es-consent-hover );
}

body .cmplz-cookiebanner .cmplz-divider {
	border-color: var( --es-consent-rule );
}

body .cmplz-cookiebanner .cmplz-message a,
body .cmplz-cookiebanner .cmplz-links .cmplz-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body .cmplz-cookiebanner .cmplz-message a:hover,
body .cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
	color: var( --es-consent-hover );
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	border-radius: 0;
	background-color: color-mix( in srgb, var( --es-consent-ink ) 5%, transparent );
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
	font-weight: 600;
}

/* Buttons as the site's links: tracked uppercase labels in square boxes. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	height: auto;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: 0.125rem;
	line-height: 0.9375rem;
	text-transform: uppercase;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	border-color: var( --es-consent-hover );
	background-color: var( --es-consent-hover );
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is( .cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options ):hover {
	border-color: var( --es-consent-hover );
	color: var( --es-consent-hover );
}

body .cmplz-cookiebanner :is( .cmplz-btn, .cmplz-close, .cmplz-link, .cmplz-category-toggle, a ):focus-visible {
	outline: 2px solid var( --es-consent-ink );
	outline-offset: 2px;
}

/* This control stays reachable inside the browser's modal top layer. */
.es-contact .es-modal-consent {
	flex: none;
	align-self: center;
	min-height: 2.75rem;
	margin: .75rem 0 0;
	padding: .5rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: 600 .8125rem/1.25 var( --wp--preset--font-family--body, sans-serif );
	letter-spacing: .125rem;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.es-contact .es-modal-consent:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
:is( .es-menu, .es-contact )[data-es-consent-handoff] {
	transition: none;
	animation: none;
}