/* Hero v2 overrides — extracted from Test Header 14/versions/v2.html */

.hero--geo { min-height: 100vh; }
.hero--geo .hero__grid { min-height: 100vh; }
.hero--geo .hero__content { gap: 12px; }

/* Pull the carousel buttons up so the dot animation has more room above them. */
.hero--geo .hero__carousel { margin-top: -8px; }

/* ─── v12 reversed dark-green theme ───
   The home hero now sits on a dark green background with white text. The nav
   logo + menu also flip to white (handled by the existing body--green-header
   rules in internal-header.css — we add that body class server-side below). */

.hero--geo {
  background: var(--primary-dark);
}
.hero--geo .hero__overlay {
  background: linear-gradient(to bottom,
    rgba(2, 74, 64, 0.95) 0%,
    rgba(2, 74, 64, 0.55) 45%,
    rgba(2, 74, 64, 0) 100%);
}
.hero--geo .hero__title { color: #fff; }
.hero--geo .hero__subtitle { color: rgba(255, 255, 255, 0.8); }

/* Drop the white halo — the text is already light on a dark bg, the halo
   would create a smudge of glow around the letters. */
.hero--geo .hero__title,
.hero--geo .hero__subtitle {
  filter: none;
}

/* Talk-to-Us pill over the green hero: white pill with brand-green text.
   When the user scrolls past the hero, drops back to the default coral pill
   via the same body class toggle that flips the logo + menu. Scoped to
   hero-v2.css (which is home-only) so internal green pages aren't affected.

   Transition added so the colour change matches the smooth fade the logo
   and menu already have from internal-header.css. */
.nav__cta {
  /* Slow colour fade for the scroll-past-green-header flip; keep .btn's
     0.3s transform + shadow timing so the hover lift matches other
     buttons (otherwise this property list replaces .btn's `transition:
     all` and the lift snaps in instantly). */
  transition: background 0.45s ease,
              color 0.45s ease,
              border-color 0.45s ease,
              transform var(--transition),
              box-shadow var(--transition);
}
body.body--green-header:not(.scrolled-past-green-header) .nav__cta {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}
body.body--green-header:not(.scrolled-past-green-header) .nav__cta:hover {
  background: var(--coral);
  color: var(--dark-blue, #003845);
  border-color: var(--coral);
}

/* Carousel buttons fade white → coral across the three slides (matches v12).
   All three text colours pinned to --dark-blue (#003957) for a unified
   typographic feel across the slide row — the backgrounds carry the
   colour progression, the text stays steady. */
.hero__carousel-btn[data-slide="0"] {
  background: #fff;
  color: var(--dark-blue);
}
.hero__carousel-btn[data-slide="1"] {
  background: #fbd3c5; /* pale coral midpoint */
  color: var(--dark-blue);
}
.hero__carousel-btn[data-slide="2"] {
  background: var(--coral);
  color: var(--dark-blue);
}
.hero__carousel-btn:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* v23: equal-width carousel buttons — original height, narrower width.
   Keeps all three buttons the same width regardless of label length so
   the row reads as a clean control strip rather than a ragged trio. */
.hero__carousel-btn {
  min-width: 120px;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* v23 left-aligned content (title, subtitle, buttons aligned with logo).
   The dot word in geo-background.js is right-aligned to balance this — the
   formed word sits on the right edge mirroring the title's left edge. */
.hero--geo .hero__grid { align-items: flex-start; }
.hero--geo .hero__content {
  text-align: left;
  max-width: 980px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.hero--geo .hero__carousel { justify-content: flex-start; }
.hero__carousel-buttons { justify-content: flex-start !important; }

/* v23: letter-by-letter title reveal and subtitle fade — geo-background.js
   adds .letter spans to .hero__title and toggles --visible / --hidden
   classes via the hero-phase events. */
.hero__title .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.15em);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero__title .letter--visible { opacity: 1; transform: translateY(0); }
.hero__title .letter--space { width: 0.3em; }
.hero__title .title-word { display: inline-block; white-space: nowrap; }
.hero__subtitle { transition: opacity 0.5s ease, transform 0.5s ease; }
.hero__subtitle--hidden { opacity: 0 !important; transform: translateY(12px); }
.hero__subtitle--visible { opacity: 1; transform: translateY(0); }

/* Mobile-only dot pager — hidden on desktop. Sits under the active
   carousel button on mobile (where only the active button is shown) so
   users can still jump between slides without seeing the full button row. */
.hero__carousel-dots {
  display: none;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 14px;
}
.hero__carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero__carousel-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__carousel-dot--active {
  background: var(--coral, #F6AB93);
  transform: scale(1.25);
}

/* Floating insight tile on the right — DEPRECATED in v3 (now that the
   background dot word is right-aligned, this would collide). Kept the
   doctype properties on the Hero Slide for backward-compat / future
   re-use, but the tile + tile-slots are hidden so they don't render. */
.hero__tile { display: none !important; }

@media (max-width: 768px) {
  /* Push the carousel down so it doesn't sit tight under the subtitle. */
  .hero--geo .hero__carousel { margin-top: 28px; }
  /* Stack the carousel: only the active full-width button shows, with the
     dot pager beneath as the alternative slide-switcher. */
  .hero__carousel {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .hero__carousel-buttons { flex-direction: column; }
  .hero__carousel-btn { display: none !important; }
  .hero__carousel-btn--active { display: inline-flex !important; }
  .hero__carousel-dots { display: flex; }
}