/*
 * The accessibility button and the preferences it applies.
 *
 * Every value here comes from a theme token. The fallbacks exist only so the plugin still works
 * on an installation where the FlyFreaks theme is not active yet, and the token always wins.
 * No brand colour and no design size is written literally.
 */

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

/* ---------------------------------------------------------------
 * The preferences themselves, applied to the document element.
 * ------------------------------------------------------------ */

:root[data-ff-a11y-text='1'] {
	font-size: 112.5%;
}

:root[data-ff-a11y-text='2'] {
	font-size: 125%;
}

:root[data-ff-a11y-contrast='1'] body {
	filter: contrast(1.25);
}

:root[data-ff-a11y-links='1'] a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:root[data-ff-a11y-motion='1'] *,
:root[data-ff-a11y-motion='1'] *::before,
:root[data-ff-a11y-motion='1'] *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------
 * The button and its panel.
 * ------------------------------------------------------------ */

.ff-a11y {
	position: fixed;
	inset-block-end: var(--ff-a11y-pad);
	inset-inline-start: var(--ff-a11y-pad);
	z-index: var(--ff-a11y-layer);
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: var(--ff-a11y-gap);
	font-family: var(--font-body, inherit);
}

.ff-a11y__toggle {
	inline-size: var(--ff-a11y-target);
	block-size: var(--ff-a11y-target);
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-pill, 50%);
	background: var(--ff-a11y-ink);
	color: var(--ff-a11y-surface-invert);
	box-shadow: var(--ff-a11y-shadow);
	cursor: pointer;
}

.ff-a11y__icon {
	inline-size: 60%;
	block-size: 60%;
}

.ff-a11y__toggle:focus-visible,
.ff-a11y__option:focus-visible,
.ff-a11y__close:focus-visible,
.ff-a11y__reset:focus-visible,
.ff-a11y__statement:focus-visible {
	outline: var(--ff-a11y-border);
	outline-offset: 0.125em;
}

.ff-a11y__panel {
	inline-size: min(20rem, calc(100vw - var(--ff-a11y-pad) * 2));
	padding: var(--ff-a11y-pad);
	border: var(--ff-a11y-border);
	border-radius: var(--ff-a11y-radius);
	background: var(--ff-a11y-surface);
	color: var(--ff-a11y-ink);
	box-shadow: var(--ff-a11y-shadow);
}

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

.ff-a11y__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-a11y-gap);
	margin-block-end: var(--ff-a11y-gap);
}

.ff-a11y__title {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-size: 1.125em;
}

.ff-a11y__close {
	inline-size: 1.5em;
	block-size: 1.5em;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ff-a11y__close svg {
	inline-size: 100%;
	block-size: 100%;
}

.ff-a11y__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.ff-a11y__option {
	inline-size: 100%;
	min-block-size: var(--ff-a11y-target);
	padding: var(--space-2, 0.5rem) var(--ff-a11y-gap);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125em;
	text-align: start;
	border: var(--ff-a11y-border);
	border-radius: var(--ff-a11y-radius-inner);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ff-a11y__option[aria-pressed='true'] {
	background: var(--ff-a11y-ink);
	color: var(--ff-a11y-surface-invert);
}

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

.ff-a11y__option-hint {
	font-size: 0.85em;
	opacity: 0.75;
}

.ff-a11y__footer {
	margin-block-start: var(--ff-a11y-gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-a11y-gap);
	font-size: 0.9em;
}

.ff-a11y__reset {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

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

/* ---------------------------------------------------------------
 * The accessibility statement page.
 * ------------------------------------------------------------ */

.ff-statement__main,
.ff-gone__main {
	max-inline-size: 42rem;
	margin-inline: auto;
	padding: var(--space-8, 2rem) var(--gutter, 1rem);
	font-family: var(--font-body, inherit);
	line-height: 1.7;
}

.ff-statement__title,
.ff-gone__title {
	font-family: var(--font-display, inherit);
}

.ff-statement__section {
	margin-block-end: var(--space-8, 2rem);
}

.ff-gone__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}