/**
 * Mobile Menu Styles
 *
 * @package Biogrades_Theme
 * @version 1.0.0
 * 
 * BIOGRADES INNOVATIONS (OPS) PRIVATE LIMITED
 */

/* Mobile Navigation */
.mobile-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-color-primary);
    border-top: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.mobile-navigation.is-active {
    display: block;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.mobile-navigation ul {
    margin: 0;
    padding: var(--spacing-md);
    list-style: none;
}

.mobile-navigation li {
    margin: 0;
    border-bottom: 1px solid var(--border-color-light);
}

.mobile-navigation li:last-child {
    border-bottom: none;
}

.mobile-navigation a {
    display: block;
    padding: var(--spacing-md);
    color: var(--text-color-primary);
    font-size: var(--font-size-base);
    text-decoration: none;
}

.mobile-navigation a:hover,
.mobile-navigation .current-menu-item a {
    color: var(--accent-color-primary);
    background-color: var(--bg-color-secondary);
}

/* Mobile Submenu */
.mobile-navigation .sub-menu {
    margin: 0;
    padding: 0 0 0 var(--spacing-lg);
    background-color: var(--bg-color-secondary);
}

.mobile-navigation .sub-menu a {
    font-size: var(--font-size-sm);
}

/* Menu Toggle Animation */
.mobile-menu-toggle.is-active span {
    background-color: transparent;
}

.mobile-menu-toggle.is-active span::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Body scroll lock when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Show mobile menu button and hide desktop nav on mobile */
@media (max-width: 991px) {
    .primary-navigation {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .mobile-navigation {
        display: none;
    }
    
    .mobile-navigation.is-active {
        display: block;
    }
}