/*
Theme Name: Themify Ultra Child
Description: A child theme of Themify Ultra
Template: themify-ultra
Author: ALTUSAviationAdmin (brandon@altusaviation.co.za)
Version: 2.3.3
*/

/* ==========================================================================
   ALTUS portal stylesheet - portal.altusaviation.co.za
   --------------------------------------------------------------------------
   Prefix: altus-ld-   (the main site uses altus-nv- - never mix the two)
   Tokens: 01-Brain/brand-system.md v2 (light). No off-brand values here.

   Bump the Version header above on every change - it is the ?ver cache-buster.

   Migrated 2026-07-28 from the Code Snippet "Global Focus Mode"
   (see 60-Portal/portal-snippet-audit.md). Behaviour preserved; values
   retokenised to brand-system.md; the 258 !important declarations dropped in
   favour of an ancestor-prefixed selector (html body.ld-in-focus-mode ...),
   which outranks LearnDash's own .learndash-wrapper rules regardless of
   stylesheet load order.
   ========================================================================== */

:root {
	--altus-white:      #FFFFFF;
	--altus-cloud:      #F6F7F9;
	--altus-ink:        #14181F;
	--altus-body:       #3D434C;
	--altus-secondary:  #6A7078;
	--altus-border:     #E7E9ED;
	--altus-red-top:    #F43745;
	--altus-red-bottom: #A82630;
	--altus-red-link:   #D32B38;
	--altus-red-tint:   rgba(244, 55, 69, 0.06);
	--altus-red-edge:   rgba(244, 55, 69, 0.28);
	--altus-green:      #1FA971;
	--altus-gradient:   linear-gradient(180deg, #F43745 0%, #A82630 100%);

	--altus-shadow:      0 1px 3px rgba(20, 24, 31, 0.06);
	--altus-shadow-lift: 0 8px 20px rgba(20, 24, 31, 0.08);
	--altus-radius:      12px;
	--altus-radius-btn:  8px;

	/* Webfonts are NOT yet enqueued on the portal; these stacks degrade to
	   system faces until they are. See the audit doc. */
	--altus-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--altus-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   LearnDash Focus Mode - the frame every Topic page renders inside
   ========================================================================== */

html { scroll-padding-top: 80px; }

html body.ld-in-focus-mode { background-color: transparent; overflow-x: hidden; }

html body.ld-in-focus-mode .learndash-wrapper h1,
html body.ld-in-focus-mode .learndash-wrapper h2,
html body.ld-in-focus-mode .learndash-wrapper h3 {
	font-family: var(--altus-font-head);
	color: var(--altus-ink);
}

html body.ld-in-focus-mode .learndash-wrapper p,
html body.ld-in-focus-mode .learndash-wrapper a,
html body.ld-in-focus-mode .learndash-wrapper div,
html body.ld-in-focus-mode .learndash-wrapper span:not(.ld-icon):not([class*="ld-icon-"]):not(.ld-svgicon) {
	font-family: var(--altus-font-body);
}

html body.ld-in-focus-mode .learndash-wrapper p { color: var(--altus-body); line-height: 1.65; }

/* --- Focus header -------------------------------------------------------- */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header {
	background-color: var(--altus-white);
	border-bottom: 1px solid var(--altus-border);
	box-shadow: var(--altus-shadow);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header > div {
	border-right: none; border-left: none;
	display: flex; align-items: center; height: 100%;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu {
	border-left: 1px solid var(--altus-border);
	padding-left: 16px; margin-left: 8px;
	position: relative; z-index: 500;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-brand-logo img {
	max-height: 36px; max-width: 160px; object-fit: contain; margin: 0 auto;
}

/* The focus-mode masthead progress bar is removed. Andre's ruling 2026-08-04.
   It reported the COURSE (30%, 4/13) while sitting directly above Air Law's own
   bar (36%, 4/11), two numbers with nothing saying which was which. The course
   page keeps its own Course Progress bar; this is the masthead only. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-progress {
	display: none;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-mobile-nav {
	display: flex; margin-right: 16px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-welcome-text {
	color: var(--altus-ink); font-weight: 600; font-size: 14px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-profile-avatar img {
	border-radius: var(--altus-radius); width: 44px; height: 44px;
	object-fit: cover; margin-left: 8px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-content-actions a.ld-button {
	border-radius: 999px;
	font-family: var(--altus-font-head);
	font-size: 13px; font-weight: 600;
	background: var(--altus-cloud);
	color: var(--altus-ink);
	border: 1px solid var(--altus-border);
	padding: 6px 16px; min-height: 44px;
	display: inline-flex; align-items: center; align-self: center;
	flex: 0 0 auto; width: auto;
	white-space: nowrap; box-shadow: none;
	transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-content-actions a.ld-button:hover,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-content-actions a.ld-button:focus-visible {
	background-color: var(--altus-red-bottom);
	background-image: var(--altus-gradient);
	color: var(--altus-white);
	border-color: var(--altus-red-bottom);
}

/* --- Profile dropdown ---------------------------------------------------- */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: var(--altus-radius);
	box-shadow: var(--altus-shadow-lift);
	padding: 12px; min-width: 176px; margin-top: 8px; z-index: 600;
}

/* LearnDash's caret is off, and this pseudo-element is reused as the hover
   bridge across the 8px gap between the account button and the menu. Without it
   the pointer leaves .ld-user-menu on the way down, the :hover rule drops and the
   menu closes before it can be clicked - the portal's only navigation was
   present and unreachable. Height is the 8px margin plus the 1px border. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items::before {
	content: ""; display: block; position: absolute;
	top: -9px; left: 0; right: auto; bottom: auto;
	width: 100%; height: 9px;
	border: 0; background: transparent; z-index: 1;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([href*="logout"]) {
	display: block; border: none;
	border-radius: var(--altus-radius-btn);
	padding: 10px 16px; margin-bottom: 4px;
	background: transparent; box-shadow: none;
	font-family: var(--altus-font-body);
	font-size: 13px; font-weight: 500;
	color: var(--altus-ink); text-decoration: none;
	transition: background-color 400ms ease, color 400ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([href*="logout"]):hover,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([href*="logout"]):focus-visible {
	background-color: var(--altus-red-bottom); color: var(--altus-white);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"] {
	display: block; text-align: center;
	background-color: var(--altus-red-bottom);
	background-image: var(--altus-gradient);
	color: var(--altus-white); font-weight: 600;
	padding: 10px 16px; margin-top: 12px; margin-bottom: 0;
	border-radius: var(--altus-radius-btn);
	transition: filter 400ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:hover,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-menu-items a[href*="logout"]:focus-visible {
	filter: brightness(0.92); color: var(--altus-white);
}

/* --- Sidebar / course navigation ---------------------------------------- */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading {
	background-color: var(--altus-white);
	border-bottom: 1px solid var(--altus-border);
	width: 100%; max-width: 100%; box-sizing: border-box; padding: 16px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading a,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading span:not(.ld-icon) {
	font-family: var(--altus-font-head);
	color: var(--altus-ink); font-weight: 600; font-size: 14px; line-height: 1.4;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar-wrapper,
html body.ld-in-focus-mode .learndash-wrapper .ld-course-navigation {
	overscroll-behavior: contain; padding-bottom: 180px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-expand-button {
	background: transparent; border: none; box-shadow: none; padding: 0;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-expand-button .ld-text,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-expand-button .ld-expand-text {
	font-family: var(--altus-font-head);
	color: var(--altus-secondary);
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.12em;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-expand-button .ld-icon {
	background-color: var(--altus-red-bottom); color: var(--altus-white);
	border: none; border-radius: 50%; padding: 4px; font-size: 10px; margin-left: 6px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-item {
	background-color: var(--altus-cloud);
	margin: 8px 16px;
	border: 1px solid var(--altus-border);
	border-radius: var(--altus-radius);
	transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-item:hover {
	background-color: var(--altus-white);
	border-color: var(--altus-red-edge);
	box-shadow: var(--altus-shadow);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson {
	background-color: var(--altus-red-tint);
	border: 1px solid var(--altus-red-edge);
	border-left: 4px solid var(--altus-red-bottom);
}

@media (min-width: 1025px) {
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-trigger { display: none; }

	/* Sidebar width and .ld-focus-main margins are deliberately NOT set here.
	   LearnDash owns Focus Mode geometry and its sidebar can sit left or right
	   (this install: right). The inherited snippet forced margin-left:250px against
	   a right-hand sidebar, which is what squeezed the content column to ~440px.
	   This stylesheet skins colour, type and surface only. 2026-07-28. */
}

@media (max-width: 1024px) {
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-trigger {
		background: transparent; color: var(--altus-ink); border: none; box-shadow: none;
	}
}

/* --- Reading width -------------------------------------------------------
   Diagnosed 2026-07-28 on a 2560px viewport: .ld-focus was capped at 1040px by
   Themify's site-width container, LearnDash reserves 350px of it for the sidebar,
   and .ld-focus-content added 80px padding each side. Net text column: ~530px.
   Focus Mode is a full-screen reading surface and must not inherit the theme's
   brochure container. Sidebar side stays a LearnDash setting
   (currently ld-focus-position-right). */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus {
	width: 100%;
	max-width: none;
}

/* Reading measure itself is a LearnDash setting, NOT code:
   Settings > Themes > LearnDash 3.0 > Focus Mode Content Width (set to 1600px).
   Only the padding is trimmed here - LearnDash ships 80px a side, which cost
   160px of text width on every module page. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
	padding: 40px clamp(16px, 3vw, 56px);
}

/* --- Content canvas ----------------------------------------------------- */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-main { background-color: transparent; }

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
	background-color: var(--altus-white);
	box-sizing: border-box;
	border: 1px solid var(--altus-border);
	border-radius: var(--altus-radius);
	box-shadow: var(--altus-shadow);
	/* padding / margin / width / max-width left to LearnDash - see note above. */
}

html body.ld-in-focus-mode .learndash-wrapper h1.ld-title {
	font-family: var(--altus-font-head);
	color: var(--altus-ink); font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
	border-bottom: 1px solid var(--altus-border);
	padding-bottom: 12px; margin: 0 0 20px;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-breadcrumbs * {
	white-space: normal; overflow: visible; color: var(--altus-secondary);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-breadcrumbs a {
	color: var(--altus-red-link); font-weight: 600; text-decoration: underline;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-progress-bar__label--complete,
html body.ld-in-focus-mode .learndash-wrapper .ld-progress-bar__label--complete svg {
	color: var(--altus-green); fill: var(--altus-green);
}

#altus-ld-focus-credit {
	width: 90%; max-width: 1200px; margin: 0 auto;
	padding: 0 20px 40px; text-align: center;
	font-family: var(--altus-font-body);
	font-size: 13px; color: var(--altus-secondary);
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 768px) {
	html body.ld-in-focus-mode { background-color: var(--altus-white); }

	html body.ld-in-focus-mode .learndash-wrapper .ld-breadcrumbs,
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-content-actions { display: none; }

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header {
		position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box;
		display: flex; justify-content: space-between; align-items: center;
		padding: 10px 16px; height: auto; margin: 0; z-index: 800;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header > div { height: auto; margin: 0; }

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-mobile-nav {
		order: 1; flex: none; width: 70px; justify-content: flex-start; padding: 0;
	}
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-brand-logo {
		order: 2; flex: 1; justify-content: center; text-align: center;
	}
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu {
		order: 3; flex: none; width: 70px;
		display: flex; align-items: center; justify-content: flex-end;
		padding-right: 0; border: none;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-user-welcome-text { display: none; }

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu .ld-profile-avatar img {
		min-width: 44px; min-height: 44px; flex-shrink: 0;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu::before {
		content: "\25BC"; font-size: 10px; color: var(--altus-secondary); margin-right: 8px;
	}
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-user-menu::after { display: none; }

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-main {
		margin-top: 60px; margin-bottom: 0; padding-bottom: 0;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
		width: 100%; margin: 0; padding: 24px 16px 0; box-sizing: border-box;
		border: none; border-radius: 0; box-shadow: none; background-color: transparent;
	}

	#learndash-page-content { padding-bottom: 0; margin-bottom: 0; }

	#altus-ld-focus-credit {
		box-sizing: border-box; width: 100%; margin-top: 0;
		padding: 16px 20px 40px; background-color: var(--altus-cloud);
	}

	/* 100dvh replaces the old 200px ::after white-block hack - dvh accounts
	   for the iOS toolbar, so there is nothing left to mask. */
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar {
		position: fixed; top: 0; left: 0;
		width: 100%; max-width: 100vw; height: 100dvh;
		margin: 0; box-sizing: border-box;
		background-color: var(--altus-white);
		overscroll-behavior: contain; z-index: 900;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar-wrapper,
	html body.ld-in-focus-mode .learndash-wrapper .ld-course-navigation {
		height: 100%; padding-bottom: 300px;
	}

	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-trigger {
		display: flex; flex-grow: 1; align-items: center; justify-content: flex-end;
		background: transparent; border: none;
		color: var(--altus-red-bottom); font-size: 26px;
		padding: 10px; margin-right: 16px;
	}
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon { display: none; }
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-focus-sidebar-trigger::after {
		content: "\2715"; font-weight: 600;
	}
}

/* --- Accessibility ------------------------------------------------------ */

html body.ld-in-focus-mode .learndash-wrapper a:focus-visible,
html body.ld-in-focus-mode .learndash-wrapper button:focus-visible {
	outline: 2px solid var(--altus-red-bottom); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html body.ld-in-focus-mode .learndash-wrapper * {
		transition: none !important; animation: none !important;
	}
}


/* ==========================================================================
   Focus Mode - measured fixes
   --------------------------------------------------------------------------
   PERMANENT. These were previously bundled inside a block labelled TEMPORARY
   OVERRIDE LAYER, which was misleading: only the max-width reset and the
   font-family blanket in that block were temporary. Those two existed solely to
   beat the Customizer's global .learndash-wrapper rule, and both are gone as of
   v1.1.0 because that CSS now lives in this file instead (see below).
   The three fixes here are measured and stay.
   ========================================================================== */

/* LearnDash ships 80px of side padding on the reading canvas, which cost 160px
   of text width on every module page. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
	padding: 40px clamp(16px, 3vw, 56px) !important;
}

/* Legacy single-column Themify rows in Focus Mode.
   Build-guide gotcha 3: column ratios come from the row's sizes.desktop_size, and
   these legacy lesson rows declare tb_col_count_1 while their grid template is
   "561px 561px 0px 0px ..." - two half tracks - so the text sat in the first half.
   A row that declares one column should have one full-width track. The Phase 3
   master layout sets desktop_size correctly; this keeps existing content readable
   until it is rebuilt. */
html body.ld-in-focus-mode .learndash-wrapper .row_inner.tb_col_count_1 {
	grid-template-columns: 1fr !important;
}

/* Mobile horizontal overflow.
   Measured 2026-07-28 at a 375px viewport: document scrollWidth was 750px, exactly
   double. LearnDash parks the mobile course-navigation sidebar off-canvas to the
   RIGHT at x=375..750 using position:absolute written inline by its own slide
   animation, so it extends the document rather than being clipped. Overriding that
   inline position would fight the animation; clipping the root is the safe fix.
   overflow-x:clip (not hidden) avoids creating a scroll container, so nothing
   sticky or fixed inside Focus Mode changes behaviour. */
@media (max-width: 1024px) {
	html:has(body.ld-in-focus-mode) {
		overflow-x: clip;
	}
	html body.ld-in-focus-mode {
		overflow-x: clip;
		max-width: 100%;
	}
}


/* ==========================================================================
   Course landing page - the course shell
   --------------------------------------------------------------------------
   Migrated 2026-07-28 from the Customizer's Additional CSS (Appearance >
   Customise > Additional CSS), banner "ALTUS GLOBAL COURSE LANDING PAGE".
   That was a FOURTH inherited source of custom CSS beyond the three Code
   Snippets: 5 KB, 89 !important, loading inline after this stylesheet.

   Three things changed in the move, and only these three:

   1. SCOPED. The original opened with a bare .learndash-wrapper rule setting
      font-family, max-width:1040px and margin. Bare, it hit every LearnDash
      page including Focus Mode, which is what crushed module pages to a ~530px
      text column. It is now scoped to body.single-sfwd-courses, which is the
      only place it was ever meant to apply.
   2. RETOKENISED. Poppins/Montserrat -> the brand stacks. #EF3D4A -> the brand
      red. #10b981 -> the brand status green. #111827/#6b7280 -> brand ink and
      secondary. Radii -> the brand scale.
   3. !important DROPPED. 89 of them existed because the CSS was injected inline
      and had to out-shout LearnDash. From here, an ancestor-prefixed selector
      wins on specificity instead.

   The DESIGN INTENT is unchanged and deliberately so - the card, the row list,
   the hover lift, the progress bar and the status pills are the previous
   developer's work and Andre's ruling 2026-07-28 was to carry that vision
   forward, built correctly. Phase 3 replaces this page properly; until then
   this keeps it presentable and on-brand.
   ========================================================================== */

body.single-sfwd-courses .learndash-wrapper {
	font-family: var(--altus-font-body);
	max-width: 1080px;
	margin: 40px auto 80px;
}

/* Master course container */
body.single-sfwd-courses .learndash-wrapper .ld-course-wrap,
body.single-sfwd-courses .learndash-wrapper #ld-course-wrap {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: var(--altus-radius);
	box-shadow: var(--altus-shadow);
	padding: 40px 48px;
}

@media (max-width: 767px) {
	body.single-sfwd-courses .learndash-wrapper .ld-course-wrap,
	body.single-sfwd-courses .learndash-wrapper #ld-course-wrap {
		padding: 24px 20px;
	}
}

body.single-sfwd-courses .learndash-wrapper h1,
body.single-sfwd-courses .learndash-wrapper h2,
body.single-sfwd-courses .learndash-wrapper h3,
body.single-sfwd-courses .learndash-wrapper h4,
body.single-sfwd-courses .learndash-wrapper .ld-section-heading h2 {
	font-family: var(--altus-font-head);
	color: var(--altus-ink);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

/* Progress bar */
body.single-sfwd-courses .learndash-wrapper .ld-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 24px;
}
body.single-sfwd-courses .learndash-wrapper .ld-progress .ld-progress-bar {
	flex: 1 1 auto;
	height: 8px;
	max-width: 340px;
	border-radius: 999px;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	overflow: hidden;
}
body.single-sfwd-courses .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
	height: 100%;
	background: var(--altus-gradient);
	border-radius: 999px;
}
body.single-sfwd-courses .learndash-wrapper .ld-progress .ld-progress-percentage {
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 14px;
	color: var(--altus-secondary);
}

/* Syllabus list */
body.single-sfwd-courses .learndash-wrapper .ld-item-list {
	background: transparent;
	border: none;
	box-shadow: none;
	margin-top: 32px;
}
body.single-sfwd-courses .learndash-wrapper .ld-item-list .ld-item-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	border-radius: var(--altus-radius);
	margin-bottom: 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
body.single-sfwd-courses .learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: var(--altus-red-edge);
	background: var(--altus-white);
	box-shadow: var(--altus-shadow-lift);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	body.single-sfwd-courses .learndash-wrapper .ld-item-list .ld-item-list-item {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}
}

body.single-sfwd-courses .learndash-wrapper .ld-item-name {
	font-family: var(--altus-font-head);
	font-size: 16px;
	font-weight: 600;
	color: var(--altus-ink);
}

/* Action buttons */
body.single-sfwd-courses .learndash-wrapper .ld-button,
body.single-sfwd-courses .learndash-wrapper .btn-join,
body.single-sfwd-courses .learndash-wrapper #ld-course-resume {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	border-radius: var(--altus-radius-btn);
	background: var(--altus-gradient);
	color: var(--altus-white);
	font-family: var(--altus-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: none;
	box-shadow: var(--altus-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	margin-top: 14px;
}
body.single-sfwd-courses .learndash-wrapper .ld-button:hover,
body.single-sfwd-courses .learndash-wrapper .btn-join:hover,
body.single-sfwd-courses .learndash-wrapper #ld-course-resume:hover {
	transform: translateY(-2px);
	box-shadow: var(--altus-shadow-lift);
}

/* Status pills */
body.single-sfwd-courses .learndash-wrapper .ld-status {
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--altus-font-head);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--altus-cloud);
	color: var(--altus-secondary);
	border: 1px solid var(--altus-border);
}
body.single-sfwd-courses .learndash-wrapper .ld-status.ld-status-progress {
	background: var(--altus-red-tint);
	color: var(--altus-red-link);
	border-color: var(--altus-red-edge);
}
body.single-sfwd-courses .learndash-wrapper .ld-status.ld-status-complete {
	background: rgba(31, 169, 113, 0.10);
	color: var(--altus-green);
	border-color: rgba(31, 169, 113, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	body.single-sfwd-courses .learndash-wrapper .ld-item-list .ld-item-list-item,
	body.single-sfwd-courses .learndash-wrapper .ld-button {
		transition: none !important;
	}
	body.single-sfwd-courses .learndash-wrapper .ld-item-list .ld-item-list-item:hover,
	body.single-sfwd-courses .learndash-wrapper .ld-button:hover {
		transform: none !important;
	}
}


/* ==========================================================================
   Focus Mode chrome — Andre's review of the master module page, 2026-07-28
   --------------------------------------------------------------------------
   CORRECTION TO THE RECORD, made here because this file carried the error:
   the Focus Mode sidebar is on the LEFT. `.ld-focus` renders with
   `ld-focus-position-default` and LearnDash reserves `margin-left: 350px` on
   `.ld-focus-main`. The earlier note above, and _handoff.md rev 14, both said
   "right". The reading-width fix they supported was correct; the reason given
   for it was not.
   ========================================================================== */

/* --- 1 · Presenter mode -------------------------------------------------- */
/* LearnDash hard-codes #235AF3 on this button. It does not read the Accent
   Color setting, so no setting can fix it and CSS is the only route. */

html body .ld-presenter-mode .ld-presenter-mode__button {
	background-color: var(--altus-red-link);
	background-image: var(--altus-gradient);
	border-color: transparent;
	color: var(--altus-white);
	box-shadow: var(--altus-shadow);
}

html body .ld-presenter-mode .ld-presenter-mode__button:hover {
	filter: brightness(1.06);
}

html body .ld-presenter-mode .ld-presenter-mode__button svg,
html body .ld-presenter-mode .ld-presenter-mode__button path {
	fill: currentColor;
	stroke: currentColor;
}

/* --- 2 · Focus rings ----------------------------------------------------- */
/* The sidebar close control showed the browser's default blue ring. The
   accessibility block further up covers :focus-visible only, and LearnDash's
   own controls take focus on a mouse click, where Chrome falls back to :focus.
   Same brand ring on both, and no blue anywhere. */

html body.ld-in-focus-mode .learndash-wrapper a:focus,
html body.ld-in-focus-mode .learndash-wrapper button:focus,
html body.ld-in-focus-mode .ld-focus-sidebar-trigger:focus,
html body.ld-in-focus-mode .ld-trigger-mobile-nav:focus,
html body .ld-presenter-mode__button:focus {
	outline: 2px solid var(--altus-red-link);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- 3 · Collapsed sidebar ----------------------------------------------- */
/* Two measured faults, both only visible once a module page had real content.

   The sidebar collapses to zero width but keeps overflow:visible, so its red
   course-navigation heading paints outside its own box and a fragment of the
   topic title stays on screen through the transition.

   And LearnDash goes on reserving 350px of left margin on .ld-focus-main while
   the sidebar is collapsed — measured 350px of margin against a sidebar of 0px.
   That is the empty gutter down the left of every module page. */

html body.ld-in-focus-mode .ld-focus-sidebar-collapsed .ld-focus-sidebar {
	overflow: hidden;
	pointer-events: none;
	/* LearnDash drives this element with the Web Animations API — both its
	   transform (`matrix(1,0,0,1,-301,0)`) and its margin are animation-owned,
	   and an animated property beats author CSS outright, `!important` included.
	   Both were tried and measured doing nothing. `visibility` is not animated,
	   so it is one of the few levers left. `clip-path` is used rather than
	   `visibility:hidden` on purpose: LearnDash's own openFocusSidebar() calls
	   enableFocusTrap(), which reaches for a focusable element inside the
	   sidebar, and visibility:hidden takes the whole subtree out of the
	   accessibility tree. clip-path hides the pixels and leaves the tree alone.

	   Hiding it outright is the right answer anyway: the rule above already
	   takes the reserved margin off the content, so the 50px rail has no job,
	   and the hamburger that brings the sidebar back lives in the header. */
	clip-path: inset(0 100% 0 0);
}

@media (min-width: 1025px) {
	html body.ld-in-focus-mode .ld-focus.ld-focus-sidebar-collapsed .ld-focus-main {
		margin-left: 0;
		margin-right: 0;
	}
}

/* LearnDash's collapsed state is not "hidden", it is a 50px rail: it slides the
   sidebar to left:-301px against a width of 351px, so 50px of the red heading
   block stays on screen with the topic title clipped through it. Measured, and
   it is what Andre saw as text still showing after clicking the X. The rule
   above takes the reserved margin off the content, so the rail has no job left
   to do — the sidebar goes all the way out. The hamburger that brings it back
   lives in the header, not on the rail, so nothing is lost. */


/* --- 4 · The focus canvas is not a card ---------------------------------- */
/* It carried a border, a radius and a shadow inherited from the snippet CSS.
   At 1920px its right border drew a stray vertical rule the full height of the
   page. The module page brings its own cards; the canvas under them is plain. */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --- 5 · Course navigation heading --------------------------------------- */
/* LearnDash paints this block with the Accent Color, which beats the white
   background set higher up in this file. Rather than fight it, it is taken as
   the brand block it already is — full bleed inside the sidebar, one padding
   value, no stray border, so the red has a straight edge on both sides. */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	background-color: var(--altus-red-link);
	background-image: var(--altus-gradient);
	overflow-wrap: anywhere;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading a,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading span:not(.ld-icon) {
	color: var(--altus-white);
}

/* --- 6 · Flow to next ----------------------------------------------------- */
/* LearnDash's own Previous / Mark Complete / Next bar. Andre's ruling
   2026-07-28: LearnDash keeps the job, because it is what actually records
   completion and drives linear progression — the module page's own cards
   signpost, they do not navigate. So this is styled, never rebuilt.

   Real markup on this install: .ld-content-actions > .ld-content-action, with
   a.ld-button.ld-button-transparent for Previous and Next, and
   form.sfwd-mark-complete > button.learndash_mark_complete_button. */

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
	padding: 22px 26px;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	box-shadow: var(--altus-shadow);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action {
	margin: 0;
}

/* Previous and Next are secondary. They are navigation, not the decision on
   this page, so they read as quiet controls beside Mark Complete. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button-transparent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--altus-radius-btn);
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	color: var(--altus-ink);
	font-family: var(--altus-font-head);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button:hover,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button:focus-visible {
	background: var(--altus-white);
	border-color: var(--altus-red-edge);
	color: var(--altus-red-link);
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button .ld-icon {
	color: inherit;
	font-size: 12px;
}

/* Mark Complete is the one real decision in the bar, so it is the one thing
   wearing the brand gradient. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .sfwd-mark-complete {
	margin: 0;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--altus-radius-btn);
	background-color: var(--altus-red-link);
	background-image: var(--altus-gradient);
	color: var(--altus-white);
	font-family: var(--altus-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: var(--altus-shadow);
	cursor: pointer;
	transition: filter 200ms ease;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button:hover {
	filter: brightness(1.06);
	color: var(--altus-white);
}

/* Already complete: green, because it is a state and not an action. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button[disabled],
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-status-complete .learndash_mark_complete_button {
	background-color: var(--altus-green);
	background-image: none;
	filter: none;
	cursor: default;
}

html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button svg,
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button path {
	fill: currentColor;
	stroke: currentColor;
}

/* Back to Lesson and any other bare link in the bar. */
html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-actions a:not(.ld-button) {
	font-family: var(--altus-font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--altus-red-link);
	text-decoration: underline;
}

@media (max-width: 560px) {
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-actions {
		flex-direction: column;
		align-items: stretch;
		padding: 18px;
	}
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .ld-content-action a.ld-button,
	html body.ld-in-focus-mode .learndash-wrapper .ld-focus-content .learndash_mark_complete_button {
		width: 100%;
		justify-content: center;
	}
}