{{# Mobile footer menu #}}
<div class="w-full pt-8 lg:hidden">
    <div x-data="{ selectedFooterAccordionItem: null }">
        <div
            x-data="{
            toggleFooterAccordionItem(accordionItem) {
                selectedFooterAccordionItem === accordionItem ? selectedFooterAccordionItem = null : selectedFooterAccordionItem = accordionItem
            }
        }"
        >
            {{ nav:main_nav }}
                {{ camel_title = { title | camelize | ucfirst } }}
                {{ if url && !children }}
                    <a
                        class="flex h-11.75 w-full items-center border-t border-brand-gray-light pr-6 pl-3.5 text-left text-[1.1875rem] font-medium active:bg-brand-orange-light"
                        role="menuitem"
                        tabindex="0"
                        href="{{ url }}"
                    >
                        {{ title }}
                    </a>
                {{ else }}
                    <div
                        x-data="{
                    isExpanded: false,
                    init() {
                        this.$watch('selectedFooterAccordionItem', (value) => {
                            this.isExpanded = (value === '{{ camel_title }}');
                        })
                    }}"
                        class="border-t border-brand-gray-light"
                    >
                        <button
                            id="footerAccordionItemControls{{ camel_title }}"
                            type="button"
                            class="flex h-11.75 w-full cursor-pointer items-center justify-between gap-4 pr-6 pl-3.5 text-left text-[1.1875rem] font-medium underline-offset-2"
                            aria-controls="footerAccordionItem{{ camel_title }}"
                            @click="selectedFooterAccordionItem === '{{ camel_title }}' ? selectedFooterAccordionItem = null : selectedFooterAccordionItem = '{{ camel_title }}'"
                            :class="isExpanded ? 'bg-brand-orange-light' : 'bg-white'"
                            :aria-expanded="isExpanded ? 'true' : 'false'"
                            tabindex="0"
                        >
                            {{ title }}
                            {{ svg src="images/icons/chevron.svg" class="fill-brand-orange w-3.5 h-[0.563rem]" }}
                        </button>
                        <div
                            x-cloak
                            x-show="isExpanded"
                            id="footerAccordionItem{{ camel_title }}"
                            role="region"
                            aria-labelledby="footerAccordionItemControls{{ camel_title }}"
                            x-collapse
                        >
                            <div
                                class="flex content-center items-center gap-2.5 self-stretch px-4 pt-4 pb-6 text-[1.1875rem] leading-[2.6rem] text-brand-gray-mid underline"
                            >
                                <ul>
                                    {{ if children }}
                                        {{ children }}
                                            <li><a href="{{ url }}" tabindex="0">{{ nav_title ?? title }}</a></li>
                                        {{ /children }}
                                    {{ /if }}
                                </ul>
                            </div>
                        </div>
                    </div>
                {{ /if }}
            {{ /nav:main_nav }}
        </div>
    </div>
</div>
{{# Desktop footer menu #}}
<div class="hidden justify-between gap-14 text-[1.1875rem] text-brand-gray-mid lg:flex">
    {{ nav:main_nav }}
        <ul class="flex flex-col gap-2">
            <li class="leading-[1.4] font-bold text-brand-black">
                {{ if url }}
                    <a class="hover:underline" href="{{ url }}" tabindex="0">{{ title }}</a>
                {{ else }}
                    <span>{{ title }}</span>
                {{ /if }}
            </li>
            {{ if children }}
                {{ offset = (hide_first_child_in_desktop_footer_nav ? 1 : 0) }}
                {{ children | offset(offset) }}
                    <li>
                        <a class="hover:underline" href="{{ url }}" tabindex="0">{{ nav_title ?? title }}</a>
                    </li>
                {{ /children }}
            {{ /if }}
        </ul>
    {{ /nav:main_nav }}
</div>