/* Complianz's consent banner in the site's colours. The palette itself
   (background, text, buttons, toggles) is set on the banner by
   bin/configure-site.php; this covers what Complianz has no setting for.
   `body` in front of every selector: the banner's own CSS loads after ours. */

body .cmplz-cookiebanner,
body .cmplz-document {
	--cmplz_category_header_always_active_color: var(--tw-red-hi);
	font-family: var(--tw-font-body);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: 48px;
	font-family: var(--tw-font-body);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
body .cmplz-cookiebanner .cmplz-title { font-weight: 700; }

/* Preferences (in the banner, and on the cookie policy page): Complianz's
   light grey bars, with green "Always active" text and black arrows, sat on
   a black page at under 3:1. */
body :is(.cmplz-cookiebanner, .cmplz-document) .cmplz-categories .cmplz-category,
body .cmplz-document details.cmplz-category > summary {
	background-color: var(--tw-coal);
	border: 1px solid var(--tw-hairline);
	color: var(--tw-ink);
}
body :is(.cmplz-cookiebanner, .cmplz-document) .cmplz-categories .cmplz-category :is(.cmplz-category-header, .cmplz-category-title, .cmplz-description) { color: var(--tw-ink); }
body :is(.cmplz-cookiebanner, .cmplz-document) .cmplz-categories .cmplz-category .cmplz-always-active { color: var(--tw-red-hi); }
body :is(.cmplz-cookiebanner, .cmplz-document) .cmplz-categories .cmplz-category .cmplz-icon svg { fill: var(--tw-ink); }

/* The policy links are 14px text: a 24px-tall target (WCAG 2.5.8). */
body .cmplz-cookiebanner .cmplz-links .cmplz-link {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

body .cmplz-cookiebanner :focus-visible,
body #cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	outline: 3px solid var(--tw-red-hi);
	outline-offset: 2px;
}

/* On a phone the three stacked full-width buttons took half the screen.
   Accept stays full width; the other two share a row. */
@media (max-width: 640px) {
	body .cmplz-cookiebanner { padding: 1rem var(--tw-gutter); }
	body .cmplz-cookiebanner .cmplz-buttons { flex-flow: row wrap; gap: .5rem; }
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex: 1 1 40%;
		min-width: 0;
		margin: 0;
		padding: 0 .5rem;
		font-size: .8125rem;
		letter-spacing: .06em;
	}
	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { flex-basis: 100%; }
}

/* The cookie policy's per-service dropdowns and cookie tables: Complianz
   paints them light grey and white, which put bone text at 2.5:1. Its
   :nth-child() rules out-specify any sane selector, hence !important on the
   table cells only. */
body #cmplz-document .cmplz-dropdown { background-color: transparent; }
body #cmplz-document .cmplz-dropdown summary {
	background-color: var(--tw-iron);
	color: var(--tw-ink);
}
body #cmplz-document .cmplz-dropdown summary :is(h3, p) { color: var(--tw-ink); }
body #cmplz-document .cmplz-dropdown summary div::after { filter: invert(1); }
body #cmplz-document .cmplz-dropdown .cookies-per-purpose {
	border-color: var(--tw-hairline);
	background-color: var(--tw-hairline);
}
body #cmplz-document .cmplz-dropdown .cookies-per-purpose div {
	background-color: var(--tw-coal) !important;
	color: var(--tw-ink);
}
body #cmplz-document .cmplz-dropdown .cookies-per-purpose :is(.name-header, .retention-header, .function-header) {
	background-color: var(--tw-iron) !important;
}

/* The same consent toggles, repeated inside the cookie policy, where
   Complianz styles them through an id plus class (#cmplz-manage-consent-
   container.cmplz-manage-consent-container), so only the same id wins. */
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category,
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	background-color: var(--tw-coal);
	color: var(--tw-ink);
}
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category { border: 1px solid var(--tw-hairline); }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-always-active { color: var(--tw-red-hi); }
body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-icon svg { fill: var(--tw-ink); }

/* While the mobile menu is open the banner steps aside (assets/header.js
   makes it inert too); it covered the menu's lower links on a phone. */
body.thewears-drawer-open #cmplz-cookiebanner-container,
body.thewears-drawer-open #cmplz-manage-consent { visibility: hidden; }