/* Brandale — the LearnDash course player.
 *
 * Loads after ld30's own stylesheet and after the colour block ld30 generates from
 * the three settings (see inc/learndash.php), so this file gets the last word.
 * Where ld30 writes !important — it does, for most of the colour block — the
 * override has to as well; those are marked. Everywhere else the selectors simply
 * match ld30's own specificity, which is why they read long.
 *
 * Two geometry numbers are ld30's and are restated here because several rules
 * depend on them agreeing: the sidebar is 320px (ld30 ships 350) and the fixed
 * masthead is 64px (ld30 ships 51, which cannot hold the wordmark). Changing either
 * means changing every rule in the LAYOUT block together.
 *
 * Focus Mode replaces the whole page — no theme header, no theme footer — so this
 * file also has to supply the handful of primitives the player needs and global.css
 * only ships alongside the site chrome: the breadcrumb, and readable body copy after
 * the `*{margin:0;padding:0}` reset flattens the lesson content.
 */

/* ---------- LAYOUT ----------
   ld30 hard-codes a 350px rail and a 51px masthead, and five rules have to agree
   on both numbers. They are held here as custom properties so the rail can track
   the viewport — narrow enough not to crowd a 13" laptop, wide enough to hold a
   lesson title on a large monitor — without any of the five drifting apart. */

.learndash-wrapper .ld-focus {
	--ld-rail: clamp(272px, 20vw, 380px);
	--ld-bar: 64px;
	/* How much of the top of the window something else already owns. Only the WP
	   admin bar ever claims any, and only for signed-in staff — but three rules
	   depend on the number, so it is named once. */
	--ld-top: 0px;
	background: var(--paper-50);
}

body.admin-bar .learndash-wrapper .ld-focus {
	--ld-top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .learndash-wrapper .ld-focus {
		--ld-top: 46px;
	}
}

/* ld30 pushes the whole document down by the height of the admin bar a second
   time, on top of the margin WordPress itself already puts on <html>. That was
   clearance for its full-width fixed masthead; the masthead is the width of the
   rail now and the reading column passes nowhere near it, so the 32px was just a
   band of empty paper above the breadcrumb. */
body.ld-in-focus-mode.admin-bar.admin-bar {
	padding-top: 0;
}

/* 100vh, minus whatever the admin bar is holding — otherwise the rail runs 32px
   past the bottom of the window and takes its pinned sign-out row with it. */
.learndash-wrapper .ld-focus .ld-focus-sidebar {
	width: var(--ld-rail);
	height: calc(100vh - var(--ld-top));
	padding-top: var(--ld-bar);
	border-right: 1px solid var(--slate-200);
}

/* ld30 reserves 90px at the foot of the rail and another 90px inside its scroll
   container — dead space held open for a masthead that is no longer here. */
.learndash-wrapper .ld-focus .ld-focus-sidebar,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	padding-bottom: 0;
}

/* And the scroll container is given the space that is actually left rather than
   `height:100%`, which resolved against the whole sidebar and so overshot the bottom
   of the screen by exactly the height of the course-title block above it — carrying
   the sign-out row off-screen with it. A flex column measures that block instead of
   guessing at it, and the title is free to wrap to two lines. */
.learndash-wrapper .ld-focus .ld-focus-sidebar {
	display: flex;
	flex-direction: column;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	flex: 0 0 auto;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

.learndash-wrapper .ld-focus .ld-focus-main {
	margin-left: var(--ld-rail);
	width: calc(100% - var(--ld-rail));
}

/* ld30's masthead is a bar across the whole screen carrying progress, Previous,
   Mark Complete and a user dropdown. Every one of those except progress is repeated
   at the foot of the lesson, a few hundred pixels below — so the bar spent 64px of
   vertical space, and the width of the reading column, saying things twice. It is
   cut back to the rail, where it holds the one thing that was not repeated anywhere:
   the way out. Progress moves into the rail and the dropdown becomes the rail's foot
   (see inc/learndash.php). The reading column starts at the top of the screen. */
.learndash-wrapper .ld-focus .ld-focus-header {
	height: var(--ld-bar);
	right: auto;
	width: var(--ld-rail);
	justify-content: flex-start;
	border-right: 1px solid var(--slate-200);
	/* Paper, not white: the button in this cell is a white button, and a white
	   button on a white bar is only its own 1.5px outline. On paper it reads as an
	   object sitting on a surface, which is what it is. The navy block directly
	   below supplies the edge, so the bar does not need a rule of its own too. */
	background: var(--paper-50);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	display: none;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	width: var(--ld-rail);
}

/* ---------- MASTHEAD ---------- */

/* The cell ld30 fills with the wordmark. inc/learndash.php puts the exit button
   there instead; the cell keeps the rail's width so the button sits over the course
   navigation rather than floating in the middle of the bar. */
.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
	flex: 0 0 var(--ld-rail);
	/* 24px left, so the button's edge lines up with the course title and every row
	   of the navigation under it rather than sitting 4px inside them. */
	padding: 0 20px 0 24px;
	display: flex;
	align-items: center;
	background: transparent;
	height: 100%;
	min-width: 0;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img {
	height: auto;
	max-height: 30px;
	width: auto;
	max-width: 100%;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--navy-800);
	background: var(--white);
	border: 1.5px solid var(--slate-400);
	border-radius: var(--r-btn);
	padding: 10px 16px;
	box-shadow: var(--sh-rest);
	transition: border-color .16s ease-out, color .16s ease-out, background-color .16s ease-out;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard:hover {
	border-color: var(--navy-800);
	color: var(--navy-900);
	background: var(--white);
	box-shadow: var(--sh-hover);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action {
	height: 100%;
	border-right: 1px solid var(--slate-200);
	padding: 0 20px;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action:last-child,
.learndash-wrapper .ld-focus .ld-focus-header .ld-content-action.ld-empty {
	border-right: 0;
}

/* Progress: a data readout, so IBM Plex Mono, per the type scale. */
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-heading {
	margin: 0 0 6px;
}

.learndash-wrapper .ld-progress .ld-progress-stats {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.learndash-wrapper .ld-progress .ld-progress-percentage,
.learndash-wrapper .ld-progress .ld-progress-steps {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0;
}

.learndash-wrapper .ld-progress .ld-progress-percentage {
	color: var(--accent-800) !important; /* ld30 colours this from `secondary` with !important. */
}

.learndash-wrapper .ld-progress .ld-progress-steps {
	color: var(--slate-600);
}

.learndash-wrapper .ld-progress .ld-progress-bar {
	background: var(--paper-200);
	border-radius: var(--r-pill);
	height: 6px;
	overflow: hidden;
	min-width: 140px;
}

.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
	background: var(--accent-500) !important; /* teal = progress, per the palette note. */
	border-radius: var(--r-pill);
	height: 6px;
}

/* ---------- THE PLAYER'S BUTTONS ----------
   ld30 has one "primary" colour doing both links and button fills. The palette
   separates those: purple carries text, teal carries the next action. So the colour
   filter hands ld30 purple for its links and borders, and the buttons are pulled
   back to the site's own .btn shapes here. */

.learndash-wrapper .ld-button,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper #learndash_mark_complete_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1;
	border-radius: var(--r-btn);
	padding: 11px 18px;
	border: 1.5px solid transparent;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color .16s ease-out, border-color .16s ease-out, box-shadow .16s ease-out;
}

/* Mark Complete is the one action the player exists for. Teal fill, navy text — the
   site's .btn-primary. ld30 sets this from `secondary` with !important. */
.learndash-wrapper .learndash_mark_complete_button:not(.ld--ignore-inline-css),
.learndash-wrapper #learndash_mark_complete_button,
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button:not(.ld--ignore-inline-css),
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button {
	background-color: var(--accent-500) !important;
	color: var(--navy-900) !important;
	border-color: var(--accent-500);
}

.learndash-wrapper .learndash_mark_complete_button:hover:not(.ld--ignore-inline-css),
.learndash-wrapper #learndash_mark_complete_button:hover {
	background-color: var(--accent-600) !important;
	opacity: 1 !important;
	box-shadow: var(--sh-hover);
}

/* slate-600 on paper-200 is 5.4:1; slate-500 there is 3.6:1. A disabled control is
   exempt from 1.4.3 but "you have not finished this step yet" is worth reading. */
.learndash-wrapper .learndash_mark_complete_button:disabled,
.learndash-wrapper #learndash_mark_complete_button:disabled {
	background-color: var(--paper-200) !important;
	color: var(--slate-600) !important;
	border-color: var(--paper-200);
	box-shadow: none;
}

/* Previous / Next are secondary: outline, navy text. */
/* A note on specificity, because it bit twice. ld30's generated block writes

     .learndash-wrapper .ld-button:not([disabled]):not(.ld-button-reverse)
       :not(.ld-button-transparent):not(.ld--ignore-inline-css)

   which is (0,6,0) and !important. .learndash-wrapper is already inside it, so
   there is no ancestor left to out-specify it with and the class gets repeated on
   the subject: `.ld-button.ld-button` matches exactly the same elements and carries
   one more point.

   The two rules below are separated by CONTEXT, not by stacking more points on top
   of each other — the first pass had them both matching the step buttons and the
   more specific of my own two won, which is how Previous and Next came out teal
   when they were meant to be purple. body.ld-in-focus-mode is ld30's own body class,
   so "in a lesson" and "not in a lesson" cannot both be true. */

/* Not in a lesson — the course page's Start and Continue. The site's primary. */
body:not(.ld-in-focus-mode) .learndash-wrapper .ld-button.ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld-button-alternate):not(.ld--ignore-inline-css),
body:not(.ld-in-focus-mode) .learndash-wrapper .btn-join.btn-join:not(.ld--ignore-inline-css),
body:not(.ld-in-focus-mode) .learndash-wrapper #btn-join:not(.ld--ignore-inline-css) {
	background-color: var(--accent-500) !important;
	color: var(--navy-900) !important;
	border-color: var(--accent-500) !important;
}

body:not(.ld-in-focus-mode) .learndash-wrapper .ld-button.ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld-button-alternate):not(.ld--ignore-inline-css):hover,
body:not(.ld-in-focus-mode) .learndash-wrapper .btn-join.btn-join:not(.ld--ignore-inline-css):hover,
body:not(.ld-in-focus-mode) .learndash-wrapper #btn-join:not(.ld--ignore-inline-css):hover {
	background-color: var(--accent-600) !important;
	color: var(--navy-900) !important;
	opacity: 1 !important;
	box-shadow: var(--sh-hover);
}

/* In a lesson — Previous and Next. Filled brand-700 with white type on it, 8.8:1.
   They are navigation; Mark Complete beside them stays teal, because filled purple
   and filled teal read as two different kinds of action rather than two of the
   same, and Mark Complete is the one the screen is asking for. */
.ld-focus-content .ld-content-actions .ld-button.ld-button.ld-button:not([disabled]):not(.ld--ignore-inline-css) {
	background-color: var(--brand-700) !important;
	color: var(--white) !important;
	border-color: var(--brand-700) !important;
	box-shadow: none;
}

.ld-focus-content .ld-content-actions .ld-button.ld-button.ld-button:not([disabled]):not(.ld--ignore-inline-css):hover {
	background-color: var(--brand-600) !important;
	color: var(--white) !important;
	border-color: var(--brand-600) !important;
	opacity: 1 !important;
	box-shadow: var(--sh-hover);
}

/* The chevron and the label inside a step button follow its type colour. */
.learndash-wrapper .ld-content-actions .ld-button .ld-icon,
.learndash-wrapper .ld-content-actions .ld-button .ld-text {
	color: currentColor;
}

/* ld30 excludes .ld-button-transparent from its fill, so this only needs to say
   what the outline looks like. It is the masthead's Previous, on mobile. */
.learndash-wrapper .ld-button.ld-button-transparent {
	background-color: transparent !important;
	color: var(--navy-800) !important;
	border-color: var(--slate-400) !important;
}

.learndash-wrapper .ld-button.ld-button-transparent:hover {
	background-color: var(--paper-50) !important;
	border-color: var(--navy-800) !important;
	color: var(--navy-900) !important;
	opacity: 1 !important;
}

.learndash-wrapper .ld-button .ld-text {
	font-weight: 600;
}

.learndash-wrapper .ld-course-step-back {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .84rem;
	font-weight: 600;
	color: var(--accent-800) !important;
}

.learndash-wrapper .ld-course-step-back:hover {
	text-decoration: underline;
}

/* Focus rings match the rest of the site: teal, offset, never removed. */
.learndash-wrapper a:focus-visible,
.learndash-wrapper button:focus-visible,
.learndash-wrapper input:focus-visible {
	outline: 2px solid var(--accent-800) !important;
	outline-offset: 2px;
}

/* ---------- SIDEBAR ---------- */

/* ld30 fills the course heading with a solid slab of its primary colour. A navy
   block is the site's own treatment for a heading band, and it keeps the wordmark
   above it from competing with a second saturated field. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	background-color: var(--navy-900);
	min-height: 78px;
	padding: 16px 46px 16px 24px;
	border-bottom: 1px solid var(--navy-700);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-mode-course-heading-wrapper {
	font-family: 'Inter Tight', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	padding-left: 26px;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a:hover {
	color: var(--white);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-icon-content {
	color: var(--brand-400);
}

/* The collapse handle: a navy disc on the sidebar's edge rather than a blue one. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	background: var(--navy-900) !important;
	border: 2px solid var(--white);
	color: var(--white);
	box-shadow: var(--sh-rest);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:focus .ld-icon {
	background: var(--white) !important;
	border-color: var(--navy-900);
	color: var(--navy-900) !important;
}

/* Progress, moved out of the masthead and under the course title. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-rail-progress {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 16px 24px 18px;
	border-bottom: 1px solid var(--slate-200);
	background: var(--white);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-rail-progress .ld-progress {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-rail-progress .ld-progress-heading {
	margin: 0 0 8px;
}

/* Chapter headings inside the list: a tinted band with the chapter in bold
   mono caps, so a course of ninety-five steps reads as ten chapters at a glance.

   These rules lost in Focus Mode. ld30 writes its own sidebar heading rules at
   higher specificity, so the band came out 16px bold sans, three lines deep in
   a 247px column, with a 16px margin above every chapter - the gap that made the
   list look loose. Written at Focus Mode's own depth, with the margin and padding
   forced, so the same heading looks the same in both places. */
.learndash-wrapper .ld-lesson-item-section-heading,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading {
	margin: 0 !important;
	padding: 9px 16px !important;
	background: var(--paper-100) !important;
	border-top: 1px solid var(--slate-200);
	border-bottom: 1px solid var(--slate-200);
}

/* 12px with .05em tracking fits "CHAPTER 2 - IT & CYBER SECURITY" on one line
   in the 247px the rail leaves; a longer chapter name wraps to a tight second
   line rather than being cut off, since the name is the point of the band. */
.learndash-wrapper .ld-lesson-section-heading,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading .ld-lesson-section-heading {
	display: block;
	font-family: 'IBM Plex Mono', monospace !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--navy-800) !important;
	line-height: 1.35 !important;
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item {
	border-bottom: 1px solid var(--slate-200);
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-table-list-item-preview {
	padding: 13px 24px;
	align-items: flex-start;
}

.learndash-wrapper .ld-course-navigation .ld-lesson-title,
.learndash-wrapper .ld-course-navigation .ld-topic-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--slate-600);
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item:hover .ld-lesson-title,
.learndash-wrapper .ld-course-navigation .ld-table-list-item:hover .ld-topic-title {
	color: var(--navy-900);
}

/* The step you are on. ld30 marks it with its primary colour and bold; the tinted
   band is what carries it on the site's own navigation, so it gets both. */
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson {
	background: var(--brand-50);
	box-shadow: inset 3px 0 0 var(--brand-600);
}

.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-course-navigation .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
	color: var(--brand-700) !important;
	font-weight: 600;
}

.learndash-wrapper .ld-course-navigation .ld-status-icon.ld-status-incomplete {
	border: 2px solid var(--slate-300);
}

.learndash-wrapper .ld-course-navigation .ld-expand-button {
	padding: 0 24px 13px 49px;
	background: transparent !important;
	border: 0;
}

.learndash-wrapper .ld-course-navigation .ld-expand-button .ld-expand-text {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-700) !important;
}

.learndash-wrapper .ld-course-navigation .ld-expand-button .ld-icon-arrow-down {
	background: var(--brand-100) !important;
	color: var(--brand-700) !important;
	border-radius: var(--r-pill);
	padding: 4px;
}

.learndash-wrapper .ld-course-navigation .ld-table-list-item {
	background: var(--paper-50);
	border-top: 1px solid var(--slate-200);
}

/* The paginated step list at the foot of the sidebar. */
.learndash-wrapper .learndash-pager {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--slate-600);
	background: var(--paper-100);
	border-radius: var(--r-pill);
}

/* ---------- USER MENU ---------- */

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
	padding: 0 20px;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-welcome-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .84rem;
	font-weight: 500;
	color: var(--slate-600);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-profile-avatar img {
	border-radius: var(--r-pill);
	border: 1px solid var(--slate-200);
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items {
	border-radius: var(--r-card);
	border: 1px solid var(--slate-200);
	box-shadow: var(--sh-hover);
	overflow: hidden;
	padding: 0;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a {
	background-color: var(--white) !important; /* ld30 fills these from `primary`. */
	color: var(--navy-800) !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 500;
	padding: 11px 16px;
	border-bottom: 1px solid var(--slate-200);
	white-space: nowrap;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:last-child {
	border-bottom: 0;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:hover {
	background-color: var(--paper-50) !important;
	color: var(--accent-800) !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items:before {
	border-bottom-color: var(--white) !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span {
	background-color: var(--navy-900);
	height: 2.5px;
	border-radius: 2px;
}

/* ---------- CONTENT COLUMN ---------- */

/* The lesson is the point of the page, so the column takes the width it is given
   rather than sitting in a 960px letterbox with the xAPI player shrunk inside it.
   It still stops at 1600px: a line of body copy past about 100 characters is
   harder to read, not easier, and the ceiling only binds on very wide monitors.
   Padding-top clears the fixed masthead at every size. */
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content {
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	/* Top padding is set so the breadcrumb sits level with the Return to dashboard
	   button in the rail beside it, rather than starting the lesson a band of empty
	   paper below the top of the screen. */
	padding: clamp(16px, 1.6vw, 22px) clamp(20px, 3.4vw, 56px) clamp(56px, 6vw, 96px);
}

/* Prose wants a measure; the player and anything else full-bleed does not. */
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > p,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > ul,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > ol,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > blockquote {
	max-width: 74ch;
}

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1 {
	font-family: 'Inter Tight', sans-serif;
	font-weight: 700;
	font-size: clamp(1.65rem, 1.1rem + 1.6vw, 2.15rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--navy-900);
	margin: 0 0 10px;
	text-wrap: balance;
}

/* ---------- BREADCRUMB ----------
   inc/learndash.php prints the site's own .crumbs above the title and this hides
   ld30's list, which sits below it. The rules are the ones in proto-shared.css —
   restated because Focus Mode replaces the page and that file is not loaded here.
   Keep the two in step. */

.learndash-wrapper .ld-focus-content .ld-breadcrumbs .ld-breadcrumbs-segments {
	display: none;
}

.learndash-wrapper .ld-focus-content .crumbs,
.ld-focus-content .crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--slate-600);
	margin: 0 0 12px;
	line-height: 1.4;
}

.ld-focus-content .crumbs a {
	color: var(--slate-600);
}

.ld-focus-content .crumbs a:hover {
	color: var(--accent-800);
	text-decoration: underline;
}

.ld-focus-content .crumbs svg {
	width: 13px;
	height: 13px;
	color: var(--slate-400);
	flex-shrink: 0;
}

.ld-focus-content .crumbs .here {
	color: var(--brand-700);
}

/* What is left of ld30's info bar once the list is hidden: the status pill. It reads
   as a caption under the title rather than a bar of its own. */
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-lesson-status,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-topic-status {
	margin: 0 0 14px;
	padding: 0;
	background: transparent;
	border: 0;
}

.learndash-wrapper .ld-focus-content .ld-breadcrumbs {
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
}

.learndash-wrapper .ld-status {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	padding: 5px 12px;
	line-height: 1.4;
}

.learndash-wrapper .ld-status.ld-status-progress,
.learndash-wrapper .ld-primary-background.ld-status {
	background-color: var(--brand-100) !important;
	color: var(--brand-700) !important;
	border: 1px solid var(--brand-300);
}

.learndash-wrapper .ld-status.ld-status-complete,
.learndash-wrapper .ld-secondary-background.ld-status {
	background-color: var(--accent-100) !important;
	color: var(--accent-800) !important;
	border: 1px solid var(--accent-200);
}

/* ld30 paints .learndash-wrapper white. Inside Focus Mode that lands as a slab
   covering everything from the info bar down, leaving the breadcrumb and title on
   paper above it — a seam across the middle of the lesson. The ground is the page's;
   the white belongs to the cards standing on it. */
.ld-focus .ld-focus-content .learndash,
.ld-focus .ld-focus-content .learndash-wrapper,
.ld-focus .ld-focus-content .learndash-wrap,
.ld-focus .ld-focus-content .learndash-shortcode-wrap,
.ld-focus .ld-focus-content .ld-tabs,
.ld-focus .ld-focus-content .ld-tabs-content,
.ld-focus .ld-focus-content .ld-tab-content {
	background-color: transparent;
}

/* ---------- LESSON BODY ----------
   global.css opens with `*{margin:0;padding:0}` for the site's own components. The
   lesson body is authored prose and needs its rhythm back. */

.ld-focus-content .ld-tab-content > p,
.ld-focus-content .ld-tab-content > ul,
.ld-focus-content .ld-tab-content > ol,
.ld-focus-content .ld-tab-content > blockquote,
.ld-focus-content .ld-tab-content > table {
	margin: 0 0 1.15em;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--slate-600);
}

.ld-focus-content .ld-tab-content > ul,
.ld-focus-content .ld-tab-content > ol {
	padding-left: 1.35em;
}

.ld-focus-content .ld-tab-content li {
	margin-bottom: .45em;
}

.ld-focus-content .ld-tab-content h2,
.ld-focus-content .ld-tab-content h3,
.ld-focus-content .ld-tab-content h4 {
	font-family: 'Inter Tight', sans-serif;
	color: var(--navy-900);
	margin: 1.6em 0 .5em;
	letter-spacing: -.01em;
}

.ld-focus-content .ld-tab-content h2 { font-size: 1.4rem; }
.ld-focus-content .ld-tab-content h3 { font-size: 1.15rem; }
.ld-focus-content .ld-tab-content h4 { font-size: 1rem; }

.ld-focus-content .ld-tab-content a:not(.ld-button) {
	color: var(--accent-800);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ld-focus-content .ld-tab-content img,
.ld-focus-content .ld-tab-content iframe {
	max-width: 100%;
	border-radius: var(--r-card);
}

/* The xAPI player and any embedded video sit on a card, so a 16:9 frame does not
   float on the page background with nothing holding it. */
.ld-focus-content .grassblade,
.ld-focus-content .ld-video,
.ld-focus-content .wp-video {
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--r-panel);
	box-shadow: var(--sh-rest);
	overflow: hidden;
}

.ld-focus-content .grassblade .grassblade_iframe {
	display: block;
	border-radius: 0;
}

/* ld30's tab strip, on the single-tab lessons that make up most of the courses,
   is a rule with nothing above it. */
.learndash-wrapper .ld-tabs.ld-tab-count-1 > .ld-tabs-navigation {
	display: none;
}

.learndash-wrapper .ld-tabs .ld-tabs-content {
	padding: 0;
}

/* ---------- FOOT OF THE LESSON ---------- */

.learndash-wrapper .ld-focus-content .ld-content-actions {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--slate-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ld30 pads each cell 16px and the Back to Course link another 20px on top, which
   on a phone made a 112px-tall cell out of one line of text. The row's own gap does
   that spacing. (0,5,0) and (0,6,0), to clear ld30's :not() chains.) */
.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 0;
	padding: 0;
}

.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action .ld-course-step-back.ld-course-step-back {
	padding: 6px 0;
	margin: 0;
	font-size: .875rem;
}

/* ld30 draws a checkmark glyph on the mark-complete form as well as inside the
   button, in white — which works in its masthead, where it sits on a coloured fill,
   and here leaves a ghost floating on the paper and a hundred pixels of dead height
   in the middle of the row. The button says it; the form does not need to. */
.learndash-wrapper .ld-focus .ld-focus-content .sfwd-mark-complete.sfwd-mark-complete::after,
.learndash-wrapper .ld-focus .ld-focus-content #sfwd-mark-complete::after {
	display: none !important;
	content: none !important;
}

/* ---------- ALERTS ---------- */

.learndash-wrapper .ld-alert {
	border-radius: var(--r-card);
	border: 1px solid var(--slate-200);
	background: var(--white);
	color: var(--slate-600);
	font-size: .94rem;
}

.learndash-wrapper .ld-alert-success {
	border-color: var(--accent-200);
	background: var(--accent-50) !important;
	color: var(--accent-800);
}

.learndash-wrapper .ld-alert-warning {
	border-color: var(--slate-300);
	background: var(--paper-50);
}

/* ---------- SMALL SCREENS ----------
   Below 1024px ld30 turns the sidebar into an overlay driven by the burger and drops
   the main column's offset, so only the widths restated above need correcting. */

@media (max-width: 1024px) {
	/* ld30 turns the rail into an overlay driven by the burger and drops the main
	   column's offset; the rail keeps its own width so the overlay still holds a
	   lesson title, but it must not exceed the screen it is sliding over. */
	.learndash-wrapper .ld-focus {
		--ld-rail: min(320px, 86vw);
	}

	.learndash-wrapper .ld-focus .ld-focus-main {
		margin-left: 0;
		width: 100%;
	}

	/* The rail is an overlay here, so a rail-width bar would be a box floating over
	   the lesson. It spans the screen again, and the column clears it again. */
	.learndash-wrapper .ld-focus .ld-focus-header {
		right: 0;
		width: auto;
		border-right: 0;
	}

	.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
		flex: 0 1 auto;
		padding: 0 16px;
	}

	/* Full width again, so the bar needs its own edge back — there is no navy block
	   under it here. */
	.learndash-wrapper .ld-focus .ld-focus-header {
		border-bottom: 1px solid var(--slate-200);
	}

	/* ld30's own small-screen rule is
	   `.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content`
	   at (0,5,0) — and the rail IS collapsed here, so it applied and my (0,4,0)
	   clearance did not. The result was the breadcrumb sitting under the fixed bar.
	   Repeating the class takes it to (0,6,0). */
	.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main .ld-focus-content.ld-focus-content,
	.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content.ld-focus-content {
		margin: 0 auto;
		padding: calc(var(--ld-bar) + 20px) clamp(20px, 3.4vw, 56px) 64px;
	}
}

@media (max-width: 768px) {
	.learndash-wrapper .ld-focus {
		--ld-bar: 56px;
	}

	/* Three things cannot share 56px. The progress figures are the ones repeated
	   inside the course itself, so they are the ones that go. */
	.learndash-wrapper .ld-focus .ld-focus-header .ld-progress {
		display: none;
	}

	.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img {
		max-height: 24px;
	}

	/* The burger, the exit and Mark Complete cannot all keep their words at this
	   width. The arrow alone is understood here, and the link text stays in the
	   accessibility tree for anyone who is not reading the shape. */
	.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.learndash-wrapper .ld-focus .ld-focus-header .ld-to-dashboard {
		padding: 9px 11px;
	}

	.learndash-wrapper .ld-focus .ld-focus-header .ld-user-welcome-text {
		display: none;
	}

	/* ld30 stacks the step buttons column-REVERSE and then puts Back to Course on
	   order:1, which lands as Next, Back, Previous — the row read backwards. Its
	   selectors are (0,4,0) and (0,5,1); these are (0,5,0) and (0,6,0). */
	.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:nth-child(1),
	.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:nth-child(2),
	.learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:nth-child(3) {
		order: 0;
		width: 100%;
		justify-content: center;
	}

	.learndash-wrapper .ld-focus-content .ld-button,
	.learndash-wrapper .ld-focus-content .learndash_mark_complete_button {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.learndash-wrapper .ld-button,
	.learndash-wrapper .learndash_mark_complete_button {
		transition: none;
	}
}

/* ==========================================================================
   THE LESSON PLAYER BAR
   The row under the player: where you are on the left, what unlocks the next
   lesson in the middle, full screen on the right.

   The player is the cia-membership-hub plugin's, and so is the call on when a
   module is finished - its script adds .is-done and un-hides the button at the
   last screen. These rules only arrange and restyle what it renders; they
   change none of its behaviour, and every selector is scoped to the body class
   the plugin sets on a step it plays.
   ========================================================================== */

/* LearnDash prints the status in the breadcrumb trail. lesson-player.js moves
   it under the player; this hides it where it started so it does not flash
   there first. */
body.cmh-xapi-step .ld-lesson-status .ld-status {
	display: none !important;
}

/* Three columns, the outer two equal, so the middle is the true centre of the
   player rather than the gap left over between two unequal things. */
body.cmh-xapi-step .cmh-xapi__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 16px;
	margin-top: 16px;
}

body.cmh-xapi-step .cmh-xapi__status {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	margin: 0;
}

body.cmh-xapi-step .cmh-xapi__hint,
body.cmh-xapi-step .cmh-xapi__cta {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	margin: 0;
}

body.cmh-xapi-step .cmh-xapi__full {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

body.cmh-xapi-step .cmh-xapi__hint {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--slate-600);
	text-align: center;
}

/* The sentence becomes the button - keyed to the button's own visibility and
   nothing else. Not .is-done: the plugin sets that as soon as the package
   reports finished, but Mark Complete also waits for the last slide, so for a
   while .is-done is on and the button is still hidden. Keying off .is-done hid
   the sentence in that gap and left the middle of the bar empty. */
body.cmh-xapi-step .cmh-xapi__bar:has(.cmh-xapi__cta:not([hidden])) .cmh-xapi__hint {
	display: none;
}

body.cmh-xapi-step .cmh-xapi__cta[hidden] {
	display: none !important;
}

/* Mark Complete in the brand purple. The one purple button on the site, and it
   earns the exception: it is the single most important action on the page, and
   it has to read as a reward for finishing rather than as one more control. */
body.cmh-xapi-step .cmh-xapi__cta {
	padding: 15px 36px;
	border: 0;
	border-radius: 999px;
	background: var(--brand-600);
	color: #fff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.005em;
	box-shadow: 0 8px 22px rgba(91, 87, 196, .30);
}

body.cmh-xapi-step .cmh-xapi__cta:hover {
	background: var(--brand-700);
}

/* The plugin focuses the button the moment it appears, and the site-wide teal
   ring - written with !important - drew a green outline round a purple button.
   A focus ring stays, because keyboard users need it; it is purple now. */
body.cmh-xapi-step .cmh-xapi__cta:focus-visible {
	outline: 3px solid var(--brand-300) !important;
	outline-offset: 3px;
}

/* On a phone the middle line will not fit beside the other two, so status and
   full screen share the top row and the sentence or button takes its own. */
@media (max-width: 640px) {
	body.cmh-xapi-step .cmh-xapi__bar {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	body.cmh-xapi-step .cmh-xapi__full {
		grid-column: 2;
	}

	body.cmh-xapi-step .cmh-xapi__hint,
	body.cmh-xapi-step .cmh-xapi__cta {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}