/* ==========================================================================
   SCCWS Nepal — Home page ONLY
   The header (utility bar + main nav) is one fixed overlay system on top of
   the hero. At the top of the page it is fully transparent with light text;
   past ~50px scroll, main.js adds body.is-scrolled and the header switches
   to the site's normal solid/light header treatment. Every other section,
   page, color, font, and layout rule is untouched.
   ========================================================================== */

/* Remove the site-wide offset that reserves space for the header, so the
   hero can extend up underneath it and fill the full first viewport. */
body.page-home {
  padding-top: 0;
}

/* Header stays fixed (same positioning as every other page) but starts
   fully transparent — no separate solid strip above the hero — and
   transitions smoothly into the scrolled state below. */
body.page-home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: background-color 250ms ease, box-shadow 250ms ease, backdrop-filter 250ms ease;
}

/* The utility bar is the only child with its own solid background to
   neutralize; the nav row has none of its own, so it's already transparent
   once the header behind it is. */
body.page-home .utility-bar {
  background-color: transparent;
  transition: background-color 250ms ease;
}

/* Light text/icons for contrast over the dark hero. */
body.page-home .brand-mark__name,
body.page-home .nav-toggle {
  color: var(--color-white);
  transition: color 250ms ease;
}
body.page-home .main-nav__link {
  color: rgba(255, 255, 255, 0.85);
  transition: color 250ms ease;
}
body.page-home .main-nav__link.is-active {
  color: var(--color-white);
}

/* The open mobile menu panel keeps its own solid light backdrop regardless
   of scroll state, so its links always stay on the normal dark text. */
body.page-home .main-nav--open .main-nav__link { color: var(--color-text-body); }
body.page-home .main-nav--open .main-nav__link.is-active { color: var(--color-brand-forest); }

/* ---- Scrolled state (body.is-scrolled, toggled by main.js) --------------
   Restores the site's normal fixed-header look — same values used on every
   other page — while staying fixed and transitioning smoothly. */
body.page-home.is-scrolled .site-header {
  background-color: rgba(250, 249, 246, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
}
body.page-home.is-scrolled .utility-bar {
  background-color: var(--color-brand-forest);
}
body.page-home.is-scrolled .brand-mark__name {
  color: var(--color-brand-forest);
}
body.page-home.is-scrolled .main-nav__link {
  color: var(--color-text-body);
}
body.page-home.is-scrolled .main-nav__link.is-active {
  color: var(--color-brand-forest);
}
body.page-home.is-scrolled .nav-toggle {
  color: var(--color-brand-forest);
}

/* min-height (not height) fills the full first viewport while still letting
   the box grow taller on narrow screens if the stacked hero content needs
   more room — it never gets clipped. Extra top padding equal to the header's
   height keeps the hero's own content clear of the two overlaid header rows.
   Extra bottom padding reserves room for the trust strip, now absolutely
   positioned at the hero's bottom edge (see below), so it never overlaps
   the hero content above it. */
body.page-home .hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: 88px;
}

@media (max-width: 767.98px) {
  body.page-home .hero {
    padding-top: calc(var(--header-height) + var(--space-12));
    padding-bottom: 168px;
  }
}

/* Registration/trust strip: moved (in the HTML) from its own section below
   the hero to being the hero's last child, then pinned to the hero's
   bottom edge here — same markup, same styling, just repositioned. */
body.page-home .trust-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}