/* The navigation keeps its existing 6rem height; the banner adds its own flow height. */
#masthead {
  height: auto;
  position: var(--rav-header-position, relative);
  top: var(--rav-admin-visible-bottom, 0px);
  will-change: transform;
}

#masthead > .rav-header-main {
  height: 6rem;
  transition: background-color 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

#header-shadow {
  transition: opacity 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  #masthead > .rav-header-main,
  #header-shadow {
    transition-duration: 0ms;
  }
}

#masthead.rav-header-is-sticky > .rav-header-main {
  /* The legacy search/mega-menu bundle sometimes removes its bg-white utility.
     The measured sticky state therefore guarantees its own opaque surface. */
  background-color: #fff !important;
}

/* Before JS (and with JS disabled), the header occupies its exact natural flow
   height, including any banner. Its first measured publish atomically switches
   to fixed positioning and gives this spacer that same height. WP's toolbar
   retains its standard document margin and is never counted twice. */
#header-space {
  height: var(--rav-header-height, 0px);
}

.single-course .rav-course-sidebar-timer {
  top: 10px;
}

.single-course .rav-course-sidebar-card {
  top: 50px;
}

/* This purchase sidebar is shown only at the theme's existing xl breakpoint. */
@media (min-width: 1280px) {
  .single-course .rav-course-sidebar > .rav-course-sidebar-timer {
    top: calc(var(--rav-header-visible-bottom, 0px) + 10px);
  }

  .single-course .rav-course-sidebar > .rav-course-sidebar-card {
    top: calc(var(--rav-header-visible-bottom, 0px) + var(--rav-course-sidebar-card-gap, 50px));
  }

  .single-course .rav-course-sidebar > .rav-course-sidebar-timer,
  .single-course .rav-course-sidebar > .rav-course-sidebar-card {
    transition: top 220ms cubic-bezier(0.33, 1, 0.68, 1);
  }

  .single-course .rav-course-sidebar .rav-course-sidebar-card > .rav-course-sidebar-card-inner {
    position: relative !important;
    top: auto;
  }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .single-course .rav-course-sidebar > .rav-course-sidebar-timer,
  .single-course .rav-course-sidebar > .rav-course-sidebar-card {
    transition-duration: 0ms;
  }
}

/* ONLY font sizes inside ACF course_detail; keep its existing font, weight,
   line-height and spacing. Do not apply .post-content's other typography rules. */
.single-course .rav-course-description h1 { font-size: 3.2rem; }
.single-course .rav-course-description h2 { font-size: 2.2rem; }
.single-course .rav-course-description h3 { font-size: 1.67rem; }
.single-course .rav-course-description h4 { font-size: 1.5rem; }
.single-course .rav-course-description h5 { font-size: 1.1rem; }
.single-course .rav-course-description h6 { font-size: 0.83rem; }

/* Preserve the blog's existing narrow-screen exception for centered block H2. */
@media screen and (max-width: 480px) {
  .single-course .rav-course-description h2.wp-block-heading.has-text-align-center {
    font-size: 32px;
  }
}