/*
 * 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 main menu and the blog's category list, which the theme marks in
   the brand green: 2.24:1 on white. The menu's case was found by `anr-audit-brand`, not by
   axe, which scored it against the header's background image rather than the white it
   renders on. The footer's quick links used to be listed here too; they no longer mark the
   current page at all (frame.css, section 6), so there is no green left to darken. */
body #primary-menu > li.current-menu-item > a,
body #primary-menu > li.current_page_item > a,
body #primary-menu > li.current-menu-ancestor > a,
body #primary-menu > li.current_page_parent > a,
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. Not the
   Submit button, which is an input too: white on blue, and lilac on blue at 2.4:1 when this
   rule once reached it on production, where the release renders it `type="submit"`. */
body .nf-form-content input.ninja-forms-field:not([type="submit"], [type="button"]),
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;
}

/* --- Links that only colour marks out (1.4.1) ----------------------------------------- */

/* typography.css underlines body links inside p, li and td. The client's copy sometimes
   puts a link straight into a div ("Online Learning" on /condition/concussion/), where the
   link was blue text in blue-grey text and nothing else. Same underline, same exclusions. */
.wpb_text_column > .wpb_wrapper div > a:not(.btn, .button, .anr-card, .anr-card__cta) {
	text-decoration: underline;
	text-decoration-color: rgba(117, 192, 67, 0.9);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --- 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;
	}
}