/* Site-wide webinar announcement bar */

:root {
    --announcement-bar-height: 2.75rem;
}

.announcement-bar {
    position: relative;
    z-index: 101;
    width: 100%;
    min-height: var(--announcement-bar-height);
    padding: 0.55rem var(--container-padding, 1.5rem);
    background-color: #218A34;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    text-align: center;
}

.announcement-bar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.announcement-bar__link:hover,
.announcement-bar__link:focus-visible {
    opacity: 0.92;
    outline: none;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.announcement-bar__label {
    font-weight: 700;
}

.announcement-bar__cta {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    html:has(body.has-announcement-bar) {
        --site-header-offset: calc(
            var(--announcement-bar-height) +
            var(--spacing-md, 1.5rem) * 2 +
            2.75rem +
            env(safe-area-inset-top, 0px)
        );
        scroll-padding-top: var(--site-header-offset);
    }

    body.has-announcement-bar {
        padding-top: var(--site-header-offset);
    }

    body.has-announcement-bar .announcement-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    body.has-announcement-bar .navbar {
        top: var(--announcement-bar-height);
    }
}