/* DRUK V8.9 — Fixed/sticky header + true viewport hero correction
   - Entire header stack stays visible while scrolling.
   - Homepage hero occupies the remaining viewport below the header.
   - 75%+ image / <=25% copy zone is preserved.
*/
:root{
  --druk-header-stack:124px;
  --druk-header-mobile:72px;
}

/* Keep the complete header stack pinned without removing it from document flow. */
#siteHeader{
  position:sticky!important;
  top:0!important;
  z-index:2600!important;
  width:100%!important;
  background:#fff!important;
}
#siteHeader>.topbar,
#siteHeader>.site-header{
  position:relative!important;
  top:auto!important;
}

/* Homepage = one viewport including the visible header stack. */
body.v83-home .vh-section.vh-hero{
  height:calc(100vh - var(--druk-header-stack))!important;
  height:calc(100dvh - var(--druk-header-stack))!important;
  min-height:460px!important;
  max-height:none!important;
}

/* Content is allowed to be smaller, never taller than the lower quarter. */
body.v83-home .vh-hero-card{
  height:auto!important;
  max-height:25%!important;
}
body.v83-home .vh-hero-shade{
  background:linear-gradient(
    to top,
    rgba(3,22,42,.94) 0%,
    rgba(3,22,42,.80) 10%,
    rgba(3,22,42,.44) 19%,
    rgba(3,22,42,.12) 25%,
    rgba(3,22,42,0) 30%
  )!important;
}

/* Course in-page navigation sits directly below the pinned header stack. */
body.v83-course .course-page-nav,
.course-page-nav{
  top:var(--druk-header-stack)!important;
}

@media(max-width:920px){
  :root{--druk-header-stack:72px;}
  #siteHeader>.topbar{display:none!important;}
  body.v83-home .vh-section.vh-hero{
    height:calc(100vh - var(--druk-header-mobile))!important;
    height:calc(100dvh - var(--druk-header-mobile))!important;
    min-height:0!important;
    max-height:none!important;
  }
  body.v83-home .vh-hero-card{
    height:auto!important;
    max-height:25%!important;
  }
  body.v83-course .course-page-nav,
  .course-page-nav{top:var(--druk-header-mobile)!important;}
}

/* Small phones: preserve the 25% cap by keeping only essential hero copy/actions. */
@media(max-width:520px){
  body.v83-home .vh-hero-short-course-list,
  body.v83-home .vh-hero-stat-cards{display:none!important;}
  body.v83-home .vh-hero-inner{padding:0 14px 14px!important;}
  body.v83-home .vh-hero-card{
    width:calc(100% - 56px)!important;
    max-height:25%!important;
    overflow:visible!important;
  }
  body.v83-home .vh-hero-card h1,
  body.v83-home .vh-hero-card h2{
    font-size:clamp(1.35rem,6.4vw,1.78rem)!important;
    margin-bottom:4px!important;
  }
  body.v83-home .vh-hero-card>p{
    -webkit-line-clamp:2!important;
    font-size:clamp(.68rem,3vw,.78rem)!important;
    line-height:1.22!important;
    margin-bottom:5px!important;
  }
  body.v83-home .vh-actions.single .btn{
    min-height:29px!important;
    padding:6px 9px!important;
    font-size:.63rem!important;
  }
  body.v83-home .vh-slider-controls{bottom:12px!important;right:8px!important;}
}