{# Search Widget — redirects to /search/?q=query #}
<form action="/search/" method="get" class="flex gap-2">
  <label for="widget-search" class="sr-only">Search this site</label>
  <input id="widget-search" type="text" name="q" placeholder="Search..."
    class="flex-1 min-w-0 px-3 py-2 text-sm rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 dark:placeholder-surface-500">
  <button type="submit" class="px-3 py-2 text-sm font-medium rounded-lg bg-accent-600 text-white hover:bg-accent-700 transition-colors" aria-label="Search">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
  </button>
</form>