{% set select_colours = "
  [.hover-capable_&]:hover:bg-yellow-300
  aria-selected:bg-stone-500 aria-selected:text-white
  [.hover-capable_&[aria-selected=true]:hover]:bg-orange-500
"%}
{% import 'macros/links.html' as links %}

{% macro header_row(oob=False) %}
  {% call links.menu_row(id='root-row', oob=oob) %}
    <div class="w-full flex flex-row items-top">
      {# Cart mini — fetched from cart app as fragment #}
      {% if cart_mini_html %}
        {{ cart_mini_html | safe }}
      {% endif %}

      {# Site title #}
      <div class="font-bold text-5xl flex-1">
        {% from 'macros/title.html' import title with context %}
        {{ title('flex justify-center md:justify-start')}}
      </div>

      {# Desktop nav #}
      <nav class="hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0">
        {% if nav_tree_html %}
          {{ nav_tree_html | safe }}
        {% endif %}
        {% if auth_menu_html %}
          {{ auth_menu_html | safe }}
        {% endif %}
        {% include "_types/root/_nav_panel.html"%}
      </nav>
      {% include '_types/root/_hamburger.html' %}
    </div>
  {% endcall %}
  {# Mobile user info #}
  <div class="block md:hidden text-md font-bold">
    {% if auth_menu_html %}
      {{ auth_menu_html | safe }}
    {% endif %}
  </div>
{% endmacro %}