/* ==========================================================================
   Single Course Page — supplementary styles.
   Tailwind CSS (CDN) is scoped to .sc-content via important:'.sc-content'
   config, so header/footer remain completely unaffected.
   ========================================================================== */

/* --- Accordion smooth animation --- */
.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.accordion-item.active .accordion-content {
    max-height: 2000px;
    opacity: 1;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* --- Hide scrollbar for mobile tabs --- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- Line clamp utility --- */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Smooth scrolling --- */
html {
    scroll-behavior: smooth;
}

/* --- Fix Tailwind's .container overriding theme's .container max-width --- */
.single-lp_course .site-header .container,
.single-lp_course .site-footer .container {
    max-width: var(--container-max, 1200px) !important;
    margin-inline: auto !important;
}

/* --- Remove site-main padding for course page (hero is full-width) --- */
.single-lp_course .site-main {
    padding: 0;
}

.single-lp_course .lp-theme-wrapper {
    padding: 0;
}

/* Hide LP default breadcrumb on single course (hero has its own) */
.single-lp_course .lp-theme-wrapper > .breadcrumb {
    display: none;
}

/* Ensure hero goes full-width outside container */
.sc-hero {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* --- Prose styles for course content --- */
.prose p {
    margin-bottom: 1rem;
}

.prose strong {
    font-weight: 700;
    color: #111827;
}

.prose ul,
.prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

/* --- Lucide star fill override ---
   Lucide sets fill="none" as an SVG attribute which beats CSS class specificity.
   Must use !important to override SVG presentation attributes. */
.sc-content svg.lucide-star.fill-current {
    fill: currentColor !important;
}

/* --- Mobile bottom CTA padding for footer --- */
@media (max-width: 767px) {
    .single-lp_course .site-footer {
        padding-bottom: 5rem;
    }
}