/*
	Accessibility, form and reliability enhancements
	------------------------------------------------
	Additions made during the July 2026 site review. Kept in a separate
	file so the original template CSS stays reviewable and this can be
	rolled back independently.
*/


/* -------------------------------------------------------------
	1. Skip link
	Keyboard and screen-reader users otherwise have to tab through
	the entire nav (10+ links) on every single page before reaching
	content. WCAG 2.1 SC 2.4.1.
   ------------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 10000;
	padding: 0.75em 1.25em;
	background: #0b3d6b;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 0;
	transition: top 0.15s ease-in-out;
}

.skip-link:focus {
	top: 0;
	color: #ffffff;
	outline: 3px solid #ffd200;
	outline-offset: 2px;
}


/* -------------------------------------------------------------
	2. Visible focus states
	The base template removes or barely styles :focus. Anyone
	navigating by keyboard currently cannot see where they are.
	:focus-visible keeps mouse users from seeing rings on click.
   ------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #ffd200;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Fallback for browsers without :focus-visible support. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus {
		outline: 3px solid #ffd200;
		outline-offset: 2px;
	}
}


/* -------------------------------------------------------------
	3. Screen-reader-only utility
   ------------------------------------------------------------- */

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* -------------------------------------------------------------
	4. Contact form: labels, validation and status messaging
   ------------------------------------------------------------- */

.contact-form-box label {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}

.contact-form-box .required-marker {
	color: #c62828;
	margin-left: 0.15em;
}

/* Only flag invalid fields the user has actually interacted with,
   so the form is not covered in red errors on first paint. */
.contact-form-box input:not(:placeholder-shown):invalid,
.contact-form-box textarea:not(:placeholder-shown):invalid {
	border-color: #c62828;
}

.field-error {
	display: block;
	margin-top: 0.35em;
	font-size: 0.8em;
	color: #c62828;
}

.form-status {
	margin: 0 0 1em 0;
	padding: 0.9em 1.1em;
	border-radius: 4px;
	border-left: 4px solid transparent;
	font-size: 0.9em;
}

.form-status[hidden] {
	display: none;
}

.form-status.is-success {
	background: #e8f5e9;
	border-left-color: #2e7d32;
	color: #1b5e20;
}

.form-status.is-error {
	background: #fdecea;
	border-left-color: #c62828;
	color: #8e1c1c;
}

.form-status.is-pending {
	background: #eef3f8;
	border-left-color: #0b3d6b;
	color: #0b3d6b;
}

/* Honeypot: a field real people never see and never fill in.
   Bots that auto-complete every input give themselves away.
   Deliberately not display:none, which some bots detect. */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* Replaces an inline style attribute on about.html, so that
   script/style CSP can stay tight and the rule is reusable. */
.video-caption {
	text-align: center;
	margin-top: 10px;
}


/* -------------------------------------------------------------
	5. Careers feed messaging
   ------------------------------------------------------------- */

.jobs-message {
	padding: 1.5em;
	text-align: center;
	opacity: 0.8;
}


/* -------------------------------------------------------------
	6. Layout stability (CLS)
	Give images an intrinsic box so the page does not jump as
	logos load in. The hero is given a reserved height for the
	same reason.
   ------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

#hero-slider .slide {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}


/* -------------------------------------------------------------
	7. Reduced motion
	Honour the OS-level "reduce motion" setting. The hero slider
	also checks this in JS and stops autoplaying.
   ------------------------------------------------------------- */

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


/* -------------------------------------------------------------
	8. Slider controls - hit area and contrast
	The arrows were below the 44x44px minimum touch target.
   ------------------------------------------------------------- */

#hero-slider .slider-btn {
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

#hero-slider .dot {
	cursor: pointer;
}


/* -------------------------------------------------------------
	9. Print
   ------------------------------------------------------------- */

@media print {
	#nav,
	#hero-slider .slider-btn,
	#hero-slider .slider-dots,
	.skip-link {
		display: none !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}