/*
	Shared accessibility styles. Served at /includes/css/a11y.css — link it LAST in <head>
	so it can restore focus indicators that site stylesheets remove.
*/

/* Skip link: hidden until focused, then pinned to the top-left above all site chrome.
   Works with Bootstrap 3/4 .sr-only-focusable or on its own. */
.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus,
.skip-link:active {
	position: fixed;
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	z-index: 100000;
	padding: .75rem 1rem;
	background: #fff;
	color: #1a4d7a;
	border: 3px solid #1a4d7a;
	border-radius: .25rem;
	font-weight: 600;
	text-decoration: underline;
}

/* The skip target receives programmatic focus; it should not show a ring around the whole page. */
main[tabindex="-1"]:focus,
[data-skip-target][tabindex="-1"]:focus {
	outline: none;
}

/* Visible keyboard focus. :focus-visible leaves mouse clicks unchanged in modern browsers. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.select2-container--focus .select2-selection,
.select2-selection:focus {
	outline: 3px solid #1a4d7a !important;
	outline-offset: 2px !important;
}

/* Reset helpers: let a semantic element (button, heading, fieldset/legend) look exactly like
   the div/span/p/label it replaces. Combine with the element's original classes. */
/* Bootstrap .btn buttons keep their own box model; :where() keeps this rule at single-class specificity */
.a11y-btn-reset:where(:not(.btn)) {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	line-height: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.a11y-heading-reset {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin-top: 0;
}
fieldset.a11y-fieldset-reset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
legend.a11y-legend-reset {
	float: none;
	width: auto;
	max-width: 100%;
	padding: 0;
	margin-bottom: 0;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	white-space: normal;
}

/* A reset legend that is also a Bootstrap grid column / form label keeps that component's padding */
legend.a11y-legend-reset[class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}
legend.a11y-legend-reset.col-form-label {
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
}

/* Error summary rendered by /includes/js/a11yFormErrors.js */
.a11y-error-summary:focus {
	outline: 3px solid #a94442;
	outline-offset: 2px;
}

/* Honour the OS "reduce motion" setting for scroll-reveal, parallax and carousel effects. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.wow {
		visibility: visible !important;
		animation: none !important;
	}
}

/* links inside running text need a cue besides colour (WCAG 1.4.1) */
p a:not(.btn):not([class*="btn-"]):not([role="button"]),
label a,
.small a:not(.btn),
.alert a:not(.btn):not(.close),
.med-content > a,
.med-info > a,
dd a:not(.btn) {
	text-decoration: underline;
}

/* Bootstrap .form-check / .form-check-inline checkboxes and radios render a 13x13 box with
   little to no gap between stacked or wrapped siblings. Add spacing (not size) so each
   control's target area clears the WCAG 2.2 24px minimum without enlarging the visible box.
   Covers both markups used in the app: one .form-check per control, and a single .form-check
   wrapping several bare <div> rows (e.g. SE job-type checklists). */
.form-check:not(.form-check-inline) {
	margin-bottom: 8px;
}
.form-check > div {
	margin-bottom: 8px;
}
.form-check-inline {
	margin-right: 1.5rem;
	margin-bottom: 10px;
}

/* Bootstrap 4's default success green (#28a745) is about 3.1:1 against white; use its darker shades (WCAG 1.4.3) */
.btn-success {
	background-color: #218838;
	border-color: #1e7e34;
}
.btn-success:hover,
.btn-success:focus {
	background-color: #1e7e34;
	border-color: #1c7430;
}
.text-success {
	color: #1e7e34 !important;
}