/* ==========================================================================
   IMMERSION — LearnDash
   Loads only on LearnDash screens, and only after `learndash-front`.

   Scope note: LearnDash Focus Mode is enabled on this install, so lessons,
   topics and quizzes render through LearnDash's own full-page templates and
   never reach this theme's header.php. They are styled here rather than
   rebuilt. The full lesson layout is Phase 3; this file establishes the
   palette and the chrome so nothing looks like stock LearnDash in the interim.
   ========================================================================== */

/* --- Palette -------------------------------------------------------------- */

.learndash-wrapper {
  /* LearnDash's own Design settings now carry the Immersion palette
     (primary ink, secondary teal, tertiary teal-wash), which is why this file
     no longer fights 12KB of !important colour rules. These are a fallback for
     installs where those settings have not been applied. */
  --ld-color-primary: var(--imm-ink);
  /* LearnDash uses this for text as well as fills — the "0% Complete" figure
     among them — so in dark mode it needs the text weight, not the fill. */
  --ld-color-secondary: var(--imm-link);
  font-family: var(--imm-font-ui);
  color: var(--imm-body);
}

.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper h4 {
  font-family: var(--imm-font-ui);
  color: var(--imm-text);
  letter-spacing: var(--imm-track-h1);
}

.learndash-wrapper a { color: var(--imm-link); }
.learndash-wrapper a:hover { color: var(--imm-link-hover); }

/* LearnDash paints progress and primary chrome with these two utility
   classes throughout. Repointing them covers most of the stock blue at once. */
.learndash-wrapper .ld-primary-background,
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
  background-color: var(--imm-link);
}

.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-primary-color-hover:hover {
  color: var(--imm-link);
}

.learndash-wrapper .ld-secondary-background { background-color: var(--imm-link); }
.learndash-wrapper .ld-secondary-color { color: var(--imm-text); }

/* --- Progress bars -------------------------------------------------------- */

.learndash-wrapper .ld-progress .ld-progress-bar,
.learndash-wrapper .ld-progress-bar {
  height: 8px;
  border-radius: var(--imm-r-pill);
  background-color: var(--imm-progress-track);
  overflow: hidden;
}

.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
  height: 100%;
  border-radius: inherit;
  background: var(--imm-progress-fill);
  transition: width var(--imm-t-progress);
}

/* --- Buttons -------------------------------------------------------------- */

.learndash-wrapper .ld-button {
  border-radius: var(--imm-r-btn);
  background-color: var(--imm-link);
  font-family: var(--imm-font-ui);
  font-weight: 700;
  transition: background-color var(--imm-t-btn), border-color var(--imm-t-btn);
}

.learndash-wrapper .ld-button:hover { background-color: var(--imm-link-hover); }

.learndash-wrapper .ld-button.ld-button-transparent {
  background-color: transparent;
  border: 1px solid var(--imm-line);
  color: var(--imm-text);
}

/* Marking a step complete is the primary action of the whole product.

   LearnDash paints this button with its Appearance "progress" colour (#3e7391,
   teal), at a specificity these rules did not beat, so it rendered blue. The
   button is an <input>, a <button> or an anchor depending on the LearnDash
   version, hence the list; !important because the colour comes from LearnDash's
   own generated inline styles. */
.learndash-wrapper #sfwd-mark-complete input[type="submit"],
.learndash-wrapper #sfwd-mark-complete .learndash_mark_complete_button,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper .ld-button.ld-mark-complete {
  background-color: var(--imm-red) !important;
  border-color: var(--imm-red) !important;
  color: #fff !important;
  border-radius: var(--imm-r-btn);
  font-weight: 700;
}

.learndash-wrapper #sfwd-mark-complete input[type="submit"]:hover,
.learndash-wrapper #sfwd-mark-complete .learndash_mark_complete_button:hover,
.learndash-wrapper .learndash_mark_complete_button:hover,
.learndash-wrapper .ld-button.ld-mark-complete:hover {
  background-color: #d81f3f !important;
  border-color: #d81f3f !important;
}

/* --- Rows and cards ------------------------------------------------------- */

.learndash-wrapper .ld-item-list-item {
  border-radius: var(--imm-r-card);
  border-color: var(--imm-line);
  background: var(--imm-paper);
}

.learndash-wrapper .ld-item-list-item + .ld-item-list-item { margin-top: var(--imm-s-2); }

.learndash-wrapper .ld-item-list-item-preview { border-radius: inherit; }

.learndash-wrapper .ld-item-title { color: var(--imm-text); font-weight: 700; }

.learndash-wrapper .ld-item-details,
.learndash-wrapper .ld-item-list-item .ld-item-details { color: var(--imm-faint); }

/* Completed steps read teal; the status icon is LearnDash's own element. */
.learndash-wrapper .ld-status-complete,
.learndash-wrapper .ld-icon-checkmark.ld-status-complete {
  background-color: var(--imm-link);
  color: #fff;
}

.learndash-wrapper .ld-status-incomplete { color: var(--imm-faint); }

/* Locked steps sit back rather than shouting. */
.learndash-wrapper .ld-item-list-item.ld-is-locked .ld-item-title { color: var(--imm-faint); }

/* --- Focus Mode ----------------------------------------------------------
   Deliberately empty. Focus Mode is owned entirely by lesson.css, which
   matches LearnDash's own selector depth. The rules that used to live here
   were shorter than LearnDash's and lost every cascade — keeping a second,
   weaker copy around only invites that mistake again.
   -------------------------------------------------------------------------- */

/* --- Course grid / catalogue cards ---------------------------------------- */

.ld-course-list-items .ld_course_grid .thumbnail.course {
  border-radius: var(--imm-r-panel);
  border: 1px solid var(--imm-line);
  overflow: hidden;
}

.ld-course-list-items .ld_course_grid .caption h3 {
  font-size: 17.5px;
  color: var(--imm-text);
}

/* --- LearnDash chrome, in either theme --------------------------------------
   Karel, on dark mode: "this text is barely legible… Same for this… More
   legibility issues."

   LearnDash paints its own chrome with literal colours — #333 on a step link,
   a near-white panel behind the progress bar, grey tab labels — chosen for a
   light page. On the dark canvas the step titles measured 1.8:1, which is to
   say invisible.

   These are deliberately specific: LearnDash's own selectors run to four
   classes (`.learndash-wrapper .ld-table-list .ld-table-list-item-preview a`),
   so anything shorter loses. Every value is a token, so light mode is
   unchanged and dark follows automatically.
   -------------------------------------------------------------------------- */

/* Step list rows. */
/* `.learndash-complete` is on the row anchor itself and LearnDash colours it
   from a four-class rule, so the class has to be named here or the completed
   rows stay at 1.8:1 while the titles inside them are already fixed. */
.learndash-wrapper .ld-table-list .ld-table-list-item-preview,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview.learndash-complete,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview.learndash-not-complete,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview a,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview .ld-topic-title,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview .ld-table-list-title {
  color: var(--imm-body);
}

.learndash-wrapper .ld-table-list .ld-table-list-item-preview:hover,
.learndash-wrapper .ld-table-list .ld-table-list-item-preview:hover .ld-topic-title {
  color: var(--imm-text);
}

/* A completed step is still a step you can read. LearnDash mutes it towards
   invisibility once the canvas is dark. */
.learndash-wrapper .ld-table-list .ld-table-list-item.ld-is-complete .ld-topic-title,
.learndash-wrapper .ld-table-list .ld-table-list-item .ld-status-complete ~ .ld-topic-title {
  color: var(--imm-body);
}

/* The list header — "Module Content", the step count.

   It carries `ld-primary-background`, so it is a dark teal bar in BOTH themes.
   Setting it to --imm-text made it dark-on-dark in LIGHT mode: 1.0:1. Text on
   a bar that is always dark is always light. */
.learndash-wrapper .ld-table-list .ld-table-list-header,
.learndash-wrapper .ld-table-list .ld-table-list-header a,
.learndash-wrapper .ld-table-list .ld-table-list-header .ld-table-list-title {
  color: var(--imm-on-dark);
}

/* The panel behind the progress bar. */
.learndash-wrapper .ld-progress,
.learndash-wrapper .ld-progress .ld-progress-heading,
.learndash-wrapper .ld-progress .ld-progress-label,
.learndash-wrapper .ld-progress .ld-progress-steps,
.learndash-wrapper .ld-progress .ld-progress-percentage {
  background-color: transparent;
  color: var(--imm-muted);
}

/* --imm-faint on the light canvas panel is 2.8:1. --imm-muted moves with the
   theme and clears AA in both. */
.learndash-wrapper .ld-progress .ld-progress-label { color: var(--imm-muted); }

/* Tabs: "Step" and "Materials". */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab a,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab span {
  color: var(--imm-muted);
}

.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active a,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active span {
  color: var(--imm-text);
}

.learndash-wrapper .ld-tabs .ld-tabs-navigation { background-color: transparent; }

/* Panels LearnDash fills with a light literal. */
.learndash-wrapper .ld-tabs .ld-tabs-content,
.learndash-wrapper .ld-item-list .ld-item-list-item,
.learndash-wrapper .ld-lesson-item {
  background-color: transparent;
}

/* --- Dark mode leftovers ---------------------------------------------------
   LearnDash's Module Progress box and its "Back to Module" link keep literal
   light-theme colours, so in dark mode the box stayed #f0f3f6 behind pale text
   (1.8:1) and the link was ink on near-black (1.1:1). Both follow the tokens. */
.learndash-wrapper .ld-course-status,
.learndash-wrapper .ld-course-status .ld-course-status-segment,
.learndash-wrapper .ld-lesson-status,
.learndash-wrapper .ld-content-actions,
.learndash-wrapper .ld-content-action {
  background-color: var(--imm-paper);
  border-color: var(--imm-line);
  color: var(--imm-muted);
}

.learndash-wrapper .ld-content-action a,
.learndash-wrapper .ld-content-actions a,
.learndash-wrapper .ld-content-action .ld-course-step-back,
.learndash-wrapper .ld-course-step-back {
  color: var(--imm-link);
}

.learndash-wrapper .ld-content-action a:hover,
.learndash-wrapper .ld-content-actions a:hover,
.learndash-wrapper .ld-course-step-back:hover {
  color: var(--imm-link-hover);
}