/* ===================================
   Header Component CSS
   =================================== */

.ios-header {
    background: var(--ios-glass);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border-bottom: 1px solid var(--ios-glass-border);
    padding: 16px 24px;
}

.ios-header h1 {
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Container */
.nav-container {
    background: var(--ios-glass);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border: 1px solid var(--ios-glass-border);
    border-radius: 16px;
    padding: 8px;
}

/* Navigation Buttons */
.nav-btn {
    background: transparent;
    color: var(--ios-text-secondary);
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: var(--ios-surface-hover);
    color: var(--ios-text-primary);
}

.nav-btn.active {
    background: var(--ios-accent);
    color: white;
    box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4);
}

/* Mobile Responsive Header */
@media (max-width: 768px) {
    .ios-header {
        padding: 12px 16px;
    }

    .ios-header h1 {
        font-size: 1.25rem;
    }

    .nav-container {
        flex-wrap: wrap;
        gap: 4px;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}