{{#
	@name Main desktop navigation
	@desc The site's main desktop navigation rendered on each page.
#}}

<!-- /layout/navigation/_main_desktop.antlers.html -->
<nav
    class="hidden sm:block"
    aria-label="{{ trans:strings.main_navigation }}"
>
    <ul class="flex items-baseline gap-x-6 lg:gap-x-8 main-nav">
        {{ nav:main max_depth="0" select="title|permalink|cta|children" }}
            <li>
                <a
                    href="{{ permalink }}"
                    class="
                        inline-flex items-center gap-x-1 font-medium select-none motion-safe:transition focus:outline-none
                        {{ cta
                            ? 'bg-black text-white text-[15px] rounded-full px-4 py-1.5 group hover:bg-black/90 focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2'
                            : 'hover:line-through text-base focus-visible:rounded focus-visible:ring-1 focus-visible:ring-black'
                         }}
                    "
                >
                    {{ title }}

                    {{ if cta }}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="transition size-4 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5 -mr-0.5">
                            <path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd" />
                        </svg>
                    {{ /if }}
                </a>

                {{ if children }}
                    <ul class="sub-menu">
                        {{ children }}
                        <li class="{{ if is_current || is_parent }}active{{ /if }}">
                            <a href="{{ permalink }}" class="
                                    inline-flex items-center gap-x-1 font-medium select-none motion-safe:transition focus:outline-none
                                    {{ cta
                                        ? 'bg-black text-white text-[15px] rounded-full px-4 py-1.5 group hover:bg-black/90 focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2'
                                        : 'hover:line-through text-base focus-visible:rounded focus-visible:ring-1 focus-visible:ring-black'
                                    }}
                                ">
                                {{ title }}
                                {{ if cta }}
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="transition size-4 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5 -mr-0.5">
                                    <path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd" />
                                </svg>
                                {{ /if }}
                            </a>
                        </li>
                        {{ /children }}
                    </ul>
                {{ /if }}
            </li>
        {{ /nav:main }}
    </ul>
</nav>
<!-- End: /layout/navigation/_main_desktop.antlers.html -->