(() => {
  'use strict';
  
  const mq = window.matchMedia('(min-width: 480px)');
  if (!mq.matches) return;

  const menuBtn = document.querySelector('.menu');
  const menuPanel = document.querySelector('.menu_main');
  if (!menuBtn || !menuPanel) return;

  let isActive = false;
  let rafId = null;

  const checkMenuState = () => {
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(() => {
      isActive = menuPanel.offsetParent !== null;
    });
  };

  const handleClick = (event) => {
    if (!isActive) return;
    
    const target = event.target;
    if (!menuPanel.contains(target) && !menuBtn.contains(target)) {
      menuBtn.click();
    }
  };

  const handleMediaChange = (e) => {
    if (!e.matches) {
      document.removeEventListener('click', handleClick);
      menuPanel.removeEventListener('transitionend', checkMenuState);
    }
  };

  const mo = new MutationObserver(checkMenuState);
  mo.observe(menuPanel, {
    attributes: true,
    attributeFilter: ['style', 'class']
  });

  menuPanel.addEventListener('transitionend', checkMenuState);
  document.addEventListener('click', handleClick, true);
  
  mq.addEventListener('change', handleMediaChange);
  
  checkMenuState();
})();