/*
 * RYME HOME FIRST-SCREEN GUARD
 * Do not remove this file when changing unrelated site styles.
 *
 * Requirement:
 * - First viewport = Hero only.
 * - Products/features remain below and appear only after scrolling.
 * - Desktop Hero keeps the approved higher composition.
 */

body.home{
  --ryme-home-header-height:76px;
  --ryme-home-adminbar-height:0px;
}

body.home.admin-bar{
  --ryme-home-adminbar-height:32px;
}

body.home .ryme-homepage-main{
  width:100%;
  min-width:0;
  overflow:visible;
}

body.home .ryme-homepage-main > .hero{
  min-height:calc(100svh - var(--ryme-home-header-height) - var(--ryme-home-adminbar-height))!important;
  min-height:calc(100dvh - var(--ryme-home-header-height) - var(--ryme-home-adminbar-height))!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

/* Preserve the approved desktop composition: the full Hero sits higher. */
@media (min-width:768px){
  body.home .ryme-homepage-main > .hero .ryme-hero-copy{
    transform:translateY(-118px)!important;
  }
}

/* WordPress uses a shorter admin bar on narrow screens. */
@media (max-width:782px){
  body.home.admin-bar{
    --ryme-home-adminbar-height:46px;
  }
}

/* Mobile header is 64px in the RYME responsive layer. */
@media (max-width:767.98px){
  body.home{
    --ryme-home-header-height:64px;
  }

  body.home .ryme-homepage-main > .hero{
    min-height:calc(100svh - var(--ryme-home-header-height) - var(--ryme-home-adminbar-height))!important;
    min-height:calc(100dvh - var(--ryme-home-header-height) - var(--ryme-home-adminbar-height))!important;
    display:grid!important;
    place-items:center!important;
    padding:20px 0 28px!important;
    overflow:hidden!important;
  }

  body.home .ryme-homepage-main > .hero .ryme-hero-copy{
    transform:none!important;
  }
}

/* On very short landscape screens, allow Hero content to grow instead of
   clipping it; the next section still cannot enter the first viewport. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  body.home .ryme-homepage-main > .hero{
    overflow:visible!important;
  }
}