/* ==================================================

	Accessibility

	@see https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/

================================================== */

/* -------------------------------------
	Visually hidden, still read aloud
------------------------------------- */

.visually-hidden,
.screen-reader-text {
	position: absolute;

	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;

	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------
	=Skip links
------------------------------------- */

.skip-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 10px 16px;

	background: var(--color-bg-surface);
	border-bottom: var(--border-w) solid var(--color-border-card);
}

.skip-links:not(:focus-within) {
	position: absolute;

	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;

	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-links__link {
	padding: 6px 14px;

	font-size: var(--text-search);
	font-weight: var(--font-weight-medium);
	color: var(--color-fg-link);
	text-decoration: none;

	border: var(--border-w) solid currentColor;
	border-radius: var(--radius-pill);
}

.skip-links__link:hover {
	text-decoration: underline;
}

@media ( max-width: 1076px ) {

	.skip-links__link--desktop-only {
		display: none;
	}

}

/* -------------------------------------
	=Focus
------------------------------------- */

:focus-visible {
	outline: 2px solid var(--color-fg-link);
	outline-offset: 2px;
}

/* -------------------------------------
	Reduced motion
------------------------------------- */

@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;
	}

}

.is-motion-paused *,
.is-motion-paused *::before,
.is-motion-paused *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}