/**
 * Course Player Styles
 * Functional CSS only - style with GenerateBlocks global classes
 */

/* Module accordion functionality */
.lms-module__header {
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.lms-module__lessons {
    display: block;
}

.lms-module--collapsed .lms-module__lessons {
    display: none;
}

/* Lesson item link reset (sidebar) */
.lms-lesson-item {
    display: block;
    text-decoration: none;
}

/* Loading state */
.lms-lesson-content {
    position: relative;
}

.lms-lesson-content--loading {
    opacity: 0.5;
    pointer-events: none;
}

.lms-lesson-content--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: lms-spin 1s linear infinite;
}

@keyframes lms-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Navigation button reset */
.lms-nav-button {
    display: inline-block;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
}

.lms-nav-button--disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* Hide prev/next button text on mobile, show only icons */
@media (max-width: 1024px) {
    .lms-nav-button--prev .lms-nav-button__text,
    .lms-nav-button--next .lms-nav-button__text {
        display: none;
    }
}

/* Sidebar close button - functional styles only */
.lms-sidebar-close {
    display: none;
    position: absolute;
    /* The sidebar-inner is position:sticky (its own stacking context) and comes
       later in the DOM, so it paints over this button and eats the tap. Lift the
       close button above it so it's actually clickable. */
    z-index: 10;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 1024px) {
    .lms-sidebar-close {
        display: block;
    }
}

/* Breadcrumb - functional styles only */
.lms-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lms-breadcrumb__item {
    display: inline;
}

.lms-breadcrumb__link {
    text-decoration: none;
}

.lms-breadcrumb__separator {
    display: inline;
    user-select: none;
}

/* ---------------------------------------------------------------------------
 * Collection grid (a course item that groups member posts)
 * Layout only — the card's visual design comes from the author's block pattern
 * (or the built-in fallback card below).
 * ------------------------------------------------------------------------- */
.lms-collection-grid {
    display: grid;
    grid-template-columns: repeat(var(--lms-cols, 3), minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 782px) {
    .lms-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .lms-collection-grid {
        grid-template-columns: 1fr;
    }
}

/* Whole card is a drill-down target */
.lms-collection-card {
    cursor: pointer;
}

/* Built-in fallback card (used only when no pattern is chosen) */
.lms-collection-card__media img,
.lms-collection-card__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.lms-collection-card__body {
    padding-top: 0.75rem;
}

.lms-collection-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
}

.lms-collection-card__excerpt {
    margin: 0 0 0.6rem;
}

.lms-collection-card__link {
    text-decoration: none;
    font-weight: 600;
}

.lms-collection-empty {
    opacity: 0.7;
}

/* Back-to-collection link, shown in the lesson header below the member title */
.lms-collection-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lms-collection-back:hover {
    opacity: 0.75;
}

.lms-collection-back__icon {
    font-size: 1.1em;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Mobile bottom navigation bar — functional guard only.
 *
 * The bar's look (background, radius, sizing, colours) lives in the *editable*
 * course-player CSS (Settings → Course Player), driven by variables at the top,
 * so it can be customised and reset with "Load default". Here we keep only the
 * functional guarantee: the course-menu + comments toggles never appear unless
 * that editable CSS reveals them on mobile. The doubled class (specificity
 * 0,2,0) outranks the plain `.lms-nav-button` rule in the editable CSS, so the
 * toggles stay hidden on installs that haven't reloaded the default CSS yet; the
 * editable reveal is a descendant selector of equal specificity that wins on
 * mobile by loading later (inline in <head>).
 * ------------------------------------------------------------------------- */
.lms-nav-button.lms-nav-button--menu,
.lms-nav-button.lms-nav-button--comments {
    display: none;
}

/* Functional fallback: keep the course-menu button available on mobile even
   before the styled bar (in the editable default CSS) has been loaded — it's
   the only way to open the sidebar on a phone. The editable default reveals it
   too (and styles the whole bar); this just guarantees it's never stranded. */
@media (max-width: 1024px) {
    .lms-nav-button.lms-nav-button--menu {
        display: inline-flex;
    }
}