/* header.css — top-of-page header treatment. Toggled by body.header-<name>. */

/* centered-hero — large title, centered (default). Full-strength brand band. */
body.header-centered-hero .msl-hero { text-align: center; padding: 80px 20px; background: var(--c-brand); }
body.header-centered-hero .msl-hero-title { color: var(--c-on-brand); }
body.header-centered-hero .msl-hero-lead { margin-left: auto; margin-right: auto; color: var(--c-on-brand); opacity: .92; }
body.header-centered-hero .msl-hero-cta { justify-content: center; }
body.header-centered-hero .msl-hero .msl-btn { color: var(--c-on-brand); border-color: var(--c-on-brand); }
body.header-centered-hero .msl-hero .msl-btn:hover { background: var(--c-on-brand); color: var(--c-brand); }
body.header-centered-hero .msl-hero .msl-btn-primary { background: var(--c-on-brand); color: var(--c-brand); border-color: var(--c-on-brand); }
body.header-centered-hero .msl-hero .msl-btn-primary:hover { background: var(--c-on-brand); color: var(--c-brand); opacity: .9; }

/* split-50-50 — image + copy side by side */
body.header-split-50-50 .msl-hero { padding: 0; background: var(--c-neutral); }
body.header-split-50-50 .msl-hero .msl-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: none; padding: 0; align-items: center; min-height: 380px; }
body.header-split-50-50 .msl-hero .msl-container > * { padding: 60px; }
body.header-split-50-50 .msl-hero .msl-container::after { content: ""; background: linear-gradient(135deg, var(--c-secondary), var(--c-primary)); }

/* full-bleed-video — full-width image/gradient hero */
body.header-full-bleed-video .msl-hero { padding: 120px 20px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 50%, var(--c-accent) 100%); color: #fff; position: relative; }
body.header-full-bleed-video .msl-hero-title { color: #fff; }
body.header-full-bleed-video .msl-hero-lead { color: rgba(255,255,255,.85); }
body.header-full-bleed-video .msl-btn { color: #fff; border-color: #fff; }
body.header-full-bleed-video .msl-btn:hover { background: #fff; color: var(--c-primary); }
body.header-full-bleed-video .msl-btn-primary { background: var(--c-accent); border-color: var(--c-accent); }

/* sticky-thin — minimal sticky bar, compact hero */
body.header-sticky-thin .msl-site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(8px); padding: 10px 0; }
body.header-sticky-thin .msl-hero { padding: 48px 0; background: transparent; }
body.header-sticky-thin .msl-hero-title { font-size: clamp(24px, 3vw, 40px); }

/* classic-banner — wide banner with overlay */
body.header-classic-banner .msl-hero { padding: 0; background: var(--c-primary); color: #fff; min-height: 260px; display: flex; align-items: center; }
body.header-classic-banner .msl-hero-title { color: #fff; border-left: 4px solid var(--c-accent); padding-left: 18px; }
body.header-classic-banner .msl-hero-lead { color: rgba(255,255,255,.8); }
body.header-classic-banner .msl-btn { color: #fff; border-color: #fff; }
body.header-classic-banner .msl-btn-primary { background: var(--c-accent); border-color: var(--c-accent); }

/* Restrained variant for conquest tier — toned down regardless of header variant.
   Force readable lead + buttons too, so a "white-on-dark" header variant (classic-banner,
   full-bleed-video) can't render invisible text on this LIGHT restrained background. */
body.tier-conquest .msl-hero-restrained { background: var(--c-neutral); color: var(--c-text); padding: 64px 0; }
body.tier-conquest .msl-hero-restrained .msl-hero-title { color: var(--c-primary); border: 0; padding: 0; }
body.tier-conquest .msl-hero-restrained .msl-hero-lead { color: var(--c-muted); opacity: 1; }
body.tier-conquest .msl-hero-restrained .msl-btn { color: var(--c-primary); border-color: var(--c-primary); }
body.tier-conquest .msl-hero-restrained .msl-btn:hover { background: var(--c-primary); color: #fff; }
body.tier-conquest .msl-hero-restrained .msl-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* Hero with a background PHOTO — a dark gradient overlay (set inline) guarantees white text
   contrast on ANY image, overriding every header/tier variant (note the `body ` prefix for
   specificity so it beats body.header-centered-hero .msl-hero .msl-btn etc.). */
body .msl-hero.has-hero-bg { background-size: cover; background-position: center; }
body .msl-hero.has-hero-bg .msl-hero-title,
body .msl-hero.has-hero-bg .msl-hero-lead { color: #fff; opacity: 1; }
body .msl-hero.has-hero-bg .msl-hero-lead { text-shadow: 0 1px 3px rgba(0,0,0,.4); }
body .msl-hero.has-hero-bg .msl-btn { color: #fff; border-color: #fff; }
body .msl-hero.has-hero-bg .msl-btn:hover { background: #fff; color: #1a1a1a; }
body .msl-hero.has-hero-bg .msl-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }