/*
 * WCAG 2.2 AA: the style half. The markup half, and why, is includes/accessibility.php.
 *
 * Every colour below clears 4.5:1 against the surface it sits on, measured by axe-core in
 * `anr-check-a11y` (2026-09-29). Each was the smallest darkening that does, so the page
 * looks the same to anyone not holding a contrast meter.
 */

/* --- Skip link (2.4.1) ------------------------------------------------------------------ */

.anr-skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	padding: 12px 18px;
	border-radius: 8px;
	background: #070a22;
	color: #ffffff;
	font-weight: 500;
	text-decoration: none;
}

.anr-skip-link:focus {
	top: 16px;
	color: #ffffff;
}

/* --- Names that are hidden from sight but not from a screen reader (4.1.2) ------------- */

/* The footer social icons: the theme prints "Facebook" and friends in a span and hides it
   with `display: none`, which hides it from assistive technology too. */
.ct-social a span {
	display: inline !important;
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Contrast (1.4.3) ------------------------------------------------------------------- */

/* The current page in the footer's quick links and the blog's category list, which the
   theme marks in the brand green: 2.06:1 on the footer tint. */
body .ct-footer-item a[aria-current="page"],
body #secondary .current-cat > a {
	color: var(--anr-green-text, #4a7c29) !important;
}

/* Ninja Forms fields and the search box type in the theme's lilac, #747da1, 4.04:1. */
body .nf-form-content input.ninja-forms-field,
body .nf-form-content textarea.ninja-forms-field,
body .nf-form-content select.ninja-forms-field,
body .search-form .search-field {
	color: #6a739a;
}

body .nf-form-content .ninja-forms-field::placeholder,
body .search-form .search-field::placeholder {
	color: #6a739a;
	opacity: 1;
}

/* Section headings on the theme's coloured rows. On the green (`bg-secondary`) the legacy
   copy on /course-information/ writes white and #1e73be inline, 2.2:1; accessible-green.css
   already makes green a surface with dark ink on it everywhere this repository styles, and
   this carries the rule into the client's own rows. On the blue (`bg-primary`) the eyebrow
   took the accessible green from that sheet, 1.93:1, and is white instead. */
body .bg-secondary .ct-heading .ct-heading-tag,
body .bg-secondary .ct-heading .ct-heading-sub,
body .bg-secondary .ct-heading .ct-heading-desc,
body .bg-secondary .ct-heading .ct-heading-desc p {
	color: var(--anr-on-green, #070a22) !important;
}

body .bg-primary .ct-heading .ct-heading-sub {
	color: #ffffff !important;
}

/* --- Motion (2.2.2, 2.3.3) --------------------------------------------------------------- */

/* A visitor who has asked their system for less motion gets none of the theme's entrance
   animations. The hero's pan-zoom is stopped by accessibility.js, which also stops it for
   everyone else after five seconds. */
@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;
	}
}