{{- /* nav.html — primary navigation built from pages with showInNav: true,
       ordered by weight. Desktop = inline list; mobile = Alpine.js toggle. */ -}}
{{- $current := . -}}
{{- $navPages := sort (where .Site.Pages "Params.showInNav" true) "Weight" -}}

{{/* Desktop — min-w-0 lets the nav shrink inside the flex row; overflow-x-auto
     keeps a long section list on one line and scrollable instead of pushing the
     header past the viewport. */}}
<nav aria-label="Primary" class="hidden min-w-0 flex-1 lg:block">
  <ul class="nav-scroll flex items-center gap-1 overflow-x-auto whitespace-nowrap">
    {{- range $navPages -}}
      {{- $active := eq $current.RelPermalink .RelPermalink -}}
      <li class="shrink-0">
        <a href="{{ .RelPermalink }}" class="nav-link{{ if $active }} nav-link-active{{ end }}"{{ if $active }} aria-current="page"{{ end }}>{{ .LinkTitle }}</a>
      </li>
    {{- end -}}
  </ul>
</nav>

{{/* Mobile — native <details> so the menu works with NO JavaScript; Alpine adds
     escape-to-close and click-outside-to-close when available. */}}
<details class="group relative lg:hidden"
         x-data="{ open: false }"
         x-bind:open="open"
         @toggle="open = $event.target.open"
         @keydown.escape.window="open = false"
         @click.outside="open = false">
  <summary class="inline-flex cursor-pointer list-none items-center justify-center rounded-md p-2 text-secondary hover:bg-secondary/5 [&::-webkit-details-marker]:hidden"
           aria-controls="mobile-menu" aria-label="{{ i18n "toggleMenu" }}">
    <svg class="h-6 w-6 group-open:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
    <svg class="hidden h-6 w-6 group-open:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </summary>

  <div id="mobile-menu"
       class="absolute inset-x-0 top-16 z-40 max-h-[calc(100vh-4rem)] overflow-y-auto border-b border-secondary/10 bg-white p-4 shadow-lg">
    <ul class="flex flex-col gap-1">
      {{- range $navPages -}}
        <li><a href="{{ .RelPermalink }}" class="nav-link block">{{ .LinkTitle }}</a></li>
      {{- end -}}
      <li class="pt-3">{{ partial "cta-button.html" (dict "page" $current "text" (i18n "playNow") "block" true) }}</li>
    </ul>
  </div>
</details>