/* Custom styles for Peas & Carrots Home Child Care */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1e2024;
}
::-webkit-scrollbar-thumb {
    background: #3a3d44;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5f636b;
}

/* Selection color */
::selection {
    background: rgba(255, 107, 46, 0.3);
    color: #f6f6f7;
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #ff6b2e;
    outline-offset: 2px;
}

/* Reveal animation for below-fold content */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Nav scroll state */
.nav-scrolled {
    background: rgba(17, 19, 22, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* FAQ transitions */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-content:not(.hidden) {
    max-height: 300px;
}

/* Image hover effects */
.rounded-2xl.overflow-hidden img {
    transition: transform 0.5s ease;
}

.rounded-2xl.overflow-hidden:hover img {
    transform: scale(1.03);
}

/* Button press effect */
button, a {
    -webkit-tap-highlight-color: transparent;
}

button:active, a:active {
    transform: scale(0.98);
}
</style>

<sm-file path="script.js">
(function () {
    'use strict';

    // Mobile menu toggle
    const menuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuIcon = document.getElementById('menu-icon');
    const closeIcon = document.getElementById('close-icon');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function toggleMenu() {
        const isOpen = !mobileMenu.classList.contains('hidden');
        mobileMenu.classList.toggle('hidden');
        menuIcon.classList.toggle('hidden');
        closeIcon.classList.toggle('hidden');
        menuBtn.setAttribute('aria-expanded', !isOpen);
    }

    menuBtn.addEventListener('click', toggleMenu);

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            mobileMenu.classList.add('hidden');
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
        });
    });

    // Navbar scroll effect
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 50) {
            navbar.classList.add('nav-scrolled');
        } else {
            navbar.classList.remove('nav-scrolled');
        }
        lastScroll = currentScroll;
    }

    window.addEventListener('scroll', handleScroll, { passive: true });

    // FAQ accordion
    const faqToggles = document.querySelectorAll('.faq-toggle');

    faqToggles.forEach(function (toggle) {
        toggle.addEventListener('click', function () {
            const item = this.closest('.faq-item');
            const content = item.querySelector('.faq-content');
            const icon = item.querySelector('.faq-icon');
            const isOpen = !content.classList.contains('hidden');

            // Close all other FAQs
            document.querySelectorAll('.faq-content').forEach(function (c) {
                c.classList.add('hidden');
            });
            document.querySelectorAll('.faq-icon').forEach(function (i) {
                i.style.transform = 'rotate(0deg)';
            });
            document.querySelectorAll('.faq-toggle').forEach(function (t) {
                t.setAttribute('aria-expanded', 'false');
            });

            // Toggle current
            if (!isOpen) {
                content.classList.remove('hidden');
                icon.style.transform = 'rotate(45deg)';
                this.setAttribute('aria-expanded', 'true');
            }
        });
    });

    // Contact form
    const contactForm = document.getElementById('contact-form');
    const formSuccess = document.getElementById('form-success');

    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // Basic validation
            const firstName = document.getElementById('first-name').value.trim();
            const lastName = document.getElementById('last-name').value.trim();
            const email = document.getElementById('email').value.trim();

            if (!firstName || !lastName || !email) {
                return;
            }

            // Simulate form submission
            contactForm.style.opacity = '0.5';
            contactForm.style.pointerEvents = 'none';

            setTimeout(function () {
                contactForm.reset();
                contactForm.style.opacity = '1';
                contactForm.style.pointerEvents = 'auto';
                formSuccess.classList.remove('hidden');

                setTimeout(function () {
                    formSuccess.classList.add('hidden');
                }, 5000);
            }, 800);
        });
    }

    // Scroll reveal (below-fold only, progressive enhancement)
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        const revealElements = document.querySelectorAll('.reveal');

        function revealOnScroll() {
            revealElements.forEach(function (el) {
                const rect = el.getBoundingClientRect();
                const windowHeight = window.innerHeight;

                if (rect.top < windowHeight * 0.88) {
                    el.classList.add('revealed');
                }
            });
        }

        window.addEventListener('scroll', revealOnScroll, { passive: true });
        // Check on load in case elements are already in view
        revealOnScroll();
    } else {
        // If reduced motion is preferred, ensure all elements are visible immediately
        document.querySelectorAll('.reveal').forEach(function (el) {
            el.classList.add('revealed');
        });
    }
})();