{{--
    Full-width search bar that covers the header. A [popover] (top layer, so it
    sits over the sticky header with no z-index juggling; Escape and click-away
    close come for free). The header's search button opens it via popovertarget.
    The `nav-search` controller measures the header on open (→ --search-overlay-h,
    since the header isn't a fixed height below `lg`) and focuses the field.
    Fade transition lives in app.css (#search-overlay).
--}}
<div
    id="search-overlay"
    popover
    data-controller="nav-search"
    class="fixed w-full inset-x-0 top-0 bottom-auto m-0 h-[var(--search-overlay-h)] border-0 bg-brand p-0"
>
    <form
        method="get"
        action="{{ route('search') }}"
        class="flex h-full items-center gap-6 px-10"
    >
        <label for="search-overlay-input" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
        <input
            id="search-overlay-input"
            type="search"
            name="q"
            required
            autocomplete="off"
            data-nav-search-target="input"
            placeholder="{{ __('storefront.search.placeholder') }}"
            class="min-w-0 flex-1 appearance-none border-0 border-b border-black bg-transparent pb-2 placeholder:text-black/60 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
        >
        <button
            type="button"
            popovertarget="search-overlay"
            popovertargetaction="hide"
            aria-label="{{ __('storefront.nav.close') }}"
            class="shrink-0 text-black transition-opacity hover:opacity-70"
        >
            <x-ui.icon name="close" :size="44" />
        </button>
    </form>
</div>