Header Layouts

<header class="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md shadow-md transition-all duration-300 font-open-sans border-b border-gray-100">
  <div class="max-w-screen-2xl mx-auto px-6 lg:px-8">
    <div class="lg:grid grid-cols-2 min-[1440px]:grid-cols-[auto_1fr_auto] items-center gap-y-2 min-[1440px]:gap-y-0 min-[1440px]:gap-x-8 py-2 min-[1440px]:h-26"><a class="order-1 flex-shrink-0 transition-transform duration-300 justify-self-start" href="/"> <img src="[LOGO_URL]" alt="Logo" class="h-22 w-auto object-contain hidden lg:block"> </a>
      <div class="order-3 min-[1440px]:order-2 col-span-2 min-[1440px]:col-span-1 w-full flex justify-center min-[1440px]:border-t-0 pt-2 min-[1440px]:pt-0">
        
        [MENU_WIDGET_PLACEHOLDER] - Insert a header menu
      </div>
      <div class="order-2 min-[1440px]:order-3 justify-self-end flex items-center hidden lg:flex"><a href="tel:[PHONE_NUMBER]" class="group relative flex items-center gap-3 bg-gray-50 hover:bg-[#00A3D5] lg:border border-gray-200 hover:border-[#00A3D5] pl-2 pr-6 py-2 rounded-full transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
          <div class="lg:flex items-center justify-center w-10 h-10 bg-white rounded-full shadow-sm group-hover:bg-[#39B64B] transition-colors duration-300"><svg class="w-5 h-5 text-[#00A3D5] group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
              </path>
            </svg></div>
          <div class="flex flex-col text-left "><span class="text-xs font-semibold text-gray-500 uppercase tracking-wider group-hover:text-blue-100 transition-colors">Call Us</span> <span class="text-lg font-bold text-gray-800 font-red-hat-text group-hover:text-white transition-colors leading-none">[PHONE_NUMBER]</span></div>
        </a></div>
    </div>
  </div>
</header>