/* ============================================================
 * STL Hero Banner - LandingPage
 * Alignment override ONLY. Loaded in addition to hero-banner.css and
 * scoped entirely to .stl-hero-root--landing, so the standard
 * STL Hero Banner (which pins its text to the page gutter) is unaffected.
 *
 * The standard hero keeps its headline/CTA on the raw viewport gutter.
 * On landing pages we instead want the text to line up with the centered
 * content column (the same max-width the pillar cards / sections use), and
 * to stay put at every screen width rather than sliding to the far left.
 * We do that by centering the overlay's inner container on --stl-container
 * and keeping the text/CTA on that container's gutter.
 *
 * Desktop-only (min-width:769px): below that the base mobile rules in
 * hero-banner.css switch the text to natural flow, which we keep as-is.
 * ============================================================ */
@media (min-width: 769px) {
  .stl-hero-root--landing .stl-overlay__inner {
    max-width: var(--stl-container, 1280px);
    margin: 0 auto;
    /* Padding is irrelevant to the absolutely-positioned text/CTA (their
     * `left` is measured from this container's edge), but zeroing it keeps
     * the container's box identical to the site content wrapper. */
    padding-left: 0;
    padding-right: 0;
  }
  .stl-hero-root--landing .stl-text {
    left: var(--stl-gutter, 44px) !important;
  }
  .stl-hero-root--landing .stl-button {
    left: var(--stl-gutter, 44px) !important;
  }
}

/* ------------------------------------------------------------------
 * Glow stacking fix (landing hero only)
 * 0.7.41 added `.stl-banner canvas { z-index: 0 }`, which — being more
 * specific than `.stl-glow-canvas` — forced the neon glow canvas behind
 * the pink logo, so the bright colour body was hidden and only a faint
 * halo leaked around the edges. Restoring v0.7.18's stacking (main
 * animation canvas behind the logo, glow canvas in front of it) makes the
 * STL mark light up in full brand colours when the particles arrive.
 * Scoped to the landing hero so the standard Hero Banner is untouched.
 * ------------------------------------------------------------------ */
.stl-hero-root--landing .stl-logo { z-index: 2; }
.stl-hero-root--landing .stl-glow-canvas { z-index: 3; }

/* ------------------------------------------------------------------
 * Typography (landing hero only)
 * STL brand uses no text shadows. Contrast was verified safe without
 * them: white title ~15.5:1 and orange accent ~6.5:1 on the dark-wine
 * left column (plus the dark .stl-text-shade layer behind the text),
 * comfortably above WCAG AA/AAA. The subtitle is also bumped from 15px
 * to 18px so it reads more comfortably alongside the rest of the page.
 * Scoped to .stl-hero-root--landing so the standard Hero Banner is
 * untouched.
 * ------------------------------------------------------------------ */
.stl-hero-root--landing .stl-title,
.stl-hero-root--landing .stl-subtitle {
  text-shadow: none;
}
@media (min-width: 769px) {
  .stl-hero-root--landing .stl-subtitle {
    font-size: 18px;
    line-height: 1.6;
  }
}