/*
 * The cookie banner (Complianz) in the design tokens (Plan 5 Task 4). Loaded only where Complianz prints its banner, after
 * Complianz's own stylesheets (inc/analytics-ui.php), so equal selectors resolve here. Complianz's layout stays; this sets
 * its colour, type and radius variables from the tokens (light and dark follow html[data-theme]) and trims the banner to
 * the message, the privacy link and two equal buttons: "Accept analytics" and "Decline". No cookie wall: the page stays
 * usable behind it.
 *
 * Markup: Complianz's cookiebanner/templates/cookiebanner.php (.cmplz-cookiebanner > .cmplz-header, .cmplz-body
 * .cmplz-message, .cmplz-buttons .cmplz-accept / .cmplz-deny, .cmplz-documents) and the "Cookie settings" tab
 * (#cmplz-manage-consent .cmplz-manage-consent) that reopens it; the banner setting hides that tab everywhere since the
 * Plan 5 Task 5 review (the privacy page's button.cmplz-manage-consent reopens the banner instead).
 */

/* inc/analytics-ui.php keeps both containers display: none until this file applies (it loads without blocking). */
html body #cmplz-cookiebanner-container,
html body #cmplz-manage-consent {
	display: block;
}

.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	--cmplz_banner_width: 420px;
	--cmplz_banner_margin: var(--dv-space-4);
	--cmplz_banner_background_color: var(--dv-bg-surface);
	--cmplz_banner_border_color: var(--dv-border);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: var(--dv-radius-lg);
	--cmplz_text_color: var(--dv-ink-2);
	--cmplz_hyperlink_color: var(--dv-link);
	--cmplz_title_font_size: var(--dv-text-body);
	--cmplz_text_font_size: var(--dv-text-body-s);
	--cmplz_link_font_size: var(--dv-text-body-s);
	--cmplz_button_font_size: var(--dv-text-body-s);
	--cmplz_button_border_radius: var(--dv-radius-md);
	--cmplz_button_accept_background_color: var(--dv-brand);
	--cmplz_button_accept_border_color: var(--dv-brand);
	--cmplz_button_accept_text_color: var(--dv-on-brand);
	--cmplz_button_deny_background_color: var(--dv-bg-surface);
	--cmplz_button_deny_border_color: var(--dv-ink-3);
	--cmplz_button_deny_text_color: var(--dv-ink);
	font-family: var(--dv-font-body);
}

.cmplz-cookiebanner.cmplz-cookiebanner {
	box-shadow: var(--dv-shadow-lift);
	padding: var(--dv-space-5);
	gap: var(--dv-space-3);
}

.cmplz-cookiebanner .cmplz-title {
	color: var(--dv-ink);
	font-family: var(--dv-font-display);
	font-weight: 600;
}

.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message p {
	color: var(--dv-ink-2);
	line-height: 1.5;
}

/* Two buttons, the same size: declining is as easy as accepting. */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: 44px;
	height: auto;
	padding: var(--dv-space-2) var(--dv-space-4);
	font-family: var(--dv-font-body);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--dv-dur-fast) var(--dv-ease), border-color var(--dv-dur-fast) var(--dv-ease);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	border-color: var(--dv-brand-hover);
	background-color: var(--dv-brand-hover);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	background-color: var(--dv-bg-subtle);
}

/* Only the message, the privacy link and the two buttons: no close icon, no "Manage options" or "Manage services". */
.cmplz-cookiebanner .cmplz-close,
.cmplz-cookiebanner .cmplz-links.cmplz-information,
.cmplz-cookiebanner .cmplz-divider {
	display: none;
}

.cmplz-cookiebanner .cmplz-documents .cmplz-link {
	color: var(--dv-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--dv-font-body);
	font-size: var(--dv-text-body-s);
	box-shadow: var(--dv-shadow-card);
}

/* A phone: a sheet along the bottom edge, the buttons side by side. */
@media (max-width: 599px) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		--cmplz_banner_margin: var(--dv-space-3);
		padding: var(--dv-space-4);
	}

	.cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
	}

	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex: 1 1 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmplz-cookiebanner,
	#cmplz-manage-consent .cmplz-manage-consent {
		animation: none !important;
		transition: none !important;
	}
}