/* ==========================================================================
   NLA LMS — BRAND ALIGNMENT CSS
   members.lipid.org  ·  LMS activity pages
   --------------------------------------------------------------------------
   PURPOSE
   Brings the LMS activity page in line with the NLA CME landing page design
   (see lipid.org/the-child-with-extreme-ldl-c-front-matter/). Restyles the
   Get Started button, the activity-type badges, and the page typography.
   No layout or markup changes — colors, type, and radii only.

   WHERE THIS GOES
   Wherever the platform allows custom CSS: an admin "Custom CSS" field, or
   appended to the LMS theme stylesheet. If neither exists, this needs to go
   to the platform vendor.

   IMPORTANT — SELECTOR NAMES
   The selectors below assume the page is built on Bootstrap (the green
   button and blue/yellow pill badges are Bootstrap defaults). If the markup
   uses different class names, the VALUES are still correct — just move them
   onto the real selectors. Inspect the page to confirm, then delete the
   selectors that don't apply.

   BRAND REFERENCE
     Dark Purple      #3E4E8C   primary buttons, headings, actions (submit, etc), completed nav ring bg , on deck nav ring border
     Darker Purple    #2E3A6B   button hover
     Aqua         #6AC8C1   accents, secondary badges
     Lime         #C2C76C   tertiary accent
     Heart red    #EF4035   NLA logo mark ONLY — never a button or field
     Ink          #1A1E20   body text
     Paper        #F4F7F6   panel fills
     Hairline     #DCE2E1   borders
     Type         Proxima Nova (already licensed via the NLA Adobe Fonts kit:
                  https://use.typekit.net/mho4pjs.css)
                  This typekit is in Celia Mott's Adobe CC account. Maybe add to Lindsay's
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. LAYOUT — Remove default container padding on LMS pages
      so content uses full available width on mobile.
   -------------------------------------------------------------------------- */
.lms-container {
    padding-left: 0;
    padding-right: 0;
}

/* --------------------------------------------------------------------------
   0b. COURSE OUTLINE SIDEBAR — Nav icon circles
   -------------------------------------------------------------------------- */
.lms-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}

/* Completed — dark green filled circle with white checkmark */
.lms-nav-icon--done {
    background-color: #3E4E8C;
    color: #ffffff;
}

/* Active / current — light teal filled circle */
.lms-nav-icon--active {
    background-color: #A9B6F0;
    color: #ffffff;
    border: 2px solid #3E4E8C;
}

/* Not yet started — teal-rimmed white circle */
.lms-nav-icon--pending {
    background-color: #ffffff;
    border: 2px solid #3E4E8C;
}

/* Locked — gray circle with lock icon */
.lms-nav-icon--locked {
    background-color: #cccccc;
    color: #ffffff;
    border: 2px solid #999999;
}

/* Nav link label spacing — 7px gap between icon and text */
.lms-nav-label {
    gap: 7px !important;
}

.lms-nav-link {
    color: #3E4E8C !important;
    font-weight: 700 !important;
}

/* Completed —bold text */
.lms-nav-label--done {
    color: #3E4E8C !important;
    font-weight: 700 !important;
    text-decoration: none;
}
.lms-nav-label--done:hover { color: #2E3A6B !important; }

/* Active / current — aqua teal bold text */
.lms-nav-label--active {
    color: #3E4E8C !important;
    font-weight: 700 !important;
    text-decoration: none;
}
.lms-nav-label--active:hover { color: #3E4E8C !important; }

/* Pending — plain unstyled text */
.lms-nav-label--pending {
    color: #3E4E8C !important;
    font-weight: 400;
    text-decoration: none;
}
.lms-nav-label--pending:hover { color: #3E4E8C !important; }

/* Course Outline heading — dark teal, all-caps, slightly smaller */
.lms-outline-heading {
    color: #3E4E8C;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Outline box — rounded card, paper background, sized to content */
.lms-outline-box {
    background-color: #E9EDFA;
    border: 1px solid #2E3A6B;
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: inline-block;
    width: 100%;
}

.lms-text-primary {
    color: #3E4E8C !important;
}

/* --------------------------------------------------------------------------
   0c. ACTIVITY TITLE — all-caps heavy teal heading at top of each step
   -------------------------------------------------------------------------- */
.lms-activity-title {
    font-family: proxima-nova, Archivo, sans-serif;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 30px !important;
    line-height: 1.03 !important;
    color: #3E4E8C;
    margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   0d. CARDS — rounded corners; teal outline checkmark icon
   -------------------------------------------------------------------------- */
.card {
    border-radius: 0.6rem !important;
    overflow: hidden;
}

.card-header,
.card-header.bg-success,
.card-header.bg-alternate,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-primary,
.card-header.bg-warning {
    color: #ffffff !important;
    font-size: 0.95rem;
}

.card-header.bg-primary {
    background-color: #3E4E8C !important;
    font-weight:800 !important;
    text-transform: uppercase;
}

.card-header.bg-alternate {
    background-color: #A9B6F0 !important;
    color: #2E3A6B !important;
    font-weight:800 !important;
    text-transform: uppercase;
}

/* Navigation / forward-motion buttons — aqua bg, dark green text, capsule */
.btn-lms-nav {
    background-color: #A9B6F0 !important;
    border-color: #A9B6F0 !important;
    color: #2E3A6B !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.85rem 2rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background-color 220ms ease, transform 220ms ease !important;
}
.btn-lms-nav:hover {
    background-color: #86D6D0 !important;
    border-color: #86D6D0 !important;
    color: #2E3A6B !important;
    transform: translateY(-2px);
}
.btn-lms-nav:active { transform: scale(0.98); }
.btn-lms-nav:focus-visible { outline: 3px solid #3E4E8C; outline-offset: 2px; }

/* Teal outline circle-check icon — replaces solid FA check-circle */
.lms-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   0c. COURSE OVERVIEW PAGE — format label, subtitle, progress box, activities heading
   -------------------------------------------------------------------------- */

/* Small all-caps format label above the course title */
.lms-format-label {
    font-family: "proxima-nova", "Hanken Grotesk", system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3E4E8C;
    margin: 0 0 4px;
}

/* Subtitle — sits below the course title */
.lms-course-subtitle {
    font-family: "proxima-nova", "Hanken Grotesk", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #1A1E20;
    margin: 0 0 12px;
}

/* Progress box */
.lms-progress-box {
    background-color: #E9EDFA;
    border-radius: 16px 16px 16px 50px;
    padding: 25px;
    color: #3E4E8C
}

.lms-progress-label {
    font-family: "proxima-nova", "Hanken Grotesk", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3E4E8C;
    margin: 0 0 14px !important;
}

.lms-progress-count {
    /** font-size: 0.9rem; */
    color: #3E4E8C;
    margin: 14px 0 0 !important;
}

.lms-progress-bar {
    background-color: rgba(238, 220, 130, .25) !important;
    border-radius: 999px;
}

/* COURSE ACTIVITIES heading */
.lms-activities-heading {
    font-family: "proxima-nova", "Hanken Grotesk", system-ui, sans-serif;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3E4E8C;
    margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   1. TYPEFACE
   Loads the NLA brand font. Skip this block if the LMS already loads it.
   -------------------------------------------------------------------------- */
@import url("https://use.typekit.net/mho4pjs.css");

body {
  font-family: "proxima-nova", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: #1A1E20 !important;
}


/* --------------------------------------------------------------------------
   2. ACTIVITY TITLE
   Currently a plain black serif-weight heading under the banner.
   -------------------------------------------------------------------------- */
main h1,
main h2,
main h3,
.lms-course-title {
  font-weight: 900 !important;
  color: #3E4E8C !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

/* "Course Activities" section heading */
main h4,
.lms-section-title {
  font-weight: 800 !important;
  color: #3E4E8C !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 1.15rem !important;
}


/* --------------------------------------------------------------------------
   3. GET STARTED BUTTON
   Currently Bootstrap green (btn-success).  #3E4E8C, hover #2E3A6B
   -------------------------------------------------------------------------- */
.btn-success,
.btn-primary,
a.btn-success,
a.btn-primary {
  background-color: #3E4E8C !important;
  border-color: #3E4E8C !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.85rem 2rem !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: background-color 220ms ease, transform 220ms ease !important;
}

.btn-success-outline,
.btn-primary-outline,
a.btn-success-outline,
a.btn-primary-outline {
    background-color: #ffffff !important;
    border-color: #3E4E8C !important;
    color: #3E4E8C !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.85rem 2rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: background-color 220ms ease, transform 220ms ease !important;
}

.btn-success:hover,
.btn-primary:hover,
a.btn-success:hover,
a.btn-primary:hover {
  background-color: #2E3A6B !important;
  border-color: #2E3A6B !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.btn-success:active,
.btn-primary:active {
  transform: scale(0.98) !important;
}

.btn-success:focus-visible,
.btn-primary:focus-visible {
  outline: 3px solid #6AC8C1 !important;
  outline-offset: 2px !important;
}


/* --------------------------------------------------------------------------
   4. ACTIVITY-TYPE BADGES
   Currently bright Bootstrap blue (Content / Assessment / Evaluation /
   Credit claim) and bright yellow (Required). Muted to brand tones so the
   page reads calmly and "Required" stops shouting.
   -------------------------------------------------------------------------- */

/* type badges — blue -> aqua on teal text */
.badge-primary,
.badge.bg-primary,
.label-primary {
  background-color: #E9EDFA !important;
  color: #2E3A6B !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.35em 0.7em !important;
  border-radius: 6px !important;
}

/* required badges — yellow -> quiet lime */
.badge-warning,
.badge.bg-warning,
.label-warning {
  background-color: #F2EAF8 !important;
  color: #8B5FAF !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.35em 0.7em !important;
  border-radius: 6px !important;
}


/* --------------------------------------------------------------------------
   5. COURSE ACTIVITIES LIST
   Softens the hard grey grid into brand cards.
   -------------------------------------------------------------------------- */
.list-group,
.lms-activity-list {
  border: 1px solid #DCE2E1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.list-group-item,
.lms-activity-row {
  border: 0;
  border-bottom: 1px solid #EBEFEE !important;
  padding: 1.1rem 1.4rem !important;
  transition: background-color 220ms ease !important;
}

.list-group-item:last-child,
.lms-activity-row:last-child {
  border-bottom: 0 !important;
}

.list-group-item:hover,
.lms-activity-row:hover {
  background-color: #F4F7F6 !important;
}

/* activity name */
.list-group-item > :first-child,
.lms-activity-row > :first-child {
  font-weight: 600 !important;
  color: #1A1E20 !important;
}


/* --------------------------------------------------------------------------
   6. BANNER
   Let the new banner sit flush with rounded brand corners rather than a
   hard rectangle. Optional.
   -------------------------------------------------------------------------- */
img[src*="/lms/banners/"] {
  border-radius: 12px !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}


/* --------------------------------------------------------------------------
   7. LINKS
   -------------------------------------------------------------------------- */
main a:not(.btn) {
  color: #3E4E8C !important;
  text-decoration: none !important;
}

main a:not(.btn):hover {
  color: #2E3A6B !important;
  text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   0f. SUCCESS STATE (CREDIT CLAIMED)
   -------------------------------------------------------------------------- */

.lms-success-hero {
    border-radius: 20px 80px 20px 20px;
    background: linear-gradient(118deg, #296579 0%, #33517F 52%, #4C4A92 100%);
    color: #FFFFFF;
    padding: 40px 44px;
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
}

.lms-success-hero::before {
    content: '';
    position: absolute;
    top: -90px;
    right: 120px;
    width: 240px;
    height: 240px;
    border-radius: 0 0 0 100%;
    background: rgba(169, 182, 240, 0.15);
}

.lms-success-hero::after {
    content: '';
    position: absolute;
    bottom: -110px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 100% 0 0 0;
    background: rgba(176, 140, 215, 0.15);
}

.lms-success-content {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.lms-success-icon-wrap {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #A9B6F0;
    display: grid;
    place-content: center;
    color: #2E3A6B;
}

.lms-success-label {
    font-family: 'fredoka-variable', 'Fredoka', sans-serif;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #A9B6F0;
    margin-bottom: 10px;
}

.lms-success-title {
    font-family: 'proxima-nova', 'Archivo', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 1.03;
    margin: 0 0 12px !important;
    color: #FFFFFF;
}

.lms-success-text {
    font-size: 17px;
    line-height: 1.6;
    color: #D8DEF3;
    margin: 0 0 24px;
    max-width: 58ch;
}

.btn-lms-success-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #A9B6F0 !important;
    color: #2E3A6B !important;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    border: none !important;
    text-decoration: none !important;
}

.btn-lms-success-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
}

.lms-success-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lms-success-stat-card {
    background: #F2F4FB;
    border-radius: 14px;
    padding: 22px 24px;
}

.lms-success-stat-label {
    font-family: 'fredoka-variable', 'Fredoka', sans-serif;
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #6B6F8C;
    margin-bottom: 7px;
}

.lms-success-stat-value {
    font-family: 'proxima-nova', 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    color: #3E4E8C;
}

.lms-success-stat-text {
    font-size: 16px;
    font-weight: 600;
    color: #1A1E20;
    line-height: 1.35;
}

.lms-success-stat-subtext {
    font-size: 12px;
    font-weight: 400;
    color: #6B6F8C;
    display: block;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: normal;
}