/* --- Mobile Menu Styles --- */

/* Hamburger Icon */
.mobile-menu-icon {
    display: none; /* Hidden by default, shown in media query */
    cursor: pointer;
    z-index: var(--z-modal); /* Ensure it's above other content */
}

.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: var(--color-primary-white);
    margin: 5px 0;
    transition: 0.4s;
}

/* Animate hamburger to an 'X' when active */
.mobile-menu-icon.active .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

.mobile-menu-icon.active .bar2 {
    opacity: 0;
}

.mobile-menu-icon.active .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}


/* --- Responsive Behavior --- */

/* Mobile styles (e.g., for screens smaller than 768px) */
@media (max-width: 767px) {
    .mobile-menu-icon {
        display: block; /* Show hamburger on mobile */
    }

    .navbar-nav {
        display: none; /* Hide nav links by default */
        position: absolute;
        top: 70px; /* Position below the header, adjust as needed */
        left: 0;
        right: 0;
        width: 100%;
        background-color: rgba(26, 26, 26, 0.98); /* Match navbar */
        flex-direction: column;
        text-align: center;
        padding: var(--space-4) 0;
        box-shadow: var(--shadow-lg);
    }

    /* This class will be toggled by JavaScript */
    .navbar-nav.active {
        display: flex;
    }
}