/* Responsive rules moved from ../menu.css. Keep this file loaded immediately after menu.css. */

@media (min-width: 992px) {
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        max-height: none;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    /* ensure closed grandchild menus take zero space */
    .dropdown-submenu > .dropdown-menu {
        max-height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.25s ease;
    }

        /* when opened, make them visible and animated */
        .dropdown-submenu > .dropdown-menu.show {
            max-height: 500px;
            padding-top: 6px;
            padding-bottom: 6px;
            opacity: 1;
            visibility: visible;
            overflow: visible;
            pointer-events: auto;
        }

        /* remove box shadow and border while closed */
        .dropdown-submenu > .dropdown-menu:not(.show) {
            box-shadow: none !important;
            border-left: 0 !important;
        }

}

@media (min-width: 992px) {
    .dropdown-submenu > .dropdown-toggle::after {
        content: "";
        border-top: 0.3em solid transparent;
        border-bottom: 0.3em solid transparent;
        border-left: 0.3em solid currentColor;
        border-right: none;
        margin-left: 0.4em;
        transform: none;
    }

    /* Slight movement when expanded */
    .dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after {
        transform: translateX(2px);
    }
}

@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-toggle::after {
        border-right: 0.3em solid transparent;
        border-left: 0.3em solid transparent;
        border-top: 0.3em solid currentColor;
        border-bottom: none;
        margin-left: 0.35em;
        transform: none;
    }

    .dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}