/* Custom styles for Glory Hallelujah Childcare */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background-color: #ccfbf1;
    color: #0f1a4a;
}

/* Subtle gradient on hero images */
.hero-img-1 {
    background: linear-gradient(135deg, rgba(15, 26, 74, 0.05) 0%, transparent 100%);
}

/* Navbar scroll state */
nav.scrolled {
    box-shadow: 0 1px 0 rgba(15, 26, 74, 0.06);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f0f4ff;
}
::-webkit-scrollbar-thumb {
    background: #bac8ff;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #91aaff;
}

/* Mobile menu animations */
.mobile-link {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#mobileMenu.open .mobile-link {
    opacity: 1;
    transform: translateY(0);
}
#mobileMenu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
#mobileMenu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
#mobileMenu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
#mobileMenu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }
#mobileMenu.open .mobile-link:nth-child(5) { transition-delay: 0.25s; }

/* Hamburger animation */
#menuBtn.active #menuLine1 {
    transform: translateY(3px) rotate(45deg);
}
#menuBtn.active #menuLine2 {
    transform: translateY(-3px) rotate(-45deg);
}
</style>
<sm-file path="script.js">
// Glory Hallelujah Childcare — Interactive Scripts

document.addEventListener('DOMContentLoaded', () => {

    // --- Mobile Menu ---
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = mobileMenu.querySelectorAll('.mobile-link');
    let menuOpen = false;

    menuBtn.addEventListener('click', () => {
        menuOpen = !menuOpen;
        menuBtn.classList.toggle('active', menuOpen);
        mobileMenu.classList.toggle('open', menuOpen);
        mobileMenu.classList.toggle('pointer-events-auto', menuOpen);
        mobileMenu.classList.toggle('opacity-100', menuOpen);
        mobileMenu.classList.toggle('opacity-0', !menuOpen);
        document.body.style.overflow = menuOpen ? 'hidden' : '';
    });

    mobileLinks.forEach(link => {
        link.addEventListener('click', () => {
            menuOpen = false;
            menuBtn.classList.remove('active');
            mobileMenu.classList.remove('open', 'pointer-events-auto', 'opacity-100');
            mobileMenu.classList.add('opacity-0');
            document.body.style.overflow = '';
        });
    });

    // --- Navbar scroll state ---
    const nav = document.getElementById('nav');
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        nav.classList.toggle('scrolled', currentScroll > 10);
        lastScroll = currentScroll;
    }, { passive: true });

    // --- Scroll Reveal (progressive enhancement) ---
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: no-preference)');
    const revealElements = document.querySelectorAll('.reveal');

    function revealOnScroll() {
        if (!prefersReducedMotion.matches) {
            revealElements.forEach(el => {
                const rect = el.getBoundingClientRect();
                const windowHeight = window.innerHeight;
                if (rect.top < windowHeight - 60) {
                    el.classList.add('visible');
                }
            });
        }
    }

    // Always make elements visible first (no JS = still readable)
    revealElements.forEach(el => {
        el.classList.add('visible');
    });

    // Then add animation class if motion is preferred
    if (prefersReducedMotion.matches) {
        revealElements.forEach(el => {
            el.style.opacity = '';
            el.style.transform = '';
            el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';
        });
        window.addEventListener('scroll', revealOnScroll, { passive: true });
        revealOnScroll();
    }

    // --- Contact Form ---
    const form = document.getElementById('contactForm');
    const successMsg = document.getElementById('formSuccess');

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        // Simulate submission
        const btn = form.querySelector('button[type="submit"]');
        btn.textContent = 'Sending...';
        btn.disabled = true;

        setTimeout(() => {
            successMsg.classList.remove('hidden');
            form.reset();
            btn.textContent = 'Send Message';
            btn.disabled = false;
        }, 800);
    });

    // --- Smooth scroll for anchor links ---
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const offset = 80;
                const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
                window.scrollTo({ top, behavior: 'smooth' });
            }
        });
    });

});