{#
  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(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">
    {% from '_types/root/header/_header.html' import header_row with context %}
    {{ header_row() }}
              
    {{ caller() }}

  </div>
{% if oob %}
</div>
{% endif %}

{% endmacro %}

