/* ==========================================================================
   lpen-learndash.css
   LPEN Design System applied to the LearnDash learner surface.

   Covers:  single course (sfwd-courses) · single lesson (sfwd-lessons)
            single topic (sfwd-topic)    · Focus Mode

   Rules of engagement
   -------------------
   - Nothing in the LearnDash, Design Upgrade or LearnDash-Elementor plugins is
     modified. This file is CSS only, deployed to the child theme via
     POST lpen/v1/asset.
   - Assets in lpen-assets/ are auto-enqueued site-wide, so EVERY rule below is
     gated on `body.learndash-cpt` (present only on course/lesson/topic
     singulars) or `body.ld-in-focus-mode`. Nothing here can reach a marketing
     page, the catalogue, the cart, or checkout.
   - Design Upgrade for LearnDash exposes a `--ldx-*` custom-property API on
     :root. Section 2 remaps those rather than overriding its selectors — far
     less fragile, and it survives a Design Upgrade update.
   - `!important` appears only where LearnDash's own inline colour block
     (`learndash-front-inline-css`) uses it first. Those are marked.

   Tokens are from LPEN-Design-System.md §3–§7. Contrast pairs used here are the
   ones already verified in §3.4 — do not substitute a hex without re-checking.

   Built 2026-08-23.
   ========================================================================== */


/* ==========================================================================
   1. Gate and tokens
   Scoped deliberately, NOT on :root — these names must not leak into other
   design-system assets that may define their own.
   ========================================================================== */

body.learndash-cpt,
body.ld-in-focus-mode {
	/* navy — brand */
	--lpen-navy-900: #012032;
	--lpen-navy-800: #022E48;
	--lpen-navy-700: #0B4465;
	--lpen-navy-100: #C9DDE8;
	--lpen-navy-50:  #E5EEF3;
	--lpen-navy-25:  #F3F7F9;

	/* action — interactive */
	--lpen-action:         #0F5C96;
	--lpen-action-hover:   #0B4465;
	--lpen-action-pressed: #012032;

	/* gold — accreditation only, never decoration */
	--lpen-gold-700: #8A5A08;
	--lpen-gold-500: #C8901F;
	--lpen-gold-100: #F7E4BD;
	--lpen-gold-50:  #FDF3E0;

	/* neutral */
	--lpen-ink:           #111820;
	--lpen-muted:         #4A5666;
	--lpen-subtle:        #6B7684;
	--lpen-border-strong: #78848F;
	--lpen-border:        #CFD6DD;
	--lpen-surface-2:     #EEF2F5;
	--lpen-surface-1:     #F6F8FA;
	--lpen-white:         #FFFFFF;

	/* feedback */
	--lpen-success:    #125E26;
	--lpen-success-bg: #E6F4E9;
	--lpen-error:      #A8202F;
	--lpen-error-bg:   #FDEAEC;
	--lpen-warning:    #8A5A08;
	--lpen-warning-bg: #FDF3E0;

	/* focus — purple, a hue used for nothing else in the system */
	--lpen-focus:      #6A3FD4;
	--lpen-focus-halo: #F3F7F9;
	--lpen-focus-ring: 0 0 0 2px var(--lpen-focus), 0 0 0 4px var(--lpen-focus-halo);

	/* type */
	--lpen-font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* space */
	--lpen-space-4:  4px;
	--lpen-space-8:  8px;
	--lpen-space-12: 12px;
	--lpen-space-16: 16px;
	--lpen-space-24: 24px;
	--lpen-space-32: 32px;
	--lpen-space-48: 48px;

	/* radius — restrained, per §2 */
	--lpen-radius-sm:   2px;
	--lpen-radius-md:   4px;
	--lpen-radius-lg:   8px;
	--lpen-radius-pill: 999px;

	/* elevation — navy-tinted, never neutral black */
	--lpen-elevation-1: 0 1px 3px rgba(1,32,50,.08), 0 1px 2px rgba(1,32,50,.06);
	--lpen-elevation-2: 0 4px 16px rgba(1,32,50,.12), 0 2px 6px rgba(1,32,50,.08);

	/* motion */
	--lpen-duration-fast: 120ms;
	--lpen-duration-base: 200ms;
	--lpen-ease: cubic-bezier(.2,0,.2,1);
}


/* ==========================================================================
   2. Design Upgrade token remap
   Design Upgrade drives most of its own styling from these. Redefining them
   here does the bulk of the work at zero specificity cost, and means a plugin
   update cannot silently revert the palette.
   `body.learndash-cpt` (0,1,1) outbids the plugin's `:root` (0,1,0).
   ========================================================================== */

body.learndash-cpt,
body.ld-in-focus-mode {
	--ldx-global-border-radius: var(--lpen-radius-lg);
	--ldx-btn-border-radius:    var(--lpen-radius-md);

	--ldx-color-link:       var(--lpen-action);
	--ldx-color-link-hover: var(--lpen-action-hover);
	--ldx-color-correct:    var(--lpen-success);
	--ldx-color-incorrect:  var(--lpen-error);
	--ldx-color-in-progress: var(--lpen-gold-700);

	/* buttons — primary is `action`, not the brand navy: at 14:1 the brand
	   colour is too close to body ink to read as clickable (§3.1). */
	--ldx-btn-primary-bg-color:          var(--lpen-action);
	--ldx-btn-primary-bg-color-hover:    var(--lpen-action-hover);
	--ldx-btn-primary-text-color:        var(--lpen-white);
	--ldx-btn-primary-text-color-hover:  var(--lpen-white);
	--ldx-btn-standard-bg-color:         var(--lpen-action);
	--ldx-btn-standard-bg-color-hover:   var(--lpen-action-hover);
	--ldx-btn-standard-text-color:       var(--lpen-white);
	--ldx-btn-standard-text-color-hover: var(--lpen-white);

	/* content lists */
	--ldx-content-lists-container-bg-color:     transparent;
	--ldx-content-lists-header-bg-color:        var(--lpen-navy-800);
	--ldx-content-lists-header-text-color:      var(--lpen-white);
	--ldx-content-lists-lesson-bg-color:        var(--lpen-white);
	--ldx-content-lists-lesson-bg-color-hover:  var(--lpen-surface-1);
	--ldx-content-lists-lesson-text-color:      var(--lpen-ink);
	--ldx-content-lists-lesson-text-color-hover: var(--lpen-action);
	--ldx-content-lists-lesson-border-width:    1px;
	--ldx-content-lists-lesson-border-color:    var(--lpen-border);
	--ldx-content-lists-separator-color:        var(--lpen-border);

	/* course status band */
	--ldx-course-status-bg-color:   var(--lpen-surface-1);
	--ldx-course-status-text-color: var(--lpen-ink);

	/* progress */
	--ldx-progress-bar-container-bg:   var(--lpen-surface-2);
	--ldx-progress-bar-bg:             var(--lpen-action);
	--ldx-progress-bar-height:         8px;
	--ldx-progress-bar-border-radius:  var(--lpen-radius-pill);

	/* focus mode */
	--ldx-focus-mode-content-bg-color:         var(--lpen-white);
	--ldx-focus-mode-topmenu-bg-color:         var(--lpen-navy-800);
	--ldx-focus-mode-topmenu-text-color:       var(--lpen-white);
	--ldx-focus-mode-sidebar-bg-color:         var(--lpen-white);
	--ldx-focus-mode-sidebar-course-bg-color:  var(--lpen-navy-800);
	--ldx-focus-mode-sidebar-course-text-color: var(--lpen-white);

	/* course navigation */
	--ldx-course-nav-section-bg-color:        var(--lpen-surface-2);
	--ldx-course-nav-section-text-color:      var(--lpen-navy-800);
	--ldx-course-nav-link-text-color:         var(--lpen-ink);
	--ldx-course-nav-link-text-color-hover:   var(--lpen-action);
	--ldx-course-nav-link-bg-color-hover:     var(--lpen-surface-1);
	--ldx-course-nav-line-separator-color:    var(--lpen-border);

	/* alerts — feedback token pairs from §3.1 */
	--ldx-alert-border-width:         1px;
	--ldx-alert-color-text:           var(--lpen-muted);
	--ldx-alert-color-bg:             var(--lpen-surface-1);
	--ldx-alert-color-border:         var(--lpen-border);
	--ldx-alert-warning-color-text:   var(--lpen-warning);
	--ldx-alert-warning-color-bg:     var(--lpen-warning-bg);
	--ldx-alert-warning-color-border: var(--lpen-gold-500);
	--ldx-alert-success-color-text:   var(--lpen-success);
	--ldx-alert-success-color-bg:     var(--lpen-success-bg);
	--ldx-alert-success-color-border: var(--lpen-success);

	--ldx-tooltip-bg-color:   var(--lpen-navy-800);
	--ldx-tooltip-text-color: var(--lpen-white);

	--ldx-pagination-bg-color:   var(--lpen-surface-1);
	--ldx-pagination-text-color: var(--lpen-ink);
}


/* ==========================================================================
   3. Typography base
   One family throughout (§5.1). Hierarchy comes from size, weight and colour.
   ========================================================================== */

body.learndash-cpt .learndash-wrapper,
body.ld-in-focus-mode .learndash-wrapper {
	font-family: var(--lpen-font-sans);
	font-size: 16px;
	line-height: 1.625;          /* 16/26 — the `body` token */
	color: var(--lpen-ink);
	-webkit-font-smoothing: antialiased;
}

body.learndash-cpt .learndash-wrapper h1,
body.learndash-cpt .learndash-wrapper h2,
body.learndash-cpt .learndash-wrapper h3,
body.learndash-cpt .learndash-wrapper h4,
body.learndash-cpt .learndash-wrapper h5,
body.learndash-cpt .learndash-wrapper h6 {
	font-family: var(--lpen-font-sans);
	color: var(--lpen-navy-800);
	font-weight: 600;
}


/* ==========================================================================
   4. Section heading — "Course Content"
   Was 23px / weight 500 / Roboto. The stray Roboto is an Elementor kit
   inheritance, not a LearnDash setting.
   ========================================================================== */

body.learndash-cpt .learndash-wrapper .ld-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lpen-space-16);
	margin: 0 0 var(--lpen-space-16);
	padding: 0 0 var(--lpen-space-12);
	border-bottom: 1px solid var(--lpen-border);
}

body.learndash-cpt .learndash-wrapper .ld-section-heading h2 {
	font-family: var(--lpen-font-sans);
	font-size: 24px;             /* h4 — the page h1 is the course title */
	line-height: 32px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--lpen-navy-800);
	margin: 0;
}

body.learndash-cpt .learndash-wrapper .ld-item-list-actions .ld-expand-button {
	font-size: 14px;             /* action-sm */
	line-height: 20px;
	font-weight: 600;
	color: var(--lpen-action);
	background: transparent;
	padding: var(--lpen-space-8) var(--lpen-space-12);
	border-radius: var(--lpen-radius-md);
	min-height: 36px;
}


/* ==========================================================================
   5. Course content list
   Was: floating cards, 2px #e2e7ed border, 6px radius, 12px gaps.
   Now: one bordered block with hairline dividers — borders over shadows, and
   it reads as a curriculum rather than a row of consumer cards (§2, §8.6).
   ========================================================================== */

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-items {
	border: 1px solid var(--lpen-border);
	border-radius: var(--lpen-radius-lg);
	overflow: hidden;
	background: var(--lpen-white);
}

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--lpen-white);
	box-shadow: none;
}

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item + .ld-item-list-item {
	border-top: 1px solid var(--lpen-border);
}

/* Row */
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name {
	display: flex;
	align-items: center;
	gap: var(--lpen-space-12);
	min-height: 64px;                                   /* clears the 44px target */
	padding: var(--lpen-space-16) var(--lpen-space-24);
	color: var(--lpen-ink);
	text-decoration: none;
	transition: background-color var(--lpen-duration-fast) var(--lpen-ease),
	            color var(--lpen-duration-fast) var(--lpen-ease);
}

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:hover,
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:focus {
	background: var(--lpen-surface-1);
	color: var(--lpen-action);
}

/* Row title — was 30px with a 26px line-height, i.e. line-height below font
   size. That is a rendering bug, not a style. h5 (20/28) is the right scale
   for a list row. */
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: inherit;
	letter-spacing: 0;
	margin: 0;
	min-width: 0;
}

/* Secondary metadata under the title */
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title .ld-item-components {
	display: block;
	margin-top: var(--lpen-space-4);
	font-size: 14px;                 /* body-sm */
	line-height: 22px;
	font-weight: 400;
	color: var(--lpen-muted);
	opacity: 1;                      /* Design Upgrade dims this to .8 — muted is already AA */
}

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-sep {
	color: var(--lpen-border-strong);
	padding: 0 var(--lpen-space-4);
}

/* The tooltip wrapper is a layout passthrough — let the row own its width */
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-tooltip {
	display: block;
	width: 100%;
}

body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
	display: flex;
	align-items: center;
}


/* --------------------------------------------------------------------------
   5.1 Status icon
   Was a 26px circle with a 4px #e2e7ed ring. Now a 20px control-scale ring in
   `border-strong` (3.82:1, so it is actually perceivable), and completion in
   `success` rather than LearnDash's default blue.
   The checkmark glyph is LearnDash's own icon font — only colour is touched,
   so it keeps rendering.
   -------------------------------------------------------------------------- */

body.learndash-cpt .learndash-wrapper .ld-status-icon {
	width: 20px;
	height: 20px;
	flex-basis: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	margin: 0;
	transition: background-color var(--lpen-duration-fast) var(--lpen-ease),
	            border-color var(--lpen-duration-fast) var(--lpen-ease);
}

body.learndash-cpt .learndash-wrapper .ld-status-icon.ld-status-incomplete {
	background-color: var(--lpen-white);
	border: 2px solid var(--lpen-border-strong);
}

body.learndash-cpt .learndash-wrapper .ld-item-list-item a.ld-item-name:hover .ld-status-icon.ld-status-incomplete {
	border-color: var(--lpen-action);
}

/* `!important` required: LearnDash's inline colour block sets
   `.learndash-wrapper .ld-status-complete { background-color: … }` with it. */
body.learndash-cpt .learndash-wrapper .ld-status-icon.ld-status-complete {
	background-color: var(--lpen-success) !important;
	border: 2px solid var(--lpen-success);
	color: var(--lpen-white) !important;
}

body.learndash-cpt .learndash-wrapper .ld-status-icon.ld-status-in-progress {
	background-color: var(--lpen-white);
	border: 2px solid var(--lpen-gold-500);
	border-left-color: var(--lpen-surface-2);
	border-bottom-color: var(--lpen-surface-2);
}

body.learndash-cpt .learndash-wrapper .ld-status-icon .ld-icon {
	font-size: 11px;
}


/* ==========================================================================
   6. Progress
   Bar plus text, never bar alone (§8.13).
   ========================================================================== */

body.learndash-cpt .learndash-wrapper .ld-course-status,
body.learndash-cpt .learndash-wrapper .ld-progress {
	background: var(--lpen-surface-1);
	border: 1px solid var(--lpen-border);
	border-radius: var(--lpen-radius-lg);
	padding: var(--lpen-space-16) var(--lpen-space-24);
	margin-top: var(--lpen-space-24);
}

/* The status band holds the progress block plus a completion badge. Without an
   explicit gap the badge butts straight into the "Last activity" line. */
body.learndash-cpt .learndash-wrapper .ld-course-status {
	display: flex;
	align-items: center;
	gap: var(--lpen-space-24);
	flex-wrap: wrap;
}

body.learndash-cpt .learndash-wrapper .ld-course-status .ld-progress {
	flex: 1 1 240px;
}

/* Completion badge (§8.5) — overline type, radius-sm, and the status is in
   text, not colour alone. `!important` because LearnDash's inline block sets
   `.ld-course-status .ld-status.ld-status-complete { background … }`. */
/* The same badge appears in two places — beside the course progress bar, and
   at the right of the lesson breadcrumbs. */
body.learndash-cpt .learndash-wrapper .ld-course-status .ld-status,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: var(--lpen-space-4) var(--lpen-space-12);
	border-radius: var(--lpen-radius-sm);
	font-size: 12px;                 /* overline */
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* `!important` here is outbidding LearnDash's inline block, which colours
   `.ld-secondary-background`. It is NOT fighting Elementor any more — those
   widget settings were cleared from templates 1242/1245 on 2026-08-23. */
body.learndash-cpt .learndash-wrapper .ld-course-status .ld-status.ld-status-complete,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-complete {
	background: var(--lpen-success) !important;
	color: var(--lpen-white) !important;
}

body.learndash-cpt .learndash-wrapper .ld-course-status .ld-status.ld-status-progress,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-status.ld-status-progress {
	background: var(--lpen-surface-2) !important;
	color: var(--lpen-muted) !important;
}

/* …but not when the progress bar is nested inside the status band, or it
   double-frames. */
body.learndash-cpt .learndash-wrapper .ld-course-status .ld-progress {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

/* LearnDash's `ld-progress-inline` sits the label and the bar side by side,
   which squeezes the bar to ~90px. Stack them: label row, then a full-width
   bar. Bar plus text, and the bar wide enough to actually read (§8.13). */
body.learndash-cpt .learndash-wrapper .ld-progress.ld-progress-inline {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--lpen-space-8);
}

body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-heading {
	padding: 0;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--lpen-muted);
	flex: 0 0 auto;
	width: 100%;
}

body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lpen-space-12);
	width: 100%;
}

/* `!important`: LearnDash's inline block colours `.ld-secondary-color`. */
body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage {
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	letter-spacing: .06em;                 /* overline treatment */
	text-transform: uppercase;
	color: var(--lpen-navy-800) !important;
	margin-right: var(--lpen-space-8);
	margin-bottom: 0;
}

/* This was the "Last activity on …" line rendering at 30px against a 22px
   line-height. The 30px came from `control_course_content_row_item_lesson_progress_text_font_size`
   on the ld-course-content widget in template 1242, cleared 2026-08-23 — so
   this no longer needs `!important`. */
body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-steps {
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--lpen-muted);
	text-align: right;
}

body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-bar {
	height: 8px;
	width: 100%;
	flex: 0 0 auto;
	border-radius: var(--lpen-radius-pill);
	background-color: var(--lpen-surface-2);
	overflow: hidden;
	border: 0;
}

/* `!important`: inline block sets `.ld-secondary-background`. */
body.learndash-cpt .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
	height: 8px;
	border-radius: var(--lpen-radius-pill);
	background-color: var(--lpen-action) !important;
	transition: width var(--lpen-duration-base) var(--lpen-ease);
}


/* ==========================================================================
   7. Breadcrumbs (§8.12)
   ========================================================================== */

/* The lesson band paints itself #F0F3F6 while the breadcrumb nav inside it is
   white, which leaves a 24px orphan strip of grey below the crumbs. Both go
   transparent; the rule under the row is the separator. */
body.learndash-cpt .learndash-wrapper .ld-lesson-status,
body.learndash-cpt .learndash-wrapper .ld-topic-status {
	background: transparent;
	border: 0;
	padding: 0;
}

body.learndash-cpt .learndash-wrapper .ld-breadcrumbs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpen-space-16);
	flex-wrap: wrap;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lpen-border);
	border-radius: 0;
	padding: 0 0 var(--lpen-space-12);
	margin-bottom: var(--lpen-space-24);
}

body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments li,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments a {
	font-size: 14px;                 /* body-sm */
	line-height: 22px;
	color: var(--lpen-muted);
	margin: 0;
	padding-right: 0;
}

body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lpen-space-8);
	flex: 1 1 auto;
	min-width: 0;
}

body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments a {
	color: var(--lpen-action) !important;   /* inline block colours breadcrumb links */
	font-weight: 400;
	text-decoration: none;
}

body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments a:hover {
	color: var(--lpen-action-hover) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Current page is not a link (§8.12) */
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments li:last-child,
body.learndash-cpt .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments span:last-child {
	color: var(--lpen-muted);
	font-weight: 600;
}


/* ==========================================================================
   8. Buttons
   Live measurement before this file: font-size 30px, padding 30px,
   border-radius 20px, rendered 135px tall — which is why "Mark Complete"
   wrapped onto two lines. Design system §8.1: md is 44px, radius-md, `action`
   type (16/24/600), horizontal padding space-24.
   ========================================================================== */

/* Specificity note: LearnDash's inline colour block targets buttons through
   `.learndash-wrapper .ld-button:not([disabled]):not(.ld-button-transparent):not(.ld--ignore-inline-css)`
   — five classes plus `!important`. The doubled `.learndash-wrapper.learndash-wrapper`
   below is what outbids it without resorting to an id. Do not "simplify" it. */

body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-content-actions .ld-button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .learndash_mark_complete_button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #learndash_mark_complete_button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .sfwd-mark-complete input[type="submit"],
body.learndash-cpt .learndash-wrapper.learndash-wrapper .btn-join,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #btn-join {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--lpen-space-8);
	box-sizing: border-box;
	min-height: 44px !important;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	padding: var(--lpen-space-12) var(--lpen-space-24) !important;
	font-family: var(--lpen-font-sans) !important;
	font-size: 16px !important;              /* `action` */
	line-height: 24px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	border: 0 !important;
	border-radius: var(--lpen-radius-md) !important;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--lpen-duration-fast) var(--lpen-ease),
	            color var(--lpen-duration-fast) var(--lpen-ease);
}

/* Primary — Mark Complete and enrolment.
   `padding-right` stays generous: Design Upgrade draws its tick as an
   absolutely-positioned `::after` on the surrounding form, and a tighter
   button slides the label under it. */
body.learndash-cpt .learndash-wrapper.learndash-wrapper .learndash_mark_complete_button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #learndash_mark_complete_button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .sfwd-mark-complete input[type="submit"],
body.learndash-cpt .learndash-wrapper.learndash-wrapper .btn-join,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #btn-join {
	background: var(--lpen-action) !important;
	color: var(--lpen-white) !important;
	padding-right: 48px !important;
}

body.learndash-cpt .learndash-wrapper.learndash-wrapper .learndash_mark_complete_button:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #learndash_mark_complete_button:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .sfwd-mark-complete input[type="submit"]:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .btn-join:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper #btn-join:hover {
	background: var(--lpen-action-hover) !important;
	color: var(--lpen-white) !important;
	opacity: 1 !important;
}

/* Secondary — Next / Previous lesson. Outline uses an inset shadow rather than
   a border so the box model never shifts between states (§8.1). */
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-content-actions .ld-content-action .ld-button {
	background: var(--lpen-white) !important;
	background-color: var(--lpen-white) !important;
	color: var(--lpen-action) !important;
	box-shadow: inset 0 0 0 1px var(--lpen-border-strong) !important;
}

body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-content-actions .ld-content-action .ld-button:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-content-actions .ld-content-action .ld-button:focus {
	background: var(--lpen-navy-25) !important;
	background-color: var(--lpen-navy-25) !important;
	color: var(--lpen-action-hover) !important;
	box-shadow: inset 0 0 0 1px var(--lpen-action) !important;
	opacity: 1 !important;
}

body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-button .ld-icon,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-button .ld-text {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Disabled — kept legible rather than ghosted to .4 (§8.1) */
body.learndash-cpt .learndash-wrapper.learndash-wrapper .learndash_mark_complete_button[disabled],
body.learndash-cpt .learndash-wrapper.learndash-wrapper #learndash_mark_complete_button[disabled] {
	background: var(--lpen-surface-2) !important;
	color: var(--lpen-subtle) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   8.1 Lesson action bar
   -------------------------------------------------------------------------- */

/* Three equal columns in LearnDash's own DOM order — previous, mark complete,
   next — so the bar holds its shape whether or not a previous lesson exists.
   Top-aligned, because the middle column also carries "Back to Course" and
   centre alignment would push the outer buttons out of line with it. */
body.learndash-cpt .learndash-wrapper .ld-content-actions {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lpen-space-16);
	flex-wrap: wrap;
	border: 0;
	border-top: 1px solid var(--lpen-border);
	padding: var(--lpen-space-24) 0 0;
	margin-top: var(--lpen-space-32);
}

body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-content-action {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lpen-space-8);
	margin: 0;
}

body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-content-action:first-child {
	align-items: flex-start;
}

body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-content-action:last-child {
	align-items: flex-end;
}

body.learndash-cpt .learndash-wrapper .ld-content-actions .sfwd-mark-complete {
	margin: 0;
}

/* "Back to Course" — tertiary text link (§8.2) */
body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-course-step-back,
body.learndash-cpt .learndash-wrapper .ld-content-actions > a {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--lpen-action) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: var(--lpen-space-8);
	border-radius: var(--lpen-radius-md);
}

body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-course-step-back:hover {
	color: var(--lpen-action-hover) !important;
	text-decoration-thickness: 2px;
}


/* ==========================================================================
   9. Alerts and notices (§8.7)
   4px left rule in the feedback colour, square on the ruled edge.
   ========================================================================== */

body.learndash-cpt .learndash-wrapper .ld-alert {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lpen-space-12);
	border: 1px solid var(--lpen-border);
	border-left: 4px solid var(--lpen-border-strong);
	border-radius: 0 var(--lpen-radius-md) var(--lpen-radius-md) 0;
	background: var(--lpen-surface-1);
	color: var(--lpen-ink);
	padding: var(--lpen-space-16) var(--lpen-space-24);
	font-size: 16px;
	line-height: 26px;
}

/* LearnDash absolutely positions the alert icon and relies on a large
   left padding to clear it, which breaks the moment the padding changes and
   overlaps the message. Put the icon back in normal flow instead — it is a
   row of [icon][message][action] and behaves like one. */
body.learndash-cpt .learndash-wrapper .ld-alert .ld-alert-content {
	display: flex;
	align-items: center;
	gap: var(--lpen-space-12);
	flex: 1 1 180px;
	min-width: 0;
}

body.learndash-cpt .learndash-wrapper .ld-alert .ld-alert-icon {
	position: static;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;                 /* standalone icon size (§5.5) */
}

body.learndash-cpt .learndash-wrapper .ld-alert .ld-alert-messages,
body.learndash-cpt .learndash-wrapper .ld-alert .ld-alert-messages * {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 600 !important;
	margin: 0;
}

/* Design Upgrade reserves 42px of left padding for the button's own icon
   glyph. Keep it, or the glyph lands on the first letter of the label. */
/* ⚠️ The repeated `.ld-button` is buying specificity, and this one is the
   worst case on the page. Every colour setting on the ld-course-certificate
   widget was cleared on 2026-08-23, and Elementor STILL emits

     .elementor-1242 #ac3503b … .ld-alert-certificate .ld-button
       { color:#fff !important; background-color:#415063 !important }   (0,8,0)

   because that is the widget's **default** control value, and the
   LearnDash-Elementor widgets seed their defaults from LearnDash → Settings →
   Design. Clearing the widget cannot remove it; only changing the LearnDash
   colour settings can. This lands at (0,8,1). */
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-alert.ld-alert-certificate .ld-button.ld-button.ld-button,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-alert .ld-button.ld-button.ld-button {
	flex: 0 0 auto;
	padding: var(--lpen-space-12) var(--lpen-space-16) var(--lpen-space-12) 42px !important;
	font-size: 14px !important;      /* action-sm — it sits in a 313px sidebar */
	line-height: 20px !important;
	max-width: 100%;
	white-space: normal;
	background: var(--lpen-action) !important;
	background-color: var(--lpen-action) !important;
	color: var(--lpen-white) !important;
}

body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-alert.ld-alert-certificate .ld-button.ld-button.ld-button:hover,
body.learndash-cpt .learndash-wrapper.learndash-wrapper .ld-alert .ld-button.ld-button.ld-button:hover {
	background: var(--lpen-action-hover) !important;
	background-color: var(--lpen-action-hover) !important;
	color: var(--lpen-white) !important;
}

body.learndash-cpt .learndash-wrapper .ld-alert-warning {
	background: var(--lpen-warning-bg);
	border-color: var(--lpen-gold-500);
	border-left-color: var(--lpen-gold-500);
	color: var(--lpen-gold-700);
}

/* `!important`: LD30's inline block sets `.ld-alert-success` transparent
   with it, so a plain declaration here would never land. */
body.learndash-cpt .learndash-wrapper .ld-alert-success {
	background-color: var(--lpen-success-bg) !important;
	border-color: var(--lpen-success);
	border-left-color: var(--lpen-success);
	color: var(--lpen-success);
}

/* The certificate alert is the accreditation payoff, so it takes gold rather
   than success green — §3.1 reserves gold for CPD credit and accreditation,
   and the certificate is exactly that. Judgement call: delete this block and
   it falls back to the green success treatment above.
   LearnDash gives it a real `.ld-alert-certificate` class, so no `:has()`.
   `!important` on the fill is unavoidable: the LD30 inline block carries
   `.learndash-wrapper .ld-alert-success { background-color: transparent !important }`,
   and any `!important` beats a plain declaration regardless of specificity. */
body.learndash-cpt .learndash-wrapper .ld-alert.ld-alert-certificate {
	background-color: var(--lpen-gold-100) !important;
	border-color: var(--lpen-gold-500);
	border-left-color: var(--lpen-gold-500);
	color: var(--lpen-navy-800);          /* 11.29:1 on gold-100 (§3.4) */
}

body.learndash-cpt .learndash-wrapper .ld-alert.ld-alert-certificate .ld-alert-icon {
	color: var(--lpen-gold-700);
}

/* Certificate link — the one place gold is allowed outside a CPD block, since
   the certificate *is* the accreditation artefact (§3.1, §9.9). */
body.learndash-cpt .learndash-wrapper .ld-alert .ld-certificate-link,
body.learndash-cpt .learndash-wrapper .ld-item-details .ld-certificate-link {
	color: var(--lpen-gold-700) !important;
	font-weight: 600;
}


/* ==========================================================================
   10. Focus and keyboard operation (§3.2, §12)
   Two layers, both required: the inner ring is 6.41:1 on white but only
   2.20:1 on navy-800, where the 13.10:1 outer halo carries it.
   ========================================================================== */

body.learndash-cpt .learndash-wrapper a:focus-visible,
body.learndash-cpt .learndash-wrapper button:focus-visible,
body.learndash-cpt .learndash-wrapper input:focus-visible,
body.learndash-cpt .learndash-wrapper select:focus-visible,
body.learndash-cpt .learndash-wrapper textarea:focus-visible,
body.learndash-cpt .learndash-wrapper [tabindex]:focus-visible,
body.ld-in-focus-mode .learndash-wrapper a:focus-visible,
body.ld-in-focus-mode .learndash-wrapper button:focus-visible,
body.ld-in-focus-mode .learndash-wrapper input:focus-visible {
	outline: none;
	box-shadow: var(--lpen-focus-ring) !important;   /* the stack sets box-shadow:none on links */
	border-radius: var(--lpen-radius-md);
	position: relative;
	z-index: 1;
}

/* The list row is inset inside a clipped container, so it needs the ring drawn
   inward or the overflow:hidden crops it. */
body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:focus-visible {
	box-shadow: inset 0 0 0 2px var(--lpen-focus), inset 0 0 0 4px var(--lpen-focus-halo) !important;
	border-radius: 0;
}


/* ==========================================================================
   11. Focus Mode
   NOTE: focus_mode is currently OFF site-wide in LearnDash settings, so none
   of this is live and none of it has been visually verified. It is written
   from the ld30 and Design Upgrade class vocabulary. Re-check this section the
   day Focus Mode is switched on.
   ========================================================================== */

body.ld-in-focus-mode .learndash-wrapper {
	font-family: var(--lpen-font-sans);
	color: var(--lpen-ink);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-header {
	background: var(--lpen-navy-800);
	border-bottom: 1px solid var(--lpen-navy-700);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-brand-logo,
body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-content-actions {
	border-color: var(--lpen-navy-700);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar {
	background: var(--lpen-white);
	border-right: 1px solid var(--lpen-border);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading {
	background: var(--lpen-navy-800);
	color: var(--lpen-white);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-item {
	border-bottom: 1px solid var(--lpen-border);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson {
	background: var(--lpen-navy-50);
	box-shadow: inset 3px 0 0 var(--lpen-action);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-lesson-title,
body.ld-in-focus-mode .learndash-wrapper .ld-focus-sidebar .ld-topic-title {
	font-size: 16px;
	line-height: 24px;
	color: var(--lpen-ink);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-content {
	max-width: var(--lpen-container-prose, 720px);   /* container-prose (§7) */
	margin-inline: auto;
	padding: var(--lpen-space-32) var(--lpen-space-24);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-progress .ld-progress-bar,
body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-progress .ld-progress-bar-percentage {
	max-height: 8px;
	border-radius: var(--lpen-radius-pill);
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus-header .ld-progress .ld-progress-percentage {
	color: var(--lpen-navy-100) !important;
}


/* ==========================================================================
   12. Prose inside LearnDash-rendered content
   Applied only to LearnDash output — the surrounding Elementor layout is left
   alone deliberately, because narrowing those containers would also narrow the
   lesson video embed.
   ========================================================================== */

body.learndash-cpt .learndash-wrapper .ld-item-list-item-expanded p,
body.learndash-cpt .learndash-wrapper .ld-tabs-content p {
	max-width: 68ch;                 /* 65–75 characters (§5.4) */
	margin: 0 0 var(--lpen-space-16);
}

body.learndash-cpt .learndash-wrapper a:not(.ld-button):not(.ld-item-name) {
	color: var(--lpen-action);
	text-underline-offset: 2px;
}


/* ==========================================================================
   12.1 Elementor page chrome on course and lesson pages
   Course and lesson pages render from Elementor theme templates (1242 and
   1245), so the page title and the lesson body are Elementor widgets rather
   than LearnDash markup. Still gated on `body.learndash-cpt`, so this reaches
   only those two post types.
   ========================================================================== */

/* Page title was rendering 32px in Roboto — the same kit inheritance that put
   Roboto on "Course Content". §5.2 `h1`. */
body.learndash-cpt .elementor-widget-theme-page-title.elementor-widget-theme-page-title .elementor-heading-title {
	font-family: var(--lpen-font-sans);
	font-size: 48px;
	line-height: 56px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--lpen-navy-800);
}

/* The theme underlines every `<a>`, so buttons inside lesson content render
   underlined. Buttons are not prose links (§8.1 vs §8.2). */
body.learndash-cpt .elementor-widget-theme-post-content .elementor-button,
body.learndash-cpt .elementor-widget-theme-post-content .elementor-button:hover {
	text-decoration: none;
}

body.learndash-cpt .elementor-widget-theme-post-content .elementor-button:focus-visible {
	outline: none;
	box-shadow: var(--lpen-focus-ring) !important;
}


/* ==========================================================================
   13. Responsive — step down at 768px (§5.3, §7)
   ========================================================================== */

@media (max-width: 767px) {

	body.learndash-cpt .elementor-widget-theme-page-title.elementor-widget-theme-page-title .elementor-heading-title {
		font-size: 30px;
		line-height: 38px;
	}

	body.learndash-cpt .learndash-wrapper .ld-section-heading h2 {
		font-size: 20px;
		line-height: 28px;
	}

	body.learndash-cpt .learndash-wrapper .ld-breadcrumbs {
		align-items: flex-start;
		gap: var(--lpen-space-8);
	}

	body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-title {
		font-size: 18px;
		line-height: 26px;
	}

	body.learndash-cpt .learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name {
		padding: var(--lpen-space-16);
		gap: var(--lpen-space-12);
	}

	body.learndash-cpt .learndash-wrapper .ld-course-status,
	body.learndash-cpt .learndash-wrapper .ld-progress {
		padding: var(--lpen-space-16);
	}

	/* Stack the action bar rather than squeezing three controls onto one line */
	body.learndash-cpt .learndash-wrapper .ld-content-actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--lpen-space-12);
	}

	body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-content-action.ld-empty {
		display: none;
	}

	body.learndash-cpt .learndash-wrapper .ld-content-actions .ld-button,
	body.learndash-cpt .learndash-wrapper .ld-content-actions .learndash_mark_complete_button,
	body.learndash-cpt .learndash-wrapper .ld-content-actions .sfwd-mark-complete input[type="submit"] {
		width: 100% !important;
	}
}


/* ==========================================================================
   14. Reduced motion — a WCAG 2.1 obligation, not a nicety (§4)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	body.learndash-cpt .learndash-wrapper *,
	body.learndash-cpt .learndash-wrapper *::before,
	body.learndash-cpt .learndash-wrapper *::after,
	body.ld-in-focus-mode .learndash-wrapper *,
	body.ld-in-focus-mode .learndash-wrapper *::before,
	body.ld-in-focus-mode .learndash-wrapper *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}