/* Base small menu style */
.menu-ul-custom {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 10px 0 #dee2e6;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    visibility: hidden;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, transform 0.4s ease, padding 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
    display: block !important;
}

    .menu-ul-custom.show {
        max-height: 600px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        padding-top: 6px;
        padding-bottom: 6px;
        overflow: visible;
        
    }

    .menu-ul-custom > li {
        margin: 0px;
        border-bottom: 1px solid #dee2e6;
    }

        .menu-ul-custom > li:last-child {
            border-bottom: none;
        }

.menu-items {
    min-width: 55px;
}

    .menu-items > * {
        color: #161616 !important;
    }

/* Khmer typography */
.font-khmer .nav-link,
.font-khmer .dropdown-item {
    line-height: 1.5;
}

.menu-container {
    box-shadow: 0 3px 6px -1px #dee2e6;
    padding-bottom: 0;
    z-index: 10;
}

/* Dropdown links */
.menu-ul-custom > li > a.dropdown-item {
    border-left: 2px solid transparent;
    padding-left: calc(.7rem - 2px);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    color: #161616;
    text-decoration: none;

}

    .menu-ul-custom > li > a.dropdown-item:hover,
    .menu-ul-custom > li > a.dropdown-item:focus {
        background-color: #e6f0ff;
        border-left-color: #0055a4;
        color: #0055a4;
    }

/* Top-level links */
.top-level-link {
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    position: relative;
}

    .top-level-link:hover {
        color: #000091 !important;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 8px;
    }

/* Active states */
.nav-item.active > .top-level-link,
.dropdown-item.active {
    color: #000091 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.dropdown-menu .active {
    background-color: #f0f0ff !important;
}

/* Dropdown arrow animation */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.25em;
    vertical-align: middle;
    content: "";
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
    border-top: 0.3em solid currentColor;
    transition: transform 0.3s ease;
}

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

/* --- Support for Grandchild Menu --- */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0;
        border-radius: 0.5rem;
        box-shadow: 3px 3px 10px #dee2e6;
        transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: translateY(-5px);
        visibility: hidden;
        max-height: 0;
    }

        /* When grandchild is shown */
        .dropdown-submenu > .dropdown-menu.show {
            max-height: 500px !important;
            opacity: 1;
            transform: translateY(0);
            visibility: visible !important;
            overflow: visible !important;
        }
/* ✅ Ensure all menus fully collapse when not shown */
.dropdown-menu:not(.show) {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transform: translateY(-5px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

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

/* Submenu link styling */
.sub-menu .dropdown-item {
    padding-left: 2rem;
}

/* Responsive adjustments */
@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;
        }

}
.dropdown-toggle-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.5rem;
}

.dropdown-item-link {
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.dropdown-toggle-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

    .dropdown-toggle-arrow[aria-expanded="true"] .arrow-icon {
        transform: rotate(90deg);
    }
/* --------------------------------------
   🔽 Default dropdown arrow (all toggles)
--------------------------------------- */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.35em;
    vertical-align: middle;
    content: "";
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
    border-top: 0.3em solid currentColor;
    transition: transform 0.3s ease;
}

/* Rotate down arrow when open */
.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* --------------------------------------
   ▶️ Forward arrow for child → grandchild
   (only applies on desktop)
--------------------------------------- */
@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);
    }
}

/* --------------------------------------
   ▼ On mobile, use down arrow instead
--------------------------------------- */
@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);
    }
}