/* header.css — Header styles (white-bar variant)
   ═══════════════════════════════════════════════════════════════════════════
   CONTENTS:
   1. Header layout
   2. Logo + brand
   3. Navigation links
   4. Responsive (768px)
   ═══════════════════════════════════════════════════════════════════════════ */


/* =============================================================================
   1. HEADER LAYOUT
   ============================================================================= */

.header-a {
    background: var(--bone);
    border-bottom: 2px solid var(--charcoal);
    padding: var(--header-pad-y) var(--section-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =============================================================================
   2. LOGO + BRAND
   ============================================================================= */

.header-a .logo {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-a .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.header-a .brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-a .brand-name {
    font-weight: 700;
    font-size: var(--font-size-brand);
    letter-spacing: 1px;
}


/* =============================================================================
   3. NAVIGATION LINKS
   ============================================================================= */

.header-a nav {
    display: flex;
    gap: 40px;
}

.header-a nav a {
    text-decoration: none;
    color: var(--charcoal);
    font-size: var(--font-size-nav);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    transition: color 200ms ease;
}

.header-a nav a:hover,
.header-a nav a.active {
    color: var(--persimmon);
}


/* =============================================================================
   4. RESPONSIVE (768px)
   ============================================================================= */

@media (max-width: 768px) {
    .header-a {
        padding: 10px 16px;
    }

    .header-a .logo {
        width: 44px;
        height: 44px;
    }

    .header-a .brand {
        gap: 12px;
    }

    .header-a .brand-name {
        font-size: 14px;
    }
}