script.js

document.addEventListener('DOMContentLoaded', function () {
    const header = document.getElementById('siteHeader');
    const navLinks = document.querySelectorAll('.nav-link');
    const hamburger = document.getElementById('hamburger');
    const nav = document.getElementById('primaryNav');

    hamburger.addEventListener('click', function () {
        const expanded = this.getAttribute('aria-expanded') === 'true';
        this.setAttribute('aria-expanded', String(!expanded));
        nav.classList.toggle('open');
    });

    const SCROLL_THRESHOLD = 40;
    function onScroll() {
        if (window.scrollY > SCROLL_THRESHOLD) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }

        
        highlightCurrentSection();
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll(); // init

    navLinks.forEach(link => {
        link.addEventListener('mouseenter', () => {
            link.classList.add('active');
        });
        link.addEventListener('mouseleave', () => {
            link.classList.remove('active');
        });
        link.addEventListener('focus', () => {
            link.classList.add('active');
        });
        link.addEventListener('blur', () => {
            link.classList.remove('active');
        });

        link.addEventListener('click', (e) => {
            const href = link.getAttribute('href');
            if (href && href.startsWith('#')) {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }

                
                if (nav.classList.contains('open')) {
                    nav.classList.remove('open');
                    hamburger.setAttribute('aria-expanded', 'false');
                }
            }
        });
    });

   
    const sections = Array.from(document.querySelectorAll('main, section')).filter(s => s.id);
    const observerOptions = { root: null, rootMargin: '0px 0px -50% 0px', threshold: 0 };

    function onIntersect(entries) {
        entries.forEach(entry => {
            const id = entry.target.id;
            const link = document.querySelector(`.nav-link[href="#${id}"]`);
            if (entry.isIntersecting) {
                navLinks.forEach(l => l.classList.remove('active'));
                if (link) link.classList.add('active');
            }
        });
    }

    if ('IntersectionObserver' in window && sections.length) {
        const observer = new IntersectionObserver(onIntersect, observerOptions);
        sections.forEach(s => observer.observe(s));
    } else {
        
        function highlightCurrentSection() {
            let found = false;
            for (let sec of sections) {
                const rect = sec.getBoundingClientRect();
                if (!found && rect.top <= window.innerHeight * 0.35 && rect.bottom >= window.innerHeight * 0.2) {
                    const link = document.querySelector(`.nav-link[href="#${sec.id}"]`);
                    navLinks.forEach(l => l.classList.remove('active'));
                    if (link) link.classList.add('active');
                    found = true;
                }
            }
            if (!found) navLinks.forEach(l => l.classList.remove('active'));
        }
        window.addEventListener('scroll', highlightCurrentSection);
        highlightCurrentSection();
    }

   
    function highlightCurrentSection() { }
});