/* ==========================================================================
   announcement-bar — Top promotional banner
   ========================================================================== */

.announcement-bar {
    background-color: var(--brand-primary);
    color: var(--brand-text-light);
    font-family: var(--brand-font-heading);
    font-size: 0.75rem;
    font-weight: var(--brand-font-weight-medium);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    padding: var(--brand-space-2) 0;
    border-bottom: 1px solid var(--brand-border-dark);
}

.announcement-bar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--brand-space-4);
    flex-wrap: wrap;
}

.announcement-bar__message {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-space-1);
    white-space: nowrap;
}

.announcement-bar__separator {
    color: var(--brand-text-light-muted);
}

.announcement-bar__highlight {
    color: var(--brand-accent);
}

.announcement-bar__close {
    background: none;
    border: none;
    color: var(--brand-text-light-muted);
    padding: var(--brand-space-1);
    cursor: pointer;
    transition: color var(--brand-transition-fast);
    position: absolute;
    right: var(--brand-space-3);
}

a.announcement-bar__link {
    color: var(--brand-text-light);
    text-decoration: none;
    transition: color var(--brand-transition-fast);
}

a.announcement-bar__link:hover {
    color: var(--brand-accent);
}

.announcement-bar__close:hover {
    color: var(--brand-text-light);
}

@media (max-width: 575.98px) {
    .announcement-bar__inner {
        gap: var(--brand-space-2);
        font-size: 0.65rem;
    }

    .announcement-bar__separator {
        display: none;
    }
}