<nav
  class="fixed w-full bg-white/95 backdrop-blur-sm z-50 border-b border-gray-100"
  id="nav"
>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-20">
      <a
        href="/"
        class="text-3xl font-playfair text-primary"
        aria-label="{{ sections.footer.brand.name }}"
        >{{ sections.footer.brand.name }}</a
      >
      <div class="md:hidden">
        <button
          id="mobile-menu-button"
          type="button"
          class="text-gray-600 hover:text-primary focus:outline-none focus:ring-2 focus:ring-primary"
          aria-controls="mobile-menu"
          aria-expanded="false"
        >
          <i class="ri-menu-line text-2xl"></i>
        </button>
      </div>
      <div class="hidden md:flex space-x-8">
        {% for item in navigation.items %}
        <a
          href="{{ item.url }}"
          class="text-gray-700 hover:text-primary"
          aria-label="{{ item.label }}"
          >{{ item.label }}</a
        >
        {% endfor %}
      </div>
    </div>
  </div>
  <ul
    id="mobile-menu"
    class="hidden absolute top-full left-0 w-full bg-white border-t border-gray-200 shadow-md flex flex-col gap-4 p-4 md:hidden"
  >
    <div class="px-6 pt-4 pb-6 space-y-3">
      {% for item in navigation.items %}
      <li>
        <a
          href="{{ item.url }}"
          class="block text-gray-600 hover:text-primary py-2"
          aria-label="{{ item.label }}"
          >{{ item.label }}</a
        >
      </li>
      {% endfor %}
    </div>
  </ul>
</nav>
