/* ---------------------------------------------------------------------------
 * The cookie consent banner (Complianz).
 *
 * Complianz owns the behaviour — which scripts are held back, what consent is
 * recorded, when the banner shows. This file owns only how it looks, and is
 * loaded after the plugin's own banner-optin.css so it can do that without
 * !important.
 *
 * Two things here are compliance, not taste, and should not be "tidied":
 *
 *   Accept and Deny are the same size, weight and prominence. Under GDPR
 *   refusing has to be as easy as accepting, and a greyed-out Deny beside a
 *   bright Accept is the specific pattern regulators have ruled against.
 *
 *   Nothing is pre-selected. The categories arrive unticked from the plugin and
 *   nothing here implies otherwise.
 *
 * Sized for the site's readers, who are mostly 50 and over: the body text is
 * the theme's base size rather than the 12-13px banners usually ship with, and
 * the buttons are full-height touch targets.
 * ------------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	box-sizing: border-box;

	/* A bar across the bottom rather than a corner card. Capped at the theme's
	 * wide layout width so it lines up with the content above it instead of
	 * running the full width of a large monitor. */
	width: min(1280px, calc(100vw - 2 * var(--wp--preset--spacing--30)));
	max-width: none;
	padding: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--karla);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--lift);
}

/* --- Header --------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-header {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--20);
}

#cmplz-cookiebanner-container .cmplz-title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	text-align: left;
}

/* The plugin reserves space for a logo that is not set; an empty box pushing
 * the title off-centre is worse than no box. */
#cmplz-cookiebanner-container .cmplz-logo:empty {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-close {
	color: var(--wp--preset--color--contrast-muted);
	transition: color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

#cmplz-cookiebanner-container .cmplz-close:hover,
#cmplz-cookiebanner-container .cmplz-close:focus-visible {
	color: var(--wp--preset--color--contrast);
}

#cmplz-cookiebanner-container .cmplz-divider {
	background-color: var(--wp--preset--color--line);
}

/* --- Body ----------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-message {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-muted);
	text-align: left;
}

#cmplz-cookiebanner-container .cmplz-categories {
	margin-top: var(--wp--preset--spacing--20);
}

#cmplz-cookiebanner-container .cmplz-category {
	box-sizing: border-box;
	padding: 4px var(--wp--preset--spacing--20);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
}

/* The expander at the end of each category row.
 *
 * It arrived as a bare <button> with appearance:auto — the browser's own grey
 * 2px outset chrome — sitting flush against the row's right edge with no
 * padding, so it read as a small box breaking out of the rounded border. The
 * row now has padding and the button is drawn rather than left to the browser.
 * min-width keeps the chevron from being squeezed by a long category label. */
#cmplz-cookiebanner-container .cmplz-category-toggle {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
	color: var(--wp--preset--color--contrast-muted);
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

#cmplz-cookiebanner-container .cmplz-category-toggle:hover,
#cmplz-cookiebanner-container .cmplz-category-toggle:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-sunken);
}

#cmplz-cookiebanner-container .cmplz-category-toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* The on/off switch ships orange, which belongs to no palette here. */
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox .cmplz-label,
#cmplz-cookiebanner-container .cmplz-category input.cmplz-consent-checkbox:checked + .cmplz-label {
	accent-color: var(--wp--preset--color--success);
}

#cmplz-cookiebanner-container .cmplz-category input.cmplz-consent-checkbox {
	accent-color: var(--wp--preset--color--success);
}

#cmplz-cookiebanner-container .cmplz-category .cmplz-category-header .cmplz-category-title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

#cmplz-cookiebanner-container .cmplz-category .cmplz-description-category {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-muted);
}

/* The theme's control colour, so the switches read as part of the same site. */
#cmplz-cookiebanner-container input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
}

/* --- Buttons -------------------------------------------------------------- */

/* One row, equal widths. Accept is solid and Deny is outlined, which is a
 * difference of style and not of prominence — both are the same size, the same
 * weight and the same distance from the reader's eye. */

#cmplz-cookiebanner-container .cmplz-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin-top: var(--wp--preset--spacing--30);

	/* The bottom banner is a grid and this sits in a tall cell. Without these
	 * the default `stretch` gave each button the full height of that cell, and
	 * a 158px-wide box 160px tall with a 999px radius is a circle — which is
	 * exactly what it rendered as. Buttons size to their content and sit at the
	 * top of the cell. */
	align-items: flex-start;
	align-content: flex-start;
}

/* `flex: 0 0 auto`, and the reason matters.
 *
 * Complianz stacks these in a COLUMN in the bottom layout, so a flex-basis is
 * a height, not a width. `flex: 1 1 calc(50% - 5px)` therefore did not make
 * two buttons share a row — it made each one half the banner tall, and with
 * flex-grow filling a 440px cell they came out as 158x140 lozenges that the
 * 999px radius rounded into circles. The same basis also pushed Save
 * preferences 495px past the right edge.
 *
 * Sizing to content and filling the column's width is what a stacked button
 * wants. min-width:0 stays because a flex item defaults to min-width:auto,
 * which is what allowed the overflow. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 44px;
	padding: 12px 18px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease),
		border-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

/* Accept takes the theme's accent, the same lime the site's primary calls to
 * action use. Text is `contrast`, not `base`: cream on this lime is around
 * 1.4:1 and unreadable, where the dark teal is roughly 12:1. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: color-mix( in oklab, var(--wp--preset--color--accent) 82%, var(--wp--preset--color--accent-deep) );
	border-color: color-mix( in oklab, var(--wp--preset--color--accent) 82%, var(--wp--preset--color--accent-deep) );
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny {
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-sunken);
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) 24%, transparent);
}

/* Preferences is a third path, not a third choice of equal weight, so it gets
 * its own full-width row beneath and reads as a link.
 *
 * `flex: 0 0 auto` + `width`, not `flex: 1 1 100%`. These buttons stack in a
 * COLUMN, so a flex-basis is a height: 100% made this element claim the whole
 * button area and render behind Accept and Deny, which is why it was invisible
 * on a phone while looking fine on a desktop. It is the same axis mistake the
 * other buttons had, and it survived the fix because this selector carries one
 * more class than the rule that corrected them. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-manage-options {
	flex: 0 0 auto;
	width: 100%;
	min-height: 0;
	padding: 4px 0 0;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--link);
	background-color: transparent;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-manage-options:hover {
	color: var(--wp--preset--color--success);
}

/* --- Policy links --------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-links a {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#cmplz-cookiebanner-container .cmplz-links a:hover {
	color: var(--wp--preset--color--contrast);
}

/* Complianz emits a list item per policy link whether or not that link is
 * shown, which left three bare bullets under the buttons.
 *
 * Every item does contain an <a>, so neither :empty nor :not(:has(a)) catches
 * them — the anchors are there and hidden, by .cmplz-hidden for documents that
 * are not configured and by .tcf for links that only apply when TCF is on. The
 * marker is painted by the <li>, which stays a list-item regardless.
 *
 * Dropping the markers is the fix that does not depend on knowing which of the
 * plugin's classes means hidden this version. Links that ARE shown still read
 * as links; only the bullets go. */
#cmplz-cookiebanner-container .cmplz-links ul,
#cmplz-cookiebanner-container .cmplz-documents ul {
	padding-left: 0;
	margin: 0;
	list-style: none;
}

#cmplz-cookiebanner-container .cmplz-links li,
#cmplz-cookiebanner-container .cmplz-documents li {
	margin: 0;
	text-align: center;
}

/* --- The revoke tab ------------------------------------------------------- */

/* The "manage consent" handle that stays on screen after a choice is made.
 * It has to remain reachable — withdrawing consent must be as easy as giving
 * it — but it should not shout. */
.cmplz-manage-consent-container .cmplz-manage-consent,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 599px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: 100%;
		border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
	}

	/* Stacked, full width. Side by side at this width the two buttons are
	 * narrow enough to mis-tap, and this is the one decision on the page a
	 * reader must not make by accident. */
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	/* Complianz hides the banner's heading below this width, which leaves a
	 * phone showing a consent dialog with no title — just a close cross above a
	 * paragraph. Put it back. */
	#cmplz-cookiebanner-container .cmplz-title {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn,
	#cmplz-cookiebanner-container .cmplz-close {
		transition: none;
	}
}