/* ------------------------------------------------------------
   Hero Top-Stack Safe Zone
   Scope: first/home hero + responsive bottom-image hero.
   Purpose: keep hero title, subtitle, CTAs, and media clear of the
   announcement bar, fixed presentation nav, floating menu toggle,
   and WordPress Customizer/mobile preview chrome.
------------------------------------------------------------- */

:root{
  --vh-hero-top-stack-gap: clamp(.85rem, 2.25vw, 1.35rem);
  --vh-hero-top-stack-reserve: 0px;
  --vh-hero-mobile-menu-reserve: 0px;
}

.vh-layout-hero:first-of-type,
body.home .vh-hero-context-home{
  scroll-margin-top: calc(
    var(--vh-adminbar-height, 0px) +
    var(--vh-announcement-height, 0px) +
    var(--vh-navbar-height, 56px) +
    1.5rem
  );
}

/* Fixed/above-nav announcement states need a hard minimum so title text
   cannot slide under the black preorder/announcement strip or fixed navbar. */
body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{
  padding-top: max(
    var(--vh-context-hero-padding-top, clamp(5.75rem, 9vw, 8rem)),
    calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
  ) !important;
}

body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home,
body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{
  padding-top: max(
    clamp(6.25rem, 10vw, 8.5rem),
    calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
  ) !important;
}

/* Bottom-image heroes were built around desktop theater framing. On tablet/mobile
   the copy must own the top of the section so it remains visible and predictable. */
.vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
  position: relative;
  z-index: 4;
  overflow: visible;
}

.vh-hero-layout-editorial_center_bottom_image .vh-hero-title,
.vh-hero-layout-editorial_center_bottom_image .vh-hero-lead,
.vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{
  position: relative;
  z-index: 5;
}

@media (min-width: 600px) and (max-width: 991.98px){
  :root{
    --vh-hero-top-stack-gap: clamp(1rem, 2.6vw, 1.5rem);
  }

  body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{
    padding-top: max(
      var(--vh-context-hero-padding-top-tablet, clamp(5.75rem, 9vw, 7.5rem)),
      calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
    ) !important;
  }

  body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{
    padding-top: max(
      clamp(6rem, 10vw, 7.75rem),
      calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
    ) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image.masthead > .container{
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
    width: min(100%, 44rem) !important;
    max-width: min(100%, 44rem) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(1.35rem, 3vw, 2rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: min(100%, 44rem) !important;
    max-width: min(100%, 44rem) !important;
    margin-top: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    max-height: min(48vh, 30rem) !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 599.98px){
  :root{
    --vh-hero-top-stack-gap: .95rem;
  }

  body.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type,
  body.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-layout-hero:first-of-type{
    padding-top: max(
      var(--vh-context-hero-padding-top-mobile, clamp(4.75rem, 15vw, 6.25rem)),
      calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
    ) !important;
  }

  body.home.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.customize-preview.vh-announcement-position-above-nav:not(.vh-announcement-dismissed) .vh-hero-context-home,
  body.home.customize-preview.vh-announcement-position-top-fixed:not(.vh-announcement-dismissed) .vh-hero-context-home{
    padding-top: max(
      clamp(5.25rem, 17vw, 6.75rem),
      calc(var(--vh-hero-top-stack-reserve, 0px) + var(--vh-hero-top-stack-gap))
    ) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image.masthead{
    padding-bottom: clamp(2rem, 9vw, 3.25rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image.masthead > .container{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-copy--bottom-image{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
    font-size: min(var(--vh-hero-title-size, 56px), 34px) !important;
    line-height: 1.06 !important;
    max-width: min(100%, 16ch) !important;
    margin-bottom: .7rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
    font-size: min(var(--vh-hero-subtitle-size, 18px), 16.5px) !important;
    line-height: 1.48 !important;
    max-width: min(100%, 31ch) !important;
    margin-bottom: 1.2rem !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-actions{
    width: min(100%, 21rem) !important;
    max-width: min(100%, 21rem) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-wide-media--bottom-edge{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge,
  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    width: 100% !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-media--bottom-edge img{
    max-height: min(42vh, 21rem) !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Give the floating menu an obvious lane without letting it sit on top of hero copy. */
  body.home.vh-nav-scrolled .vh-hero-context-home .vh-hero-copy,
  body.home.customize-preview .vh-hero-context-home .vh-hero-copy{
    padding-right: clamp(0rem, 7vw, 2.75rem);
    padding-left: clamp(0rem, 7vw, 2.75rem);
  }
}

@media (max-width: 380px){
  .vh-hero-layout-editorial_center_bottom_image .vh-hero-title{
    font-size: min(var(--vh-hero-title-size, 56px), 31px) !important;
    max-width: min(100%, 15ch) !important;
  }

  .vh-hero-layout-editorial_center_bottom_image .vh-hero-lead{
    max-width: min(100%, 29ch) !important;
  }
}