/* =====================================================================
   EduMarket360 brand for LearnDash: course page + Focus Mode
   Loaded only on course / lesson / topic / quiz pages by em360-brand-styles.php.
   Edit this file freely; it never touches LearnDash's own files.

   HOW THE PALETTE IS USED
   - Navy  = primary: headings, buttons, the sidebar heading bar, status pills
   - Mint  = accent: progress fill, highlights, hover states, lines
   - Lavender = soft backgrounds (breadcrumbs, sidebar, locked pills)
   - Mint is NOT used for small text on white (too pale to read). Text accents
     use navy-4 / navy-5; mint appears in fills, borders and bars.

   SECTIONS
   A. Palette (variables)
   B. LearnDash's accent classes, re-pointed to the palette
   C. Focus Mode   (selectors taken from LearnDash's own developer snippets)
   D. Progress, status pills, buttons   (standard LearnDash 3.x class names)
   E. (moved) the course landing page now lives in em360-landing.css
   F. Optional: site footer (off by default)
   ===================================================================== */

/* ---------- A. Palette ---------- */
:root {
  --em-navy:   #070235;  --em-navy-2: #100b3f;  --em-navy-3: #1e1b4b;
  --em-navy-4: #322d63;  --em-navy-5: #5b567f;  --em-navy-6: #9591ab;

  --em-mint-100: #d1f8ea; --em-mint-300: #6cf8bb; --em-mint-500: #3ddc97; --em-mint-700: #23a874;
  --em-teal: #4ea388;

  --em-lav-1: #f8f5fb;  --em-lav-2: #f2eff7;  --em-lav-3: #ece7f2;

  --em-gray-1: #f6f2f7; --em-gray-2: #f2f2f5; --em-gray-3: #e5e1e6;
  --em-gray-4: #b8b4c2; --em-gray-5: #837e93; --em-gray-6: #45415a;

  --em-warning: #f5a623; --em-danger: #e5484d;
}

/* ---------- B. LearnDash accent classes -> palette ----------
   LearnDash paints its accent colour (the blue) through these helper classes, with !important,
   so they are overridden here with the same weight. */
html body .learndash-wrapper:not(#em360) .ld-primary-background {
  background-color: var(--em-navy) !important;
  color: #fff !important;
}
html body .learndash-wrapper:not(#em360) .ld-primary-color,
html body .learndash-wrapper:not(#em360) .ld-primary-color-hover:hover {
  color: var(--em-navy-4) !important;
}
html body .learndash-wrapper:not(#em360) .ld-primary-border-color {
  border-color: var(--em-mint-500) !important;
}

/* ---------- C. Focus Mode ---------- */
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-header {
  background: #fff;
  border-bottom: 3px solid var(--em-mint-500);
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-header .ld-brand-logo {
  padding: 10px 18px;
}

/* sidebar: soft lavender, navy heading bar with a mint rule (replaces the blue bar) */
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar {
  background: var(--em-lav-1);
  border-right: 1px solid var(--em-lav-3);
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
  background: var(--em-navy) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--em-mint-500);
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a,
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h1,
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h2,
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3,
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-icon {
  color: #fff !important;
}
/* the round collapse button */
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
  background: var(--em-navy-3) !important;
  border-color: var(--em-mint-500) !important;
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
  color: var(--em-mint-500) !important;
}
/* section headings and lesson rows in the sidebar */
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item-section-heading {
  color: var(--em-navy);
  font-weight: 700;
}
html body .learndash-wrapper:not(#em360) .ld-course-navigation .ld-lesson-item-preview a.ld-lesson-item-preview-heading {
  color: var(--em-gray-6);
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-sidebar .ld-primary-color {
  color: var(--em-navy) !important;   /* the lesson you are on */
  font-weight: 600;
}

/* breadcrumbs under the lesson title */
html body .learndash-wrapper:not(#em360) .ld-breadcrumbs {
  background: var(--em-lav-2);
  border-radius: 10px;
}
html body .learndash-wrapper:not(#em360) .ld-breadcrumbs a,
html body .learndash-wrapper:not(#em360) .ld-breadcrumbs .ld-primary-color {
  color: var(--em-navy-5) !important;
}

/* lesson page: more room and calmer text */
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-main .ld-focus-content {
  padding-left: 2em;
  padding-right: 2em;
}
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-main .ld-focus-content h1,
html body .learndash-wrapper:not(#em360) .ld-focus .ld-focus-main .ld-focus-content .ld-focus-content-title {
  color: var(--em-navy);
}

/* ---------- D. Progress, pills, buttons ---------- */
html body .learndash-wrapper:not(#em360) .ld-progress .ld-progress-bar {
  background: var(--em-lav-3);
}
html body .learndash-wrapper:not(#em360) .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
  background-color: var(--em-mint-500) !important;
}
html body .learndash-wrapper:not(#em360) .ld-progress .ld-progress-percentage {
  color: var(--em-navy) !important;
  font-weight: 700;
}
html body .learndash-wrapper:not(#em360) .ld-progress .ld-progress-steps {
  color: var(--em-gray-5);
}

/* status pills (not the round icons) */
html body .learndash-wrapper:not(#em360) .ld-status:not(.ld-status-icon).ld-status-in-progress {
  background: var(--em-navy) !important;
  color: var(--em-mint-300) !important;
}
html body .learndash-wrapper:not(#em360) .ld-status:not(.ld-status-icon).ld-status-complete {
  background: var(--em-mint-500) !important;
  color: var(--em-navy) !important;
}
html body .learndash-wrapper:not(#em360) .ld-status:not(.ld-status-icon).ld-status-waiting,
html body .learndash-wrapper:not(#em360) .ld-status:not(.ld-status-icon).ld-status-incomplete {
  background: var(--em-lav-3) !important;
  color: var(--em-navy-5) !important;
}
/* the round status icons next to each lesson */
html body .learndash-wrapper:not(#em360) .ld-status-icon.ld-status-in-progress { border-color: var(--em-navy) !important; }
html body .learndash-wrapper:not(#em360) .ld-status-icon.ld-status-complete {
  background-color: var(--em-mint-500) !important;
  border-color: var(--em-mint-500) !important;
  color: var(--em-navy) !important;
}

/* buttons: navy with a mint hover; Mark Complete is the one filled mint button */
html body .learndash-wrapper:not(#em360) .ld-button,
html body .learndash-wrapper:not(#em360) a.ld-button,
html body .learndash-wrapper:not(#em360) button.ld-button {
  background-color: var(--em-navy);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
html body .learndash-wrapper:not(#em360) .ld-button:hover,
html body .learndash-wrapper:not(#em360) a.ld-button:hover {
  background-color: var(--em-mint-500);
  color: var(--em-navy);
}
html body .learndash-wrapper:not(#em360) .ld-content-actions .learndash_mark_complete_button,
html body .learndash-wrapper:not(#em360) .learndash_mark_complete_button {
  background-color: var(--em-mint-500);
  color: var(--em-navy);
  border-radius: 999px;
  font-weight: 700;
}
html body .learndash-wrapper:not(#em360) .learndash_mark_complete_button:hover {
  background-color: var(--em-mint-300);
}
html body .learndash-wrapper:not(#em360) .learndash_mark_complete_button[disabled],
html body .learndash-wrapper:not(#em360) .learndash_mark_complete_button.disabled {
  background-color: var(--em-gray-3);
  color: var(--em-gray-5);
}
/* the small outlined "Mark Complete" in the Focus Mode header */
html body .learndash-wrapper:not(#em360) .ld-focus-header .ld-button {
  background: #fff;
  color: var(--em-navy);
  border: 2px solid var(--em-navy);
}
html body .learndash-wrapper:not(#em360) .ld-focus-header .ld-button:hover {
  background: var(--em-mint-500);
  border-color: var(--em-mint-500);
}

/* ---------- G. Focus Mode: Previous / Next buttons and the selected lesson ----------
   LearnDash paints these from its own style settings, with !important. The selectors below are
   deliberately heavy ("html body ... :not(#em360)") so they win whatever LearnDash outputs. */

/* Next = filled navy, Previous = outlined navy, Back to Course = quiet link */
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button,
html body .learndash-wrapper:not(#em360) .ld-content-actions a.ld-button {
  background-color: #070235 !important;
  border: 2px solid #070235 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button.ld-button-transparent,
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button.ld-button-reverse {
  background-color: #ffffff !important;
  color: #070235 !important;
  border-color: #070235 !important;
}
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button:hover,
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button.ld-button-transparent:hover,
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button.ld-button-reverse:hover {
  background-color: #3ddc97 !important;
  border-color: #3ddc97 !important;
  color: #070235 !important;
}
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button .ld-text,
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-button .ld-icon {
  color: inherit !important;
}
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-course-step-back,
html body .learndash-wrapper:not(#em360) .ld-content-actions .ld-course-step-back * {
  color: #322d63 !important;
}

/* The lesson you are on, in the Focus Mode sidebar: navy text, soft mint row, mint edge, mint circle */
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"],
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"] a,
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"] .ld-lesson-title,
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"] .ld-lesson-item-preview-heading,
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar a[aria-current="page"],
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar a[aria-current="true"] {
  color: #070235 !important;
  font-weight: 600 !important;
}
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"] {
  background-color: #d1f8ea !important;
  box-shadow: inset 4px 0 0 #3ddc97 !important;
}
html body .learndash-wrapper:not(#em360) .ld-focus-sidebar [class*="ld-is-current"] .ld-status-icon {
  border-color: #3ddc97 !important;
  background-color: #ffffff !important;
}

/* Focus Mode header: the tick on the small "Mark Complete" button */
html body .learndash-wrapper:not(#em360) .ld-focus-header .ld-button .ld-icon,
html body .learndash-wrapper:not(#em360) .ld-focus-header .ld-button svg {
  color: #23a874 !important;
  fill: currentColor;
}

/* ---------- F. Optional: site footer (Divi Theme Builder) ----------
   Uncomment to turn the footer navy. Test it: if your footer has several sections,
   the selector may need to be narrowed.
.et-l--footer .et_pb_section { background-color: var(--em-navy-2) !important; }
*/