<header class="pt-6">
  {{/* Brand string for logo/monogram */}}
  {{- $brand := .Site.Params.brand | default .Site.Title}}
  {{- $mono := upper (substr $brand 0 2) -}}

  <div class="mx-auto max-w-7xl px-4 sm:px-6">
    <!-- Floating nav container -->
    <div class="nav-shell">
      <div class="nav-inner">
        <!-- Brand: logo or monogram, always links to root -->
        <a href="{{ "/" | relURL }}" class="flex items-center gap-2">
          {{ with .Site.Params.logo }}
            <div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-surface">
              <img
                src="{{ . | relURL }}"
                alt="{{ $brand }}"
                class="h-full w-full object-cover"
              >
            </div>
          {{ else }}
            <div class="logo-badge">
              {{ $mono }}
            </div>
          {{ end }}
          <span class="text-xs font-semibold tracking-wide">
            {{ $brand }}
          </span>
        </a>

        <div class="flex items-center gap-2">
          <!-- Desktop nav (configurable) -->
          <nav class="hidden items-center gap-5 md:flex">
            {{- $current := . -}}
            {{- range .Site.Menus.main }}
              <a
                href="{{ .URL | relURL }}"
                class="nav-link link-underline flex items-center gap-1 {{ if $current.IsMenuCurrent "main" . }}text-text{{ end }}"
              >
                {{ with .Params.icon }}
                  <i class="{{ . }} text-[0.75rem]"></i>
                {{ end }}
                <span>{{ .Name }}</span>
              </a>
            {{- end }}
          </nav>

          <!-- Theme toggle, sized to match nav -->
          {{ partial "dark-toggle.html" . }}

          <!-- Mobile menu button -->
          <button
            type="button"
            class="ml-1 inline-flex items-center justify-center rounded-full border border-border bg-bg p-2 text-muted shadow-sm hover:text-accent md:hidden"
            aria-label="Toggle navigation"
            data-mobile-nav-toggle
          >
            <span class="sr-only">Open navigation</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
              <line x1="4" y1="6" x2="20" y2="6" />
              <line x1="4" y1="12" x2="20" y2="12" />
              <line x1="4" y1="18" x2="20" y2="18" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile nav (uses same menu config) -->
  <div class="mx-auto mt-2 max-w-7xl px-4 sm:px-6 md:hidden">
    <nav
      class="hidden rounded-2xl border border-border bg-surface px-4 py-3 text-sm text-muted shadow-md"
      data-mobile-nav
    >
      {{ range .Site.Menus.main }}
        <a href="{{ .URL | relURL }}" class="flex items-center gap-2 py-1.5">
          {{ with .Params.icon }}
            <i class="{{ . }} text-[0.8rem]"></i>
          {{ end }}
          <span>{{ .Name }}</span>
        </a>
      {{ end }}
    </nav>
  </div>
</header>
