/* header.css */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #eb0037;
    --brand-hover: #cc002e;
    --at-dark: #121212;
    --text-main: #242d3d;
    --text-muted: #6b7280;
    --white: #ffffff;
    --border: #e8e7e6;
    --blue-accent: #0046e5;
}

/* This forces EVERY element to use Urbanist */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Urbanist', sans-serif; 
}

.main-header { 
    background: var(--white); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    border-bottom: 1px solid var(--border); 
    width: 100%; 
}

/* Desktop Header */
.header-desktop { 
    display: none; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px; 
    max-width: 1240px; 
    margin: 0 auto; 
}

.logo { 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--at-dark); 
    letter-spacing: -0.5px; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    text-decoration: none;
}
.logo span { color: var(--brand); }

.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { 
    font-size: 16px; 
    font-weight: 700; 
    color: var(--text-main); 
    text-decoration: none;
}

.header-actions { display: flex; gap: 24px; align-items: center; }
.action-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--text-main); 
    text-decoration: none;
}
.action-item svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Mobile Header */
.header-mobile { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 12px 16px; 
}

@media (min-width: 769px) {
    .header-desktop { display: flex; }
    .header-mobile { display: none; }
}