/* =========================================================
   2. Navigation (Desktop + Mobile)
========================================================= */
.menu-row {
    position: sticky;
    top: 0;
    background: var(--menubar-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-default);
    z-index: var(--z-sticky);
    padding: var(--space-sm) var(--space-md);
}

    .menu-row img {
        height: 45px;
        transition: height var(--motion-duration-medium) var(--motion-ease-standard);
    }

    .menu-row.shrink {
        padding: 0.4rem 0;
    }

        .menu-row.shrink img {
            height: 30px;
        }

/* Main navigation links */
.main-nav .nav-link {
    color: var(--text-dark);
    font-weight: var(--font-weight-medium);
    padding: 0.75rem 1rem;
    transition: color var(--motion-duration-fast) var(--motion-ease-standard), background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

    .main-nav .nav-link:hover,
    .main-nav .nav-link.active {
        color: var(--color-primary);
        background: var(--interaction-hover);
    }

/* =========================================================
   Dropdown Menu Styles
========================================================= */
.dropdown,
.dropdown-submenu,
.dropdown-submenu-deep {
    position: relative;
}

.dropdown-menu {
    border-radius: var(--radius-md);
    border: var(--border-width-thin) var(--border-style-default) var(--border-color-muted);
    background: var(--surface-1);
    min-width: 12rem;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: var(--transition-default);
}

    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-item {
    display: block;
    color: var(--text-color-secondary);
    padding: 0.5rem 1rem;
    position: relative;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
}

    .dropdown-item:hover {
        background: var(--interaction-hover);
        color: var(--color-primary);
    }

/* ---------- Submenus ---------- */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* open right of parent */
}

.dropdown-submenu-deep > .dropdown-menu {
    top: 0;
    left: 100%;
}

.dropdown-submenu-deep-left > .dropdown-menu {
    left: auto;
    right: 100%;
}

/* ---------- Submenu arrows ---------- */
.dropdown-submenu > .dropdown-item::after,
.dropdown-submenu-deep > .dropdown-item::after {
    content: "▶";
    float: right;
    margin-left: var(--space-xs);
    font-size: var(--font-size-xs);
    display: inline-block;
}

.dropdown-submenu .dropdown-menu,
.dropdown-submenu-deep .dropdown-menu {
    transition: var(--transition-default);
}

/* =========================================================
   Desktop Menu Item Separators
    @media (min-width: var(--breakpoint-lg)) {
========================================================= */

@media (min-width: 992px) {
        #topMenu .navbar-nav > .nav-item,
        #topMenu.navbar-nav > .nav-item,
        .main-nav .navbar-nav > .nav-item,
        .main-nav.navbar-nav > .nav-item {
            display: inline-flex;
            align-items: center;
        }

            #topMenu .navbar-nav > .nav-item:not(:last-child)::after,
            #topMenu.navbar-nav > .nav-item:not(:last-child)::after,
            .main-nav .navbar-nav > .nav-item:not(:last-child)::after,
            .main-nav.navbar-nav > .nav-item:not(:last-child)::after {
                content: var(--menu-separator);
                display: inline-block;
                margin: 0 var(--space-sm);
                color: var(--menu-separator-color);
                opacity: var(--menu-separator-opacity);
                font-weight: var(--font-weight-light);
                line-height: 1;
            }

        .navbar-nav .dropdown-menu .nav-item::after,
        .navbar-nav .dropdown-menu .dropdown-item::after {
            content: none !important;
        }
    }

/* =========================================================
   Footer Submenu (Quick Links)
========================================================= */
.footer-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 250px;
    width: 100%;
}

    .footer-submenu .nav-item {
        margin-bottom: var(--space-xs);
    }

    .footer-submenu .nav-link {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-sm);
        color: var(--text-color-muted);
        text-decoration: none;
        padding: 0.25rem 0;
        transition: color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
    }

        .footer-submenu .nav-link i {
            font-size: 0.85rem;
            color: var(--text-color-muted);
            transition: color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
        }

        .footer-submenu .nav-link:hover {
            color: var(--text-link-hover);
            transform: translateX(3px);
        }

            .footer-submenu .nav-link:hover i {
                color: var(--text-link-hover);
                transform: translateX(2px);
            }


/* =========================================================
   Mobile Offcanvas (Clean + Token-based)
========================================================= */
/* Ensure offcanvas overlays sticky menu */
.offcanvas {
    background: var(--color-mobilemenu-gradient);
    color: var(--text-light);
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--overlay-blur-effect);
    z-index: var(--z-modal); /* higher than sticky navbar */
    position: fixed; /* make sure it overlays the full viewport */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; /* ensures it covers everything */
}

    /* Close Button */
    .offcanvas .btn-close {
        filter: invert(1);
        transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
    }

        .offcanvas .btn-close:hover {
            transform: rotate(90deg);
        }

/* =========================================================
   Mobile Menu
========================================================= */
.mobile-menu {
    list-style: none;
    padding: var(--space-sm) 0;
    margin: 0;
    font-size: var(--font-size-md);
}

    /* Mobile Menu Items */
    .mobile-menu li {
        margin-bottom: var(--space-xs);
    }

        .mobile-menu li a {
            display: flex;
            align-items: center; /* keep icon + text on same line */
            gap: var(--space-sm); /* spacing between icon and text */
            padding: 0.75rem 1rem;
            border-radius: var(--radius-md);
            color: var(--text-light);
            font-weight: var(--font-weight-medium);
            text-decoration: none;
            transition: var(--transition-default);
        }

            /* Hover + Active states using your tokens */
            .mobile-menu li a:hover {
                background: var(--interaction-hover);
                color: var(--color-white);
            }

            .mobile-menu li a.active {
                background: var(--interaction-active);
                color: var(--color-primary-contrast);
                font-weight: var(--font-weight-semibold);
            }

        /* Submenus (indented with subtle border for hierarchy) */
        .mobile-menu ul,
        .mobile-menu li ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

 /* =========================================================
   Main Menu Items with Submenus (Fix readability)
========================================================= */
        .mobile-menu li > a.dropdown-toggle {
            color: var(--text-light); /* keep them readable */
            font-weight: var(--font-weight-medium);
        }

            .mobile-menu li > a.dropdown-toggle:hover {
                background: var(--interaction-hover);
                color: var(--color-white);
            }

            .mobile-menu li > a.dropdown-toggle[aria-expanded="true"] {
                background: var(--interaction-active);
                color: var(--color-primary-contrast); /* stronger contrast */
                font-weight: var(--font-weight-semibold);
                box-shadow: inset 0 0 0 1px var(--color-primary); /* subtle outline for visibility */
            }



.mobile-submenu {
    margin-left: var(--space-sm);
    border-left: 1px solid var(--color-grey-600);
    padding-left: var(--space-xs);
}

.mobile-subsubmenu {
    margin-left: var(--space-md);
    border-left: 1px solid var(--color-grey-700);
    padding-left: var(--space-xs);
}

.mobile-subsubmenu-deep {
    margin-left: var(--space-lg);
    border-left: 1px solid var(--color-grey-800);
    padding-left: var(--space-xs);
}

/* Dropdown arrow (kept inline with text) */
.mobile-menu .dropdown-toggle::after {
    content: "▸";
    margin-left: auto; /* arrow stays at the end but not split apart */
    font-size: var(--font-size-sm);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

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

/* =========================================================
   Mobile Login Button
========================================================= */
#topMenuMobile .btn-primary {
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    width: 100%;
    padding: var(--btn-padding-md);
    margin-top: var(--space-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-default);
}

    #topMenuMobile .btn-primary:hover {
        background: var(--color-primary-hover);
        box-shadow: var(--shadow-md);
    }

    #topMenuMobile .btn-primary:active {
        background: var(--color-primary-active);
    }

/* =========================================================
   Animations
========================================================= */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}