/* Level 3 menu items */
/* Override the behavior for the Bootstrap toggle */
/* Ensure the base element is set to inline-block so it can rotate */
.dropdown-toggle::after {
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}

.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.dropdown-toggle::after {
    color: var(--bg-dark) !important;
}
/* Position the submenu to the right of the parent item */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; /* Push to the right */
    margin-top: -1px;
    display: none; /* Hide by default */
}

/* Specific class to handle visibility via JS */
.show-submenu {
    display: block !important;
}

/* State when Level 3 is clicked/shown */
/* '.show-submenu' is the class our JS toggles on the UL, so we target the toggle sibling. */
.dropdown-submenu:has(> .show-submenu) > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Desktop: */
@media (min-width: 650px) {
    /*  Fly-out to the right */
    .dropdown-submenu {
        position: relative;
    }

    /* Position for Desktop */
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: -0.5px;
        margin-top: -1px;
    }

    /* Update the caret for the side-menu parent */
    .dropdown-submenu > .dropdown-toggle::after {
        border-top: 0.3em solid transparent !important;
        border-left: 0.3em solid !important; /* Pointing Right */
        border-bottom: 0.3em solid transparent !important;
        border-right: 0 !important;
        vertical-align: middle;
    }
}

/* Mobile: */
@media (max-width: 650px) {
    /* Position for Mobile, Indent underneath */
    .dropdown-submenu .dropdown-menu {
        position: static;
        margin-left: 1rem; /* Indent Level 3 items */
        margin-right: 1rem;
        border: none !important;
    }
}
/* End level 3 menu items */