{# Cabeçalho: barra superior (marca + institucional + busca) + barra inferior (categorias, opcional) + drawer #}
{%- set editorias_visible = theme.nav_editorias_visible|default(true) -%}
{%- set editorias = [] -%}
{% for slug in theme.nav_editorias %}
  {%- set p = page.find('/' ~ slug) -%}
  {% if p %}{% set editorias = editorias|merge([p]) %}{% endif %}
{% endfor %}
{#- itens do topo que abrem dropdown a partir das subpáginas publicadas -#}
{%- set dropdown_slugs = ['pesquisa-e-analise', 'eventos'] -%}
{%- set institucional = [] -%}
{% for slug in theme.nav_institucional %}
  {%- set p = page.find('/' ~ slug) -%}
  {% if p and slug != 'politica-de-privacidade' %}{% set institucional = institucional|merge([p]) %}{% endif %}
{% endfor %}
{%- set visible = editorias|slice(0, 8) -%}
{%- set overflow = editorias|slice(8) -%}

<header class="site-header">
  <div class="container">
    <div class="site-header__bar">
      <a class="brand" href="{{ url('/') }}" aria-label="GSEC — Início">
        <img class="brand__logo" src="{{ url('theme://images/logo.svg') }}" alt="GSEC" width="461" height="230">
      </a>

      <div class="site-header__right">
        {# Menu superior — itens institucionais (desktop) #}
        <nav class="topnav" aria-label="Institucional">
          <ul class="topnav__list">
            {% for it in institucional %}
              {%- if it.slug == 'contato' -%}
                <li class="topnav__item has-dropdown {{ page.url starts with it.url ? 'is-active' }}">
                  <a class="topnav__link" href="{{ it.url }}" aria-haspopup="true">{{ it.title }}</a>
                  <ul class="topnav__dropdown">
                    <li><a href="{{ it.url }}#formulario">Formulário de Contato</a></li>
                    <li><a href="{{ it.url }}#redes-sociais">Redes Sociais</a></li>
                    <li><a href="{{ it.url }}#localizacao">Localização</a></li>
                  </ul>
                </li>
              {%- elseif it.slug in dropdown_slugs and it.children.published|length -%}
                <li class="topnav__item has-dropdown {{ page.url starts with it.url ? 'is-active' }}">
                  <a class="topnav__link" href="{{ it.url }}" aria-haspopup="true">{{ it.title }}</a>
                  <ul class="topnav__dropdown">
                    {% for child in it.children.published %}<li><a href="{{ child.url }}">{{ child.title }}</a></li>{% endfor %}
                  </ul>
                </li>
              {%- else -%}
                <li class="topnav__item {{ page.url == it.url ? 'is-active' }}">
                  <a class="topnav__link" href="{{ it.url }}">{{ it.title }}</a>
                </li>
              {%- endif -%}
            {% endfor %}
          </ul>
        </nav>

        <div class="site-header__actions">
          {# busca: somente o ícone da lupa; expande o campo ao clicar #}
          <div class="header-search" data-search>
            <form class="header-search__form" action="{{ url('/busca') }}" method="get" role="search" aria-label="Buscar no site">
              <input class="header-search__input" type="search" name="q" placeholder="Buscar no portal" aria-label="Termo de busca" data-autosuggest autocomplete="off">
              <button class="header-search__btn" type="submit" data-search-toggle aria-label="Buscar" aria-expanded="false"></button>
            </form>
            <ul class="autosuggest" hidden></ul>
          </div>
          <button class="nav-toggle" type="button" data-nav-toggle aria-label="Abrir menu" aria-controls="drawer" aria-expanded="false">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  {# Menu inferior — categorias/editorias (desktop). Oculto via theme.nav_editorias_visible. #}
  {% if editorias_visible %}
  <nav class="site-nav" aria-label="Categorias">
    <div class="container">
      <ul class="site-nav__list">
        {% for ed in visible %}
          <li class="site-nav__item {{ page.url starts with ed.url ? 'is-active' }}">
            <a class="site-nav__link" href="{{ ed.url }}">{{ ed.title }}</a>
          </li>
        {% endfor %}
        {% if overflow|length %}
          <li class="site-nav__item site-nav__more">
            <a class="site-nav__link" href="#" aria-haspopup="true">Mais ▾</a>
            <ul class="site-nav__dropdown">
              {% for ed in overflow %}<li><a href="{{ ed.url }}">{{ ed.title }}</a></li>{% endfor %}
            </ul>
          </li>
        {% endif %}
      </ul>
    </div>
  </nav>
  {% endif %}
</header>

{# ---------------- Drawer (mobile/tablet) ---------------- #}
<div class="drawer-overlay" id="drawer-overlay" tabindex="-1"></div>
<aside class="drawer" id="drawer" aria-hidden="true" aria-label="Menu de navegação">
  <div class="drawer__head">
    <span class="drawer__title">Menu</span>
    <button class="drawer__close" type="button" data-drawer-close aria-label="Fechar menu">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M18.3 5.71L12 12l6.3 6.29-1.42 1.42L10.59 13.4 4.3 19.71 2.88 18.3 9.17 12 2.88 5.71 4.3 4.29l6.29 6.3 6.3-6.3z"/></svg>
    </button>
  </div>
  <nav class="drawer__nav" aria-label="Editorias e seções">
    {% if editorias_visible %}
    <div class="drawer__group">Editorias</div>
    {% for ed in editorias %}
      <a class="drawer__link {{ page.url starts with ed.url ? 'is-active' }}" href="{{ ed.url }}">{{ ed.title }}</a>
    {% endfor %}
    {% endif %}
    <div class="drawer__group">Institucional</div>
    {% for it in institucional %}
      <a class="drawer__link {{ page.url == it.url ? 'is-active' }}" href="{{ it.url }}">{{ it.title }}</a>
    {% endfor %}
  </nav>
</aside>