/* Shared accessibility utilities. Loaded by base.html, the auth pages and
   the video page, so it must not depend on Bootstrap being present. */

/* Same definition as Bootstrap 4's .sr-only, for pages without Bootstrap */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link (WCAG 2.4.1): off-screen until it receives keyboard focus */
.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 8px 12px;
	background: #ffffff;
	color: #0b2e4f;
	border: 2px solid #0b2e4f;
	border-radius: 4px;
	font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus {
	transform: none;
}

/* The skip target is focused programmatically; it needs no ring of its own */
main[tabindex="-1"]:focus {
	outline: none;
}

/* Text-field borders need 3:1 against the page (WCAG 1.4.11). Bootstrap's
   #ced4da is 1.5:1. The html prefix outranks bootstrap.css whatever the load
   order, while Bootstrap's :focus and validation borders still win. */
html .form-control,
html .custom-select,
html .form-select {
	border-color: #7d868e;
}

/* Visible keyboard focus (WCAG 2.4.7, 1.4.11). #1884dc has at least 3:1 against
   every surface we use, light (#fff, #ebebeb) and dark (#333236, navbar, Ask AI
   navy), so one colour works on every page. !important because Bootstrap and
   many page stylesheets remove outlines. Pages whose input sits inside a styled
   box (Ask AI, Scouting search) put the field ring on that box using
   var(--focus-ring) instead. */
:root {
	--focus-ring: #1884dc;
}

/* Buttons, links and other controls (keyboard focus only): thin ring with a gap */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="image"], [type="submit"], [type="button"], [type="reset"], [type="color"]):focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Text fields and selects: the ring sits over the field's own border, so a
   focused field just reads as having a blue border */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="image"], [type="submit"], [type="button"], [type="reset"], [type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.select2-container .select2-selection[role="combobox"]:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: -1px !important;
	box-shadow: none !important;
}