// Helper function for logging (enable if needed)
function log(message, data = null) {
    // console.log(message, data);
}

// Function to calculate #brx-header height and set it as CSS variable --nav-height
function updateNavHeight() {
    const header = document.getElementById('brx-header');
    if (header) {
        // Use requestAnimationFrame for accurate measurement after rendering
        requestAnimationFrame(() => {
            const height = header.offsetHeight;
            document.documentElement.style.setProperty('--nav-height', `${height}px`);
            log('Navigation height set to:', height);
        });
    } else {
        log('#brx-header element not found');
    }
}

// Initial triggers for height calculation
document.addEventListener('DOMContentLoaded', updateNavHeight);
window.addEventListener('load', updateNavHeight);
updateNavHeight(); // Fallback in case events have already fired

// Watch for images and fonts loading inside the header for accurate height
function watchImagesAndFonts() {
    const header = document.getElementById('brx-header');
    if (!header) return;

    // Watch all images inside the header
    const images = header.querySelectorAll('img');
    images.forEach(img => {
        if (!img.complete) {
            img.addEventListener('load', updateNavHeight, { once: true });
        }
    });

    // Watch for web fonts loading (if used)
    if (document.fonts) {
        document.fonts.ready.then(updateNavHeight);
    }
}
window.addEventListener('load', watchImagesAndFonts);

// Debounced resize handler for performance
let resizeTimeout;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateNavHeight, 100);
});

// MutationObserver for dynamic header changes (attributes, children, subtree)
const header = document.getElementById('brx-header');
if (header) {
    new MutationObserver(updateNavHeight).observe(header, {
        attributes: true,
        childList: true,
        subtree: true
    });
}

// Centralized DOM element selection
const domElements = {
    dropdownItems: document.querySelectorAll('li[data-script-id].brxe-dropdown'),
    logo: document.querySelector('[data-logo]'),
    customButton: document.querySelector('[data-back-button]'),
    toggleButton: document.querySelector('button[aria-label]'),
    navList: document.querySelector('ul.brx-nav-nested-items'),
    mainNav: document.querySelector('.brxe-nav-nested')
};

// Event delegation for dropdown items (handles dynamic elements as well)
document.addEventListener('click', (event) => {
    const target = event.target.closest('li[data-script-id].brxe-dropdown');
    if (!target) return;

    const isOpen = target.classList.contains('open') && target.classList.contains('active');
    log("Dropdown item clicked - is open?", isOpen);

    if (!isOpen) {
        domElements.logo?.setAttribute('data-logo', 'hidden');
        domElements.customButton?.setAttribute('data-back-button', 'visible');
        domElements.navList?.classList.add('dropdown-open');
    }
});

// Unified event handler for custom and toggle buttons
function handleButtonInteractions() {
    domElements.toggleButton?.click();
    domElements.customButton?.setAttribute('data-back-button', 'hidden');
    domElements.logo?.setAttribute('data-logo', 'visible');
    domElements.navList?.classList.remove('dropdown-open');
}

if (domElements.customButton && domElements.toggleButton) {
    domElements.customButton.addEventListener('click', handleButtonInteractions);
    domElements.toggleButton.addEventListener('click', () => {
        if (domElements.customButton.getAttribute('data-back-button') === 'visible') {
            handleButtonInteractions();
        }
    });
}

// MutationObserver for main navigation to reset UI state when menu closes
if (domElements.mainNav) {
    new MutationObserver(() => {
        if (!domElements.mainNav.classList.contains('brx-open')) {
            domElements.logo?.setAttribute('data-logo', 'visible');
            domElements.customButton?.setAttribute('data-back-button', 'hidden');
            domElements.navList?.classList.remove('dropdown-open');
        }
    }).observe(domElements.mainNav, {
        attributes: true,
        attributeFilter: ['class']
    });
}

@media (max-width: 768px) {
	.fr–header–basel {
    width: 95vw !important; /* Wider menu */
    max-width: 90vw !important;
  }

  #brxe-053238 { /* Your mobile nav container */
    width: 85vw !important; /* Make sure nav itself also takes full width */
  }

}

/* Front end only: make the Bricks header an overlay */
body:not(.bricks-is-builder) #brx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: none;
}

/* Admin bar offset */
body.admin-bar:not(.bricks-is-builder) #brx-header { top: 32px; }
@media (max-width: 782px){
  body.admin-bar:not(.bricks-is-builder) #brx-header { top: 46px; }
}