/* ==========================================================================
   Heroes — shared across every page (loaded last from base.html)
   1. Transparent header that floats over the page's photo hero and turns
      solid once the page scrolls (header.html already toggles .is-scrolled).
   2. Light-theme heroes: when the admin theme is "light", every photo hero
      gets a cream wash with dark text instead of the dark veil.
   Applies to: home (.svc-hero), About/Team (.pg-hero), service, projects,
   blog, CSR, offers, contact, gallery, blood bank (.sv-hero) and the blood
   donor / request forms (.bb-formpage) — only when the hero is the first
   thing on the page.
   ========================================================================== */

/* ══ 1. Floating header ═══════════════════════════════════════════════ */

/* hero slides up underneath the header … */
main > :is(.svc-hero, .sv-hero, .pg-hero, .bb-formpage):first-child { margin-top: calc(-1 * var(--nav-h)); }

/* … and gets the header's height added to its top space */
main > .svc-hero:first-child { padding-top: var(--nav-h); }
main > .sv-hero:first-child,
main > .pg-hero:first-child { padding-top: calc(clamp(90px, 12vh, 140px) + var(--nav-h)); }
main > .bb-formpage:first-child { padding-top: calc(clamp(56px, 7vw, 100px) + var(--nav-h)); }

/* the header is clear while it sits on the hero */
body:has(> main > :is(.svc-hero, .sv-hero, .pg-hero, .bb-formpage):first-child) .hd:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(8, 8, 6, .5), rgba(8, 8, 6, 0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
html[data-theme="light"] body:has(> main > :is(.svc-hero, .sv-hero, .pg-hero, .bb-formpage):first-child) .hd:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(251, 249, 244, .75), rgba(251, 249, 244, 0));
}

/* smooth hand-over to the solid header */
.hd { transition: background .45s ease, box-shadow .45s ease, border-color .45s ease, backdrop-filter .45s ease; }

/* dark theme: links read on the photo */
html:not([data-theme="light"]) body:has(> main > :is(.svc-hero, .sv-hero, .pg-hero, .bb-formpage):first-child) .hd:not(.is-scrolled) .hd-link,
html:not([data-theme="light"]) body:has(> main > :is(.svc-hero, .sv-hero, .pg-hero, .bb-formpage):first-child) .hd:not(.is-scrolled) .hd-brand__text strong {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}


/* ══ 2. Light-theme heroes ════════════════════════════════════════════ */
html[data-theme="light"] {
  --lh-bg:      #F3EEE3;
  --lh-wash:    251, 249, 244;           /* rgb of the cream wash */
  --lh-heading: #15181C;
  --lh-text:    #3A4048;
  --lh-muted:   #626A73;
  --lh-gold:    #9B741D;
  --lh-gold-hi: #B8902F;
  --lh-line:    rgba(28, 30, 26, .13);
}

/* ── shared photo-hero wash (desktop: text side solid, photo side open) ── */
html[data-theme="light"] .sv-hero,
html[data-theme="light"] .pg-hero { background: var(--lh-bg); color: var(--lh-heading); }

html[data-theme="light"] .sv-hero__veil,
html[data-theme="light"] .gl-hero__veil,
html[data-theme="light"] .pg-hero::before {
  background:
    linear-gradient(90deg, rgba(var(--lh-wash), .9) 0%, rgba(var(--lh-wash), .72) 34%, rgba(var(--lh-wash), .25) 62%, rgba(var(--lh-wash), 0) 100%),
    linear-gradient(180deg, rgba(var(--lh-wash), .55) 0%, rgba(var(--lh-wash), 0) 22%, rgba(var(--lh-wash), 0) 70%, rgba(var(--lh-wash), .7) 100%);
}

/* text */
html[data-theme="light"] .sv-hero .hp-eyebrow,
html[data-theme="light"] .pg-hero .hp-eyebrow { color: var(--lh-gold); }
html[data-theme="light"] .sv-hero .hp-eyebrow::before,
html[data-theme="light"] .pg-hero .hp-eyebrow::before { background: var(--lh-gold); }

html[data-theme="light"] .lux-home .sv-hero h1 {
  background: linear-gradient(180deg, #15181C 35%, #4A3F2A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .lux-home .sv-hero h1 em,
html[data-theme="light"] .lux-home .pg-hero h1 em { color: var(--lh-gold); -webkit-text-fill-color: var(--lh-gold); }
html[data-theme="light"] .lux-home .pg-hero h1 { color: var(--lh-heading); }

html[data-theme="light"] .sv-hero__copy p,
html[data-theme="light"] .pg-hero p { color: var(--lh-text); font-weight: 400; }

html[data-theme="light"] .pg-crumbs { color: rgba(21, 24, 28, .5); }
html[data-theme="light"] .pg-crumbs a { color: var(--lh-text); }
html[data-theme="light"] .pg-crumbs a:hover,
html[data-theme="light"] .pg-crumbs span[aria-current] { color: var(--lh-gold); }

/* glass panels sitting on the hero */
html[data-theme="light"] .sv-hero .sv-glass {
  --sv-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62));
  --sv-glass-line: rgba(155, 116, 29, .2);
  --sv-glass-hi: #fff;
  --sv-glass-shadow: 0 30px 60px -30px rgba(31, 35, 40, .32), 0 2px 6px rgba(31, 35, 40, .05);
  --sv-edge: rgba(184, 144, 47, .55);
  color: var(--lh-heading);
}
html[data-theme="light"] .sv-hero__facts-label { color: var(--lh-gold); }
html[data-theme="light"] .sv-hero__facts dt { color: var(--lh-heading); }
html[data-theme="light"] .sv-hero__facts dd { color: var(--lh-muted); }
html[data-theme="light"] .sv-hero__facts dl > div + div { border-left-color: var(--lh-line); }
html[data-theme="light"] .lux-home .pjd-facts dt { color: var(--lh-muted); }
html[data-theme="light"] .lux-home .pjd-facts dd { color: var(--lh-heading); }
html[data-theme="light"] .pjd-facts dl > div + div { border-bottom-color: var(--lh-line); }
html[data-theme="light"] .sv-hero__call { border-top-color: var(--lh-line); color: var(--lh-heading); }
html[data-theme="light"] .sv-hero__call small { color: var(--lh-muted); }
html[data-theme="light"] .sv-hero__call:hover { color: var(--lh-gold); }

/* glass button on the hero */
html[data-theme="light"] .lux-home .sv-hero .sv-btn--glass,
html[data-theme="light"] .lux-home .pg-hero .sv-btn--glass {
  border-color: rgba(155, 116, 29, .35);
  background: rgba(255, 255, 255, .72);
  color: var(--lh-heading);
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px -16px rgba(31, 35, 40, .35);
}
html[data-theme="light"] .lux-home .sv-hero .sv-btn--glass:hover { border-color: var(--lh-gold); color: var(--lh-gold); }

/* service switcher (service pages) */
html[data-theme="light"] .sv-switch__item { color: var(--lh-text); }
html[data-theme="light"] .sv-switch__item small { color: var(--lh-gold); }
html[data-theme="light"] .sv-switch__item:hover { background: rgba(155, 116, 29, .08); color: var(--lh-heading); }
html[data-theme="light"] .sv-switch__item.is-current { color: #0D0D0B; }
html[data-theme="light"] .sv-switch__item.is-current small { color: rgba(13, 13, 11, .65); }

/* status chip + location (project detail), article meta (blog) */
html[data-theme="light"] .sv-hero .pj-status {
  border-color: rgba(155, 116, 29, .25);
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 #fff;
  color: var(--lh-heading);
}
html[data-theme="light"] .pjd-hero__loc,
html[data-theme="light"] .st-hero-meta__item { color: var(--lh-text); }
html[data-theme="light"] .pjd-hero__loc svg,
html[data-theme="light"] .st-hero-meta__item svg { stroke: var(--lh-gold); }
html[data-theme="light"] .st-byline--hero strong { color: var(--lh-heading); }
html[data-theme="light"] .st-byline--hero small { color: var(--lh-muted); }
html[data-theme="light"] .st-byline--hero .st-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(155, 116, 29, .5); }
html[data-theme="light"] .st-eyebrow-link:hover { color: var(--lh-heading); }

/* contact office-hours panel */
html[data-theme="light"] .ct-status__now { color: var(--lh-heading); }
html[data-theme="light"] .ct-status__hours li { border-top-color: var(--lh-line); color: var(--lh-muted); }
html[data-theme="light"] .ct-status__hours strong { color: var(--lh-heading); }
html[data-theme="light"] .ct-status__reply { border-top-color: var(--lh-line); color: var(--lh-gold); }
html[data-theme="light"] .ct-status__now.is-closed i { background: rgba(21, 24, 28, .35); }

/* About / Team chips */
html[data-theme="light"] .pg-hero__chips li,
html[data-theme="light"] .pg-hero__chips a {
  border-color: rgba(155, 116, 29, .28);
  background: rgba(255, 255, 255, .7);
  color: var(--lh-heading);
}
html[data-theme="light"] .pg-hero__chips--links li { border: 0; background: none; }
html[data-theme="light"] .pg-hero__chips a:hover { border-color: #C9A84C; background: #C9A84C; color: #0D0D0B; }

/* ── Blood bank hero: light wash with a soft red glow ── */
html[data-theme="light"] .bb-hero__veil {
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(194, 31, 54, .14), transparent 60%),
    linear-gradient(90deg, rgba(var(--lh-wash), .9) 0%, rgba(var(--lh-wash), .72) 36%, rgba(var(--lh-wash), .25) 64%, rgba(var(--lh-wash), 0) 100%),
    linear-gradient(180deg, rgba(var(--lh-wash), .55) 0%, rgba(var(--lh-wash), 0) 22%, rgba(var(--lh-wash), 0) 70%, rgba(var(--lh-wash), .7) 100%);
}
html[data-theme="light"] .lux-home .bb-hero h1 em,
html[data-theme="light"] .lux-home .bb-formpage h1 em { color: #C21F36; -webkit-text-fill-color: #C21F36; }
html[data-theme="light"] .bb .sv-hero .hp-eyebrow,
html[data-theme="light"] .bb .bb-formpage .hp-eyebrow,
html[data-theme="light"] .bb .sv-hero__facts-label { color: #C21F36; }
html[data-theme="light"] .bb .sv-hero .hp-eyebrow::before,
html[data-theme="light"] .bb .bb-formpage .hp-eyebrow::before { background: #C21F36; }
html[data-theme="light"] .bb-call:hover { color: #C21F36; }
html[data-theme="light"] .bb-pulse { opacity: .35; }

/* blood donor / request forms */
html[data-theme="light"] .bb-formpage { background: #FBF4F2; }
html[data-theme="light"] .bb-formpage__media img { opacity: .2; filter: saturate(.7); }
html[data-theme="light"] .bb-formpage::before {
  background:
    radial-gradient(50% 70% at 10% 20%, rgba(194, 31, 54, .12), transparent 60%),
    radial-gradient(40% 60% at 95% 90%, rgba(201, 168, 76, .14), transparent 60%),
    linear-gradient(90deg, rgba(var(--lh-wash), .93), rgba(var(--lh-wash), .78));
}
html[data-theme="light"] .lux-home .bb-formpage h1 { color: var(--lh-heading); }
html[data-theme="light"] .bb-formpage__copy > p { color: var(--lh-text); }
html[data-theme="light"] .bb-perks strong { color: var(--lh-heading); }
html[data-theme="light"] .bb-perks small { color: var(--lh-muted); }
html[data-theme="light"] .bb-perks a { color: #C21F36; }
html[data-theme="light"] .bb-perks__icon { border-color: rgba(194, 31, 54, .3); background: rgba(194, 31, 54, .07); }
html[data-theme="light"] .bb-perks__icon svg { stroke: #C21F36; }
html[data-theme="light"] .bb-alert { border-color: rgba(194, 31, 54, .3); background: rgba(194, 31, 54, .07); color: #A51C30; }

/* ── Homepage carousel (.svc-hero) ── */
html[data-theme="light"] .svc-hero {
  --svc-text: #15181C;
  --svc-text-dim: #4A4F56;
  --svc-line: rgba(28, 30, 26, .14);
  --svc-gold: #9B741D;
  --svc-gold-light: #B8902F;
  background: var(--lh-bg);
}
html[data-theme="light"] .svc-hero__veil {
  background:
    linear-gradient(90deg, rgba(var(--lh-wash), .88) 0%, rgba(var(--lh-wash), .7) 34%, rgba(var(--lh-wash), .18) 62%, rgba(var(--lh-wash), 0) 100%),
    linear-gradient(180deg, rgba(var(--lh-wash), .5) 0%, rgba(var(--lh-wash), 0) 22%, rgba(var(--lh-wash), 0) 72%, rgba(var(--lh-wash), .35) 100%);
}
html[data-theme="light"] .svc-hero__grain { opacity: .035; }
html[data-theme="light"] .svc-hero__title { color: var(--lh-heading); }
html[data-theme="light"] .svc-hero__lead { color: var(--lh-text); }
html[data-theme="light"] .svc-hero__kicker { color: var(--lh-gold); }

/* desktop service card → light glass */
html[data-theme="light"] .svc-hero__caption {
  border-color: rgba(155, 116, 29, .2);
  border-top-color: rgba(155, 116, 29, .55);
  background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .64));
  box-shadow: 0 30px 60px -30px rgba(31, 35, 40, .32);
}
html[data-theme="light"] .svc-hero__caption h2 { color: var(--lh-heading); }
html[data-theme="light"] .svc-hero__link:hover { color: var(--lh-heading); border-color: var(--lh-heading); }

/* rail: frosted cream */
html[data-theme="light"] .svc-hero__rail {
  border-top-color: rgba(155, 116, 29, .2);
  background: linear-gradient(180deg, rgba(var(--lh-wash), .78), rgba(var(--lh-wash), .95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .svc-hero__count b,
html[data-theme="light"] .svc-hero__thumb.is-active { color: var(--lh-heading); }
html[data-theme="light"] .svc-hero__thumb:hover { background: rgba(155, 116, 29, .06); }
html[data-theme="light"] .svc-hero__progress { background: rgba(28, 30, 26, .12); }
html[data-theme="light"] .svc-hero__arrow { border-color: rgba(28, 30, 26, .25); }

/* buttons */
html[data-theme="light"] .svc-hero__btn--ghost {
  border-color: rgba(155, 116, 29, .4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
  color: var(--lh-heading);
  box-shadow: inset 0 1px 0 #fff, 0 14px 30px -18px rgba(31, 35, 40, .4);
}
html[data-theme="light"] .svc-hero__btn--ghost:hover { border-color: var(--lh-gold); color: var(--lh-heading); }
html[data-theme="light"] .svc-hero__btn--ghost .svc-hero__btn-ico { border-color: rgba(155, 116, 29, .4); background: rgba(232, 201, 122, .18); color: var(--lh-gold); }

/* ── Phones / tablets: wash runs top-to-bottom (single column) ── */
@media (max-width: 991px) {
  html[data-theme="light"] .sv-hero__veil,
  html[data-theme="light"] .gl-hero__veil,
  html[data-theme="light"] .pg-hero::before,
  html[data-theme="light"] .bb-hero__veil {
    background:
      linear-gradient(180deg, rgba(var(--lh-wash), .82) 0%, rgba(var(--lh-wash), .68) 42%, rgba(var(--lh-wash), .4) 70%, rgba(var(--lh-wash), .78) 100%);
  }
  /* home: clear wash behind the title, open photo in the middle, soft base for the buttons */
  html[data-theme="light"] .svc-hero__veil {
    background:
      linear-gradient(180deg, rgba(var(--lh-wash), .86) 0%, rgba(var(--lh-wash), .66) 30%, rgba(var(--lh-wash), .06) 52%, rgba(var(--lh-wash), .1) 72%, rgba(var(--lh-wash), .62) 100%);
  }
  /* service-name pill → light glass */
  html[data-theme="light"] .svc-hero__caption { background: none; box-shadow: none; }
  html[data-theme="light"] .svc-hero__caption-body {
    border-color: rgba(155, 116, 29, .35);
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
    box-shadow: inset 0 1px 0 #fff, 0 12px 28px -16px rgba(31, 35, 40, .45);
  }
  html[data-theme="light"] .svc-hero__caption h2 {
    background: linear-gradient(100deg, #7A5A12 0%, #B8902F 40%, #8B6A18 60%, #9B741D 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* lighter wash → give hero text a soft light halo so it stays crisp on busy photos */
html[data-theme="light"] .svc-hero__title,
html[data-theme="light"] .lux-home .pg-hero h1,
html[data-theme="light"] .lux-home .bb-formpage h1 { text-shadow: 0 1px 18px rgba(var(--lh-wash), .9); }
html[data-theme="light"] .lux-home .sv-hero h1 { filter: drop-shadow(0 1px 14px rgba(var(--lh-wash), .85)); }
html[data-theme="light"] .svc-hero__lead,
html[data-theme="light"] .sv-hero__copy p,
html[data-theme="light"] .pg-hero p,
html[data-theme="light"] .pg-crumbs,
html[data-theme="light"] .svc-hero__kicker,
html[data-theme="light"] .sv-hero .hp-eyebrow { text-shadow: 0 1px 10px rgba(var(--lh-wash), .95), 0 0 2px rgba(var(--lh-wash), .8); }