/* Navigation Variables */
:root {
    --nav-height: 80px;
    --nav-bg: #FFFFFF;
    --nav-text: #333333;
    --nav-active: #491998;
    --mobile-overlay-bg: rgba(26, 26, 26, 0.95);
    --mobile-text: #FFFFFF;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Base Navigation Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--nav-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
    box-shadow: var(--shadow-sm);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1002; /* Above mobile menu overlay */
}

.logo-image {
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* Desktop Menu */
.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: var(--nav-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--nav-active);
}

/* Hamburger Menu (Hidden on Desktop) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    z-index: 1002; /* Above mobile menu overlay */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.bar {
    display: block;
    width: 18px;
    height: 2px;
    background-color: var(--nav-text);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .navbar {
        padding: 0 20px;
    }

    .logo-image {
        max-width: 100px;
        height: auto;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: var(--mobile-overlay-bg);
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .mobile-menu-overlay.active {
        transform: translateX(0);
        pointer-events: all;
    }

    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
    }

    .mobile-menu-overlay.active .mobile-menu-content {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-menu-content a {
        color: var(--mobile-text);
        text-decoration: none;
        font-size: 24px;
        font-weight: 600;
        transition: opacity 0.2s ease;
    }

    .mobile-menu-content a:hover {
        opacity: 0.8;
    }

    /* Hamburger Animation */
    .mobile-menu-toggle.active .bar.top {
        transform: translateY(7px) rotate(45deg);
        background-color: var(--mobile-text);
    }

    .mobile-menu-toggle.active .bar.middle {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar.bottom {
        transform: translateY(-7px) rotate(-45deg);
        background-color: var(--mobile-text);
    }
    
    /* Ensure logo stays visible and clickable on top of overlay if desired, 
       but specs say "Close X icon (white, same position as hamburger)".
       Since toggle is fixed z-index 1002, it acts as the close button when active.
       We just need to make sure logo is also handled or hidden if needed, 
       but standard pattern is usually just the toggle changes.
       
       However, if the overlay is full screen, the white logo might not be visible against white bg if we don't change it.
       But the overlay is #1a1a1a. 
       The toggle bars turn white in active state.
    */
}

body.menu-open {
    overflow: hidden;
}