/**
 * VDI Navs & Menu - Functional Styles
 *
 * Please review documentation upon first use, and, as-needed:
 * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
 */

/* all sizes */
.menu-vdi {
    @apply hidden;

    >li {
        @apply list-none;
        >a {
            @apply focus-visible:underline hover:underline;
        }

        a[aria-current="true"] {
            @apply underline;
        }

        .menu-vdi__toggle {
            &[aria-expanded="true"] {
                svg {
                    @apply rotate-180;
                }

                +.menu-vdi__submenu {
                    @apply flex;
                }
            }
        }
    }

    .menu-vdi__submenu {
        @apply hidden container z-10;

        /* should also put current page here */
        .menu-vdi__item--grandchild a {
            @apply no-underline focus-visible:underline hover:underline;
        }
    }
}

/* Mobile */
@media screen and (max-width: 62.5rem) {
    #app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }

    .nav-main__toggle {
        .nav-toggle-hamburger { display: inline-block !important; }

        .nav-toggle-x { display: none !important; }

        &[aria-expanded="true"] {
            .nav-toggle-hamburger { display: none !important; }

            .nav-toggle-x { display: inline-block !important; }
        }
    }
    .nav-main {
        .nav-main__toggle[aria-expanded="true"] {
            +ul {
                @apply absolute flex;
            }
        }

        .menu-vdi {
            @apply absolute right-0 z-10;

            .menu-vdi__toggle {
                @apply flex items-center gap-2;
            }
        }
    }

    .nav-aux {
        .menu-vdi__submenu {
            @apply absolute list-none;
        }
    }
}

/* Desktop */
@media screen and (min-width: 62.5rem) {
    .nav-main__toggle {
        @apply hidden;
    }

    .menu-vdi {
        @apply flex list-none;

        .menu-vdi__toggle {
            @apply flex items-center gap-2;
        }

        .menu-vdi__submenu {
            @apply absolute list-none;
        }
    }
}