/* Header styles for mobile/desktop switching */

/* By default, show desktop header and hide mobile header */
.desktop-header {
    display: flex;
}

.mobile-header {
    display: none;
}

/* On mobile screens, hide desktop header and show mobile header */
@media (max-width: 768px) {
    .desktop-header {
        display: none;
    }
    
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.1); /* Changed to light transparent */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    /* Mobile menu icon styles */
    .mobile-menu-icon {
        display: block;
        background: none;
        border: none;
        color: #FFFFFF;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        z-index: 1001;
    }
    
    /* Mobile menu styles */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 999;
        padding: 20px;
        flex-direction: column;
    }
    
    .mobile-nav-link {
        color: #FFFFFF;
        text-decoration: none;
        padding: 15px 0;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
        width: 100%;
    }
    
    .mobile-nav-link:last-child {
        border-bottom: none;
    }
    
    /* Mobile menu open state */
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    /* Adjust main content to account for fixed header */
    main {
        padding-top: 80px;
    }
}