/*
 * The consent banner. Values come from theme tokens; the fallbacks exist only so the banner is
 * usable on an installation where the FlyFreaks theme is not active yet.
 */

:root {
	--ff-consent-pad: var(--space-4, 1rem);
	--ff-consent-gap: var(--space-3, 0.75rem);
	--ff-consent-radius: var(--radius-modal, 1rem);
	--ff-consent-radius-inner: var(--radius-input, 0.5rem);
	--ff-consent-ink: var(--color-navy, currentColor);
	--ff-consent-surface: var(--color-white, Canvas);
	--ff-consent-invert: var(--color-cream, CanvasText);
	--ff-consent-border: var(--stroke-navy, 0.125rem solid currentColor);
	--ff-consent-shadow: var(--shadow-modal, none);
	--ff-consent-target: var(--touch-target-min, 2.75rem);
	--ff-consent-layer: 70;
}

.ff-consent {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: var(--ff-consent-layer);
	padding: var(--ff-consent-pad);
	font-family: var(--font-body, inherit);
}

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

.ff-consent__inner {
	max-inline-size: var(--content-width, 60rem);
	margin-inline: auto;
	padding: var(--ff-consent-pad);
	border: var(--ff-consent-border);
	border-radius: var(--ff-consent-radius);
	background: var(--ff-consent-surface);
	color: var(--ff-consent-ink);
	box-shadow: var(--ff-consent-shadow);
}

.ff-consent__title {
	margin: 0 0 var(--space-2, 0.5rem);
	font-family: var(--font-display, inherit);
	font-size: 1.125em;
}

.ff-consent__text {
	margin: 0;
	line-height: 1.6;
}

.ff-consent__link {
	color: var(--color-teal, currentColor);
}

.ff-consent__options {
	margin: var(--ff-consent-gap) 0 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

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

.ff-consent__legend {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ff-consent__option {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: var(--space-2, 0.5rem);
	padding: var(--space-2, 0.5rem);
	border: var(--divider, 1px solid currentColor);
	border-radius: var(--ff-consent-radius-inner);
}

.ff-consent__option-label {
	font-weight: 500;
}

.ff-consent__option-hint {
	grid-column: 2;
	font-size: 0.85em;
	opacity: 0.75;
}

.ff-consent__actions {
	margin-block-start: var(--ff-consent-gap);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem);
}

.ff-consent__button {
	min-block-size: var(--ff-consent-target);
	padding-inline: var(--ff-consent-pad);
	border: var(--ff-consent-border);
	border-radius: var(--radius-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ff-consent__button--accept {
	background: var(--ff-consent-ink);
	color: var(--ff-consent-invert);
}

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

.ff-consent__button:focus-visible,
.ff-consent__reopen:focus-visible {
	outline: var(--ff-consent-border);
	outline-offset: 0.125em;
}

.ff-consent__reopen {
	position: fixed;
	inset-block-end: var(--ff-consent-pad);
	inset-inline-end: var(--ff-consent-pad);
	z-index: var(--ff-consent-layer);
	min-block-size: var(--ff-consent-target);
	padding-inline: var(--ff-consent-gap);
	border: var(--ff-consent-border);
	border-radius: var(--radius-pill, 999px);
	background: var(--ff-consent-surface);
	color: var(--ff-consent-ink);
	font: inherit;
	cursor: pointer;
}

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