/* Custom styles for The Blonde Knot */

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

/* Gold shimmer on hover for special elements */
a.group:hover svg path,
a.group:hover svg circle {
    filter: drop-shadow(0 0 4px rgba(201, 151, 59, 0.4));
}

/* Custom select styling */
select option {
    background: #1C1C1C;
    color: #E8E6E3;
}

/* Subtle gradient line divider */
.gradient-line {
    background: linear-gradient(90deg, transparent, #C9973B, transparent);
    height: 1px;
}

/* Image hover overlay */
img.hover-zoom {
    transition: transform 0.6s ease;
}
img.hover-zoom:hover {
    transform: scale(1.05);
}

/* Button focus styles */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #E8725A;
    outline-offset: 2px;
}

/* Input autofill override */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #141414 inset !important;
    -webkit-text-fill-color: #E8E6E3 !important;
}
</style>
<sm-file path="script.js">
// The Blonde Knot — Interactive Behaviors

(function () {
    'use strict';

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

    function handleNavbar() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 60) {
            navbar.classList.add('bg-charcoal-900/95', 'backdrop-blur-md', 'border-b', 'border-charcoal-700');
        } else {
            navbar.classList.remove('bg-charcoal-900/95', 'backdrop-blur-md', 'border-b', 'border-charcoal-700');
        }
        lastScroll = currentScroll;
    }

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

    // ── Mobile menu ───────────────────────────────────────────────────────
    const menuBtn = document.getElementById('menu-btn');
    const menuClose = document.getElementById('menu-close');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuOverlay = document.getElementById('menu-overlay');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function openMenu() {
        mobileMenu.classList.remove('closed');
        mobileMenu.classList.add('open');
        menuOverlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeMenu() {
        mobileMenu.classList.remove('open');
        mobileMenu.classList.add('closed');
        menuOverlay.classList.add('hidden');
        document.body.style.overflow = '';
    }

    menuBtn.addEventListener('click', openMenu);
    menuClose.addEventListener('click', closeMenu);
    menuOverlay.addEventListener('click', closeMenu);
    mobileLinks.forEach(function (link) {
        link.addEventListener('click', closeMenu);
    });

    // ── Scroll reveal (progressive enhancement) ──────────────────────────
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        const revealElements = document.querySelectorAll('.reveal');

        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('revealed');
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -40px 0px'
        });

        revealElements.forEach(function (el) {
            observer.observe(el);
        });
    } else {
        // If JS is disabled or reduced motion is preferred, ensure all elements are visible
        document.querySelectorAll('.reveal').forEach(function (el) {
            el.classList.add('revealed');
        });
    }

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

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

            // Simulate submission
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = 'Sending...';
            submitBtn.disabled = true;

            setTimeout(function () {
                contactForm.reset();
                formSuccess.classList.remove('hidden');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;

                // Hide success message after 6 seconds
                setTimeout(function () {
                    formSuccess.classList.add('hidden');
                }, 6000);
            }, 800);
        });
    }

    // ── Smooth scroll for anchor links ────────────────────────────────────
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                e.preventDefault();
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });

})();