/**
 * Accessibility remediation — WCAG 2.2 AA
 * =======================================
 *
 * Authored as plain CSS on purpose. The theme has 31 .scss files but no sass
 * dependency (webpack.config.js compiles JS only), so the .css files were built
 * by someone's editor and cannot be regenerated from this repo. Editing those
 * generated files would be lost on any future recompile; this file will not.
 *
 * Enqueued last in functions.php so it can override earlier rules without
 * escalating specificity wars.
 *
 * Every colour here was checked with a contrast calculation, not by eye.
 * Ratios are noted inline.
 */

:root {
	/* Verto brand navy and amber, reused rather than inventing new colours. */
	--a11y-ring-inner: #ffbb00; /* 6.69:1 against the navy sections   */
	--a11y-ring-outer: #143e54; /* 11.37:1 against white              */
	--a11y-ink-strong: #143e54;
	--a11y-ink-deepest: #0b2431;
}


/* ---------------------------------------------------------------------------
 * 1. Focus visibility  —  WCAG 2.4.7 (AA) and 1.4.11 (AA)
 *
 * Both were "Does not support". Outlines are switched off across the theme, so
 * a keyboard user cannot see where they are — including on Request Info, Apply
 * and Deposit, which the audit found unfocusable-looking on 74 of 90 routes.
 *
 * :focus-visible means MOUSE USERS SEE NO CHANGE. The ring only appears for
 * keyboard navigation.
 *
 * Two tones because no single colour clears 3:1 on both the white and the navy
 * sections of this site. Amber inner + navy outer: whichever background the
 * element sits on, one of the two contrasts against it, and they contrast with
 * each other at 6.69:1.
 * ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.nectar-button:focus-visible,
.accordion-button:focus-visible {
	/*
	 * Two stacked box-shadows rather than outline + shadow: box-shadow follows
	 * the element's border-radius exactly, so the ring hugs pill buttons
	 * instead of boxing them in. The transparent outline is kept so Windows
	 * High Contrast / forced-colors mode still renders an indicator, where
	 * box-shadow is dropped.
	 */
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
	box-shadow:
		0 0 0 3px var(--a11y-ring-inner),
		0 0 0 6px var(--a11y-ring-outer) !important;
}

/* Older engines without :focus-visible still get a ring rather than nothing. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	summary:focus,
	[tabindex]:focus {
		outline: 2px solid transparent !important;
		outline-offset: 2px !important;
		box-shadow:
			0 0 0 3px var(--a11y-ring-inner),
			0 0 0 6px var(--a11y-ring-outer) !important;
	}
}

/*
 * Undo the two in-scope suppressions.
 *
 * assets/css/channel-partners.css:506   .exitModalClose:focus { outline: 0 }
 * assets/css/channel-partners.css:1015  #customAccordion .accordion-button
 *
 * Deliberately NOT touched: style.css:220 (#apply-form) and
 * channel-partners.css:769 (#channel-confirm-interest). Both are application
 * forms, which Verto placed out of scope pending the student-portal rebuild.
 */
.exitModalClose:focus-visible,
#customAccordion .accordion-button:focus-visible,
#customAccordion .accordion-button.custom-acc-btn:not(.collapsed):focus-visible {
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
	box-shadow:
		0 0 0 3px var(--a11y-ring-inner),
		0 0 0 6px var(--a11y-ring-outer) !important;
}

/* Salient's skip link must be visible once focused. */
.nectar-skip-to-content:focus,
.skip-to-content:focus {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 100000 !important;
	background: #ffffff !important;
	color: var(--a11y-ink-strong) !important;
	font-weight: 600;
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * 2. Colour contrast  —  WCAG 1.4.3 (AA)
 *
 * The course tags are styled by wp-content/plugins/vertoSalesForceAPI, which is
 * NOT under version control on master. Overriding here keeps the fix in git and
 * deployable with the theme, instead of editing an unversioned plugin.
 *
 * Backgrounds are left alone per the agreed approach; only the text darkens.
 * ------------------------------------------------------------------------- */

/* was #fff on #ffbb00 = 1.70:1  ->  #143e54 on #ffbb00 = 6.69:1 */
.courses-tags span.study-tag,
.course-container .courses-tags span.study-tag,
.courses-list .course .courses-tags span.study-tag {
	color: var(--a11y-ink-strong) !important;
}

/*
 * was #fff on #469cb7 = 3.13:1
 * Note #143e54 only reaches 3.63:1 here and still fails, so this one needs the
 * deeper #0b2431 = 5.11:1. Same family, just darker.
 */
.courses-tags span.subject-tag,
.course-container .courses-tags span.subject-tag,
.courses-list .course .courses-tags span.subject-tag {
	color: var(--a11y-ink-deepest) !important;
}

/*
 * Sitemap page links.
 *
 * The theme's inherited link colour does not clear 4.5:1 on white, and this
 * page is nothing but links — 379 of them. Set an explicit passing colour
 * (#143e54 = 11.37:1) rather than letting them inherit.
 */
.verto-sitemap a {
	color: var(--a11y-ink-strong);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.verto-sitemap a:hover,
.verto-sitemap a:focus {
	color: var(--a11y-ink-deepest);
}

.verto-sitemap h2 {
	margin-top: 2rem;
}

.verto-sitemap ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	list-style: disc;
}

.verto-sitemap li {
	margin-bottom: .35rem;
}

/* Footer sitemap link must also clear contrast on the dark footer. */
.verto-a11y-footer-links a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Generic light-grey body text that fell under 4.5:1. */
.main-content span[style*="color:#777"],
.main-content span[style*="color: #777"] {
	color: #5c5c5c !important; /* 7.0:1 on white */
}

/* Table cells inheriting a washed-out inherited colour. */
table.has-fixed-layout tbody tr td {
	color: #2f3a3f;
}

/*
 * Muted grey body text inside accordions: #757a7b on #f4f4f4 = 3.96:1.
 * #686d6e = 4.77:1 and is visually all but identical — this is a genuine
 * near-miss rather than a brand colour, so it is safe to correct here.
 */
.accordion-body,
.accordion-body p,
.accordion-body li,
.accordion-body span:not([class*="badge"]) {
	color: #686d6e;
}

/*
 * NOT FIXED HERE — deliberately.
 *
 * The remaining contrast failures are Verto's brand colours, and changing them
 * is a brand decision rather than an engineering one:
 *
 *   #ffbb00 amber on white, used as large display headings — 1.69:1, needs 3:1.
 *       Passing shade would be #bc8a00 (26% darker).
 *   #ee9e00 amber link text on #f2f2f2 — 1.96:1, needs 4.5:1.
 *       Passing shade would be #987000 (40% darker).
 *   #ffffff on #469cb7 (.vrt-button--secondary) — 3.13:1, needs 4.5:1.
 *       Either darken the background to #397f96, or keep it and use #0b2431
 *       text (5.11:1).
 *
 * Verto's team owns colour and contrast and is running Lighthouse against it.
 * Note Lighthouse will NOT report hover/focus-state contrast, so those need
 * checking by hand.
 */


/* ---------------------------------------------------------------------------
 * 3. Links in body copy  —  WCAG 1.4.1 Use of Color (axe: link-in-text-block)
 *
 * Links sitting inside paragraphs were distinguished by colour alone.
 * Underline them so colour is not the only signal. Scoped to prose so it does
 * not underline buttons, nav items or card links.
 * ------------------------------------------------------------------------- */

.main-content p > a:not(.nectar-button):not([class*="button"]):not(.wp-block-button__link),
.post-content p > a:not(.nectar-button):not([class*="button"]):not(.wp-block-button__link),
.entry-content p > a:not(.nectar-button):not([class*="button"]):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ---------------------------------------------------------------------------
 * 4. Text spacing  —  WCAG 1.4.12 (AA) (axe: avoid-inline-spacing)
 *
 * Content clipped when users increase line/letter/word spacing. Let the
 * affected blocks grow instead of holding a fixed height.
 * ------------------------------------------------------------------------- */

.wpb_text_column,
.nectar-cta,
.iwithtext .iwt-text,
.courses-list .course {
	overflow: visible;
}


/* ---------------------------------------------------------------------------
 * 5. Carousel pause control  —  WCAG 2.2.2 (A)
 *
 * Markup injected by assets/js/a11y-carousel.js. Small, always visible: a
 * control that only appears on hover is unusable by touch and by many keyboard
 * users, which defeats the point of the criterion.
 * ------------------------------------------------------------------------- */

.a11y-motion-toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 12px;
	border: 1px solid rgba(20, 62, 84, .35);
	border-radius: 100px;
	background: rgba(255, 255, 255, .92);
	color: var(--a11y-ink-strong);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.a11y-motion-toggle:hover {
	background: #ffffff;
	border-color: var(--a11y-ink-strong);
}

/* The carousel needs to be a positioning context for the button. */
.a11y-has-motion-toggle {
	position: relative;
}

@media (max-width: 600px) {
	.a11y-motion-toggle {
		right: 8px;
		bottom: 8px;
		padding: 5px 10px;
	}
}