/* =======================================================
   LMS – Lesson Pages (Layout & Navigation)
   ======================================================= */



/* ---------- Lesson page wrapper ---------- */
/* Full-width page, but inner content can be constrained */
.lesson-page {
    width: 100%;
    padding: 0;   
}

/* ---------- Lesson content (readable width) ---------- */
/* Keeps long text readable without shrinking navigation */
.lesson-content {

    max-width: 1100px;
    width: 100%;
    margin: 0 auto;

}


.course-layout:not(:has(.course-outline.open)) .lesson-content {
    max-width: 1200px;
}


.lesson-content .lesson-block {
    margin-bottom: 1.5rem;
}

/* ---------- Video responsiveness ---------- */
.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-caption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #555;
}

/* =======================================================
   LMS – Navigation (Lessons & Modules)
   ======================================================= */

/* ---------- Navigation bands ---------- */
/* Full-width horizontal bands */
.lesson-navigation,
.module-navigation {
    width: 100%;
    margin: 0;
    padding: 1.5rem 0;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
}

/* ---------- Inner navigation container ---------- */
/* Aligns nav content to same width as lesson text */
.lesson-nav-grid {
    max-width: 960px;      /* Same as .lesson-content */
    margin: 0 auto;
    padding: 0 1rem;

    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: stretch;
}

/* ---------- Navigation items ---------- */
/* Buttons, not cards */
.lesson-nav-item,.module-nav-item
 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;

    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;

    transition: background-color 0.2s ease, border-color 0.2s ease;	
	
    font-size: 1rem;
    font-weight: 500;

}

.lesson-nav-item:hover,.module-nav-item:hover
 {
    background-color: #f0f3f5;
    border-color: #bbb;
}

.lesson-nav-item,.module-nav-item  span {
    font-weight: 600;
}

/* Directional alignment */

.lesson-nav-item.prev,
.module-nav-item.prev {
    justify-content: flex-start;
}

.lesson-nav-item.next,
.module-nav-item.next {
    justify-content: flex-end;
    text-align: right;
}


/* =======================================================
   Mobile behaviour
   ======================================================= */

@media (max-width: 767px) {
    .lesson-nav-grid {
        flex-direction: column;
    }

    .lesson-nav-item {
        justify-content: center;
        text-align: center;
    }
}

/* =======================================================
   LMS – Lesson Typography
   ======================================================= */

/* Base lesson text */
.lesson-content {
    font-size: 1.1rem;        /* ~17.5px */
    line-height: 1.7;
    color: #333;	
    position: relative;
    z-index: 1;

}

/* Paragraphs */
.lesson-content p {
    margin-bottom: 1.25rem;
}

/* Section headings inside lessons */
.lesson-section-heading {
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* First heading feels anchored */
.lesson-content h2:first-of-type,
.lesson-content h3:first-of-type {
    margin-top: 0;
}

/* Optional: lists inside lessons */
.lesson-content ul,
.lesson-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.lesson-content h2 {
    font-size: 1.4rem;
}

.lesson-content h3 {
    font-size: 1.25rem;
}



/* =======================================================
   LMS – Lesson Completion CTA
   ======================================================= */

.lesson-completion {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.lesson-completion .btn {
    margin-bottom: 0.75rem;
}

.completion-status {
    color: #2e7d32;
    font-weight: 600;
}

/* =======================================================
   LMS – Lesson gating (NEXT LESSON)
   ======================================================= */

.lesson-nav-item.locked {
    opacity: 0.4;
    cursor: not-allowed;
	pointer-events: none;
}

.lesson-nav-item.locked::after {
    content: " (complete lesson first)";
    font-size: 0.85rem;
    color: #666;
}

/* =======================================================
   LMS – Module gating (NEXT MODULE)
   ======================================================= */

.module-nav-item.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.module-nav-item.locked::after {
    content: " (complete module first)";
    font-size: 0.85rem;
    color: #666;
}



/* =======================================================
   LMS – Lesson Progress Indicator
   ======================================================= */

.lesson-progress {
    max-width: 960px;
    margin: 1rem auto 2rem auto;
}

.lesson-progress-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.4rem;
}

.lesson-progress-bar {
    width: 100%;
    height: 6px;
    margin-top: 0.5rem;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.lesson-progress-fill {
    height: 100%;
    background: #22c55e;
    width: 0%;
}



/* =======================================================
   LMS – Module listing on course page
   ======================================================= */
   
   
.course-modules { margin-top: 2rem; }

.module-list { list-style: none; padding: 0; }

.module-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.module-header {  
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;	
    max-width: 900px;   /* match your content width */
    margin: 0 auto 1.5rem;

}

.module-status {
  font-size: 0.9rem;
  white-space: nowrap;
}

.module-complete { border-color: #4caf50; }
.module-inprogress { border-color: #ff9800; }
.module-locked { border-color: #bbb; opacity: 0.9; }

.module-start-link { display: inline-block; margin-top: 0.5rem; }



.lesson-progress.complete .lesson-progress-fill {
    background-color: #22c55e;
}


.module-locked {
    opacity: 0.6;
}

.module-locked .module-title {
    color: #888;
}

.module-status {
    font-size: 0.9rem;
    white-space: nowrap;
}


.module-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}


.course-layout {
    display: flex;
	align-items: flex-start;
    position: relative;
};

.outline-module-title::before {
    content: "\25B6";   /* ► */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

.outline-module.active .outline-module-title::before {
    transform: rotate(90deg);
}

.outline-module-content {
    padding-left: 1rem;
	display: none;
}

#courseOutline .outline-module-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563; /* slightly muted */
	margin-bottom: 0.35rem;
}
#courseOutline .outline-module {
    margin-bottom: 1.4rem;
}

#courseOutline .outline-quiz .outline-lesson-link {
    font-size: 0.8rem;
    color: #6b7280;
}
.outline-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}




/* =======================================================
   Course page progress bar
   ======================================================= */
   
   .course-progress {
    margin: 1.5rem 0 2rem;
}

.course-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.course-progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.course-progress-fill {
    height: 100%;
    background: #22c55e;
    width: 0%;
    transition: width 0.3s ease;
}
   
  
/* =======================================================
   Course completed badge
   ======================================================= */
       
   
.course-completed-badge {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}   

/* =======================================================
   Course certificate
   ======================================================= */
  

.course-certificate {
    margin-top: 1rem;
}

.course-certificate .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.course-certificate a,
.course-certificate a:hover,
.course-certificate a:focus,
.course-certificate a:active {
    text-decoration: none;
}

.course-certificate .btn:hover {
    text-decoration: none;
}


.continue-learning a,
.continue-learning a:hover,
.continue-learning a:focus,
.continue-learning a:active {
    text-decoration: none;
}

/* =======================================================
   Breadcrumbs
   ======================================================= */
  

.breadcrumbs {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.breadcrumbs a {
    color: #2986cc;
    text-decoration: none;
}

.breadcrumbs span {
    margin: 0 0.25rem;
}

.lesson-image img {
    max-width: 100%;
    height: auto;
    display: block;
}


.lesson-context {
    max-width: 960px;
    margin: 0 auto;
	text-align: left;
}


.lesson-course-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;

}


.lesson-course-name a:hover {
    text-decoration: underline;
}



.lesson-module-label {    
    font-size: 1rem;
    color: #6b7280;

    color: #6b7280;
    margin-top: 0.2rem;
}


/* =======================================================
   Course outline
   ======================================================= */


#courseOutline {
    top: 100px;
    height: calc(100vh - 100px);
}


#courseOutline .outline-lesson a {
    font-size: 0.85rem;   /* smaller and consistent */
    line-height: 1.4;
}



.outline-lesson-link {
    font-size: 0.85rem;
	color: #2563eb; /* slightly softer blue */
}


.outline-lesson-link.locked::after {
   
    font-size: 0.85rem;
}

.outline-lessons {
    list-style: none;
    padding-left: 18px;
    margin: 0;
}


.outline-lesson {
    position: relative;
    padding-left: 1.2rem;
}

.outline-lesson-link.locked {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}



/* ✅ Disable animation when restoring state */
.outline-open-on-load .course-outline {
    transform: translateX(0);
    transition: none !important;
}


.course-outline-body {
    padding: 1rem 1.25rem;
    opacity: 1;   ✅

}

.course-outline.open .course-outline-body {
    opacity: 1;
}

.outline-lesson.current {
    font-weight: 600;
}

.outline-lesson.locked a {
    opacity: 0.4;
    pointer-events: none;
}



.course-outline-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding-top: 0.75rem;   /* slightly tighter */
    padding-bottom: 0.75rem;

    background-color: #eef1f5;  /* ✅ slight contrast */
    border-bottom: 1px solid #e0e0e0;
	z-index:1000;
}

.outline-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.outline-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
}

.outline-close:hover {
    color: #000;
}



.course-outline-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
}

.course-outline.open + .course-outline-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.course-outline:not(.open) {
    width: 0;
}


.course-outline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    transition: all 0.15s ease;
    position: static;  /* ✅ THIS fixes everything */
	margin-left: 0;
}



.course-main {
    flex: 1;
    padding: 0 1rem;
}


.lesson-toolbar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}


.course-outline.open + .course-main .course-outline-toggle {
    display: none;
}



.course-outline-toggle:hover {
    background-color: #f3f6f9;
    border-color: #bfc5cb;
}

.course-outline-toggle:focus-visible {
    outline: 2px solid #4caf50;
    outline-offset: 2px;
}

.outline-module.current-module {
    background-color: #eef5ef;
    border-left: 3px solid #4caf50;
    padding-left: 0.5rem;
}

/* Base completed lesson */
.outline-lesson.completed {
    color: #666;
}

/* ✅ Current lesson ALWAYS wins */

.outline-lesson.current {
    font-weight: 600;
}





/* ✅ If current + completed, still look current */
.outline-lesson.current.completed {
   
    color: #000;
}

.outline-quiz {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}
.outline-module {
    margin-bottom: 1.2rem;
}


.outline-lesson {
    margin-bottom: 6px;
}

.outline-module-title {
    font-size: 0.7rem;
}


/* ============================
   Highlight Point
   ============================ */

.highlight-point {
    padding: 1.5rem;
    border-radius: 20px;
    margin: 1.5rem 0;
}

/* Caption (e.g. "Did you know?") */
.highlight-caption {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Main information text */
.highlight-info {
    line-height: 1.5;
}


/* ✅ Force all children to inherit the white text */
.highlight-point,
.highlight-point * {
    color: inherit;
}

/* ============================
   Text image
   ============================ */

@media (max-width: 768px) {
    .text-image-inner {
        flex-direction: column;
        gap: 1.5rem;
    }

    .image-column {
        max-width: 140px;
        margin: 0 auto;
    }

    .text-column {
        text-align: left;
    }
}

.text-image-inner {
    display: flex;
    gap: 3rem;               /* slightly larger gap */
    align-items: center;     /* better vertical balance */
}

.text-image-block {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 16px;
    background: #f8fafc; /* very light background */
}


.text-column p {
    line-height: 1.6;
    font-size: 1.05rem;
    margin: 0;
}



.image-column {
    max-width: 260px;
}

.image-column img {
    border-radius: 12px;
    padding: 0.75rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


.text-image-block + h1,
.text-image-block + h2 {
    margin-top: 2.5rem;
}


/* ============================
   Module header
   ============================ */
   

   
.module-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;   /* ✅ correct */
    border-bottom: 1px solid #e5e7eb;	
	max-width: 960px;
    margin: 0 auto;

}


.module-progress-label {
    text-align: left;   /* ✅ key change */
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: #6b7280;

    display: block;
}


.module-meta {
    max-width: 60%;
}

.module-title {
    font-size: 1.2rem;
    font-weight: 400;
    color: #6b7280;
}

.module-progress {
    flex: 1;
}


.lesson-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin-top: 1.5rem;
    color: #1f2937;
}

.module-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}


.module-progress-label {
    font-size: 0.9rem;
    color: #6b7280;
    white-space: nowrap;
}


.lesson-progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
	text-align: center;
}

.lesson-progress-fill {
    background: #22c55e;
    transition: width 0.4s ease;
}

.lesson-back-link {
    margin-bottom: 0.5rem;
}



.back-to-course:hover {
    text-decoration: underline;
}


.lesson-header {
    width: 100%;
    background: #f5f7f9; /* same grey you already have */
    padding: 0.75rem 0 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.lesson-context,
.lesson-toolbar,
.module-header {
    max-width: 1100px;  /* or 960 if you prefer tighter */
    margin: 0 auto;
    padding: 0 1rem;
}



/* ============================
   Image captions
   ============================ */

.image-caption {

    font-size: 0.85rem;
    color: #4b5563;
    font-style: italic;
    margin-top: 0.5rem


}

.image-caption em {
    font-style: normal;
    font-weight: 500;
}



/* ============================
   RTE Table format
   ============================ */
 
/* TABLE BASE */
.lesson-text table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

/* REMOVE P TAG SPACING */
.lesson-text table p {
    margin: 0;
}

/* ✅ APPLY PADDING TO ALL CELLS */
.lesson-text td {
    padding: 0.9rem 1rem;   /* 👈 slightly more generous like your original */
    vertical-align: top;
}

/* ✅ HEADER ROW */
.lesson-text tbody tr:first-child td,
.lesson-text tbody tr:first-child td p {
    background-color: #1f6fae;
    color: #ffffff;
    font-weight: 600;
}

/* HEADER DIVIDER */
.lesson-text tbody tr:first-child td {
    border-right: 2px solid #ffffff;
}

/* ✅ BODY ROW (KEY PART) */
.lesson-text tbody tr:nth-child(2) {
    background-color: #dcebf5;
}

/* BODY DIVIDER */
.lesson-text tbody tr:nth-child(2) td {
    border-right: 1px solid #ffffff;
}

/* CLEAN LAST COLUMN */
.lesson-text td:last-child {
    border-right: none;
}



/* ============================
   Tool tips
   ============================ */
.lesson-text .tooltip {
    position: relative !important;   /* ✅ cancel absolute */
    display: inline !important;      /* ✅ keep inline */
    opacity: 1 !important;           /* ✅ ensure visible */
    font-size: inherit;
    color: #2b6cb0;
    cursor: pointer;
    text-decoration: underline dotted;
}

.lesson-text .tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 0;

    background: #111827;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;

    font-size: 0.85rem;
    width: 220px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;

    z-index: 999;
}

.lesson-text .tooltip:hover::after {
    opacity: 1;
}

/* For click-based behaviour */
.lesson-text .tooltip.active::after {
    opacity: 1;
    visibility: visible;
}


.course-outline.open {
    width: 320px;
    border-right: 1px solid #e0e0e0;
}

.course-outline {
    width: 320px;
    min-width: 320px;
    flex-shrink: 0;

    background: #f7f8fa;
    border-right: 1px solid #e0e0e0;
}

.course-outline * {
    box-sizing: border-box;
}

.course-outline {
    width: 0;
    min-width: 0;
    overflow: hidden;
    flex-shrink: 0;

    background: #f7f8fa;
    border-right: none;
}




@media (max-width: 767px) {
    .course-outline {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        border-right: none;
        border-left: none;       
    }

}

.outline-lesson a {
    display: block;
    width: 100%;
}

.outline-module-content {
	display: none;
}


/* show only active module */
.outline-module.active > .outline-module-content {
    display: block;
}



.outline-module.current-module {
	background-color: #f1f7f2;
	border-left-width: 3px;
}


.outline-lesson a {
	line-height: 1.4;
	font-weight: 500;
}


.outline-module {
	padding-top: 0.25rem;
}

.outline-module-title {

    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}


.outline-lesson {
    position: relative;
    padding-left: 1.2rem; /* space for dot */
}


/* default = incomplete */

.outline-lesson::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;   /* 👈 key change (not centered anymore) */

    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: #d1d5db;
}



.outline-lesson.completed::before {
    background: #22c55e; /* green */
}

.outline-lesson.locked::before {
    background: transparent;
    border: 1px solid #9ca3af;
}





@media (max-width: 767px) 
{
    .course-outline-header {
        position: sticky;
        top: 0;
        z-index: 5;
    }
	
    .outline-lesson {
        padding: 0.75rem 0.25rem;   /* vertical spacing */
        min-height: 48px;          /* reliable touch target */
		list-style: none;
    }
	
	
	.outline-module-title {

	font-size: 1.25rem;
	font-weight: 500;
	color: #6b7280;
	margin-bottom: 0.25rem;	
	font-weight: 600;
	cursor: pointer;

	}	

}

 



/* ============================
   Assessments / MCQs
   ============================ */



.module-assessment {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}



.btn-primary {
    padding: 0.7rem 1.2rem;
    font-weight: 600;
    border-radius: 6px;
}

.assessment-question {
	
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    margin-bottom: 2rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}


.assessment-question legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.answer-option {
    margin-bottom: 0.5rem;
}

.answer-option label {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.answer-option label:hover {
    background: #f3f4f6;
}

.answer-option input[type="radio"]:checked + span {
    font-weight: 600;
}

.assessment-result {
    margin-top: 1.5rem;
    padding: 1.25rem 1.4rem;

    border-radius: 10px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;

    font-size: 1.05rem;
}


.assessment-result strong {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}



.assessment-result.pass {
    background-color: #ecfdf5;
    border-color: #22c55e;
}

.assessment-result.fail {
    background-color: #fef2f2;
    border-color: #ef4444;
}

.assessment-question.correct {
    border-left: 4px solid #22c55e;
    background: #f0fdf4;
}

.assessment-question.incorrect {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}
	.answer-option.show-correct {
    background-color: #dcfce7;
    border-radius: 6px;
}

.answer-option.show-correct label {
    font-weight: 600;
}


.question-feedback {
    display: none;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #374151;
}

.feedback-status {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.feedback-status.correct {
    color: #15803d;
}

.feedback-status.incorrect {
    color: #b91c1c;
}

.feedback-text {
    font-size: 0.9rem;
    color: #374151;
}

.assessment-question.incorrect {
    border-left: 4px solid #ef4444;
}

.question-feedback {
    margin-top: 1rem;
}

/* Feedback container */
.feedback-container {
    margin-top: 0.5rem;
    padding: 0.8rem 1rem;

    background-color: #f9fafb;
    border-left: 4px solid #9ca3af;
    border-radius: 6px;
}

/* Small label to differentiate from question */
.feedback-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

/* Explanation text */
.feedback-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
}

/* Status styling */
.feedback-status {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.feedback-status.correct {
    color: #15803d;
}

.feedback-status.incorrect {
    color: #b91c1c;
}
.feedback-container {
    margin-bottom: 0.75rem;
}
.result-heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.3rem;
}


.assessment-intro {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem 1.5rem;

    background-color: #f9fafb;
    border-left: 4px solid #e5e7eb;
    border-radius: 6px;
}


/* Base bullet */
#courseOutline .outline-lesson::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: #d1d5db; /* default grey */
}

/* ✅ Completed lessons = green bullet */
#courseOutline .outline-lesson.completed::before {
    background: #22c55e;
}

/* ✅ Current lesson = slightly stronger (optional) */
#courseOutline .outline-lesson.current a {
    font-weight: 600;
    color: #1d4ed8;
}



#courseOutline .outline-lesson.completed a {
    color: #6b7280; /* softer grey text */
}

/* BUT current lesson still stands out */
#courseOutline .outline-lesson.current a {
    color: #1d4ed8;
    font-weight: 600;
}

#courseOutline .outline-lesson.current {
    background: rgba(37, 99, 235, 0.06);
    border-radius: 4px;
    padding-left: 0.5rem;
}

#courseOutline .outline-lesson.current::before {
    background: #16a34a;  /* slightly darker green */
    transform: scale(1.2); /* subtle emphasis */
}

#courseOutline .outline-lesson.current {
    padding-left: 1.5rem;
}

#courseOutline .outline-lesson::before {
    left: 2px;
}

#courseOutline .outline-lesson {
    padding-left: 1.5rem;
}

.lesson-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lesson-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}