{#
  Shared root header for both base templates and OOB updates

  This macro can be used in two modes:
  - oob=true: Outputs full div with sx-swap-oob attribute (for OOB updates)
  - oob=false: Outputs just content, assumes wrapper div exists (for base templates)

  Usage:
  1. Call root_header_start(oob=true/false)
  2. Add any section-specific headers
  3. Call root_header_end(oob=true/false)
#}

{% macro root_header_start(oob=true) %}
{% 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
"%}

{% if oob %}
<div id="root-header" sx-swap-oob="outerHTML" class="flex items-start gap-2 p-1 bg-{{ menu_colour }}-{{ (500-(level()*100))|string }}">
{% endif %}
  <div class="flex flex-col items-center flex-1">
    <div class="flex w-full justify-center md:justify-start">
      {# Cart mini — rendered via 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">
        {% include '_types/root/_nav.html' %}
        {% if not g.user %}
          {% include '_types/root/_sign_in.html' %}
        {% else %}
          {% include '_types/root/_full_user.html' %}
        {% endif %}
        {% include "_types/root/_nav_panel.html"%}
      </nav>
      {% include '_types/root/_hamburger.html' %}
    </div>

    {# Mobile user info #}
    <div class="block md:hidden text-md font-bold">
      {% if g.user %}
        {% include '_types/root/mobile/_full_user.html' %}
      {% else %}
        {% include '_types/root/mobile/_sign_in.html' %}
      {% endif %}
    </div>

    {# Section-specific headers go here (caller adds them between start and end) #}
{% endmacro %}

{% macro root_header_end(oob=true) %}
  </div>
{% if oob %}
</div>
{% endif %}
{% endmacro %}