/*
 * Cookie consent banner / preferences panel.
 *
 * Anchored to the bottom of the viewport as a card rather than a modal
 * overlay: the site stays readable and usable while the choice is open,
 * which is the point — the banner is not a paywall for the content.
 *
 * "Accept all" and "Reject non-essential" use the same button treatment,
 * the same size and sit next to each other, so declining is visibly no
 * harder than accepting.
 */

.ff-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9999;
	padding: var(--space-sm);
	pointer-events: none;
}

.ff-consent[hidden] {
	display: none;
}

.ff-consent__panel {
	pointer-events: auto;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background-color: var(--color-black);
	color: var(--color-white);
	box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.35);
}

@media (min-width: 600px) {
	.ff-consent {
		padding: var(--space-md);
	}

	.ff-consent__panel {
		padding: var(--space-lg);
	}
}

@media (min-width: 960px) {
	.ff-consent__panel {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--space-lg) var(--space-2xl);
		align-items: start;
	}

	.ff-consent__actions {
		grid-column: 1 / -1;
	}
}

/* ---------- Copy ---------- */

.ff-consent__heading {
	margin-bottom: var(--space-2xs);
	font-size: var(--text-lg);
	color: var(--color-white);
}

.ff-consent__heading:focus {
	outline: none;
}

.ff-consent__heading:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.ff-consent__description {
	margin-bottom: var(--space-2xs);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.ff-consent__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: 0;
	font-size: var(--text-sm);
	font-weight: 600;
}

.ff-consent__links a {
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ff-consent__links a:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* ---------- Category toggles ---------- */

.ff-consent__options {
	margin: var(--space-md) 0 0;
	padding: 0;
	border: 0;
}

@media (min-width: 960px) {
	.ff-consent__options {
		margin-top: 0;
	}
}

.ff-consent__option + .ff-consent__option {
	margin-top: var(--space-2xs);
}

.ff-consent__option-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	padding: var(--space-2xs);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.ff-consent__option-label:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.ff-consent__checkbox {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.1875rem;
	accent-color: var(--color-gold);
}

.ff-consent__checkbox:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.ff-consent__checkbox:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.ff-consent__option-text {
	display: block;
	font-size: var(--text-sm);
	line-height: 1.45;
}

.ff-consent__always {
	display: inline-block;
	margin-left: var(--space-3xs);
	padding: 0 var(--space-2xs);
	border-radius: var(--radius-pill);
	background-color: var(--color-gold);
	color: var(--color-black);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ff-consent__option-description {
	display: block;
	margin-top: var(--space-3xs);
	font-size: var(--text-xs);
	opacity: 0.8;
}

/* ---------- Actions ---------- */

.ff-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-md);
}

.ff-consent__button {
	flex: 1 1 12rem;
}

/*
 * The two decisive choices are identical in weight and prominence: same
 * white fill, same size, side by side. The panel sits on black, so
 * .btn--solid is inverted here to read as filled rather than as a black
 * button on a black card.
 */
.ff-consent .ff-consent__button.btn--solid {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-black);
}

.ff-consent .ff-consent__button.btn--solid:hover,
.ff-consent .ff-consent__button.btn--solid:focus-visible {
	background-color: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-black);
}

/* "Save my choices" is the secondary path — outlined, not filled. */
.ff-consent .ff-consent__button--save {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
}

.ff-consent .ff-consent__button--save:hover,
.ff-consent .ff-consent__button--save:focus-visible {
	background-color: var(--color-white);
	color: var(--color-black);
}

.ff-consent__button:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

@media (min-width: 600px) {
	.ff-consent__button {
		flex: 0 1 auto;
		min-width: 12rem;
	}
}