/* ============================================================================
   CookieYes, in the site's own clothes.

   Two things force the hand here. The plugin builds its stylesheet in
   JavaScript and injects it after everything the theme enqueues, and it writes
   the colours from its settings screen straight onto the elements as inline
   style attributes. Neither can be beaten by ordinary cascade order, so the
   declarations that collide with those two are marked important on purpose;
   everything the plugin does not set is left plain.
   ============================================================================ */

/* ---------- the bar ---------- */
.cky-consent-container .cky-consent-bar {
	background: var(--ab-alpin) !important;
	color: var(--ab-noir) !important;
	border: 0 !important;
	border-top: 1px solid var(--ab-noir) !important;
	border-radius: 0 !important;
	padding: 2vw !important;
	font-family: "mundial", "Figtree", "Helvetica Neue", sans-serif;
}

.cky-consent-container .cky-notice-group {
	gap: 3vw;
	align-items: flex-end;
}

/* ---------- words ---------- */
.cky-notice .cky-title {
	color: var(--ab-noir) !important;
	font-size: 1.5vw !important;
	line-height: 1.1 !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: -.03em;
	margin: 0 0 1vw -.03em !important;
}

.cky-consent-bar .cky-notice-des,
.cky-consent-bar .cky-notice-des * {
	color: var(--ab-noir) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	font-weight: 300 !important;
	letter-spacing: -.01em;
}

.cky-consent-bar .cky-notice-des { max-width: 62ch; }

/* The policy link carries a resting hairline, the way prose links do on the
   rest of the site: inside a paragraph a link has to be visible unhovered. */
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy {
	color: var(--ab-noir) !important;
	text-decoration: none !important;
	border: 0 !important;
	padding-bottom: 1px;
	background-image: linear-gradient(var(--ab-leman), var(--ab-leman));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-image .3s var(--ab-e-hover);
}

.cky-notice-des a.cky-policy:hover,
.cky-notice-des button.cky-policy:hover {
	background-image: linear-gradient(var(--ab-noir), var(--ab-noir));
}

/* ---------- the three buttons ---------- */
.cky-notice-btn-wrapper {
	margin-left: 0 !important;
	gap: .8vw;
	flex-wrap: wrap;
}

/* Deliberately kept at one class: important already beats the plugin at any
   specificity, and a heavier base selector here would outrank the modifiers
   below and hold every button to the same border. */
.cky-btn {
	margin: 0 !important;
	padding: .9em 1.6em !important;
	border-radius: var(--ab-r-pill) !important;
	border: 1px solid var(--ab-noir) !important;
	font-size: 12px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: var(--ab-ls-meta);
	transition: background-color .35s var(--ab-e-hover), color .35s var(--ab-e-hover),
		border-color .35s var(--ab-e-hover);
}

/* The plugin fades every button on hover; the site swaps the fill instead. */
.cky-btn:hover { opacity: 1 !important; }

.cky-btn-accept,
.cky-btn-preferences {
	background: var(--ab-noir) !important;
	color: var(--ab-alpin) !important;
}

.cky-btn-accept:hover,
.cky-btn-preferences:hover {
	background: var(--ab-citron) !important;
	color: var(--ab-noir) !important;
	border-color: var(--ab-citron) !important;
}

.cky-btn-reject {
	background: transparent !important;
	color: var(--ab-noir) !important;
}

.cky-btn-reject:hover {
	background: var(--ab-noir) !important;
	color: var(--ab-alpin) !important;
}

/* "Customise" is the quiet third option, so it is a label rather than a pill,
   and the arrow the plugin draws next to it goes with the pill. */
.cky-btn-customize {
	background: transparent !important;
	color: var(--ab-rhone) !important;
	border-color: transparent !important;
	padding: .9em .2em !important;
}

.cky-btn-customize:hover { color: var(--ab-noir) !important; }
.cky-consent-bar .cky-btn-customize::after { display: none !important; }

.cky-consent-bar .cky-banner-btn-close img,
.cky-preference-header .cky-btn-close img { opacity: .45; transition: opacity .3s var(--ab-e-hover); }
.cky-consent-bar .cky-banner-btn-close:hover img,
.cky-preference-header .cky-btn-close:hover img { opacity: 1; }

/* "Show more" and the credit line: quiet, in the meta type the site uses. */
button.cky-show-desc-btn,
button.cky-show-desc-btn:not(:hover):not(:active) {
	color: var(--ab-rhone) !important;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: var(--ab-ls-meta);
	text-decoration: none !important;
}

button.cky-show-desc-btn:hover { color: var(--ab-noir) !important; }

.cky-footer-wrapper,
.cky-footer-shadow { background: var(--ab-alpin) !important; }
.cky-footer-wrapper { border-top: 1px solid var(--ab-leman) !important; }

.cky-footer-wrapper a {
	color: var(--ab-rhone) !important;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: var(--ab-ls-meta);
	text-decoration: none !important;
}

.cky-footer-wrapper a:hover { color: var(--ab-noir) !important; }

/* ---------- the preference panel ---------- */
.cky-preference-wrapper,
.cky-preference-center {
	background: var(--ab-alpin) !important;
	color: var(--ab-noir) !important;
	border-color: var(--ab-leman) !important;
	border-radius: 0 !important;
	font-family: "mundial", "Figtree", "Helvetica Neue", sans-serif;
}

.cky-preference-title {
	color: var(--ab-noir) !important;
	font-size: 1.5vw !important;
	line-height: 1.1 !important;
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: -.03em;
}

.cky-preference-header { border-bottom: 1px solid var(--ab-noir) !important; }

.cky-preference-content-wrapper,
.cky-preference-content-wrapper *,
.cky-accordion-header-des,
.cky-accordion-header-des * {
	color: var(--ab-noir) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	font-weight: 300 !important;
}

.cky-accordion { border-bottom: 1px solid var(--ab-leman) !important; }

.cky-accordion-header .cky-accordion-btn {
	color: var(--ab-noir) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: -.03em;
}

/* Green on white is the plugin's; the site says "always on" in its own meta
   type, the same one it uses for years and roles. */
.cky-always-active {
	color: var(--ab-rhone) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: var(--ab-ls-meta);
}

.cky-audit-table {
	background: var(--ab-tela) !important;
	border-color: var(--ab-leman) !important;
	border-radius: 0 !important;
	color: var(--ab-noir) !important;
}

/* ---------- the toggles ---------- */
.cky-switch input[type="checkbox"] {
	background: var(--ab-leman) !important;
	border-radius: var(--ab-r-pill) !important;
	transition: background-color .35s var(--ab-e-hover);
}

.cky-switch input[type="checkbox"]:checked { background: var(--ab-noir) !important; }

/* ---------- the badge that reopens it ---------- */
.cky-btn-revisit-wrapper {
	background: var(--ab-noir) !important;
	transition: background-color .35s var(--ab-e-hover);
}

.cky-btn-revisit-wrapper:hover { background: var(--ab-citron) !important; }
.cky-btn-revisit-wrapper:hover .cky-btn-revisit img { filter: invert(1); }

/* ---------- focus ---------- */
.cky-btn:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible,
.cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-notice-des a.cky-policy:focus-visible {
	outline: 2px solid var(--ab-violette) !important;
	outline-offset: 2px !important;
}

/* ---------- narrow screens ---------- */
@media (max-width: 940px) {
	.cky-consent-container .cky-consent-bar { padding: 6vw 4vw !important; }
	.cky-consent-container .cky-notice-group { flex-direction: column; align-items: flex-start; gap: 5vw; }
	.cky-notice .cky-title { font-size: 22px !important; margin-bottom: 3vw !important; }
	.cky-preference-title { font-size: 20px !important; }
	/* Stacked, and in a stated order: the plugin's own mobile rule reverses the
	   row, which left the quiet third option sitting between the two pills. */
	.cky-notice-btn-wrapper { width: 100%; gap: 3vw; flex-direction: column !important; align-items: stretch; }
	.cky-consent-bar .cky-btn { width: 100%; }
	.cky-btn-accept { order: 1 !important; }
	.cky-btn-reject { order: 2 !important; }
	.cky-btn-customize { order: 3 !important; text-align: center !important; }
}