/* Base hero */
.hero {
  position: relative;
  padding: 140px 20px;
  color: #fff;
  text-align: center;
  background: var(--hero-bg) no-repeat center var(--hero-pos, 50%) / cover;
}
.hero::before {            /* dark overlay for readability */
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.hero .container { position: relative; z-index: 1; }

/* Shared text treatment */
.hero h1, .hero p { text-shadow: 0 2px 6px rgba(0,0,0,.6); }

.hero--home     { --hero-bg: url("/wp-content/uploads/2025/09/homepageherobanner-g.png"); --hero-pos: 30%; }
.hero--support   { --hero-bg: url("/wp-content/uploads/2025/09/supportherobanner-g.png");        --hero-pos: 30%; }
/* add more: */
.hero--membership{ --hero-bg: url("/wp-content/uploads/2025/10/membershipherobanner-g.png");       --hero-pos: 30%; }
.hero--hallrental{ --hero-bg: url("/wp-content/uploads/2025/09/hallrentalherobanner-g.png");       --hero-pos: 30%; }
.hero--events{ --hero-bg: url("/wp-content/uploads/2025/09/eventsherobanner-g.png");       --hero-pos: 30%; }
.hero--newsletter{ --hero-bg: url("/wp-content/uploads/2025/09/newsletterherobanner-g.png");       --hero-pos: 30%; }
.hero--programs{ --hero-bg: url("/wp-content/uploads/2025/09/programsherobanner-g.png");       --hero-pos: 30%; }
.hero--businessdirectory{ --hero-bg: url("/wp-content/uploads/2025/09/businessdirectoryherobanner-g.png");       --hero-pos: 30%; }
.hero--jobs{ --hero-bg: url("/wp-content/uploads/2025/09/jobsherobanner-g.png");       --hero-pos: 30%; }
.hero--boardsofdirectors{ --hero-bg: url("/wp-content/uploads/2025/10/boardsofdirectorsherobanner-g-new.png");       --hero-pos: 30%; }
.hero--contact{ --hero-bg: url("/wp-content/uploads/2025/10/contactusherobanner-g-new.png");       --hero-pos: 30%; }
.hero--faq{ --hero-bg: url("/wp-content/uploads/2025/10/faqherobanner-g-new.png");       --hero-pos: 30%; }
.hero--milestones{ --hero-bg: url("/wp-content/uploads/2025/09/milestonesherobanner-g.png");       --hero-pos: 30%; }
.hero--about{ --hero-bg: url("/wp-content/uploads/2025/09/aboutherobanner-g.png");       --hero-pos: 30%; }
.hero--footer{ --hero-bg: url("/wp-content/uploads/2025/10/footerherobanner-g.png");       --hero-pos: 30%; }

/* Responsive tweak */
@media (max-width: 768px){
  .hero { padding: 120px 16px; }
  .hero { --hero-pos: 50%; } /* center on mobile unless overridden */
}
.hero--footer {
  padding: 60px 20px; /* shorter footer banner */
}
@media (max-width: 768px) {
  .hero--footer {
    padding: 50px 16px;
  }
}