{# Auto-derived site navigation.

   Reads `site_nav_tree()` from the Jinja env (registered by
   `bragi.contrib.nav.plugin`). Renders nothing when the tree
   is empty so sites with zero eligible pages don't grow empty
   markup.

   Parents with children use native <details> disclosure: the
   <a> follows the link, the caret toggles the submenu. Stable
   CSS hooks (`site-nav__*`) let each theme style without
   touching this markup.

   Ships a minimal structural CSS reset so the nav renders
   sensibly out of the box on any theme: no default disc bullets,
   `<nav>` sits inline next to the brand link, submenu absolutely
   positioned under its parent. Themes refine colors / fonts /
   spacing / hover via the `.site-nav__*` hooks; structure is
   the partial's concern so every theme (built-in or third-party)
   gets a working baseline without copy-pasting the same boilerplate. #}
{% set tree = site_nav_tree() %}
{% if tree %}
<style>
  /* Structural reset. Themes override via higher specificity on
     the same hooks if they want a vertical sidebar, a different
     gap, etc. */
  .site-nav { display: inline-block; margin-left: 1rem; vertical-align: baseline; }
  .site-nav__list,
  .site-nav__submenu { list-style: none; padding: 0; margin: 0; }
  .site-nav__list { display: inline-flex; gap: 1.25rem; flex-wrap: wrap; }
  .site-nav__item { position: relative; }
  /* The submenu floats above body content; it needs an explicit
     background so text underneath doesn't bleed through. Themes
     conventionally set `--bg` and `--rule` on `:root` (all four
     built-ins do); we pull those with system-color fallbacks for
     third-party themes that don't follow the convention. */
  .site-nav__submenu {
    position: absolute; top: 100%; left: 0;
    min-width: 8rem; padding: 0.35rem 0;
    background: var(--bg, Canvas);
    border: 1px solid var(--rule, rgba(0, 0, 0, 0.15));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
  }
  .site-nav__submenu li { padding: 0.2rem 0.75rem; }
  /* Hide the browser's default disclosure triangle so themes
     own the caret look entirely. Scoped to .site-nav__summary
     to avoid leaking into theme content. */
  .site-nav__summary::-webkit-details-marker { display: none; }
  .site-nav__summary::marker { content: ''; }
  .site-nav__summary {
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
  }
</style>
<nav class="site-nav" aria-label="Site navigation">
  <ul class="site-nav__list">
    {% for item in tree %}
      <li class="site-nav__item">
        {% if item.children %}
          <details class="site-nav__details">
            <summary class="site-nav__summary">
              <a href="{{ url_for_page(item.page) }}">{{ item.page.title }}</a>
              <span class="site-nav__caret" aria-hidden="true">▾</span>
            </summary>
            <ul class="site-nav__submenu">
              {% for child in item.children %}
                <li><a href="{{ url_for_page(child.page) }}">{{ child.page.title }}</a></li>
              {% endfor %}
            </ul>
          </details>
        {% else %}
          <a href="{{ url_for_page(item.page) }}">{{ item.page.title }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>
<script>
  /* Progressive enhancement: open the <details> submenu on hover
     after a short delay, close after a forgiving delay. The
     <summary> click handler is unchanged; without JS, click still
     toggles the submenu. */
  (function () {
    'use strict';
    var OPEN_DELAY_MS = 500;
    var CLOSE_DELAY_MS = 200;
    var items = document.querySelectorAll('.site-nav__details');
    items.forEach(function (el) {
      var openTimer, closeTimer;
      el.addEventListener('mouseenter', function () {
        clearTimeout(closeTimer);
        if (el.open) return;
        openTimer = setTimeout(function () { el.open = true; }, OPEN_DELAY_MS);
      });
      el.addEventListener('mouseleave', function () {
        clearTimeout(openTimer);
        closeTimer = setTimeout(function () { el.open = false; }, CLOSE_DELAY_MS);
      });
    });
  })();
</script>
{% endif %}