/* Al Wusta Accessibility. --alwusta-focus comes from the settings page. */

:root {
	--alwusta-focus: #0b57d0;
	--alwusta-focus-width: 3px;
}

/* read by screen readers, not shown */
.alwusta-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* first stop for keyboard users; appears only when it has focus */
.alwusta-skip-link {
	position: absolute;
	top: -100px;
	inset-inline-start: 12px;
	z-index: 1000000;
	padding: 12px 20px;
	border-radius: 0 0 8px 8px;
	background: #0d3570;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	/* the theme animates every link; this one must be there the moment it has focus */
	transition: none !important;
}

.alwusta-skip-link:focus {
	top: 0;
	color: #fff;
	outline: var(--alwusta-focus-width) solid #fff;
	outline-offset: -6px;
}

/* a focus ring that shows on light and on dark surfaces alike */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
iframe:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: var(--alwusta-focus-width) solid var(--alwusta-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 calc(var(--alwusta-focus-width) + 2px) #fff !important;
}

/* the skip-link target is focused by script only; no ring around the whole page */
#alwusta-main:focus,
[role="main"][tabindex="-1"]:focus,
main[tabindex="-1"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* cards that turn over on hover must turn over for the keyboard too */
.flip-card:focus-within .flip-card-inner {
	transform: rotateY(180deg);
}

.alwusta-a11y-statement {
	padding: 8px 16px;
	background: #0a2a5a;
	text-align: center;
	font-size: 14px;
}

.alwusta-a11y-statement a {
	color: #fff;
	text-decoration: underline;
}