/* Header Styles - CLEAN VERSION */
.header {
    background: var(--color-background-dark);
    color: var(--color-white);
    padding: var(--spacing-md) 0;
    position: relative; /* Header scrolls away normally - NOT sticky */
    z-index: 200; /* Higher than category bar */
    box-shadow: var(--shadow-md);
    width: 100%;
    /* Ensure it displays properly */
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Dark theme header adjustments */
[data-theme="dark"] .header {
    background: var(--header-bg-dark, var(--color-background-dark));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-white);
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-btn,
.menu-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 50%;
    transition: background-color var(--transition-base);
}

.search-btn:hover,
.menu-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Theme toggle button styles */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 50%;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(15deg);
}

.theme-toggle-btn:active {
    transform: rotate(15deg) scale(0.95);
}

/* Desktop theme toggle button */
.desktop-theme-toggle-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    transition: background-color var(--transition-base), transform var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(15deg);
}

.desktop-theme-toggle-btn:active {
    transform: rotate(15deg) scale(0.95);
}

/* Hide menu button on desktop - only show on mobile */
@media (min-width: 769px) {
    .menu-btn {
        display: none;
    }
    
    .theme-toggle-btn {
        display: none; /* Desktop has its own theme toggle */
    }
    
    .desktop-theme-toggle-btn {
        display: flex;
    }
}

/* Show mobile theme toggle, hide desktop toggle on mobile */
@media (max-width: 768px) {
    .theme-toggle-btn {
        display: block;
    }
    
    .desktop-theme-toggle-btn {
        display: none;
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        font-size: var(--font-size-xl);
    }
}

/* Mobile First - Phone Screens */
@media (max-width: 480px) {
    .header {
        padding: var(--spacing-md) 0;
    }
    
    .header-content {
        padding: 0 var(--spacing-md);
    }
    
    .logo {
        font-size: var(--font-size-lg);
    }
}