/* ==========================================================================
   IMMERSION — lesson page (LearnDash Focus Mode)
   Ref: handoff § Phase 3.

   Loads on lessons, topics and quizzes, after LearnDash's own stylesheet.

   Deliberate deviation: the handoff puts the rail on the right. Focus Mode's
   sidebar is on the left and its collapse behaviour is driven by LearnDash's
   own JS, which reads that position. Flipping it would fight that script for
   cosmetic gain, and a dark left rail is consistent with the app shell every
   other enrolled screen uses. So the rail keeps LearnDash's position and takes
   the Immersion treatment instead.
   ========================================================================== */

/* --- Frame ---------------------------------------------------------------- */

.learndash-wrapper .ld-focus {
  background: var(--imm-canvas);
  font-family: var(--imm-font-ui);
}

/* --- Sidebar --------------------------------------------------------------
   LearnDash renders its course navigation for a LIGHT sidebar. This panel is
   ink, so every piece of that navigation needs restating or it paints dark
   text on a dark ground — which is exactly what it did before this pass.

   The class names below are LearnDash 5's real ones. An earlier version of
   this file guessed at `.ld-item-list-item`, which does not exist here; the
   markup uses `.ld-lesson-item` and `.ld-table-list-item`.
   -------------------------------------------------------------------------- */

.learndash-wrapper .ld-focus-sidebar {
  background: var(--imm-ink);
  border-right: 1px solid var(--imm-ink-line);
}

/* A legibility floor: anything in the sidebar we have not explicitly styled
   still inherits a light colour rather than disappearing. Specific rules below
   refine from here. */
.learndash-wrapper .ld-focus-sidebar,
.learndash-wrapper .ld-focus-sidebar .ld-text {
  color: var(--imm-on-dark-2);
}

/* Course heading */

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading {
  background: var(--imm-ink);
  border-bottom: 1px solid var(--imm-ink-line);
  color: var(--imm-on-dark);
}

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading a,
.learndash-wrapper .ld-focus-sidebar .ld-focus-mode-course-heading-wrapper a {
  color: var(--imm-on-dark);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: var(--imm-track-h1);
  text-decoration: none;
}

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading a:hover { color: #fff; }

.learndash-wrapper .ld-focus-sidebar-trigger { color: var(--imm-faint-dark-2); }
.learndash-wrapper .ld-focus-sidebar-trigger:hover { color: #fff; }

/* Act / section headings */

.learndash-wrapper .ld-focus-sidebar .ld-lesson-section-heading {
  display: block;
  padding: var(--imm-s-6) var(--imm-s-5) var(--imm-s-2);
  color: var(--imm-faint-dark);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
}

/* Lesson rows */

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--imm-ink-line);
  margin: 0;
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview {
  display: flex;
  align-items: center;
  gap: var(--imm-s-2);
  padding: 0;
  background: transparent;
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview-heading {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  padding: var(--imm-s-3) var(--imm-s-5);
  color: var(--imm-on-dark-2);
  text-decoration: none;
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-preview-heading:hover { color: #fff; }

.learndash-wrapper .ld-focus-sidebar .ld-lesson-title,
.learndash-wrapper .ld-focus-sidebar .ld-topic-title {
  color: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* The lesson being read */

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson {
  background: rgba(255, 255, 255, .06);
}

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
  color: #fff;
  font-weight: 700;
}

/* Topic rows, nested under a lesson */

.learndash-wrapper .ld-focus-sidebar .ld-lesson-item-expanded,
.learndash-wrapper .ld-focus-sidebar .ld-table-list,
.learndash-wrapper .ld-focus-sidebar .ld-table-list-items {
  background: rgba(0, 0, 0, .18);
  border: 0;
}

.learndash-wrapper .ld-focus-sidebar .ld-table-list-item {
  background: transparent;
  border: 0;
  margin: 0;
}

.learndash-wrapper .ld-focus-sidebar .ld-table-list-item-preview,
.learndash-wrapper .ld-focus-sidebar .ld-topic-row {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  padding: 10px var(--imm-s-5) 10px var(--imm-s-8);
  background: transparent;
  color: var(--imm-faint-dark-2);
  text-decoration: none;
}

.learndash-wrapper .ld-focus-sidebar .ld-table-list-item-preview:hover,
.learndash-wrapper .ld-focus-sidebar .ld-topic-row:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.learndash-wrapper .ld-focus-sidebar .ld-table-list-item .ld-topic-title { font-size: 13px; font-weight: 400; }

/* Status markers.
   LearnDash paints these with .ld-secondary-background, which the theme maps to
   ink — invisible here. Inside the sidebar they become teal-light for complete
   and a hollow ring for incomplete. */

.learndash-wrapper .ld-focus-sidebar .ld-status-icon {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--imm-r-pill);
}

.learndash-wrapper .ld-focus-sidebar .ld-status-icon.ld-status-complete,
.learndash-wrapper .ld-focus-sidebar .ld-status-complete.ld-secondary-background {
  background-color: var(--imm-teal-light);
  color: var(--imm-ink);
}

.learndash-wrapper .ld-focus-sidebar .ld-status-icon.ld-status-incomplete {
  background-color: transparent;
  border: 2px solid var(--imm-ink-line-3);
}

.learndash-wrapper .ld-focus-sidebar .ld-icon-checkmark { font-size: 9px; }

/* Expand chevron.
   The `!important` is deliberate and unusual: code snippets #8 and #9 force
   this element to #4a4a4a with !important, which is near-invisible on ink.
   Once those snippets are retired this can drop back to a normal rule. */

.learndash-wrapper .ld-focus-sidebar .ld-expand-button {
  padding: var(--imm-s-2) var(--imm-s-4);
  background: transparent;
  border: 0;
}

.learndash-wrapper .ld-focus-sidebar .ld-expand-button .ld-icon,
.learndash-wrapper .ld-focus-sidebar .ld-expand-button .ld-icon.ld-primary-background {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: var(--imm-faint-dark-2) !important;
}

.learndash-wrapper .ld-focus-sidebar .ld-expand-button:hover .ld-icon,
.learndash-wrapper .ld-focus-sidebar .ld-expand-button:hover .ld-icon.ld-primary-background {
  color: #fff !important;
}

.learndash-wrapper .ld-focus-sidebar .ld-expand-text { display: none; }

/* --- Immersion rail ------------------------------------------------------- */

.imm-focus-rail {
  display: grid;
  gap: var(--imm-s-3);
  padding: var(--imm-s-5);
  border-bottom: 1px solid var(--imm-ink-line);
}

.imm-focus-card {
  padding: var(--imm-s-5);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--imm-ink-line-2);
  border-radius: var(--imm-r-card);
}

.imm-focus-card .imm-eyebrow { margin-bottom: var(--imm-s-3); }

/* Today's steps */

.imm-focus-steps,
.imm-focus-upcoming {
  display: grid;
  gap: var(--imm-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-focus-step {
  display: flex;
  align-items: center;
  gap: var(--imm-s-2);
  font-size: 13.5px;
}

.imm-focus-step a { color: var(--imm-on-dark-2); text-decoration: none; }
.imm-focus-step a:hover { color: #fff; }

.imm-focus-step__mark {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--imm-ink-line-3);
  border-radius: var(--imm-r-pill);
}

.imm-focus-step.is-complete .imm-focus-step__mark {
  background: var(--imm-teal-light);
  border-color: var(--imm-teal-light);
}

/* The step being read gets the red treatment used for "now" everywhere else. */
.imm-focus-step.is-current .imm-focus-step__mark { border-color: var(--imm-red); }
.imm-focus-step.is-current a { color: #fff; font-weight: 700; }

/* Course progress */

.imm-focus-progress-label {
  margin: 0 0 var(--imm-s-2);
  font-size: 13px;
  color: var(--imm-faint-dark-2);
}

.imm-focus-card .imm-progress { background: var(--imm-ink-line); }

/* Coming up */

.imm-focus-upcoming li { font-size: 13.5px; }
.imm-focus-upcoming a { color: var(--imm-faint-dark-2); text-decoration: none; }
.imm-focus-upcoming a:hover { color: #fff; }
.imm-focus-upcoming .is-checkpoint a { color: var(--imm-magenta); font-weight: 700; }

.imm-focus-ask { width: 100%; }

/* --- Header --------------------------------------------------------------- */

.learndash-wrapper .ld-focus-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--imm-paper);
  border-bottom: 1px solid var(--imm-line);
}

.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-breadcrumbs a {
  font-size: 12.5px;
  color: var(--imm-faint);
}

.learndash-wrapper .ld-breadcrumbs a:hover { color: var(--imm-teal); }

/* Prev / next */

.learndash-wrapper .ld-content-action .ld-button,
.learndash-wrapper .ld-content-actions .ld-button {
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-nav);
  background: var(--imm-paper);
  color: var(--imm-ink);
  font-size: 14px;
  font-weight: 600;
}

.learndash-wrapper .ld-content-action .ld-button:hover,
.learndash-wrapper .ld-content-actions .ld-button:hover {
  border-color: var(--imm-line-2);
  background: var(--imm-paper);
  color: var(--imm-teal);
}

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

.learndash-wrapper .ld-focus-content {
  background: var(--imm-canvas);
  color: var(--imm-body);
}

.learndash-wrapper .ld-focus-content h1 {
  font-size: 29px;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  color: var(--imm-ink);
}

.learndash-wrapper .ld-focus-content p {
  font-size: 16.5px;
  line-height: 1.7;
}

/* Keep long-form copy at a readable measure without constraining the video,
   which the lesson content may render full width. */
.learndash-wrapper .ld-focus-content .ld-tabs-content > p,
.learndash-wrapper .ld-focus-content > .ld-tab-content > p {
  max-width: var(--imm-prose-max);
}

/* Video wells are ink-deep with a 12px radius, per the handoff. */
.learndash-wrapper .ld-video,
.learndash-wrapper .wp-video,
.learndash-wrapper .ld-focus-content iframe[src*="vimeo"],
.learndash-wrapper .ld-focus-content iframe[src*="youtube"] {
  border-radius: var(--imm-r-panel);
  background: var(--imm-ink-deep);
  overflow: hidden;
}

/* --- Completion ----------------------------------------------------------- */

.learndash-wrapper .ld-status-icon.ld-status-complete { background-color: var(--imm-teal); }

.learndash-wrapper #sfwd-mark-complete input[type="submit"],
.learndash-wrapper .ld-button.learndash_mark_complete_button {
  background-color: var(--imm-teal);
  border-color: var(--imm-teal);
  border-radius: var(--imm-r-btn);
  font-family: var(--imm-font-ui);
  font-size: 15.5px;
  font-weight: 700;
  transition: background-color var(--imm-t-btn);
}

.learndash-wrapper #sfwd-mark-complete input[type="submit"]:hover,
.learndash-wrapper .ld-button.learndash_mark_complete_button:hover {
  background-color: var(--imm-teal-hover);
  border-color: var(--imm-teal-hover);
}

/* --- Step list in the content area ----------------------------------------
   The same LearnDash components as the sidebar, but on paper rather than ink,
   so they need their own treatment rather than inheriting the dark one.
   -------------------------------------------------------------------------- */

.learndash-wrapper .ld-focus-content .ld-table-list,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list {
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
  overflow: hidden;
}

.learndash-wrapper .ld-focus-content .ld-table-list-items,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list-items { background: transparent; }

.learndash-wrapper .ld-focus-content .ld-table-list-item,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list-item {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--imm-line-3);
}

.learndash-wrapper .ld-focus-content .ld-table-list-item:last-child,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list-item:last-child { border-bottom: 0; }

.learndash-wrapper .ld-focus-content .ld-table-list-item-preview,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list-item-preview {
  display: flex;
  align-items: center;
  gap: var(--imm-s-3);
  padding: var(--imm-s-4) var(--imm-s-6);
  color: var(--imm-body);
  text-decoration: none;
}

.learndash-wrapper .ld-focus-content .ld-table-list-item-preview:hover,
.learndash-wrapper .ld-lesson-topic-list .ld-table-list-item-preview:hover {
  background: var(--imm-teal-wash);
  color: var(--imm-ink);
}

.learndash-wrapper .ld-focus-content .ld-topic-title,
.learndash-wrapper .ld-lesson-topic-list .ld-topic-title {
  font-size: 15px;
  font-weight: 600;
  color: inherit;
}

/* Completion markers on paper. LearnDash paints these with
   .ld-secondary-background, which the theme maps to ink — a black disc. Teal
   is the completion colour everywhere else in the product. */

.learndash-wrapper .ld-focus-content .ld-status-icon,
.learndash-wrapper .ld-lesson-topic-list .ld-status-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--imm-r-pill);
}

.learndash-wrapper .ld-focus-content .ld-status-complete,
.learndash-wrapper .ld-focus-content .ld-status-complete.ld-secondary-background,
.learndash-wrapper .ld-lesson-topic-list .ld-status-complete.ld-secondary-background {
  background-color: var(--imm-teal);
  color: #fff;
}

.learndash-wrapper .ld-focus-content .ld-status-incomplete,
.learndash-wrapper .ld-lesson-topic-list .ld-status-incomplete {
  background-color: transparent;
  border: 2px solid var(--imm-line-dashed);
}

/* Section headings in the content area */

.learndash-wrapper .ld-focus-content .ld-lesson-section-heading {
  display: block;
  margin: var(--imm-s-7) 0 var(--imm-s-3);
  color: var(--imm-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
}

/* --- Mobile ---------------------------------------------------------------
   Handoff § Phase 12: the lesson rail moves below the content on narrow
   screens. LearnDash already collapses its sidebar; this keeps the Immersion
   rail legible when it does.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-focus-rail { padding: var(--imm-s-3); }
  .imm-focus-card { padding: var(--imm-s-4); }

  .learndash-wrapper .ld-focus-header { position: static; }
}

/* ==========================================================================
   Step furniture — handoff § Phase 9
   Topics render inside Focus Mode, so these ride along with the lesson CSS
   rather than owning a stylesheet of their own.
   ========================================================================== */

.imm-step-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--imm-s-3);
  margin: 0 0 var(--imm-s-3);
}

.imm-chip--sample {
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  color: var(--imm-teal);
}

/* --- Downloads ------------------------------------------------------------ */

.imm-downloads {
  margin-top: var(--imm-s-9);
  padding: var(--imm-s-7);
  background: var(--imm-paper);
  border: 1px solid var(--imm-line);
  border-radius: var(--imm-r-panel);
}

.imm-downloads__list {
  margin: var(--imm-s-3) 0 0;
  padding: 0;
  list-style: none;
}

.imm-download {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--imm-s-4);
  padding: var(--imm-s-3) 0;
  border-bottom: 1px solid var(--imm-line-3);
}

.imm-download:last-child { border-bottom: 0; }

.imm-download a {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--imm-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.imm-download a:hover { color: var(--imm-teal); }

/* Type and size sit right-aligned, per the handoff. */
.imm-download__meta {
  flex: none;
  font-size: 12.5px;
  color: var(--imm-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Reflection prompt ---------------------------------------------------- */

.imm-reflection {
  margin-top: var(--imm-s-5);
  padding: var(--imm-s-6) var(--imm-s-7);
  background: var(--imm-teal-wash);
  border: 1px solid var(--imm-teal-wash-line);
  border-radius: var(--imm-r-card);
}

.imm-reflection__prompt {
  margin: var(--imm-s-2) 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--imm-ink);
}