/*
 * Accessibility fixes (WCAG 2.1 AA). Visible changes are limited to: a focus outline for keyboard users,
 * slightly darker faint text and buttons, and underlined links inside sentences.
 */

/* Item 1: keyboard focus outline on every page. :focus-visible leaves mouse clicks unchanged. */
:root {
	--jdg-focus: #1d4ed8;
}
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 {
	outline: 3px solid var(--jdg-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #fff !important;
}

/* Item 5: the closed phone menu is invisible, so it must not take keyboard focus either. */
@media (max-width: 767.98px) {
	.navbar-collapse.collapse:not(.show):not(.collapsing) {
		visibility: hidden;
	}
}

/* Item 3/5: the closed lesson menu (phone and tablet) and the desktop focus-mode menu are moved off-screen and faded,
   not hidden, so VoiceOver read them and Tab reached them. Hide them once the closing animation has finished. */
@media (max-width: 991.98px) {
	html .course-sidebar:not(.sidebar-expanded-mobile) {
		visibility: hidden;
		transition: opacity .3s .3s, bottom .5s .1s, visibility 0s .6s !important;
	}
	html .course-sidebar.sidebar-expanded-mobile {
		visibility: visible;
		transition: opacity .5s, bottom .5s, visibility 0s !important;
	}
	/* The theme makes an expanded section visible on its own; let it follow the menu. */
	html .course-sidebar:not(.sidebar-expanded-mobile) .course-sidebar-inner .plume-expanded + .ld-lesson-section {
		visibility: inherit;
	}
	/* "Show lessons" fades out while the menu is open. */
	.plume-lesson-menu-expand.sidebar-expanded {
		visibility: hidden;
	}
}
@media (min-width: 992px) {
	.focus-mode .course-sidebar {
		visibility: hidden;
		transition: all .5s .25s, visibility 0s .75s;
	}
	html .focus-mode .course-sidebar .course-sidebar-inner .plume-expanded + .ld-lesson-section {
		visibility: inherit;
	}
}

/* Item 2: faint text and buttons darkened to at least 4.5:1. Same hues, slightly deeper. */
/* Field labels are faint until the field is used (.active turns them brand blue); only the faint state changes. */
.plume-login-form form p:not(.login-remember) label:not(.active) {
	color: #646373; /* was #cdccd8 */
}
.login-form .btn-danger,
.login-form #wp-submit.btn-danger {
	background-color: #d93349; /* was #f8485e */
	border-color: #d93349;
}
.buttons-box-block .button-item[style*="84,135,191"],
.buttons-box-block .button-item[style*="84, 135, 191"] {
	background: #3e72ab !important; /* was #5487bf */
}
.buttons-box-block .button-item[style*="127,165,207"],
.buttons-box-block .button-item[style*="127, 165, 207"] {
	background: #4878ae !important; /* was #7fa5cf */
}
/* The "Get started" buttons had no hover or pressed state, and only their text was clickable. Darkening keeps the
   white text above 4.5:1. */
.buttons-box-block .button-item {
	transition: filter .15s ease-out, transform .15s ease-out;
}
.buttons-box-block .button-item:hover,
.buttons-box-block .button-item:focus-within {
	filter: brightness(.85);
}
.buttons-box-block .button-item:active {
	filter: brightness(.75);
	transform: translateY(1px);
}
.buttons-box-block .button-item a {
	width: 100%;
}
@media (prefers-reduced-motion: reduce) {
	.buttons-box-block .button-item {
		transition: none;
	}
}
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p,
.testimonial-footer .city.text-muted {
	color: #6b6b6b !important; /* was #848484 */
}
html:root {
	--jdg-text-muted: #5c677a; /* dashboard grey text, was #758196 */
}
.lesson-item-status.text-muted {
	color: #5f6368 !important; /* "Not Complete", was #7e8184 / #848484 */
}

/* Item 6: links inside a sentence are underlined, so they do not rely on colour alone. */
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-link,
.jdg-account__footnote a,
.jdg-enroll p a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Item 7: focus outline on the comparison table's scroll area. */
.comparison-table-wrapper:focus-visible {
	outline: 3px solid var(--jdg-focus) !important;
	outline-offset: 3px;
}

/* Text for screen readers only (course progress label, "Place order" hint). */
.jdg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Banner buttons ("Find the package that fits you", "Talk to Seida..."): the theme fixes them at 55px high, so a label
   that wraps spills out below the button. Keep the label on one line where there is room; let the button grow on phones. */
html .whiteBtn_banner,
html .tarnsBtn_banner {
	height: auto;
	min-height: 55px;
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
@media (min-width: 768px) {
	html .whiteBtn_banner,
	html .tarnsBtn_banner {
		width: auto;
		padding-left: 36px;
		padding-right: 36px;
	}
	html .whiteBtn_banner a,
	html .tarnsBtn_banner a {
		white-space: nowrap;
	}
}

/* Admissions comparison buttons ("Get started with Core/Targeted Admissions"): the theme fixes them at 55px high in a
   narrow card, so on laptops the label spilled out as white text on the pale card. Let them grow and use more width. */
html body .price-button {
	display: block;
	height: auto !important;
	text-align: center;
}
html body .price-button a {
	height: auto !important;
	min-height: 55px;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.25 !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	white-space: normal;
}
@media (min-width: 992px) and (max-width: 1399.98px) {
	html body .price-package-box .price-button {
		margin-left: -30px;
		margin-right: -30px;
	}
	html body .price-package-box .price-button a {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* Sales-page enroll buttons: the coloured box is a div and only the link text inside it was clickable (Seida, 9 Nov).
   The link now covers the whole box. The box needs a positioning context; nothing visible changes. */
.price-button,
.button-item,
.enroll-blue-btn,
.enroll-white-btn {
	position: relative;
}
.price-button > a::after,
.button-item > a::after,
.enroll-blue-btn > a::after,
.enroll-white-btn > a::after {
	content: "";
	position: absolute;
	inset: 0;
}