/* ==================================================
   EPS Chamara — Header Component (Responsive)
   ================================================== */

:root {
    --primary: #2563eb;
    --border: #e2e8f0;
}

.main-header { 
    background: #fff; 
    border-bottom: 1px solid var(--border); 
    padding: 16px 0; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

.header-container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 24px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.logo span { color: var(--primary); }

.header-right { display: flex; align-items: center; gap: 16px; }

.lang-selector { 
    padding: 8px 12px; 
    border-radius: 8px; 
    border: 1px solid var(--border); 
    background: #f8fafc; 
    cursor: pointer; 
}

.header-badge { 
    font-size: 0.75rem; font-weight: 700; background: #eff6ff; 
    color: var(--primary); padding: 6px 12px; border-radius: 20px; 
}

/* --- 1. Tablet Version (<= 1024px) --- */
@media (max-width: 1024px) {
    .header-container {
        padding: 0 20px; /* Slightly tighter side padding */
    }
}

/* --- 2. Mobile Version (<= 768px) --- */
@media (max-width: 768px) {
    .main-header {
        padding: 12px 0;
    }
    
    .header-container {
        flex-direction: column; /* Stack logo and controls */
        gap: 12px;
        padding: 0 16px;
    }

    .header-right {
        width: 100%;             /* Force controls to full width */
        justify-content: space-between; /* Push items to edges */
        gap: 8px;
    }
    
    .header-badge {
        font-size: 0.7rem;      /* Slightly smaller to fit mobile */
        padding: 4px 10px;
    }
}