/* /styles/hero.css
   HOME HERO: show ONLY
   - Subtitle text (.hero__sub)
   - Discover button (.btn--primary)
   - Search bar (#hero-search)

   And let you move the whole group (text + button + search) down/left via CSS variables.
*/

/* ======================
   POSITION CONTROLS
   ====================== */
:root{
  --hero-group-down: 120px;  /* + = move DOWN */
  --hero-group-left: 220px;  /* + = move LEFT */
  --hero-group-gap: 12px;    /* spacing between button + search */
  --hero-search-width: 420px;
}

/* ======================
   SHOW/HIDE (CLEAN)
   ====================== */

/* Hide ONLY what we don't want */
html.is-home .hero h1,
html.is-home .hero__badges,
html.is-home .hero__scroll{
  display: none !important;
}

/* Ensure the subtitle is visible */
html.is-home .hero__sub{
  display: block !important;
  margin: 0 !important;
}

/* Ensure CTA wrapper + search exists */
html.is-home .hero__cta{
  display: flex !important;
}
html.is-home #hero-search,
html.is-home .hero-search{
  display: flex !important;
}

/* ======================
   GROUP LAYOUT + MOVEMENT
   (moves subtitle + button + search together)
   ====================== */
html.is-home .hero .hero__content{
  /* detach from any previous centering/padding rules */
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  transform: translate(
    calc(-50% - var(--hero-group-left)),
    calc(-50% + var(--hero-group-down))
  ) !important;

  z-index: 3 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* kill any panel styling coming from other files */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Make CTA stack button + search */
html.is-home .hero__cta{
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--hero-group-gap) !important;
}

/* ======================
   SUBTITLE LOOK
   ====================== */
html.is-home .hero__sub{
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.55) !important;
  max-width: 520px;
}

/* ======================
   DISCOVER BUTTON LOOK
   (square, white, black text, thin)
   ====================== */
html.is-home .hero__cta .btn--primary{
  /* reset anything old */
  transform: none !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 0 !important; /* no round edges */

  height: 44px !important;
  padding: 0 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;

  /* hide original label (we inject our own) */
  font-size: 0 !important;
  color: transparent !important;
}

/* Inject: "Discover Now →" */
html.is-home .hero__cta .btn--primary::after{
  content: "Discover Now \2192"; /* → */
  font-family: "Inter Tight","Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #000 !important;
  letter-spacing: .01em;
}

/* Hover/active (subtle, no movement) */
html.is-home .hero__cta .btn--primary:hover{
  background: #f7f7f7 !important;
  border-color: rgba(0,0,0,.30) !important;
}
html.is-home .hero__cta .btn--primary:active{
  background: #f2f2f2 !important;
}
html.is-home .hero__cta .btn--primary:focus-visible{
  outline: none !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 3px rgba(255,255,255,.85) !important;
}

/* ======================
   SEARCH BAR WIDTH (no restyling—just make it visible + sized)
   ====================== */
html.is-home .hero-search{
  width: min(var(--hero-search-width), calc(100vw - 40px)) !important;
}
html.is-home .hero-search input[type="search"]{
  width: 100% !important;
}

/* Optional: on very small screens, reduce left offset so it doesn't go off-screen */
@media (max-width: 560px){
  :root{
    --hero-group-left: 20px;
    --hero-group-down: 110px;
    --hero-search-width: 320px;
  }
}
/* Put the search bar ABOVE the button */
html.is-home .hero__cta{
  flex-direction: column !important;
}

/* Reorder: search first, button second */
html.is-home #hero-search{ order: 0 !important; }
html.is-home .hero__cta .btn--primary{ order: 1 !important; }
/* Left-align subtitle text + the whole group */
html.is-home .hero .hero__content{
  text-align: left !important;
  align-items: flex-start !important;
}

html.is-home .hero__sub{
  text-align: left !important;
}
/* =========================
   INDIVIDUAL POSITION CONTROLS
   (+ = more DOWN / more LEFT)
   ========================= */
:root{
  /* overall group (already working) */
  --hero-group-down: 120px;
  --hero-group-left: 220px;

  /* subtitle offsets */
  --hero-sub-down: 80px;
  --hero-sub-left: 0px;

  /* search offsets */
  --hero-search-down: 100px;
  --hero-search-left: 0px;

  /* button offsets */
  --hero-btn-down: 135px;
  --hero-btn-left: 0px;
}

/* Subtitle */
html.is-home .hero__sub{
  transform: translate(
    calc(-1 * var(--hero-sub-left)),
    var(--hero-sub-down)
  ) !important;
}

/* Search bar */
html.is-home #hero-search{
  transform: translate(
    calc(-1 * var(--hero-search-left)),
    var(--hero-search-down)
  ) !important;
}

/* Discover button */
html.is-home .hero__cta .btn--primary{
  transform: translate(
    calc(-1 * var(--hero-btn-left)),
    var(--hero-btn-down)
  ) !important;
}
@media (max-width: 480px){

  /* reset all your offsets on phones */
  :root{
    --hero-group-down: 0px;
    --hero-group-left: 0px;

    --hero-sub-down: 0px;
    --hero-sub-left: 0px;

    --hero-search-down: 0px;
    --hero-search-left: 0px;

    --hero-btn-down: 0px;
    --hero-btn-left: 0px;
  }

  /* center the whole group */
  html.is-home .hero .hero__content{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: calc(100% - 32px) !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* keep search above button, and center */
  html.is-home .hero__cta{
    width: 100% !important;
    align-items: center !important;
  }
  html.is-home .hero-search{
    width: 100% !important;
  }

  /* FORCE the Discover button to show (bullet-proof) */
  html.is-home .hero__cta .btn--primary,
  html.is-home .hero a[href="#drops"],
  html.is-home .hero a[href*="#drops"]{
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}