:root{
    --color-primary:#dc2626;
    --color-text-dark:#1f2937;
    --color-text-light:#f9fafb;
    --color-bg-light-translucent:rgba(249,250,251,0.15);
    --color-bg-content-translucent:rgba(249,250,251,0.85);
}

/* Base */
html{scroll-behavior: smooth;}
body{
    font-family:'Inter',sans-serif;
    display:flex;flex-direction:column;align-items:center;
    min-height:100vh;padding-top:80px;
    background-image: url('Churchweb_background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Nav */
nav{
    position:fixed;top:0;left:0;right:0;z-index:40;
    background-color:var(--color-bg-light-translucent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:box-shadow .3s ease-in-out;
    overflow: hidden;
}
nav::before{
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background-image: url(Cloud_image_for_footer.png);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

nav.nav-scrolled{box-shadow:0 4px 30px rgba(0,0,0,.1);}

/* Links */
.nav-link{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:all .3s;}
.nav-link::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--color-primary);transform:scaleX(0);transform-origin:bottom right;transition:transform .3s;}
.nav-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1);color:var(--color-primary);}
.nav-link:hover::before{transform:scaleX(1);transform-origin:bottom left;}
.nav-link[aria-current="page"]{color:var(--color-primary);}
.nav-link[aria-current="page"]::before{transform:scaleX(1);transform-origin:bottom left;}
.mobile-nav-link{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);transition:all .2s;}
.mobile-nav-link:hover{background-color:rgba(0,0,0,.05);color:var(--color-primary);}
.mobile-nav-link[aria-current="page"]{color:var(--color-primary);background-color:rgba(255,255,255,.08);font-weight:600;}
.footer-nav-link[aria-current="page"]{color:var(--color-primary);}

/* Page Sections */
.page-section{
    padding: 4rem 2rem;
    margin-bottom: 2rem;
    background-color:var(--color-bg-content-translucent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 4px 30px rgba(0,0,0,.1);
    border-radius:.75rem;
    text-align:center;
    width: 100%;
    position: relative; /* Added for pseudo-element positioning */
    z-index: 1; /* Ensure content is above the pseudo-element */
}

.page-section::after {
    content: '';
    position: absolute;
    top: -2px; /* Adjust to be slightly outside the border */
    left: -2px; /* Adjust to be slightly outside the border */
    right: -2px; /* Adjust to be slightly outside the border */
    bottom: -2px; /* Adjust to be slightly outside the border */
    border: 2px solid transparent; /* Initial transparent border */
    border-radius: .75rem; /* Match section border-radius */
    pointer-events: none; /* Don't block clicks on the pseudo-element */
    z-index: 0; /* Behind the content */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth fade in/out */
}

.page-section:hover::after {
    opacity: 1; /* Show on hover */
    border-color: var(--color-primary); /* Use the primary red color for the border */
}

#home{
    background-image:url('untitled-3350.jpg');
    background-size:cover;
    background-position:center;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0;
    min-height:calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



#worship-service {
    background-image: url('worship_and_funeral.png');
    background-size: cover;
    background-position: center;
}

#spiritual-academy {
    background-image: url('Spiritual_academy.png');
    background-size: cover;
    background-position: center;
}

#class-meetings {
    background-image: url('classroom_image.png');
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}

#community-service {
    background-image: url('Community_Service.png');
    background-size: cover;
    background-position: center;
}

#pastor {
    background-image: url('pastor_image_section.png');
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}

#history {
    background-image: url('bible_and_history.png');
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
    min-height: 300px;
}

#home h2, #home p, #home .home-cta-link{
    color:#fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}

/* Footer */
footer{position:relative;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.6);}
footer::before{content:'';position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;background-image:url('Cloud_image_for_footer.png');background-size:cover;background-position:center;z-index:-1;}
.footer-nav-link,.footer-info-link,.social-icon{display:inline-block;transition:color .2s,transform .2s;}
.footer-nav-link:hover,.footer-info-link:hover{color:var(--color-primary);transform:translateY(-2px);}
.social-icon:hover{color:var(--color-primary);transform:scale(1.15);}
.copyright-text{text-shadow:0 3px 4px rgba(0,0,0,.7);}

/* Buttons */
.history-button{
    background:#fdf6e3;
    color:#5d4037;
    border:1px solid #d2c4a8;
    font-family:Georgia,serif;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    transition:all .3s;
    text-shadow: none;
}
.history-button:hover{background:#f4eada;color:#4e342e;box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-2px);}
.education-button{background:#3b82f6;color:#fff;border:1px solid #2563eb;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .3s;}
.education-button:hover{background:#2563eb;box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-2px);}
.spiritual-button{background:#8b5cf6;color:#fff;border:1px solid #7c3aed;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all .3s;}
.spiritual-button:hover{background:#7c3aed;box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-2px);}

/* Images */
.page-section img{flex-shrink:1;min-height:0;max-width:100%;object-fit:contain;}
#staff-image{object-fit:cover;object-position:top;width:200px;}

/* Static Content Layout */
.static-content-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.content-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.content-card .p-6 {
    padding: 1.5rem;
}

/* History Image Gallery */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.image-gallery img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Soup Kitchen Banner */
.soup-kitchen-banner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 0.75rem;
}

.soup-kitchen-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


/* Lightbox */
.lightbox-enabled{cursor:pointer;transition:transform .2s,box-shadow .2s;}
.lightbox-enabled:hover{transform:scale(1.02);box-shadow:0 8px 25px rgba(0,0,0,.15);}
.lightbox{transition:opacity .3s;}
.lightbox.hidden{opacity:0;pointer-events:none;}
.lightbox:not(.hidden){opacity:1;}
.lightbox-img{transition:transform .3s;}
.lightbox:not(.hidden) .lightbox-img{transform:scale(1);}

/* Live indicator */
.live-indicator{display:inline-block;width:10px;height:10px;background:#22c55e;border-radius:50%;margin-right:8px;vertical-align:middle;animation:pulse-animation 1.5s infinite;}
@keyframes pulse-animation{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7);}70%{box-shadow:0 0 0 10px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}

/* Scroll-to-top — ID matches main.js; keep class for compatibility */
#scroll-to-top,.scroll-to-top-button{
    position:fixed;bottom:20px;right:20px;background:var(--color-primary);color:var(--color-text-light);border:none;border-radius:50%;width:50px;height:50px;display:none;justify-content:center;align-items:center;cursor:pointer;font-size:12px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:opacity .3s,transform .3s;z-index:100;
}
#scroll-to-top:hover,.scroll-to-top-button:hover{opacity:.9;transform:scale(1.1);}


/* Helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}  
/* === Sunlight Glow + Golden Overlay for History Section Images === */
#history img {
  position: relative;
  display: inline-block;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  z-index: 0;
}

#history img:hover {
  box-shadow: 0 0 25px 8px rgba(255, 223, 128, 0.7); /* sunlight glow */
  transform: scale(1.05); /* subtle zoom */
}

/* Overlay effect */
#history img::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,223,128,0.4) 20%, transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

#history img:hover::after {
  opacity: 1; /* fade in golden sunlight */
}
  
/* === Sunlight Glow + Moving Golden Overlay for History Images === */
#history img {
  position: relative;
  display: inline-block;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  z-index: 0;
}

#history img:hover {
  box-shadow: 0 0 25px 8px rgba(255, 223, 128, 0.7); /* sunlight glow */
  transform: scale(1.05); /* subtle zoom */
}

#history img::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(
    circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(255,223,128,0.4) 20%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

#history img:hover::after {
  opacity: 1;
}