/* ==========================================================================
   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 {
  --ld-color-primary: var(--imm-teal);
  --ld-color-secondary: var(--imm-ink);
  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-ink);
  letter-spacing: var(--imm-track-h1);
}

.learndash-wrapper a { color: var(--imm-teal); }
.learndash-wrapper a:hover { color: var(--imm-teal-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-bar .ld-progress-bar-percentage {
  background-color: var(--imm-teal);
}

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

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

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

.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-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-teal);
  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-teal-hover); }

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

/* Marking a step complete is the primary action of the whole product. */
.learndash-wrapper #sfwd-mark-complete input[type="submit"],
.learndash-wrapper .ld-button.ld-mark-complete {
  background-color: var(--imm-red);
  border-color: var(--imm-red);
  border-radius: var(--imm-r-btn);
  font-weight: 700;
}

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

/* --- 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-ink); 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-teal);
  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 ----------------------------------------------------------- */

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

.learndash-wrapper .ld-focus-header {
  background: var(--imm-paper);
  border-bottom: 1px solid var(--imm-line);
}

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

.learndash-wrapper .ld-focus-sidebar .ld-course-navigation-heading,
.learndash-wrapper .ld-focus-sidebar .ld-lesson-title,
.learndash-wrapper .ld-focus-sidebar .ld-topic-title {
  color: var(--imm-on-dark);
}

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

.learndash-wrapper .ld-focus-sidebar .ld-item-list-item a { color: var(--imm-on-dark-2); }
.learndash-wrapper .ld-focus-sidebar .ld-item-list-item a:hover { color: #fff; }

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

/* The pre-LD5 chevron treatment currently lives in two code snippets
   ("Sidebar nav: plain chevrons" and "chevrons final fix") plus three stacked
   blocks in Additional CSS. It is restated here so the theme owns it and those
   can be retired — see IMMERSION-PHASE-1.md. */
.learndash-wrapper .ld-course-navigation .ld-expand-button .ld-icon.ld-primary-background,
.learndash-wrapper .ld-course-navigation .ld-expand-button.ld-button-alternate:not([disabled]) .ld-icon.ld-primary-background {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--imm-on-dark-2);
}

.learndash-wrapper .ld-course-navigation .ld-expand-button .ld-expand-text { display: none; }

/* --- 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-ink);
}