/*
 * cookie-consent.css — looks of the cookie banner, the "Customize Consent
 * Preferences" window and the revisit button (js/cookie-consent.js builds
 * all three).
 *
 * Copied from the previous site's banner (screenshots taken at 80% scale;
 * every size here is the screenshot's size divided by 0.8). Changes made on
 * purpose:
 *   - the "Powered by" strip at the bottom of the window is gone;
 *   - the banner and window stay above every page element (on the previous
 *     site the hero's scroll-mouse icon showed through them);
 *   - the revisit button shares the bottom-right corner with the "back to
 *     top" button: it sits in the corner while "back to top" is hidden and
 *     slides up above it once "back to top" appears (scrolled pages).
 *
 * Stacking: the banner and window use 9999999, like the form pop-ups and
 * the loading screen, but come later in the page, so they are drawn on top
 * of the pop-ups. The revisit button uses 100000, like "back to top": above
 * the footer (99999), below the pop-ups.
 */

.cc-banner,
.cc-prefs,
.cc-revisit {
	--cc-bg: #21201f;
	--cc-text: #ffffff;
	--cc-muted: rgba(255, 255, 255, 0.72);
	--cc-line: rgba(255, 255, 255, 0.27);
	font-family: var(--font-body, 'Inter', sans-serif);
	color: var(--cc-text);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.cc-banner *,
.cc-prefs * {
	box-sizing: border-box;
}

.cc-banner[hidden],
.cc-prefs[hidden],
.cc-revisit[hidden] {
	display: none;
}

/* Fade in, like the previous banner. */
.cc-banner,
.cc-prefs,
.cc-revisit {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.cc-banner.is-visible,
.cc-prefs.is-visible,
.cc-revisit.is-visible {
	opacity: 1;
}

.cc-banner a,
.cc-prefs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-banner :focus-visible,
.cc-prefs :focus-visible,
.cc-revisit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Buttons (banner and window share them)
   ------------------------------------------------------------------------- */

.cc-buttons {
	display: flex;
	gap: 8px;
}

.cc-btn {
	flex: 1 1 0;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid #ffffff;
	border-radius: 999px;
	background: transparent;
	color: #ffffff;
	font: inherit;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cc-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.cc-btn--primary {
	background: #ffffff;
	color: var(--cc-bg);
}

.cc-btn--primary:hover {
	background: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------------------
   Banner: bottom-right box
   ------------------------------------------------------------------------- */

.cc-banner {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9999999;
	width: 440px;
	max-width: calc(100vw - 32px);
	padding: 18px 24px 20px;
	border-radius: 8px;
	background: var(--cc-bg);
}

.cc-banner__title {
	margin: 0 0 12px;
	font-size: 21.5px;
	font-weight: 400;
	line-height: 30px;
}

.cc-banner__text {
	margin: 0 0 25px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

/* -------------------------------------------------------------------------
   Preferences window: tall panel, bottom-right, no dimmed backdrop
   ------------------------------------------------------------------------- */

.cc-prefs {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 9999999;
	display: flex;
	flex-direction: column;
	width: 845px;
	max-width: calc(100vw - 32px);
	height: 860px;
	max-height: calc(100vh - 80px);
	border-radius: 8px;
	background: var(--cc-bg);
}

.cc-prefs__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 46px;
	padding: 25px 0 20px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-prefs__title {
	margin: 0;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	color: inherit;
}

.cc-close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: var(--cc-bg);
	cursor: pointer;
}

.cc-prefs__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 46px;
	overscroll-behavior: contain;
}

.cc-prefs__intro {
	padding: 14px 0 16px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-prefs__intro p,
.cc-category__desc {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 18.75px;
}

.cc-prefs__intro p + p {
	margin-top: 18.75px;
}

.cc-category {
	padding: 16px 0 19px;
	border-bottom: 1px solid var(--cc-line);
}

.cc-category__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 24px;
}

.cc-category__toggle {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
}

.cc-category__toggle svg {
	flex: none;
	transition: transform 0.2s ease;
}

.cc-category__toggle[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

.cc-category__desc {
	margin: 9px 0 0 19px;
}

.cc-always {
	font-size: 12.5px;
	color: var(--cc-muted);
	white-space: nowrap;
}

/* On/off switch: white track and dark knob when on. */
.cc-switch {
	position: relative;
	display: inline-block;
	flex: none;
	width: 40px;
	height: 22px;
	cursor: pointer;
}

.cc-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cc-switch__track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.25);
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.cc-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.cc-switch input:checked + .cc-switch__track {
	background: #ffffff;
}

.cc-switch input:checked + .cc-switch__track::after {
	transform: translateX(18px);
	background: var(--cc-bg);
}

.cc-switch input:focus-visible + .cc-switch__track {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* The cookie list under each category (opened with the arrow). */
.cc-category__details {
	margin: 14px 0 0 19px;
	overflow-x: auto;
}

.cc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	line-height: 17px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

.cc-table th,
.cc-table td {
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}

.cc-table th {
	font-weight: 600;
	color: var(--cc-muted);
}

.cc-table tbody tr {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-table td:first-child {
	white-space: nowrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cc-table td:nth-child(2) {
	white-space: nowrap;
}

.cc-prefs__footer {
	flex: none;
	gap: 12px;
	padding: 20px 46px 24px;
}

.cc-prefs__footer .cc-btn {
	height: 58px;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Revisit button: reopens the window after a choice was made

   "Back to top" (style.css) is 52px wide at right 24px, bottom 24px and
   only shows (class "show", set by main.js) once the page is scrolled.
   The revisit button lines up with its centre: right 24 + 52/2 - 44/2 =
   28px. At the top of the page it sits 16px from the bottom, like the
   previous site's button, which leaves 15px below the hero's scroll-mouse
   icon (that icon ends 75px above the bottom). When "back to top" shows,
   the revisit button moves above it: 24 + 52 + 12px gap = 88px. Both are direct children of
   <body> and "back to top" comes first, so "~" can see its class.
   ------------------------------------------------------------------------- */

.cc-revisit {
	position: fixed;
	right: 28px;
	bottom: 16px;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cc-bg);
	color: #ffffff;
	cursor: pointer;
	transition: opacity 0.25s ease, bottom 0.3s ease;
}

#back-to-top.show ~ .cc-revisit {
	bottom: 88px;
}

.cc-revisit:hover {
	background: #000000;
}

/* -------------------------------------------------------------------------
   Phones: banner and window use the full width
   ------------------------------------------------------------------------- */

@media (max-width: 575px) {
	.cc-banner {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		padding: 18px 16px 16px;
		border-radius: 8px 8px 0 0;
	}

	.cc-banner__title {
		font-size: 19px;
		line-height: 26px;
		margin-bottom: 8px;
	}

	.cc-banner__text {
		margin-bottom: 16px;
	}

	.cc-banner .cc-buttons {
		flex-wrap: wrap;
	}

	.cc-banner .cc-btn {
		flex: 1 1 calc(50% - 4px);
		font-size: 13px;
	}

	.cc-banner .cc-btn--primary {
		flex-basis: 100%;
	}

	.cc-prefs {
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.cc-prefs__header {
		margin: 0 16px;
		padding: 16px 0;
	}

	.cc-prefs__title {
		font-size: 20px;
	}

	.cc-prefs__body {
		padding: 0 16px;
	}

	.cc-prefs__footer {
		flex-direction: column;
		gap: 8px;
		padding: 12px 16px 16px;
	}

	.cc-prefs__footer .cc-btn {
		flex: none;
		height: 44px;
	}

	.cc-category__desc,
	.cc-category__details {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-banner,
	.cc-prefs,
	.cc-revisit,
	.cc-btn,
	.cc-category__toggle svg,
	.cc-switch__track,
	.cc-switch__track::after {
		transition: none;
	}
}