﻿#dept-iust-main-navigation {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    position: relative;
    z-index: 999;
}

.dept-iust-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Horizontal Menu List */
.dept-iust-menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center; /* change to flex-start if left-aligned needed */
}

    .dept-iust-menu > li {
        position: relative;
    }

        .dept-iust-menu > li > a {
            display: block;
            padding: 22px 24px;
            color: #333333;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

            /* Hover / Active - Blue */
            .dept-iust-menu > li > a:hover,
            .dept-iust-menu > li.dept-iust-current-menu-item > a,
            .dept-iust-menu > li:hover > a {
                color: #0073e6;
                background: rgba(0, 115, 230, 0.08);
            }

        /* Dropdown Arrow - Yellow accent */
        .dept-iust-menu > li.dept-iust-has-children > a::after {
            content: "\f107"; /* Font Awesome down arrow */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-left: 8px;
            font-size: 13px;
            color: #ffc107;
            transition: all 0.3s ease;
        }

        .dept-iust-menu > li:hover > a::after {
            transform: rotate(180deg);
            color: #0073e6; /* optional: shift to blue on hover */
        }

/* Vertical Dropdown */
.dept-iust-sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    list-style: none;
    padding: 12px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.28s ease;
    z-index: 1000;
}

.dept-iust-menu > li:hover > .dept-iust-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dept-iust-sub-menu li a {
    display: block;
    padding: 14px 28px;
    color: #444444;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    /* Submenu hover - Blue text + subtle yellow tint bg */
    .dept-iust-sub-menu li a:hover {
        color: #0073e6;
        background: rgba(255, 193, 7, 0.08);
        padding-left: 38px;
    }

        /* Yellow left bar on submenu hover/active */
        .dept-iust-sub-menu li.dept-iust-current-menu-item > a::before,
        .dept-iust-sub-menu li a:hover::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #ffc107;
        }

/* Mobile fallback */
@media (max-width: 991px) {
    .dept-iust-menu {
        flex-direction: column;
    }

    .dept-iust-sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        display: none; /* in real use → toggle with JS on click */
    }

    .dept-iust-menu > li:hover > .dept-iust-sub-menu {
        display: block;
    }
}
