/* ==========================================================================
   PAGES/LANDING.CSS
   Styles unique to index.html (the Landing page). Nothing here is reused
   elsewhere, which is why it's kept out of 05-components.css — that file
   is reserved for components shared across multiple pages.
   ========================================================================== */

/* Wordmark-only header. Not the .site-header component (which includes
   nav + sticky behaviour) — Landing has no navigation at all, per client
   instruction, just brand recognition in the corner. Positioned
   absolutely over the hero photo (rather than sitting above it in normal
   document flow) so the image is genuinely full-bleed to the very top of
   the viewport. .landing-hero (the parent) provides the position:relative
   context this is measured against. */
.landing-brand {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: var(--space-4) 0;
}

.landing-brand .wordmark {
  color: var(--color-white);
}

/* Full-bleed hero. The photo sits as a CSS background (not an <img>)
   because it's purely decorative — the content that matters (headline,
   subheading, CTAs) is real text layered on top, not the image itself.
   A dark gradient overlay guarantees the white text/buttons stay
   readable regardless of which part of the photo sits behind them. */
.landing-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  /* Minimum opacity raised to 0.68 (was 0.55) — the previous middle stop
     sat directly behind the vertically-centered text, and given the
     actual photo used (a light-toned mineral rock close-up), that lighter
     patch of overlay was a real risk to text contrast, not just a
     theoretical one. */
  background-image:
    linear-gradient(180deg, rgba(15, 39, 71, 0.78) 0%, rgba(15, 39, 71, 0.68) 45%, rgba(15, 39, 71, 0.85) 100%),
    url('../../images/content/landing-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.landing-hero__content {
  padding-block: var(--space-7);
  max-width: 760px;
  /* Belt-and-braces alongside the overlay above: guarantees legibility
     regardless of exactly which part of the photo ends up behind the text
     at a given viewport size. */
  text-shadow: 0 2px 10px rgba(15, 39, 71, 0.45);
}

.landing-hero__content h1 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

/* Wraps the three subheading sentences (see index.html) — handles the
   space between this block and the CTAs below it. */
.landing-hero__subheading-group {
  margin-bottom: var(--space-6);
}

.landing-hero__subheading {
  max-width: 65ch;
  color: var(--color-white);
  font-size: var(--font-size-base); /* Standard body-copy size (18px) */
  margin-bottom: var(--space-4);    /* Space between each sentence */
}

.landing-hero__subheading:last-child {
  margin-bottom: 0; /* Group wrapper's margin-bottom handles space after */
}

/* First sentence only — larger, as the lead-in line. */
.landing-hero__subheading--lead {
  font-size: var(--font-size-lg);
}

.landing-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* On-dark override for the secondary button. The base .btn--secondary
   (navy outline/navy text) is designed for use on light backgrounds
   elsewhere in the site — against this hero's dark overlay it would be
   nearly invisible, so within the hero specifically it's restyled as a
   white outline/white text button instead. */
.landing-hero .btn--secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.landing-hero .btn--secondary:hover,
.landing-hero .btn--secondary:focus-visible {
  background-color: var(--color-white);
  color: var(--color-navy);
}