/**
 * ===================================================================
 * FRONTEND STYLE
 * ===================================================================
 * IMPORTANT: No colors are hardcoded here. Every color reference uses
 * a CSS custom property (--clms-*), generated by
 * includes/class-clms-settings.php from the "Color Palette" admin
 * settings page. Changing a color there updates the whole frontend
 * automatically — no CSS edits needed.
 */

/* ===================================================================
   CATALOG PAGE
   =================================================================== */

.clms-catalog-wrapper {
    color: var(--clms-text);
}

/* ---------------- Hero banner (greeting) ---------------- */

.clms-hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 350px;
    width: 100%;
    margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url("https://staging.daxprojects.com/syncoratrainings/wp-content/uploads/2026/09/Header-1.png");
}

/* When a custom background image is present it replaces the gradient */
.clms-hero.clms-hero--has-bg {
    background-color: #d7f3f3;
}

.clms-hero-content {
    position: relative;
    z-index: 2;
    max-width: 52%;
    padding: 0 40px;
}

.clms-hero-title {
    margin: 0 0 12px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    color: #033d47;
}

.clms-hero-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: #4a5b5f;
}

/* ---------------- Top bar: Search + Level (categories moved to sidebar) ---------------- */

.clms-catalog-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.clms-catalog-search {
    position: relative;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.clms-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clms-muted);
    display: flex;
    pointer-events: none;
}

#clms-catalog-search-input {
    padding: 9px 14px 9px 34px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid var(--clms-border);
    border-radius: 6px;
    background: var(--clms-card-bg);
    color: var(--clms-text);
}

.clms-level-select {
    padding: 9px 32px 9px 14px;
    flex-shrink: 0;
    width: auto;
    min-width: 190px;
    font-size: 14px;
    border: 1px solid var(--clms-border);
    border-radius: 6px;
    background: var(--clms-card-bg);
    color: var(--clms-text);
}

/* ---------------- Body: Sidebar (categories) + Main (grid) ---------------- */

.clms-catalog-body {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 28px;
    align-items: stretch;
}

/* Dark teal gradient panel (matches the Syncora app sidebar).
   Sidebar-only colours live here so the main palette settings are untouched. */
.clms-catalog-sidebar {
    --clms-sb-text: #ffffff;
    --clms-sb-muted: #83989d;
    --clms-sb-accent: #2fc4bd;
    --clms-sb-line: rgba(255, 255, 255, 0.10);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 28px 20px 24px;
    color: var(--clms-sb-text);
    background:
        radial-gradient(120% 60% at 100% 0%, #10666c 0%, rgba(16, 102, 108, 0) 60%),
        radial-gradient(90% 40% at 100% 50%, #044554 0%, rgba(4, 69, 84, 0) 70%),
        linear-gradient(180deg, #032f39 0%, #013039 55%, #012c36 100%);
    box-shadow: 0 10px 30px rgba(1, 44, 54, 0.25);
}

/* Logo */
.clms-cat-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--clms-sb-line);
    color: var(--clms-sb-text);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

.clms-cat-sidebar-logo svg {
    width: 30px;
    height: 30px;
    color: var(--clms-sb-accent);
    flex-shrink: 0;
}

.clms-cat-sidebar-logo img {
    max-width: 100%;
    height: auto;
    max-height: 38px;
    display: block;
}

.clms-cat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 6px;
}

.clms-cat-sidebar-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
}

.clms-cat-reset-btn {
    background: none;
    border: none;
    color: var(--clms-sb-accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
}

.clms-cat-reset-btn:hover {
    color: var(--clms-sb-text);
    background: none;
    text-decoration: underline;
}

.clms-cat-empty {
    font-size: 13px;
    color: var(--clms-sb-muted);
    padding: 0 6px;
}

/* Category tree */

.clms-catalog-sidebar ul.clms-cat-tree-list,
.clms-catalog-sidebar ul.clms-cat-tree-list li.clms-cat-tree-item {
    list-style: none !important;
    list-style-type: none !important;
}

.clms-catalog-sidebar li.clms-cat-tree-item::marker {
    content: none;
}

.clms-cat-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clms-catalog-sidebar > .clms-cat-tree-list {
    margin-bottom: 4px;
}

.clms-cat-tree-item {
    margin-bottom: 2px;
}

.clms-cat-tree-row {
    display: flex;
    align-items: center;
    padding: 8px 0px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.clms-cat-tree-row:hover {
    background: rgba(255, 255, 255, 0.07);
}

.clms-cat-toggle {
    background: none;
    border: none;
    box-shadow: none;
    padding: 2px;
    cursor: pointer;
    color: var(--clms-sb-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.clms-cat-toggle:hover {
    color: var(--clms-sb-text);
    background: none;
}

.clms-cat-toggle svg {
    transition: transform 0.15s ease;
    transform: rotate(90deg); /* expanded (default) = pointing down */
}

.clms-cat-tree-item.clms-cat-collapsed > .clms-cat-tree-row > .clms-cat-toggle svg {
    transform: rotate(0deg); /* collapsed = pointing right */
}

.clms-cat-toggle-spacer {
    width: 16px;
    flex-shrink: 0;
}

.clms-cat-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--clms-sb-text);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

/* Radio/checkbox circle is hidden visually (still clickable via the label,
   still keyboard-accessible, and the JS filter keeps working). */
.clms-cat-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* Category icon (always white) */
.clms-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
}

.clms-cat-icon img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* forces any icon to white */
}

/* Keyboard focus + selected states, since the circle is gone */
.clms-cat-checkbox:focus-visible ~ .clms-cat-name {
    outline: 1px dashed var(--clms-sb-accent);
    outline-offset: 3px;
}

.clms-cat-tree-row:has(.clms-cat-checkbox:checked) {
    background: rgba(255, 255, 255, 0.12);
}

.clms-cat-checkbox:checked ~ .clms-cat-name {
    font-weight: 600;
    color: var(--clms-sb-text);
}

.clms-cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Top-level categories */
.clms-catalog-sidebar > .clms-cat-tree-list > .clms-cat-tree-item > .clms-cat-tree-row .clms-cat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--clms-sb-text);
}

/* Nested (child) categories: the actual selectable filter items */
.clms-cat-children .clms-cat-name {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.clms-cat-count {
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
}

.clms-cat-children {
    padding-left: 18px;
    margin-left: 10px;
    border-left: 1px solid var(--clms-sb-line);
}

/* ---------------- Main: count + grid ---------------- */

.clms-catalog-main {
    min-width: 0;
}

.clms-catalog-count {
    font-size: 13.5px;
    color: var(--clms-muted);
    margin-bottom: 25px;
}

.clms-catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    transition: opacity 0.15s ease;
}
@media (max-width: 1700px) {
	.clms-catalog-body {
    grid-template-columns: 260px 1fr !important;
}
}
@media (max-width: 1440px) {
	.clms-catalog-body {
    grid-template-columns: 300px 1fr !important;
	}
	.clms-catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (min-width: 1200px) {
    .clms-catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {
	.clms-catalog-body {
    grid-template-columns: 260px 1fr !important;
	}
	.clms-hero-content {
    max-width: 100%;
	}
	#courses-row .row_col_wrap_12.col.span_12.dark.left {
    padding-left: 30px !important;
    padding-right: 30px;
	}
}
@media (max-width: 992px){
	.clms-hero-text {
    font-size: 16px;
	}
	.clms-catalog-grid{
		gap: 15px;
	}
}
@media (max-width: 810px) {
	.clms-catalog-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .clms-catalog-sidebar {
        border-radius: 16px;
    }
    .clms-catalog-grid {
        grid-template-columns: 1fr;
    }
    .clms-catalog-topbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .clms-hero {
        height: auto;
        min-height: 180px;
    }
    .clms-hero-content {
        max-width: 100%;
        padding: 28px 24px;
    }
    .clms-hero-title {
        font-size: 24px;
    }
}

@media (max-width: 660px) {
	.clms-catalog-body {
        grid-template-columns: 1fr !important;
    }
	.clms-course-card {
    padding: 15px 15px !important;
	}
}

.clms-catalog-grid.clms-loading {
    opacity: 0.5;
}

.clms-course-card {
	padding: 20px 25px;
    border: 1px solid var(--clms-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--clms-card-bg);
    transition: box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
    animation: clmsCardFadeInUp 0.45s ease both;
}

.clms-course-card:hover {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--clms-primary) 28%, transparent);
    border-color: color-mix(in srgb, var(--clms-primary) 40%, var(--clms-border));
    transform: translateY(-8px) scale(1.025);
}

@keyframes clmsCardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered entrance — each card animates in slightly after the previous
   one, for a smoother "cascading" feel instead of everything popping in
   at once. Re-triggers automatically on every AJAX search/filter refresh
   too, since the cards are freshly inserted into the DOM each time. */
.clms-course-card:nth-child(1) { animation-delay: 0s; }
.clms-course-card:nth-child(2) { animation-delay: 0.1s; }
.clms-course-card:nth-child(3) { animation-delay: 0.2s; }
.clms-course-card:nth-child(4) { animation-delay: 0.3s; }
.clms-course-card:nth-child(5) { animation-delay: 0.4s; }
.clms-course-card:nth-child(6) { animation-delay: 0.5s; }
.clms-course-card:nth-child(n+7) { animation-delay: 0.6s; }

.clms-course-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.clms-course-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--clms-page-bg);
}

.clms-course-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
	border-radius: 20px;
}

.clms-course-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--clms-page-bg), var(--clms-border));
}

.clms-badge {
    position: absolute;
    top: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    line-height: 1.4;
}

.clms-badge-level {
    left: 10px;
}

.clms-badge-featured {
    right: 10px;
    background: var(--clms-badge-featured-bg);
    color: var(--clms-badge-featured-text);
}

.clms-level-beginner {
    background: var(--clms-badge-beginner-bg);
    color: var(--clms-badge-beginner-text);
}

.clms-level-intermediate {
    background: var(--clms-badge-intermediate-bg);
    color: var(--clms-badge-intermediate-text);
}

.clms-level-advanced {
    background: var(--clms-badge-advanced-bg);
    color: var(--clms-badge-advanced-text);
}

.clms-course-body {
    padding: 16px 18px 18px;
}

.clms-course-cat {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.clms-course-title {
    margin: 0 0 8px;
    font-size: 20px !important;
/*     line-height: 1.2 !important; */
    font-weight: 700;
    color: var(--clms-heading);
}

.clms-course-excerpt {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--clms-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clms-course-card-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 6px;
    background: var(--clms-primary);
    color: var(--clms-primary-text);
}

.clms-no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--clms-muted);
    padding: 40px 0;
}


/* ===================================================================
   SINGLE COURSE PAGE
   Colors: sab "--clms-sc-*" variables se aate hain (Single Course
   Colors admin settings page se) — Catalog page ke "--clms-*"
   variables se bilkul alag/independent.
   =================================================================== */

.clms-single-course {
    color: var(--clms-sc-text);
}

.clms-sc-top-banner {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    margin-bottom: 34px;
}

.clms-sc-top-banner img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
}

/* -------------------------------------------------------------
   SALIENT THEME OVERRIDE — hides the theme's own default Page Title
   bar and Featured Image on the Course single page, since our plugin
   already shows its own title/hero above (.clms-sc-title, .clms-sc-hero,
   etc.). WordPress itself adds the "single-course" class to the body
   tag (no custom body_class filter needed).
   Selectors were confirmed against the official Salient docs/support:
   #page-header-bg / #page-header-wrap / #page-header-text-container
   (title bar) and .post-featured-img (featured image).
   If a different theme is used in future where these selectors don't
   match, simply removing this block is enough — the rest of the
   plugin is unaffected.
   ------------------------------------------------------------- */
body.single-course #page-header-wrap,
body.single-course #page-header-bg,
body.single-course #page-header-text-container,
body.single-course .post-featured-img {
    display: none !important;
}

/* ---------------- HERO ---------------- */

.clms-sc-hero {
    padding-top: 80px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.clms-sc-hero-left {
    animation: clmsCardFadeInUp 0.5s ease both;
}

.clms-sc-hero-right {
    animation: clmsCardFadeInUp 0.5s ease 0.12s both;
}

.clms-sc-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--clms-sc-primary);
    margin-bottom: 10px;
}

.clms-sc-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--clms-sc-heading);
    margin: 0 0 12px;
    line-height: 1.2;
}

.clms-sc-subtitle {
    font-size: 16px;
    color: var(--clms-sc-text);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 800px;
}

.clms-sc-subtitle p {
    margin: 0 0 12px;
}

.clms-sc-subtitle p:last-child {
    margin-bottom: 0;
}

.clms-sc-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--clms-sc-muted);
}

.clms-sc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.clms-sc-level-pill {
    background: var(--clms-sc-achieve-bg);
    color: var(--clms-sc-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.clms-sc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clms-sc-tag {
    background: var(--clms-sc-tag-bg);
    color: var(--clms-sc-tag-text);
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
}

/* ---------------- HERO RIGHT CARD ---------------- */

.clms-sc-card {
    border: 1px solid var(--clms-sc-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--clms-sc-card-bg);
}

.clms-sc-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 15px;
}

.clms-sc-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clms-sc-start-btn {
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 95%;
    border: none;
    padding: 16px;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    background: var(--clms-sc-primary);
    color: var(--clms-sc-primary-text);
}

.clms-sc-start-btn:hover {
    opacity: 0.92;
}

.clms-sc-start-btn svg {
    width: 19px;
    height: 19px;
}

.clms-sc-stats {
    padding: 18px 20px;
}

.clms-sc-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    font-size: 14.5px;
    border-bottom: 1px solid var(--clms-sc-border);
    color: var(--clms-sc-muted);
}

.clms-sc-stat-row:last-child {
    border-bottom: none;
}

.clms-sc-stat-row strong {
    color: var(--clms-sc-heading);
}

/* ---------------- COURSE CONTENT SECTION ---------------- */

.clms-sc-content-section {
    background: var(--clms-sc-section-bg);
    padding: 40px 0;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 80px;
	border-radius: 20px;
}

.clms-sc-content-inner {
    max-width: 100%;
}

.clms-sc-content-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--clms-sc-heading);
    margin: 0 0 6px;
}

.clms-sc-content-subtitle {
    font-size: 14px;
    color: var(--clms-sc-muted);
    margin: 0 0 20px;
}

.clms-sc-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.clms-sc-lesson-item {
    background: var(--clms-sc-card-bg);
    border: 1px solid var(--clms-sc-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
    animation: clmsCardFadeInUp 0.4s ease both;
}

/* Same hover style as the Catalog page cards — a slight lift + shadow.
   No lift on an open (expanded) lesson, so its content (video/text)
   doesn't jitter while hovering. */
.clms-sc-lesson-item:not(.clms-sc-lesson-open):hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--clms-sc-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--clms-sc-primary) 35%, var(--clms-sc-border));
    transform: translateY(-4px);
}

.clms-sc-lesson-item.clms-sc-lesson-open:hover {
    border-color: color-mix(in srgb, var(--clms-sc-primary) 35%, var(--clms-sc-border));
}

/* Staggered entrance — catalog cards jaisa hi cascading feel */
.clms-sc-lesson-item:nth-child(1) { animation-delay: 0s; }
.clms-sc-lesson-item:nth-child(2) { animation-delay: 0.08s; }
.clms-sc-lesson-item:nth-child(3) { animation-delay: 0.16s; }
.clms-sc-lesson-item:nth-child(4) { animation-delay: 0.24s; }
.clms-sc-lesson-item:nth-child(5) { animation-delay: 0.32s; }
.clms-sc-lesson-item:nth-child(n+6) { animation-delay: 0.4s; }

.clms-sc-lesson-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}

.clms-sc-lesson-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clms-sc-achieve-bg);
    color: var(--clms-sc-primary);
    font-weight: 700;
    font-size: 14px;
    border-radius: 9px;
    margin-top: 1px;
}

.clms-sc-lesson-info {
    flex: 1;
    min-width: 0;
}

.clms-sc-lesson-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--clms-sc-heading);
    margin: 0 0 4px;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.clms-sc-lesson-item:not(.clms-sc-lesson-open):hover .clms-sc-lesson-title {
    color: var(--clms-sc-primary);
}

.clms-sc-lesson-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--clms-sc-border);
    background: transparent;
    color: var(--clms-sc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.clms-sc-lesson-item:not(.clms-sc-lesson-open):hover .clms-sc-lesson-toggle {
    border-color: var(--clms-sc-primary);
    color: var(--clms-sc-primary);
    transform: scale(1.08);
}

.clms-sc-lesson-desc {
    font-size: 14px;
    color: var(--clms-sc-muted);
    margin: 0 0 0px;
    padding-bottom: 5px;
}

.clms-sc-lesson-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--clms-sc-muted);
}

.clms-sc-lesson-duration svg {
    width: 14px;
    height: 14px;
}

.clms-sc-lesson-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.clms-sc-lesson-item.clms-sc-lesson-open .clms-sc-lesson-toggle svg {
    transform: scale(1.1);
}

.clms-sc-lesson-item.clms-sc-lesson-open .clms-sc-lesson-toggle {
    background: var(--clms-sc-primary);
    border-color: var(--clms-sc-primary);
    color: var(--clms-sc-primary-text);
}

.clms-sc-lesson-item.clms-sc-lesson-open {
    border-color: var(--clms-sc-primary);
    border-width: 1.5px;
}

.clms-sc-lesson-item.clms-sc-lesson-open .clms-sc-lesson-number {
    background: var(--clms-sc-primary);
    color: var(--clms-sc-primary-text);
}

.clms-sc-lesson-body {
    padding: 0 18px 20px 68px;
    border-top: 1px solid var(--clms-sc-border);
    padding-top: 18px;
}

.clms-video-wrap iframe,
.clms-video-wrap video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
}

.clms-lesson-text {
    line-height: 1.7;
    color: var(--clms-sc-text);
}

.clms-no-content,
.clms-no-lessons {
    color: var(--clms-sc-muted);
}

/* ---------------- ACHIEVEMENTS BOX ---------------- */

.clms-sc-achieve-box {
    background: var(--clms-sc-achieve-bg);
    color: var(--clms-sc-achieve-text);
    border-radius: 12px;
    padding: 24px 26px;
    animation: clmsCardFadeInUp 0.45s ease 0.15s both;
}

.clms-sc-achieve-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--clms-sc-achieve-text);
}

.clms-sc-achieve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
}

.clms-sc-achieve-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
}

.clms-sc-achieve-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--clms-sc-achieve-check);
}

@media (max-width: 782px) {
    .clms-sc-hero {
        grid-template-columns: 1fr;
    }
    .clms-sc-achieve-grid {
        grid-template-columns: 1fr;
    }
    .clms-sc-lesson-body {
        padding-left: 18px;
    }
}

/* ===================================================================
   THEME (SALIENT) INTEGRATION OVERRIDES — single course page only
   ===================================================================
   Salient automatically renders two things on every single post/CPT
   template that we don't want on the course page, since our own
   design (above) already replaces them:
     1. A full-width "page header" banner using the featured image
     2. A full-width "Next Post" link banner at the bottom, using the
        next post's featured image as its background
   Both are theme-level display options, not something WordPress core
   adds — so they're switched off here via CSS, scoped only to
   body.single-course (WordPress's automatic body class for our CPT),
   so regular blog posts are completely unaffected.
*/
body.single-course #page-header-wrap,
body.single-course .page-header-bg-image,
body.single-course #header-space,
body.single-course .heading-title {
    display: none !important;
}

body.single-course .container-wrap {
    padding-top: 0 !important;
}

/* Salient's "Global Row" hooks (e.g. the footer, id="footer-sec") need
   two things to render correctly, both normally handled by Salient's
   own JS after page load — which doesn't run for these rows here
   (confirmed via inspector: missing .loaded class and missing the
   injected .row-bg color div, compared against the same hook on a
   normal page). Instead of depending on that JS (timing-sensitive,
   easy to break), both effects are reproduced directly in CSS:
     1. Full-width breakout — the row itself is forced edge-to-edge.
     2. Background color — applied straight from the row's own
        `--row-bg-color` custom property (already present inline,
        regardless of whether Salient's JS ran) onto its background
        layer, so the color always renders correctly. */
/* Width breakout for .row-bg-wrap is computed precisely in JS instead
   of guessed in CSS (see frontend.js) — the exact positioning context
   Salient uses for this element isn't something we can be 100% sure of
   from CSS alone, and getting it wrong either leaves gaps or stretches
   the content too. JS measures the real pixel offset needed. */
/* NOTE: the footer/global-row full-width issue is now fixed
   structurally in JS (see frontend.js — unwrap() removes the extra
   wrapper div), not via CSS width overrides here. Several CSS-only
   attempts were tried first but proved unreliable, since Salient's own
   row rendering depends on exact DOM structure in ways that are hard
   to fully override from outside. */

/* Theme's own featured-image <span> inside .post-content (confirmed via
   inspector) — separate element from our .clms-sc-top-banner, hidden here. */
body.single-course .post-featured-img {
    display: none !important;
}

/* Structural approach for the bottom Next/Previous Post banner: instead
   of guessing its exact class name (which varies by Salient version),
   we hide any sibling element that isn't our own content wrapper, at
   both levels where Salient typically inserts it — as a sibling inside
   .inner-wrap (next to .post-content), and as a sibling of .inner-wrap
   inside the <article> itself. */
/* Confirmed via inspector: Salient's bottom Next/Previous Post banner
   uses this exact wrapper class. Hiding it precisely, in addition to
   the structural rules above (which cover other theme variants). */
body.single-course .blog_next_prev_buttons {
    display: none !important;
}

body.single-course .inner-wrap > *:not(.post-content) {
    display: none !important;
}

body.single-course article[id^="post-"] > *:not(.inner-wrap) {
    display: none !important;
}

/* -------------------------------------------------------------------
 * GLOBAL FOOTER (Salient "Global Row" hook, id="footer-sec") — fix
 * scoped to the Single Course page ONLY. The Course Catalog page's
 * footer already renders correctly and should not be touched.
 *
 * Salient normally reveals footer elements (logo, social icons) with a
 * JS-driven entrance animation: they start hidden/scaled-up via inline
 * "img-with-animation" styles, then Salient's own JS adds a class that
 * animates them into their normal size on scroll-into-view. That JS
 * doesn't run reliably on the Single Course page (same root cause as
 * the full-width breakout issue above), so the images get stuck in
 * their "before animation" state — oversized, sometimes visually
 * broken. Fix: force the final/settled state directly and cap the
 * logo/icon sizes to sane values (adjust the max-width values below if
 * you want the footer logo/icons bigger or smaller).
 * ------------------------------------------------------------------- */
body.single-course .nectar-global-section .img-with-animation,
body.single-course .nectar-global-section .img-with-aniamtion-wrap,
body.single-course .nectar-global-section .hover-wrap,
body.single-course .nectar-global-section .hover-wrap-inner,
body.single-course .nectar-global-section img.footer-logo,
body.single-course .nectar-global-section img.footer-social-icon {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: none !important;
    animation: none !important;
}

body.single-course .nectar-global-section img.footer-logo {
    width: 100% !important;
    height: auto !important;
    max-width: 200px !important;
}

body.single-course .nectar-global-section img.footer-social-icon {
    width: 100% !important;
    height: auto !important;
    max-width: 28px !important;
    /* Icons were rendering dark/black, which is hard to see on the dark
       footer background — a filter turns them white (assumes the icon
       PNG/webp is a single solid color, which is what makes this trick work). */
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* -------------------------------------------------------------------
 * FOOTER content columns — immediate safety-net max-width (a reasonable
 * width applied before JS loads, so there's no visible flash).
 * The JS (frontend.js: clmsFixFooterContentWidth) immediately refines
 * this value to match the theme's actual container width.
 * ------------------------------------------------------------------- */
.container.normal-container.row #footer-sec > .row_col_wrap_12 {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}