<header class="header">
  <div>
    <a class="header_logo-link" href="/">
      <img width="100" src="/assets/img/Logo-CoTech-White.svg">
    </a>
  </div>
  <div>
    <button class="header_burger-btn" aria-label="Toggle menu">
      <p><strong>MENU</strong></p>
      <svg class="header_burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      <svg class="header_close-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
    </button>
    <ul class="header_menu-list">
      <li><a href="/">Home</a></li>
      <li><a href="/hire">Hire us</a></li>
      <li><a href="/join">Join us</a></li>
      <li><a href="/work">Our work</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/why_coops">Why co-ops</a></li>
      <li><a href="/conference-2026">Events</a></li>
    </ul>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const burgerBtn = document.querySelector('.header_burger-btn');
      const menuList = document.querySelector('.header_menu-list');

      burgerBtn.addEventListener('click', function() {
        menuList.classList.toggle('active');
        burgerBtn.classList.toggle('active');
      });

      const menuLinks = document.querySelectorAll('.header_menu-list a');
      menuLinks.forEach(link => {
        link.addEventListener('click', function() {
          menuList.classList.remove('active');
        });
      });
    });
  </script>
</header>
