/* ============================================================
   St. Mary Catholic School — handcrafted extras
   (loads AFTER tailwind.css). Photographic backgrounds are
   centralized here so swapping a photo is a one-line change.
   ============================================================ */

/* Hero background — angled brick facade with arched windows (no people) */
.hero-bg {
  background-image: url("../assets/img/church-arches.jpg");
  background-size: cover;
  background-position: center 30%;
}

/* Giving band — subtle facade texture under the royal gradient */
.giving-bg {
  background-image: url("../assets/img/campus-2.jpg");
  background-size: cover;
  background-position: center;
}

/* Visit section accent photo */
.visit-bg {
  background-image: url("../assets/img/church-facade.jpg");
  background-size: cover;
  background-position: center 20%;
}

/* Programs section — heavenly sky backdrop (no people) */
.sky-bg {
  background-image: url("../assets/img/sky.jpg");
  background-size: cover;
  background-position: center top;
}

/* Header: gains a soft shadow once the page is scrolled (toggled by js/site.js) */
.site-header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px -16px rgba(16, 26, 122, 0.35);
}

/* Mobile menu open/close (no framework needed) */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-menu.is-open {
  max-height: 32rem;
}

/* Gentle fade-up for sections as they enter view (progressive enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}