/* ============================================================
   Course sidebar reskin — shared by all 4 LearnDash single templates
   (course, lesson, topic, quiz). Every selector is scoped to their
   body classes so nothing else on the site is affected.
   ============================================================ */

:root {
  /* fallbacks; real values are set inline by bb_echo_course_header_height_style() */
  --course-header-h: 80px;
  --course-header-own-h: 80px;
}

/* .right-toolbar wraps .dark-light + the breadcrumb (bb_echo_course_breadcrumb())
   as one row instead of two stacked blocks - keeps the toggle from eating a
   whole row's worth of vertical space above the video on its own. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .right-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Course > lesson > topic breadcrumb, rendered by bb_echo_course_breadcrumb()
   inside .right-toolbar, just above .video-player. color/opacity come from
   --main-text-color so it follows the light/dark toggle automatically
   without a separate .light-mode override. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--main-text-color);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-breadcrumb__link {
  color: var(--main-text-color);
  opacity: 0.65;
  text-decoration: none;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-breadcrumb__link:hover {
  opacity: 1;
  text-decoration: underline;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-breadcrumb__sep {
  opacity: 0.5;
}

body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title {
  height: auto;
  flex: 0 0 auto;
  padding: 16px;
}

/* style.css's shared .logo/.md-logo-box rules size the course icon for
   other (non-sidebar) uses - here it's sitting next to a couple lines of
   text in a fairly narrow column, so the 90x90px icon + 103px-tall .logo
   box (style.css:306,311) reads as oversized for what's meant to be a
   compact "currently viewing" strip. Scoped down instead of editing those
   shared rules, since .logo/.md-logo-box are used outside these 4
   templates too. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .logo {
  flex: 0 0 33.333%;
  width: 33.333%;
  height: auto;
  margin: 0;
  justify-content: flex-start;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .md-logo-box,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .logo img {
  width: 48px !important;
  height: 48px !important;
  margin-left: 0 !important;
}
/* .logo (1/3) + .text (2/3): .title is display:flex (style.css:2150) with
   no explicit basis on either child before this, so .text's width just
   followed its own content's natural size - with only a couple of narrow
   words per line, that read as much narrower than .logo's own box, wrapping
   every word onto its own line. Explicit flex-basis on both fixes the split
   regardless of container width. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .text {
  flex: 0 0 66.666%;
  width: 66.666%;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .text h4 {
  font-size: 14px !important;
  line-height: 18px;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .title .text p {
  font-size: 12px;
  margin: 0 0 2px 0;
}

/* Progress bar */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-progress-bar {
  padding: 0 16px 12px;
  flex: 0 0 auto;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-progress-bar__track {
  height: 8px;
  border-radius: 4px;
  background: var(--main-grey-color);
  overflow: hidden;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-progress-bar__fill {
  height: 100%;
  background: var(--brainbuffet-red);
  border-radius: 4px;
  transition: width 0.3s ease;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-progress-bar__label {
  color: var(--main-text-color);
  font-size: 13px;
  margin-top: 6px;
}

/* Scrollable module list */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .left .list {
  height: auto;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--main-bg-color);
  border: 1px solid var(--main-border-color);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main.light-mode .left .list {
  background: white;
  color: black;
}

/* Module header row */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--main-border-color);
  cursor: pointer;
  text-align: left;
  color: var(--main-text-color);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--main-border-color);
  color: var(--main-text-color);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module.is-done .course-module__circle {
  background: var(--brainbuffet-green);
  border-color: var(--brainbuffet-green);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module.is-active .course-module__circle {
  border-color: var(--brainbuffet-red);
  color: var(--brainbuffet-red);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-right: 4px;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__header[aria-expanded="true"] .course-module__chevron {
  transform: rotate(-135deg);
  margin-right: 0;
  margin-top: 4px;
}

/* Collapsible lesson list */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-module__list {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* Lesson item rows */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 30px;
  color: var(--main-text-color);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid var(--main-border-color);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item:hover {
  background: rgba(237, 28, 36, 0.08);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main-border-color);
  flex: 0 0 auto;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item.is-done .course-lesson-item__dot {
  background: var(--brainbuffet-green);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item.is-done .course-lesson-item__title {
  opacity: 0.6;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item.is-current {
  border-left: 3px solid var(--brainbuffet-red);
  padding-left: 27px;
  background: rgba(237, 28, 36, 0.08);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item.is-current .course-lesson-item__title {
  font-weight: 700;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__pill--passed {
  background: var(--brainbuffet-green);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__pill--failed {
  background: var(--brainbuffet-danger);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-lesson-item__pill--required {
  background: var(--brainbuffet-warning);
  color: #000;
}

/* Per-module resource rows (module_resources ACF repeater on sfwd-lessons),
   rendered above a module's topic list - see bb_build_sidebar_module_resources()
   in inc/helpers.php and template-parts/course-sidebar/modules.php. Sized to
   match .course-lesson-item directly below it. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 30px;
  color: var(--main-text-color);
  text-decoration: none;
  font-size: 12px;
  border-bottom: 1px solid var(--main-border-color);
  background: rgba(255, 255, 255, 0.03);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row:hover {
  background: rgba(237, 28, 36, 0.08);
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .mf-icon {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  opacity: 0.75;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .mf-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill--google_drive {
  background: var(--brainbuffet-blue);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill--dropbox {
  background: var(--brainbuffet-blue-dark);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill--onedrive {
  background: var(--brainbuffet-green);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill--pdf {
  background: var(--brainbuffet-danger);
  color: #fff;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .module-files-row__pill--generic {
  background: var(--main-grey-color);
  color: var(--main-text-color);
}

/* Footer card (progress bar lives above the CTA in .course-sidebar__footer) */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-sidebar__footer {
  flex: 0 0 auto;
  background: var(--main-bg-color);
  border-top: 1px solid var(--main-border-color);
  padding: 14px 16px;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-sidebar__cta.topic-nav {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
/* Previous/Next pair (single-sfwd-lessons.php, single-sfwd-topic.php) */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-sidebar__nav {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-sidebar__nav .topic-nav {
  flex: 1;
  text-align: center;
}
/* Quiz pass/fail status (single-sfwd-quiz.php has no nav CTA) */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .course-sidebar__quiz-status {
  color: var(--main-text-color);
  font-size: 13px;
  margin-top: 8px;
}

/* The video in .video-player was rendering tiny for two different reasons,
   depending on how a given lesson delivers it:
   - single-sfwd-topic.php's AWS <video> tag hardcodes width="320"
     height="240"; its plain YouTube <iframe> has no width/height at all.
     Both are just UA-stylesheet-level defaults, easy to override with CSS.
   - The "Interactive Video" embed (H5P, via do_shortcode('[h5p ...]')) is
     an <iframe> wrapped in H5P core's own ".h5p-iframe-wrapper" div
     (h5p-php-library/styles/h5p.css: ".h5p-iframe-wrapper { width: auto;
     height: auto }"), and H5P's own JS resizer sets an *inline* pixel
     width/height on that wrapper based on a one-time measurement - inline
     styles beat any external stylesheet rule that isn't !important, which
     is why plain "width: 100%" here previously had no visible effect on
     it. !important is needed on both the wrapper and the iframe to
     actually win over that inline sizing.
   Not scoped to the desktop media query below since the same tiny-video
   bug exists at every width. style.css:2146's unscoped ".video-player
   iframe { height: 625px }" loads first (this file loads after style.css
   per inc/enqueue.php) and isn't !important, so it's already beaten here
   too. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .video-player .h5p-iframe-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
/* :not(.h5p-iframe) - H5P's own core CSS (h5p-php-library/styles/h5p.css)
   already sets ".h5p-iframe-wrapper iframe.h5p-iframe { height: 100% }" on
   purpose: the WRAPPER's real pixel height is computed by H5P's own JS to
   fit everything Interactive Video needs, including its in-iframe control
   bar - which usually needs more height than a plain 16:9 video box. Forcing
   height:auto + aspect-ratio:16/9 here (as this rule used to, for every
   iframe indiscriminately) overrode that with a shorter box, squishing/
   displacing the control bar into the wrong spot and breaking it - the
   "video controls are misplaced and don't work" bug. Plain iframes with no
   built-in resize logic (a bare YouTube embed, no dimensions of its own)
   still need the aspect-ratio treatment, so they're not excluded here. */
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .video-player video,
body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .video-player iframe:not(.h5p-iframe) {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* Real two-column layout — desktop only. Below 1025px, .main
   switches to display:grid and stacks .left under .right in normal
   flow (style.css:3158) — that existing mobile behavior is untouched.

   REFACTORED to match the My Class page's .side-tile pattern exactly
   (template-my-class.css) - position:fixed sidebar + margin-left on the
   content, instead of a CSS Grid column + position:sticky. Deliberate
   choice for consistency between the two sidebars (so future responsive
   work transfers between them instead of solving the same problem twice
   in two different ways), not just a preference: it's viable here
   specifically because .right's own footer-hero content lives fully
   inside .right now (not a separate shared site footer below .main,
   which is what a permanently-visible fixed sidebar would otherwise cover
   forever - that's exactly why My Class hides its own shared footer
   instead of solving this the sticky way). With nothing below .main left
   for a fixed sidebar to hang over, sticky's much fussier rest-vs-stuck
   math (this file's own history further down covers the several rounds
   that took to get right) is no longer needed to get the "releases at
   the bottom of the content" behavior - fixed just IS the bottom of the
   content here, same as My Class. */
@media (min-width: 1025px) {
  /* .main's own padding (style.css: 45px 8.698vw 2.9687vw 8.698vw) was
     sized for pages with plain text starting right below the header and
     ending before a normal page footer - on these 4 templates it just
     reads as unwanted dead space around the sidebar/content column, which
     should sit flush against the true page edges and right up against the
     nav bar. Zeroing it out here (instead of the previous negative-margin/
     overwidth trick) is simpler and gets the same edge-to-edge result:
     .main is a direct child of #page with no wrapper of its own, so
     width:100% with no left/right padding already reaches the true page
     edges, no cancellation math needed. The one exception is padding-top:
     #masthead is `position: fixed`, which takes it completely out of flow
     and reserves none of its own space, so this manually reserves it:
     --course-header-own-h, the header's OWN height.

     Deliberately NOT --course-header-h (which also folds in the admin bar's
     height): .main already inherits that clearance for free from WP core's
     own `html { margin-top }` (wp-includes/admin-bar.php) simply by being
     positioned normally in flow, same as every other element on the page -
     adding it again here double-counted it, pushing .main's content an
     extra admin-bar-height too far down. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main {
    /* style.css's base .main rule sets display:flex (and width:82.6042vw)
       - the old grid-based layout overrode display to grid, which also
       happened to cancel that flex. Dropping grid without an explicit
       replacement here left .main rendering as a flex row again, which
       .right's margin-left/width:auto (below) assumes normal block flow,
       not flex-item sizing - block is all this layout needs now. */
    display: block;
    /* +24px: matches the same buffer added to .left-sticky's top below, so
       the sidebar and .right's content (breadcrumb/video) start at a
       consistent, visibly comfortable distance from the header instead of
       both sitting flush against it. */
    padding: calc(var(--course-header-own-h) + 24px) 0 0 0;
    box-sizing: border-box;
    width: 100%;
  }

  /* .left itself is now just an inert wrapper - all the real positioning
     lives on .left-sticky below (kept in the markup rather than removing
     a level of nesting from all 4 PHP templates for what's a CSS-only
     refactor; harmless left as a plain, unstyled block). */

  /* The fixed sidebar box - mirrors My Class's .side-tile: position:fixed
     with a constant `top` (a fixed element's `top` is just a distance from
     the viewport, the same at every scroll position - no "resting state"
     vs "stuck state" to reconcile the way position:sticky needed here
     before). Bounded to one viewport's worth of height with its own
     internal scroll (.list, flex:1 1 auto; overflow-y:auto below) so the
     module list scrolls in place while the title/footer stay put. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .left .left-sticky {
    position: fixed !important;
    /* The box itself spans the full viewport (top:0, height:100vh) instead
       of starting right at the header's bottom edge - matching that edge
       exactly requires --course-header-own-h (astra_get_option
       ('hb-header-height')) to equal the header's real rendered height,
       which it kept running a little short of in practice, leaving a gap
       of page background showing above the sidebar. Extending the box
       itself under the header (its z-index:10 is well below #masthead's
       300/100000, so the header still renders over it, same as before)
       means any leftover sliver is filled with the sidebar's own
       background instead of a visible gap - no exact match needed.
       padding-top (not `top`) keeps the *content* starting at the same
       place as before: box-sizing:border-box means the +24px breathing-
       room buffer here still comes out of the box's own height, so the
       content area's size and position are unchanged from the old
       top/height formula, just reached via padding now that the box's
       own top/height no longer need to. */
    top: 0;
    left: 0;
    width: 23.5937vw;
    height: 100vh;
    padding-top: calc(var(--course-header-own-h) + 24px);
    display: flex;
    flex-direction: column;
    z-index: 10;
    background: var(--main-bg-color);
    box-sizing: border-box;
    border-right: 1px solid var(--main-border-color);
  }
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main.light-mode .left .left-sticky {
    background: white;
  }

  /* .right is no longer a grid column - just offset by the fixed
     sidebar's own width instead, same as My Class's .main-tile
     { margin-left: 240px }. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right {
    margin-left: 23.5937vw;
    width: auto;
    /* padding, not a margin on .dark-light (its first child) - .right is a
       plain block box here, so a child's margin-top would be at risk of
       collapsing with .right's own box instead of visibly pushing the
       toggle down (the exact failure mode chased across #masthead earlier
       in this file). Padding on the parent can't collapse. */
    padding-top: 16px;
  }

  /* Line the toolbar row (breadcrumb + toggle) up with the video's own
     80%-wide centered column below it, instead of spanning the full
     .right width. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .right-toolbar {
    width: 80%;
    margin: 0 auto 16px auto;
  }

  /* .video-player (style.css, per template) is a flex column. It was
     given align-items:center here to visually center the H5P "Interactive
     Video" embed, which was rendering at some narrower-than-column width -
     but that was centering a box that H5P's own JS had already sized too
     small (see the width override below), producing a small centered video
     instead of a large one. align-items:stretch (the flex default, kept
     explicit here for clarity) is what actually makes a full-width child
     possible in the first place. */
  /* Forcing the video/iframe to width:100% of .video-player (below) made
     it fill the column edge-to-edge - correctly large, but too large, with
     none of the reference mockup's breathing room around the player.
     80% + auto left/right margins keeps .video-player's own border/
     background hugging the video tightly (matching the mockup's
     .video-card) while centering it within .right with equal space on
     both sides, instead of a fixed-px gutter that isn't centered once the
     column's width varies. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .video-player {
    align-items: stretch;
    justify-content: flex-start;
    width: 80% !important;
    max-width: 80% !important;
    margin: 24px auto;
  }

  /* Match the tabs box to the video-player's 80%-wide, centered column
     instead of spanning the full .right width - the grey gutter it left
     on either side is what previously made the tabs box read as much
     wider than the video above it. margin-bottom on .tabcontent-group
     (not .button-group, which sits flush above it) gives a small gap
     before footer-hero. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .button-group,
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .tabcontent-group {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main .right .tabcontent-group {
    margin-bottom: 24px;
  }

  /* The footer (template-parts/footer-hero.php) is now the last child
     inside .right - since .main has no right padding of its own anymore
     (see above), .right's grid column already reaches the true right
     edge, so footer-hero needs no breakout margin of its own to get there
     - it's just a normal 100%-of-.right block, matching the sidebar's
     flush-left treatment with no extra math. */

  /* style.css:2651 has a global, unscoped ".light-mode li { background-color:
     white !important; color: black !important; }" - leftover from an older
     version of the sidebar's lesson list that rendered as <li> elements
     (it's plain <div>/<a> now, per template-parts/course-sidebar/modules.php,
     so that rule is dead for its original purpose). The footer's widget
     menus (astra_footer() -> WordPress nav menus) still render as real
     <li>, so in light mode they were catching this white-background/
     black-text override too, stomping the red background + white text the
     footer is supposed to have. Not touching the original global rule -
     it's outside this file's scope and something else might still depend
     on it - just countering it here with higher specificity (both are
     !important, so this needs to out-specify it, not just out-order it). */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main.light-mode .right .footer-hero li,
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .main.light-mode .right .footer-hero li a {
    background-color: transparent !important;
    color: #fff !important;
  }

  /* The Astra site header normally scrolls away with the page (it is NOT
     fixed/sticky by default - only #wpadminbar is). Kept pinned to the
     viewport here so it doesn't disappear above the (also pinned) sidebar.

     position:fixed instead of sticky: sticky went through several rounds
     here (a plain `top` offset, then a `margin-top` cancellation trick
     that measured correctly in DevTools yet still rendered wrong) because
     sticky behaves like position:relative(top) until actually stuck - a
     single `top` value can't describe both the "resting" and "stuck"
     states when the admin bar's reserved space is involved. `fixed` has
     no such distinction: `top` is just an absolute viewport offset,
     always, at every scroll position - there's nothing to reconcile.

     The trade-off (why sticky was tried first): fixed takes the element
     completely out of flow, so it no longer reserves its own space the
     way sticky does automatically - .main's padding-top (above) does that
     manually now, using --course-header-own-h. That value is computed
     server-side (bb_echo_course_header_height_style(), inc/helpers.php),
     not JS-measured, avoiding the exact reliability problem that made an
     earlier fixed-header attempt on the My Class page get abandoned for
     sticky in the first place (see template-my-class.css's own history). */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 300 !important;
  }
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz).admin-bar #masthead {
    top: var(--wp-admin--admin-bar--height, 32px) !important;
    /* Was 100000 - higher than WP core's own #wpadminbar (z-index:99999,
       wp-includes/css/admin-bar.css), which made this header win over
       the admin bar's own dropdown menus, hiding them behind it. 99998
       stays comfortably above this page's own content while remaining
       just below the admin bar so its dropdowns render on top again -
       same fix as template-my-class.css's #masthead. */
    z-index: 99998 !important;
  }

  /* --course-header-own-h comes from astra_get_option('hb-header-height'),
     the Customizer's configured row height - .main-header-bar's own
     top/bottom padding (Astra's default spacing around the logo/menu row)
     adds extra rendered height on top of that config value, so #masthead's
     real height was taller than what .main's padding-top/.left-sticky's
     offsets assume, leaving a sliver of the header uncovered (or a sliver
     of overlap, depending on rounding). Zeroing it removes the mismatch at
     the source instead of padding the calculated value to compensate. */
  body:is(.single-sfwd-courses, .single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #masthead .main-header-bar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}