{# The global navigation menu - used on mobile and desktop #}
{% set animationDelay = 75 %}

<div id="globalNavMenu" data-state="closed" class="nav-menu absolute lg:fixed w-full h-nav-height lg:h-dvh lg:top-0 z-10 hidden">
    <div class="mobile-close-menu absolute inset-x-0 -bottom-20 h-20 px-6 sm:px-8 py-4 sm:py-6 flex flex-row justify-center items-center border-t-2 border-solid border-mintyy-gray-i lg:hidden">
        <button id="closeMainMenuButton" class="close-menu-button w-auto px-6 py-3 flex flex-row justify-center items-center bg-white-primary rounded-full border-2 border-solid border-brand-terracotta-i transition-colors duration-700 xs:hover:bg-brand-cream-vi group lg:hidden">
            {{ svg(svgPath ~ '/core/caret-down-icon.svg') | attr({ class: 'w-3 mb-px text-black-primary pointer-events-none rotate-180' }) }}
            <span class="inline font-body text-black-primary mx-4 pointer-events-none">
                Close Menu
            </span>
            {{ svg(svgPath ~ '/core/caret-down-icon.svg') | attr({ class: 'w-3 mb-px text-black-primary pointer-events-none rotate-180' }) }}
        </button>
    </div>
    <div id="desktopClickWrapper" class="desktop-click-wrapper absolute inset-0 bg-black/70"></div>
    <div class="background-wrapper bg-white absolute w-full lg:w-120 xl:w-140 lg:right-0 h-full">
        <div class="content-wrapper w-full h-full lg:h-dvh lg:h-auto flex flex-col justify-between items-start overflow-x-hidden overflow-y-scroll">
            <div class="top-wrapper w-full flex flex-col justify-start items-start">
                <div class="padding-wrapper w-full h-full lg:p-12 xl:p-16">
                    <div class="search-wrapper w-full flex flex-col justify-start items-start border-b border-solid border-mintyy-gray-iii lg:hidden">
                        <div class="padding-wrapper w-full h-full p-6 sm:p-8">
                            <div class="search-input w-full h-16 flex flex-row justify-start items-center rounded-full">
                                <div class="inner-wrapper w-full h-16 relative bg-white-primary flex flex-row justify-start items-center rounded-full">
                                    {# The search bar #}
                                    <form id="navSearchFormInMenu" class="w-full h-14 sm:h-16 relative rounded-full" action="/search" method="post">
                                        <label class="sr-only" for="navSearchInputInMenu">Search</label>
                                        <input id="navSearchInputInMenu" type="search" placeholder="Search" class="w-full h-14 sm:h-16 pl-6 sm:pl-8 font-body font-normal text-lg text-black-primary placeholder:text-gray-400 border-2 border-solid border-brand-terracotta-aa rounded-full transition-colors duration-300 placeholder:transition-colors placeholder:duration-300 active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2" />
                                        <button id="navSearchMenuSubmit" class="nav-search-menu-submit absolute top-2 right-2 w-10 sm:w-12 h-10 sm:h-12 flex justify-center items-center rounded-full bg-brand-terracotta-aa" type="submit">
                                            {{ svg(svgPath ~ '/core/search-icon-thick.svg') | attr({ class: 'w-4 sm:w-5 text-white-pure' }) }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="links-wrapper w-full flex flex-col justify-start items-start {{ entry.uri }}">
                        {% set manualIndex = 0 %}
                        {% for navItem in secondaryNavigation.level(1) %}
                            {% if navItem.children | length %}
                                <div class="parent-button-wrapper main-menu-fade-in lg:opacity-0 w-full lg:w-auto relative flex flex-row justify-start items-between border-t border-solid border-mintyy-gray-i lg:border-transparent transition-opacity duration-700 lg:mt-8 xl:mt-10 first:lg:mt-0 delay-[{{ manualIndex * animationDelay }}ms]">
                                    <a href="{{ navItem.url }}" title="{{ navItem.title }}" class="nav-link w-full lg:w-auto text-lg lg:text-xl text-black-primary font-body font-medium p-6 lg:p-0 border-b border-solid border-mintyy-gray-i lg:border-transparent transition-colors duration-700 xs:hover:text-brand-terracotta-aa{{ entry.id == navItem.elementId ? ' font-semibold bg-brand-crimson-viii lg:bg-transparent lg:text-brand-terracotta-aa' }}">
                                        {{ navItem.title }}
                                    </a>
                                    <button data-id="{{ navItem.elementId }}" class="mobile-submenu-toggle absolute right-0 border-l border-solid text-lg font-body w-[4.75rem] h-[4.75rem] flex justify-center items-center lg:hidden">
                                        <span class="sr-prompt sr-only">Open Submenu</span>
                                        <span class="plus-icon flex justify-center items-center transition-transform duration-300">
                                            <span class="w-4 h-px absolute bg-black-primary"></span>
                                            <span class="w-4 h-px absolute rotate-90 origin-center bg-black-primary"></span>
                                        </span>
                                    </button>
                                </div>
                                {% set manualIndex = manualIndex + 1 %}
                                <div data-id="{{ navItem.elementId }}" data-state="closed" class="mobile-submenu-wrapper main-menu-fade-in lg:opacity-0 w-full py-2 lg:py-0 flex flex-col justify-start items-start border-t border-b border-solid border-mintyy-gray-i transition-opacity duration-700 lg:border-transparent overflow-hidden hidden lg:flex delay-[{{ manualIndex * animationDelay }}ms]">
                                    {% for child in navItem.children %}
                                        <a href="{{ child.url }}" title="{{ child.title }}" class="dropdown-link w-full lg:w-auto text-base lg:text-lg text-black-primary lg:text-mintyy-gray-vii font-body font-medium px-6 py-4 lg:p-0 lg:mt-2 xl:mt-4 transition-colors duration-700 hover:text-brand-terracotta-aa">
                                            {{ child.title }}
                                        </a>
                                    {% endfor %}
                                </div>
                                {% set manualIndex = manualIndex + 1 %}
                            {% else %}
                                <a href="{{ navItem.url }}" title="{{ navItem.title }}" class="nav-link main-menu-fade-in lg:opacity-0 w-full lg:w-auto text-lg lg:text-xl text-black-primary font-body font-medium p-6 lg:p-0 lg:mt-8 xl:mt-10 first:lg:mt-0 border-b border-solid border-mintyy-gray-i lg:border-transparent transition-all duration-700 xs:hover:text-brand-terracotta-aa delay-[{{ manualIndex * animationDelay }}ms]{{ entry.id == navItem.elementId ? ' font-semibold bg-brand-crimson-viii lg:bg-transparent lg:text-brand-terracotta-aa' }}">
                                    {{ navItem.title }}
                                </a>
                                {% set manualIndex = manualIndex + 1 %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="bottom-wrapper bg-white w-full flex flex-col justify-start items-start">
                <div class="padding-wrapper w-full h-full p-6 sm:p-8 lg:p-12 xl:p-16 lg:pt-0 xl:pt-0">
                    <div class="content-wrapper w-full flex flex-col sm:flex-row justify-start items-start gap-2 sm:gap-4">
                        <a href="/contact" class="menu-contact-button main-menu-fade-in lg:opacity-0 w-full p-2 lg:p-0 flex flex-row justify-start items-center bg-brand-terracotta-aa lg:bg-transparent rounded-full lg:rounded-none transition-all duration-700 xs:hover:bg-brand-cream-vi lg:hover:bg-transparent delay-[{{ manualIndex * animationDelay }}ms] group">
                            <span class="icon-wrapper w-11 h-11 bg-brand-terracotta-i flex justify-center items-center lg:hidden rounded-full transition-colors duration-700">
                                {{ svg(svgPath ~ '/core/phone-icon.svg') | attr({ class: 'w-6 transition-colors duration-700 text-white-primary group-hover:text-white-pure pointer-events-none' }) }}
                            </span>
                            <span class="text-wrapper inline ml-4 lg:ml-0">
                                <span class="hidden lg:inline font-body text-white lg:text-black-primary transition-colors duration-700 xs:group-hover:text-black-primary lg:group-hover:text-brand-terracotta-aa">
                                    Need to get in touch?
                                </span>
                                <span class="inline font-body text-white lg:text-black-primary transition-colors duration-700 xs:group-hover:text-black-primary lg:group-hover:text-brand-terracotta-aa">
                                    Contact Us
                                </span>
                            </span>
                        </a>
                        <button id="openAccessibilityMenuButton" class="menu-accessibility-button w-full p-2 lg:p-0 flex flex-row justify-start items-center bg-brand-cream-v lg:bg-transparent rounded-full lg:rounded-none transition-colors duration-700 xs:hover:bg-brand-crimson-viii group lg:hidden">
                            <span class="icon-wrapper w-11 h-11 bg-brand-cream-viii flex justify-center items-center lg:hidden rounded-full transition-colors duration-700 xs:group-hover:bg-brand-terracotta-i pointer-events-none">
                                {{ svg(svgPath ~ '/core/man-icon.svg') | attr({ class: 'w-6 transition-colors duration-700 text-brand-terracotta-i xs:group-hover:text-white pointer-events-none' }) }}
                            </span>
                            <span class="text-wrapper inline ml-4 lg:ml-0 pointer-events-none">
                                <span class="inline font-body text-black-primary">
                                    Accessibility Menu
                                </span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>