/* Override / cleanup stylesheet for background images.
   Step 1: Provide class-based backgrounds matching existing data-background images.
   NOTE: data-background attributes remain for now as fallback; once verified, they can be removed.
*/

/* Generic helper so each background section slide fills and shows image */
.sp-section.bg-hero   > .sp-section-slide,
.sp-section.bg-latest > .sp-section-slide,
.sp-section.bg-gather > .sp-section-slide,
.sp-section.bg-about  > .sp-section-slide,
.sp-section.bg-vision > .sp-section-slide,
.sp-section.bg-values > .sp-section-slide,
.sp-section.bg-planted> .sp-section-slide,
.sp-section.bg-give   > .sp-section-slide,
.sp-section.bg-contact> .sp-section-slide,
.sp-section.bg-prayer-hero > .sp-section-slide,
.sp-section.bg-leaders-mobile > .sp-section-slide {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Individual image mappings (mirroring existing encoded JSON). 
   Using !important to override JavaScript-applied inline styles from data-background */
.sp-section.bg-hero > .sp-section-slide { /* 21273767_4475x2889_2500.jpg */
  background-image: url('./KMG59V/assets/images/21273767_4475x2889_2500.jpg') !important;
}
.sp-section.bg-latest > .sp-section-slide { /* 21499648_1920x2558_2500.jpg with green tint rgba(0,163,87,.75) */
  background-image: url('./KMG59V/assets/images/21499648_1920x2558_2500.jpg') !important;
}
.sp-section.bg-gather > .sp-section-slide { /* 21273772_1536x1024_2500.png with @color4.5 tint */
  background-image: url('./KMG59V/assets/images/21273772_1536x1024_2500.png') !important;
}
.sp-section.bg-about > .sp-section-slide { /* 21377830_2499x1666_2500.jpg with rgba(0,0,0,.4) */
  background-image: url('./KMG59V/assets/images/21377830_2499x1666_2500.jpg') !important;
}
.sp-section.bg-vision > .sp-section-slide { /* 21377772_3840x2560_2500.jpg */
  background-image: url('./KMG59V/assets/images/21377772_3840x2560_2500.jpg') !important;
}
.sp-section.bg-values > .sp-section-slide { /* 21361007_3000x4498_2500.jpg with @color1.94 tint */
  background-image: url('./KMG59V/assets/images/21361007_3000x4498_2500.jpg') !important;
}
.sp-section.bg-planted > .sp-section-slide { /* 21344399_5400x3600_2500.jpg with @color2.81 tint */
  background-image: url('./KMG59V/assets/images/21344399_5400x3600_2500.jpg') !important;
}
.sp-section.bg-give > .sp-section-slide { /* 21387722_720x898_2500.jpg with @color4.62 tint */
  background-image: url('./KMG59V/assets/images/21387722_720x898_2500.jpg') !important;
}
.sp-section.bg-contact > .sp-section-slide { /* 21387758_3000x2000_2500.jpg with @color1.85 tint */
  background-image: url('./KMG59V/assets/images/21387758_3000x2000_2500.jpg') !important;
}
.sp-section.bg-prayer-hero > .sp-section-slide { /* prayer page hero 21387758_3000x2000_2500.jpg with darker rgba(0,0,0,.69) */
  background-image: url('./KMG59V/assets/images/21387758_3000x2000_2500.jpg') !important;
}
.sp-section.bg-leaders-mobile > .sp-section-slide { /* mobile-only leaders section 21377777_3909x5207_2500.jpg with rgba(0,0,0,.5) */
  background-image: url('./KMG59V/assets/images/21377777_3909x5207_2500.jpg') !important;
}

/* Tint overlays: use data-tint equivalents via pseudo elements so we can later remove inline tints. */
.sp-section[class*='bg-'] > .sp-section-slide[data-tint],
.sp-section.bg-latest > .sp-section-slide,
.sp-section.bg-gather > .sp-section-slide,
.sp-section.bg-about > .sp-section-slide,
.sp-section.bg-values > .sp-section-slide,
.sp-section.bg-planted > .sp-section-slide,
.sp-section.bg-give > .sp-section-slide,
.sp-section.bg-contact > .sp-section-slide,
.sp-section.bg-prayer-hero > .sp-section-slide,
.sp-section.bg-leaders-mobile > .sp-section-slide { position: relative; }

.sp-section.bg-latest > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(0,163,87,.75) !important; z-index:0 !important; pointer-events:none !important; }
.sp-section.bg-gather > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(252, 92, 70, 0.5) !important; z-index:0 !important; pointer-events:none !important; } /* @color4 (#fc5c46) at 50% opacity */
.sp-section.bg-about > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(0,0,0,.4) !important; z-index:0 !important; pointer-events:none !important; }
.sp-section.bg-values > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(42, 77, 79, 0.94) !important; z-index:0 !important; pointer-events:none !important; } /* @color1 (#2a4d4f) at 94% opacity */
.sp-section.bg-planted > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(120, 250, 160, 0.81) !important; z-index:0 !important; pointer-events:none !important; } /* @color2 (#78faa0) at 81% opacity */
.sp-section.bg-give > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(252, 92, 70, 0.62) !important; z-index:0 !important; pointer-events:none !important; } /* @color4 (#fc5c46) at 62% opacity */
.sp-section.bg-contact > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(42, 77, 79, 0.85) !important; z-index:0 !important; pointer-events:none !important; } /* @color1 (#2a4d4f) at 85% opacity */
.sp-section.bg-prayer-hero > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(0,0,0,.69) !important; z-index:0 !important; pointer-events:none !important; }
.sp-section.bg-leaders-mobile > .sp-section-slide::before { content:""; position:absolute !important; inset:0 !important; background:rgba(0,0,0,.5) !important; z-index:0 !important; pointer-events:none !important; }

/* Ensure content overlays above tint */
.sp-section[class*='bg-'] > .sp-section-slide > .sp-section-content { position:relative; z-index:1; }

/* Force image holders to display - override JS manipulation */
.sp-image-holder {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent SnapPages JS from being marked as initialized - stops dynamic image swapping */
.sp-image-block.init {
  /* Keep the class but override behavior in custom script */
}

/* Mobile adjustments (optionally match current behaviour) */
@media (max-width:600px){
  .sp-section.bg-hero > .sp-section-slide { background-position:50% 30%; }
}

/* Sticky Navigation */
#sp-header.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
}

/* Add padding to body to prevent content from hiding under fixed header */
body {
  padding-top: 0;
}

#sp-header.sticky.fixed {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Add margin to main content to account for fixed header */
#sp-content {
  margin-top: 80px;
}

/* Adjust for mobile */
@media (max-width: 600px) {
  #sp-content {
    margin-top: 75px;
  }
}

/* Sticky Footer - Make page fill viewport height */
body {
  min-height: 100vh;
}

#sp-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#sp-content {
  flex: 1 0 auto;
}

#sp-footer {
  flex-shrink: 0;
}

/* YouTube iframe - ensure it's clickable and not blocked by parent elements */
.sap-embed-player {
  position: relative !important;
  z-index: 10 !important;
}

.sap-embed-player iframe,
iframe[src*="youtube.com"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Fix Font Awesome brand icons (Facebook, Instagram, etc.) */
.sp-social-holder a.facebook i,
.sp-social-holder a.instagram i,
.sp-social-holder a.twitter i,
.sp-social-holder a.youtube i {
  font-family: "Font Awesome 6 Brands" !important;
}