document.addEventListener('DOMContentLoaded', function () {
    const nav = document.getElementById('mainNav'); // Keep for mobile toggle
    const header = document.querySelector('header'); // Get the header element
    const toggle = document.getElementById('navToggle');

    // Toggle menu on mobile
    toggle.addEventListener('click', function () {
        nav.classList.toggle('open'); // Mobile menu still controlled by nav
        toggle.classList.toggle('active');
    });

    // Handle transparent header scroll effect for home page on desktop
    const body = document.body;
    const scrollThreshold = 50; // Pixels to scroll before changing background

    function handleScroll() {
        // Check if it's the home page layout and desktop view
        if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint
            if (window.scrollY > scrollThreshold) {
                header.classList.add('scrolled'); // Add class to header
            } else {
                header.classList.remove('scrolled'); // Remove class from header
            }
        } else if (header) { // Check if header exists before trying to remove class
             // Ensure scrolled class is removed if not on home page desktop or resized below lg
             header.classList.remove('scrolled'); // Remove class from header
        }
    }

    // Initial check in case the page loads already scrolled
    handleScroll();

    // Add scroll and resize listeners
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll); // Re-check on resize

    const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
    submenuParents.forEach(parent => {
        parent.addEventListener('click', (e) => {
            if (window.innerWidth <= 992) {
                e.preventDefault();
                const subMenu = parent.querySelector('.sub-menu');
                if (subMenu) {
                    const isOpen = subMenu.style.display === 'block';
                    document.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none');
                    subMenu.style.display = isOpen ? 'none' : 'block';
                }
            }
        });
    });
});