:root {
    --announcement-banner-height: 40px;
    --announcement-banner-bg-default: #FFFFFF;
    --announcement-banner-text-default: #34322E;
}

@media (max-width: 991px) {
    :root {
        --announcement-banner-height: 36px;
    }
}

/* Banner container */
.announcement-banner {
    position: relative;
    width: 100%;
    height: var(--announcement-banner-height);
    overflow: hidden;
}

/* Individual announcement items - each has its own colors */
.announcement-banner__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--page-padding, 16px);
    background-color: var(--banner-bg, var(--announcement-banner-bg-default));
    color: var(--banner-text, var(--announcement-banner-text-default));
    font: var(--font-body-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    text-align: center;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s ease-in-out, visibility 0s linear 0.5s;
}

/* Keep off-screen reset instant to avoid reverse-direction flicker */
.announcement-banner__item:not(.active):not(.slide-out-left) {
    transition: none;
}

.announcement-banner__item.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s ease-in-out, visibility 0s linear 0s;
}

.announcement-banner__item.slide-out-left {
    transform: translateX(-100%);
    visibility: visible;
    transition: transform 0.5s ease-in-out, visibility 0s linear 0.5s;
}

.announcement-banner__item:hover {
    text-decoration: underline;
    color: var(--banner-text, var(--announcement-banner-text-default));
}

.announcement-banner__item:focus {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Desktop/Mobile link variants */
.announcement-banner__item--mobile {
    display: none;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .announcement-banner__item {
        font-size: 14px;
    }

    .announcement-banner__item--desktop {
        display: none;
    }

    .announcement-banner__item--mobile {
        display: flex;
    }
}