/*
 * The course page: progress bar and syllabus.
 *
 * These class names have existed since the Elementor widgets were built and
 * nothing has ever styled them, so the syllabus has been rendering as a bare
 * nested bullet list - 61 links with no indication of which are lessons, which
 * are quizzes, or which are finished.
 *
 * INHERITS RATHER THAN DECLARES. No font family, no font size, no colour on
 * body text. This markup lands inside somebody's theme, and a stylesheet that
 * sets its own type is how a plugin ends up looking like a plugin.
 *
 * The single colour used is currentColor at reduced opacity, so it stays
 * legible on a dark theme as well as a light one without either being
 * detected.
 */

.tg-course-page {
    margin: 1.5rem 0;
}

/* ---------------------------------------------------------------
   Progress
   --------------------------------------------------------------- */

.tg-course-infobar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border: 1px solid currentColor;
    border-radius: 8px;

    /* The border would otherwise be as loud as the text. */
    border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.tg-course-infobar__status {
    font-weight: 600;
}

.tg-course-infobar__bar {
    /* min-width:0 so this can actually shrink inside the flex row rather than
       forcing the bar off the edge on a narrow screen. */
    flex: 1 1 12rem;
    min-width: 0;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 15%, transparent);
}

.tg-course-infobar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;

    /* Announced by the parent's role="progressbar" and aria-valuenow, so the
       fill itself is decoration. */
    transition: width 0.3s ease;
}

.tg-course-infobar__steps {
    opacity: 0.75;
    font-size: 0.9em;
}

.tg-course-infobar__resume {
    flex: 0 0 auto;
    font-weight: 600;
}

/* ---------------------------------------------------------------
   Syllabus
   --------------------------------------------------------------- */

/*
 * A <details> now, not an <h3> - see CourseContent::html()'s own comment
 * for why: one collapsible group per named section, opened by default so
 * nothing visible before this change is hidden by it, but foldable closed
 * for a syllabus long enough that scrolling past a finished section is real
 * friction. A run of lessons with no section name is unwrapped, same as
 * before, so a course that never used sections looks identical to how it
 * always has.
 *
 * FOUR VISUAL WEIGHTS FOR FOUR THINGS, NOT ONE ROW STYLE REUSED FOUR TIMES.
 * Reported directly: a section read as no different from the lesson under
 * it, and a topic's own quiz sat at the same indent as the topic rather
 * than looking like it belonged to it. A section is a heading a visitor
 * never clicks; a lesson is the thing they open; a topic and its quiz are
 * both subordinate to that lesson, one step further indented again. Size,
 * weight and a left rule carry that now - never a colour, which is the
 * one thing this file still refuses to declare (see the file docblock).
 */
.tg-course-content__section {
    margin: 2.5rem 0 1rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding-top: 1.25rem;
}

.tg-course-content__section:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.tg-course-content__section > summary {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    cursor: pointer;

    /* Deliberately bigger than a lesson row (1.35em vs 1.05em below) - a
       section is the one row on this page nothing links to, so it has to
       read as a heading from size alone, not just from being first. */
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: -0.01em;
    list-style: none; /* the marker below replaces the default triangle in every browser that honours this */
}

.tg-course-content__section > summary::-webkit-details-marker {
    display: none;
}

.tg-course-content__section > summary::before {
    display: inline-block;
    flex: 0 0 auto;
    content: "\25BC";
    font-size: 0.55em;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

.tg-course-content__section:not([open]) > summary::before {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .tg-course-content__section > summary::before {
        transition: none;
    }
}

.tg-course-content__lessons {
    list-style: none;
    margin: 1.25rem 0 0.5rem;
    padding: 0;
}

.tg-course-content__step {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.tg-course-content__step a {
    /* min-width:0 and wrapping, because these titles are long: "Carbohydrate
       Metabolism: Gluconeogenesis and Glycogen" must not push the completion
       marker off the row. */
    min-width: 0;
    overflow-wrap: break-word;
    text-decoration: none;
    color: inherit;
}

.tg-course-content__step a:hover,
.tg-course-content__step a:focus-visible {
    text-decoration: underline;
}

/*
 * A lesson is the thing you open. Its own size step down from the section
 * above it, and a left rule no other row here carries - the one visual
 * device that says "this, specifically, is what this section contains",
 * distinct from a topic or quiz being subordinate to IT one indent further
 * in.
 */
.tg-course-content__step--lesson {
    padding-left: 0.85rem;
    border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
}

.tg-course-content__step--lesson > a {
    font-size: 1.05em;
    font-weight: 650;
}

.tg-course-content__children > ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.75rem;
}

.tg-course-content__children .tg-course-content__step {
    padding: 0.5rem 0;
    font-size: 0.92em;
    opacity: 0.9;
}

/*
 * Type markers, as an icon-and-text chip rather than colour.
 *
 * A student scanning a syllabus needs to know which rows are quizzes before
 * clicking. Colour alone would say nothing to a screen reader and nothing to
 * anyone who cannot distinguish it, so the label is real text - the glyph in
 * front of it is decorative and purely reinforcing.
 */
.tg-course-content__step--quiz > a::before,
.tg-course-content__step--topic > a::before {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    flex: 0 0 auto;
    margin-right: 0.4rem;
    padding: 0.15em 0.55em;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.tg-course-content__step--quiz > a::before {
    content: "\270E  Quiz";
}

.tg-course-content__step--topic > a::before {
    content: "\25CE  Topic";
}

.tg-course-content__done {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.7;
    white-space: nowrap;
}

.tg-course-content__step.is-complete > a {
    opacity: 0.75;
}

.tg-course-content__lock {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.6;
    white-space: nowrap;
}

.tg-course-content__step.is-locked > a {
    opacity: 0.6;
}

.tg-course-content__preview {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

@supports not (color: color-mix(in srgb, currentColor 12%, transparent)) {
    .tg-course-content__preview {
        background: rgba(128, 128, 128, 0.2);
    }
}

/* ---------------------------------------------------------------
   Buy this course
   --------------------------------------------------------------- */

.tg-course-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    border: 1px solid currentColor;
    border-radius: 8px;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.tg-course-purchase__note {
    margin: 0;
}

.tg-course-purchase__cta {
    flex: 0 0 auto;
    padding: 0.6em 1.2em;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .tg-course-purchase {
        border-color: rgba(128, 128, 128, 0.35);
        background: rgba(128, 128, 128, 0.08);
    }

    .tg-course-purchase__cta {
        background: rgba(128, 128, 128, 0.18);
    }
}

/* ---------------------------------------------------------------
   Older browsers
   --------------------------------------------------------------- */

/*
 * color-mix() is well supported but not universal, and every use above is a
 * border or a background that must not become invisible when it is not
 * understood. These fallbacks are declared FIRST in each rule by virtue of
 * this block being last only for readability - @supports not() applies them
 * where color-mix is unavailable.
 */
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .tg-course-infobar {
        border-color: rgba(128, 128, 128, 0.35);
    }

    .tg-course-infobar__bar,
    .tg-course-content__step--quiz > a::before,
    .tg-course-content__step--topic > a::before {
        background: rgba(128, 128, 128, 0.15);
    }

    .tg-course-content__step--quiz > a::before,
    .tg-course-content__step--topic > a::before {
        border-color: rgba(128, 128, 128, 0.3);
    }

    .tg-course-content__step {
        border-bottom-color: rgba(128, 128, 128, 0.2);
    }

    .tg-course-content__section {
        border-top-color: rgba(128, 128, 128, 0.25);
    }

    .tg-course-content__step--lesson {
        border-left-color: rgba(128, 128, 128, 0.4);
    }
}

/* ---------------------------------------------------------------
   What is inside this lesson
   --------------------------------------------------------------- */

/*
 * Rendered on lesson and topic pages, which is why this lives here rather
 * than in step-chrome.css: it reuses the syllabus's own step markup, and one
 * stylesheet describing a step once is what stops the course page and the
 * lesson page drifting into looking like two products.
 */

.tg-step-contents {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.tg-step-contents__title {
    margin: 0 0 0.75rem;
    font-size: 1.1em;
}

@supports not (color: color-mix(in srgb, currentColor 12%, transparent)) {
    .tg-step-contents {
        border-top-color: rgba(128, 128, 128, 0.2);
    }
}