/**
 * VDI Navs & Menu - Mobile Accordion Navigation
 *
 * Traditional mobile accordion/dropdown style navigation
 * Include this file for accordion-style mobile navigation
 */

/* Mobile accordion navigation */
@media screen and (max-width: 62.5rem) {
    .nav-main {
        .nav-main__toggle {
            /* display */
            @apply text-white p-3;
        }

        .menu-vdi {
            @apply relative right-0 py-8 flex flex-col;
            @apply absolute hidden; /* Hidden by default */

            /* Allow the menu itself to scroll when content overflows the viewport */
            overflow-y: auto;
            overscroll-behavior: contain;

            background: var(--color-cwc-blue-02);
            color: var(--color-white);
            /* Cap the menu height to the visible viewport area so overflowing items scroll inside the menu instead of letting the menu grow taller than the screen. */
            height: calc(100vh - var(--hgtHeader));
            top: var(--hgtHeader);
            width: 95%;
            z-index: 100;

            &, ul.menu-vdi {
                list-style: none;
                padding-left: 0;
                margin: 0;
            }

            .menu-vdi__submenu { @apply py-2 px-7 flex-col; }

            .menu-vdi__item {
                list-style: none;

                a, button {
                    /* text */
                    @apply font-bold text-20px text-white hover:underline leading-snug;

                    /* spacing & display */
                    @apply block w-full p-4;

                    /* interaction */
                    @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
                }

                a { @apply block w-full; }

                button { @apply flex w-full justify-between; }
            }
        }

        /* Show menu when toggle button is expanded */
        .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) { @apply !flex; /* Use !important to override hidden */ }
    }

    /* Lock the page from scrolling while the menu is open so the touch-scroll
       gesture only scrolls the menu (or doesn't scroll at all if the menu
       fits). Also stop the layout from jumping when the scrollbar disappears. */
    html:has(.nav-main__toggle[aria-expanded="true"]) body,
    body:has(.nav-main__toggle[aria-expanded="true"]) {
        overflow: hidden;
        overscroll-behavior: contain;
        touch-action: none;
    }
}