document.addEventListener("DOMContentLoaded", function() {
  const overlay = document.querySelector(".overlay-gray");
  if (!overlay) {
    console.warn("Overlay element (.overlay-gray) not found!");
    return;
  }
  
  // Function to check if any dropdown is open
  function updateOverlay() {
    const openDropdown = document.querySelector(".main-nav-accordion .brxe-dropdown.open");
    if (openDropdown) {
      overlay.classList.add("active");
    } else {
      overlay.classList.remove("active");
    }
  }
  
  // Select all dropdown elements inside the main nav
  const dropdowns = document.querySelectorAll(".main-nav-accordion .brxe-dropdown");
  
  // Create a MutationObserver to watch for attribute changes (i.e., class changes)
  const observer = new MutationObserver(function(mutationsList) {
    // Check all mutations – if any affect the class list, update the overlay
    mutationsList.forEach(mutation => {
      if (mutation.attributeName === "class") {
        updateOverlay();
      }
    });
  });
  
  // Observe each dropdown for class attribute changes
  dropdowns.forEach(dropdown => {
    observer.observe(dropdown, { attributes: true, attributeFilter: ["class"] });
  });
  
  // Also update once on page load in case something is already open
  updateOverlay();
});