.course-page-wrapper {
    min-height: 0;
    height: 100%;
    padding: 0;
    position: relative;
    /* This is the key to preventing horizontal scrolling on mobile when the
       sidebar is collapsed. It clips any content that is moved outside its bounds. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Add transitions for the padding/margin fix to prevent clipping during animation */
    transition: padding-left 0.3s ease-in-out, margin-left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.course-main-content {
    font-size: 0.9rem; /* Set a specific, slightly smaller base font for course content. */
    /* Make space on the right for the sidebar. This margin will be animated. */
    margin-right: calc(var(--course-sidebar-width) + 2rem); /* Sidebar width + gap */
    overflow-y: auto; /* Allow the main content to scroll independently */
    flex-grow: 1;
    padding: 0;
    height: 100%;
    transition: margin-right 0.3s ease-in-out, filter 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* Pico adds a default margin-top to headings. Remove it for the main course title. */
.course-main-content h2:first-child {
    margin-top: 0;
}

#lesson-content-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-sidebar {
    /* Take the sidebar out of the normal document flow and position it on the right. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--course-sidebar-width);
    z-index: 1010; /* Set z-index to be above nav buttons but below the toggle */
    background-color: var(--background-color); /* Ensure it has a solid background */
    border-left: 1px solid var(--course-sidebar-border-color);
    padding-left: 2rem;
    padding-bottom: 0.5rem;

    /* sidebar doesn't follow normal page flow, have to add top offset manually */
    padding-top: var(--body-offset-top);

    /* Use flexbox to manage the sidebar's internal layout */
    display: flex;
    flex-direction: column;

    /* The collapse animation will be handled by transform. */
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevent this header from shrinking */
}

.sidebar-header h3 {
    margin-top: 0;
    margin-bottom: 1rem; /* Keep original spacing */
}

#sidebar-toggle {
    position: absolute;
    top: calc(var(--body-offset-top) + 0.5rem); /* Align vertically with the "Lessons" title */
    right: calc(var(--header-border-padding)/2 - 16px);
    z-index: 1020; /* Higher than the sidebar to ensure it's always clickable */

    /* Visual styling to make it a distinct circle button */
    background: white;
    border: 1px solid var(--course-sidebar-border-color);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);

    /* Only transition the rotation */
    transition: transform 0.3s ease-in-out, background-color 0.2s;
}

#sidebar-toggle:hover {
    background-color: #f3f4f6;
}

.icon-arrow {
    width: 24px;
    height: 24px;
    fill: var(--muted-color);
}

/* --- Lesson List --- */
#lesson-list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#lesson-list-container {
    /* Allow the lesson list to grow and scroll */
    flex-grow: 1;
    overflow-y: auto;
}

/* Hide scrollbars on the course page's scrollable elements while the window is
   being resized to prevent layout jank and flashing scrollbars. */
body.is-resizing .course-main-content,
body.is-resizing #lesson-list-container {
    overflow-y: hidden;
}

/* --- Collapsed State --- */
.course-page-wrapper.sidebar-collapsed .course-main-content {
    margin-right: 0;
}

.course-page-wrapper.sidebar-collapsed .course-sidebar {
    /* Move the sidebar completely off-screen to the right. */
    /* We add a safety margin using a theme variable to ensure the sidebar
       moves completely off-screen, avoiding any visual artifacts. */
    transform: translateX(calc(100% + var(--header-border-padding)));
    /* When hidden, we don't need the border */
    border-left-width: 0;
}

/* The button is now a sibling of the wrapper, so we use the adjacent sibling selector (+) */
.course-page-wrapper.sidebar-collapsed + #sidebar-toggle {
    transform: rotate(180deg);
}

/* --- Responsive Overlay for Small Screens --- */
@media (max-width: 1400px) {
    /* When the sidebar is open on small screens, the blur filter on the main
       content can get clipped at the container's edge. To fix this, we apply
       the classic "padding and negative margin" trick to the wrapper. This
       gives the blur effect space to fade out without changing the visual
       alignment of the content. */
    .course-page-wrapper:not(.sidebar-collapsed) {
        /* Add space inside the container for the blur to bleed into */
        padding-left: 0.5rem;
        /* Pull the container back to its original position */
        margin-left: -0.5rem;
    }

    /* On small screens, the main content should always take up the full width. */
    .course-main-content {
        margin-right: 0;
    }

    /* When the sidebar is open (not collapsed), it should appear as an overlay. */
    /* The z-index is now set globally on .course-sidebar, so this rule is no longer needed. */

    /* When the sidebar is open, blur the main content to bring focus to the sidebar. */
    .course-page-wrapper:not(.sidebar-collapsed) .course-main-content {
        filter: blur(4px);
        pointer-events: none; /* Prevent interaction with the blurred content */
    }
}

#lesson-list-container li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: var(--course-sidebar-border-radius);
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease-in-out;
    color: var(--primary-color);

    /* --- Word Wrapping & Hyphenation for Long Lesson Titles --- */

    /* Prevent long words from overflowing their container by allowing them to break. */
    overflow-wrap: break-word;

    /* Enable automatic hyphenation for better text flow with long words.
       This requires the parent element (or <html>) to have a 'lang' attribute. */
    -webkit-hyphens: auto; /* For Safari */
    -ms-hyphens: auto;     /* For IE/Edge */
    hyphens: auto;

    /* This is crucial for flex items. It allows the element to shrink below its intrinsic
       minimum size (the width of the longest word), enabling the wrapping rules to take effect. */
    min-width: 0;
}

#lesson-list-container li a:hover,
#lesson-list-container li a.active {
    background-color: var(--course-sidebar-item-active-background);
    color: var(--course-sidebar-item-active-text);
}

.lesson-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

#lesson-list-container li a:hover .lesson-icon,
#lesson-list-container li a.active .lesson-icon {
    opacity: 1;
}

#lesson-list-container li a.locked {
    /* cursor: not-allowed; */
    color: var(--course-sidebar-locked-item-text);
}

/* Keep hover on locked items from changing background */
#lesson-list-container li a.locked:hover {
    background-color: #e9e9e9;
    color: var(--course-sidebar-locked-item-text);
}

/* Style the selected (active) locked item with a muted background */
#lesson-list-container li a.locked.active {
    background-color: #dadada;
    color: var(--course-sidebar-locked-item-text);
}

#lesson-list-container li a.locked .lesson-icon {
    opacity: 0.5;
}

/* Style for lessons that have been viewed/completed */
#lesson-list-container li a.completed {
    color: #046417;
}

/* Make the icon for completed lessons more prominent */
#lesson-list-container li a.completed .lesson-icon {
    opacity: 0.9;
}

/* When a completed lesson is active or hovered, ensure the text color is white
   to contrast with the primary background color. */
#lesson-list-container li a.completed:hover,
#lesson-list-container li a.completed.active {
    color: var(--course-sidebar-item-active-text);
}

/* Style for lessons that are loading private data for a subscribed user */
#lesson-list-container li a.is-loading-data {
    color: hsl(212, 23%, 53%);
    font-style: italic;
    cursor: wait;
}

#lesson-list-container li a.is-loading-data .lesson-icon {
    opacity: 0.5;
}

#lesson-list-container li a.is-loading-data:hover {
    background-color: hsl(211, 16%, 67%); /* A very light, faded blue/gray */
}

.locked-content {
    text-align: center;
    padding: 2rem 2rem;
    border: 1px solid var(--course-sidebar-border-color);
    border-radius: var(--course-sidebar-border-radius);
    margin-top: 1.5rem;

    flex-grow: 1;
    min-height: 20rem;
    max-height: 30rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.locked-content img {
    margin-top: 0.0rem;
    margin-bottom: 0.5rem;
}

.locked-icon-large {
    width: 48px;
    height: 48px;
    opacity: 0.6;
    margin-bottom: 1rem;
}

.locked-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Styles for the container of a 'text' lesson */
.text-lesson-content {
    line-height: 1.7;
}

/* Remove top margin from the first element inside a text lesson to prevent extra whitespace. */
.text-lesson-content > :first-child {
    margin-top: 0;
}

/* In addition to removing the margin, set a tighter line-height for the
   first heading to reduce the extra vertical space it creates. */
.text-lesson-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    line-height: 1.2;
}

.exercise-content {
    padding: 0rem;
}

.exercise-question {
    font-size: 1.2em; /* Use em to scale relative to the parent container */
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
}

.exercise-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.option-button {
    /* Use Pico's secondary button style as a base */
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    text-align: left;
    width: 100%;
    font-size: 1em; /* Use em to scale relative to the parent container */
    max-width: 500px;
    justify-content: flex-start;
}

.option-button:not([disabled]):hover {
    background-color: #e5e7eb;
    border-color: #d1d5db;
}

.option-button.correct {
    background-color: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
}

.option-button.incorrect {
    background-color: #fee2e2;
    border-color: #dc2626;
    color: #b91c1c;
}

.exercise-explanation {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #f3f4f6;
    border-radius: var(--course-sidebar-border-radius);
    border-left: 4px solid var(--course-sidebar-border-color);
}

/* Responsive container for video and iframe embeds */
.video-embed-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    /* background-color: #000; */
    border-radius: var(--course-sidebar-border-radius);
}

.video-embed-container video,
.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;    
    object-fit: contain
}

.video-description {
    margin-top: 1rem;
    font-size: 0.9rem;
    /* This preserves newline characters (\n) from the text,
       allowing for multi-line descriptions. */
    white-space: pre-wrap;
}

/* --- Floating Lesson Navigation --- */

#lesson-nav-buttons {
    position: fixed;
    bottom: 1.15rem;
    right: 1.15rem;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
    
    /* Hidden by default, will be shown via the rule below */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* Show the buttons only when the sidebar is collapsed.
   The general sibling combinator (~) is used because the nav buttons are siblings of the wrapper. */
.course-page-wrapper.sidebar-collapsed ~ #lesson-nav-buttons {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lesson-nav-button {
    width: 40px;
    height: 40px;
    background-color: var(--background-color);
    border: 1px solid var(--course-sidebar-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background-color 0.2s, opacity 0.2s;
}

.lesson-nav-button:hover {
    background-color: #f3f4f6;
}

.lesson-nav-button svg {
    width: 24px;
    height: 24px;
    fill: var(--muted-color);
}

/* Style for disabled state (e.g., at the first or last lesson) */
.lesson-nav-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Override the generic 'help' cursor from .has-tooltip for these specific buttons.
   Using the parent ID increases specificity to ensure this rule takes precedence. */
#lesson-nav-buttons .lesson-nav-button {
    cursor: pointer;
}