(function () {
  var burger = document.querySelector('.nav-burger');
  var menu = document.getElementById('mobileMenu');
  if (!burger || !menu) return;

  function closeMenu() {
    menu.hidden = true;
    burger.classList.remove('is-open');
    burger.setAttribute('aria-expanded', 'false');
  }

  function openMenu() {
    menu.hidden = false;
    burger.classList.add('is-open');
    burger.setAttribute('aria-expanded', 'true');
  }

  burger.addEventListener('click', function () {
    if (menu.hidden) {
      openMenu();
    } else {
      closeMenu();
    }
  });

  menu.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      closeMenu();
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      closeMenu();
    }
  });

  document.addEventListener('click', function (e) {
    if (!menu.hidden && !menu.contains(e.target) && !burger.contains(e.target)) {
      closeMenu();
    }
  });

  // Desktop CSS hides .mobile-menu entirely, but if the menu was left open
  // on mobile and the viewport grows past the breakpoint (resize, rotate,
  // devtools), reset state so it doesn't reopen collapsed at mobile width.
  window.matchMedia('(min-width: 761px)').addEventListener('change', function (e) {
    if (e.matches) {
      closeMenu();
    }
  });
})();