/**
 * VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles (Desktop Only)
 *
 * This file contains only desktop navigation styles.
 * For mobile navigation, choose one of:
 * - nav-mobile-accordion.css (traditional dropdown/accordion style)
 * - nav-mobile-sliding.css (sliding viewport style)
 *
 * Please review documentation upon first use, and, as-needed:
 * TODO: Add documenation link here
 */

/* desktop */
@media screen and (min-width: 62.5rem) {
    .nav-main .menu-vdi {
        @apply flex items-center justify-end p-0 m-0 h-full;

        >li {
            @apply h-full;

            >a,
            >.menu-vdi__toggle {
                /* text styles */
                @apply font-semibold text-20px text-white no-underline leading-snug whitespace-nowrap;

                /* spacing & display */
                @apply flex items-center px-4 -my-4 no-underline;
                height: calc(100% + 2rem);

                /* interaction */
                &:hover {
                    @apply bg-cwc-blue-02 text-light;
                    box-shadow: inset 0 -4px 0 #F26B53;
                }
            }

            &.menu-vdi__item--contact {
                @apply h-auto;

                >a {
                    @apply ml-2 mr-0 my-0;
                    height: auto;
                    background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
                    border-radius: 1.25rem 0.25rem;
                    padding: .5rem 2rem;

                    &:hover {
                        box-shadow: none;
                        background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 62.5rem) {
    .menu-vdi {
        .menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }

        .menu-vdi__item--parent { @apply relative; }

        .menu-vdi__submenu {
            top: calc(100% + 1rem);

            @apply bg-cwc-blue-02 shadow-lg left-4 w-64 flex-col;

            >li {
                @apply w-full border-b border-[#D24D32];
                &:last-child { @apply border-b-0; }
            }

            .menu-vdi__item {
                /* text styles */
                @apply font-bold text-18px text-white no-underline leading-snug;

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

                /* interaction */
                @apply focus-visible:bg-cwc-blue-01 hover:bg-cwc-blue-01;

                a { @apply block w-full; }
            }

            a.menu-vdi__item,
            .menu-vdi__item a { @apply p-4 text-white; }
        }
    }
}