@import url("site-enhancements-base.css");

/* APPROVED INTERIOR HERO TREATMENT — clean lighthouse/ocean background.
   Interior pages use the background-only El Morro scene; the crest remains reserved for brand/navigation and homepage use. */
@media (min-width:681px){
  body:not(.home-page) .page-hero,
  body:not(.home-page) .program-profile-hero{
    background-image:linear-gradient(90deg,rgba(2,11,18,.98) 0%,rgba(2,11,18,.80) 36%,rgba(6,26,40,.20) 72%),url("/assets/brave-harbor-home-full-bg.jpg")!important;
    background-size:auto 100%!important;background-position:right center!important;background-repeat:no-repeat!important;background-color:#020b12!important;
  }
  body:not(.home-page) .page-hero::before,
  body:not(.home-page) .program-profile-hero::before{display:none!important}
  body:not(.home-page) .page-hero__crest,
  body:not(.home-page) .program-profile-hero .page-hero__crest{
    display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;pointer-events:none!important;
  }
}
@media (max-width:680px){
  body:not(.home-page) .page-hero,
  body:not(.home-page) .program-profile-hero{
    background-image:linear-gradient(180deg,rgba(2,11,18,.98),rgba(8,43,64,.64)),url("/assets/brave-harbor-home-full-bg.jpg")!important;
    background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#020b12!important;
  }
  body:not(.home-page) .page-hero::before,
  body:not(.home-page) .program-profile-hero::before{display:none!important}
  body:not(.home-page) .page-hero__crest,
  body:not(.home-page) .program-profile-hero .page-hero__crest{
    display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;pointer-events:none!important;
  }
}

/* Donation page: same clean background treatment, with donation-specific typography preserved. */
.donation-page .page-hero{
  position:relative!important;
  min-height:520px!important;
  display:flex!important;
  align-items:center!important;
  padding:86px 0 90px!important;
  background-image:linear-gradient(90deg,rgba(2,11,18,.97) 0%,rgba(2,11,18,.88) 38%,rgba(2,11,18,.38) 72%,rgba(2,11,18,.20) 100%),url("/assets/brave-harbor-home-full-bg.jpg")!important;
  background-color:#020b12!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.donation-page .page-hero::before,
.donation-page .page-hero::after{display:none!important;content:none!important;background:none!important}
.donation-page .page-hero>.shell{position:relative!important;z-index:2!important;max-width:1220px!important}
.donation-page .page-hero .eyebrow{color:#f3cf80!important;text-shadow:0 2px 10px rgba(0,0,0,.45)!important}
.donation-page .page-hero h1{
  max-width:780px!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(3.2rem,6.3vw,6.2rem)!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
  text-shadow:0 8px 30px rgba(0,0,0,.48)!important;
}
.donation-page .page-hero> .shell>p:not(.eyebrow){
  max-width:700px!important;
  margin:28px 0 0!important;
  color:rgba(255,255,255,.94)!important;
  font-size:1.16rem!important;
  line-height:1.65!important;
  text-shadow:0 3px 16px rgba(0,0,0,.55)!important;
}
.donation-page .page-hero .shell::after{
  content:"Give what you can  →";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  margin-top:30px;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px;
  background:linear-gradient(#f3cf80,#cb8a20);
  color:#07131b;
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.075em;
  text-transform:uppercase;
  box-shadow:0 10px 25px rgba(0,0,0,.28);
}
@media(max-width:680px){
  .donation-page .page-hero{min-height:500px!important;padding:70px 0 72px!important;background-image:linear-gradient(180deg,rgba(2,11,18,.97),rgba(2,11,18,.72) 62%,rgba(2,11,18,.55)),url("/assets/brave-harbor-home-full-bg.jpg")!important;background-position:center center!important}
  .donation-page .page-hero h1{font-size:clamp(2.9rem,12vw,4.5rem)!important}
  .donation-page .page-hero> .shell>p:not(.eyebrow){font-size:1.02rem!important}
}

/* INTERIOR HERO ALIGNMENT — final QA correction.
   Interior hero copy must use the same centered shell as the header/content.
   Remove the legacy left-shift and any earlier transform override. */
@media (min-width:681px){
  body:not(.home-page) .page-hero>.shell,
  body:not(.home-page) .program-profile-hero>.shell{
    position:relative!important;
    left:0!important;
    transform:none!important;
    width:var(--shell)!important;
    margin-inline:auto!important;
  }
}