.announcement {
    display: block;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--spacing-sm) 0;
    transition: filter 0.2s ease;
}

/* Override global a:hover (which colors links vegas gold) — that would blend
   the text into the gold background and make it appear to "disappear". */
.announcement:hover,
.announcement:focus-visible {
    color: var(--color-primary);
    outline: none;
}

/* The "Registration" word gets a small horizontal padding always so that on
   hover the inverted black chip has breathing room, with no layout shift. */
.announcement__highlight {
    padding: 0 0.25em;
    border-radius: 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.announcement:hover .announcement__highlight,
.announcement:focus-visible .announcement__highlight {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.announcement__inner {
    text-align: center;
}

.announcement__title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin: 0 0 0.25rem;
}

.announcement__subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    margin: 0;
}

@media (max-width: 768px) {
    .announcement__title {
        font-size: 1.15rem;
    }

    .announcement__subtitle {
        font-size: 0.85rem;
    }
}