/*
 * Announcement Bar
 * Part: template-parts/announcement-bar.php
 * Auto-enqueued by functions.php after css/theme.css.
 *
 * Secondary-green strip above the site header: text on the left, compact
 * buttons beside it, a dismiss control at the far right. Stacks on small
 * screens. The dismiss button only appears once js/announcement-bar.js has
 * attached (.has-dismiss-js), since it can't work without it.
 */

.announcement-bar {
    position: relative;
    z-index: 3;
    padding-block: var(--space-xs);
    color: var(--color-contrast);
    background-color: var(--color-secondary);
}

.announcement-bar__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs) var(--space-md);
    /* Keep the centred content clear of the dismiss button on both sides. */
    padding-inline: calc(var(--space-md) + 2rem);
}

.announcement-bar__text {
    margin: 0;
    font-size: var(--text-0);
    font-weight: var(--font-regular);
}

.announcement-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

/* Compact buttons: the bar is a strip, not a hero. */
.announcement-bar__button {
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text--1);
}

.announcement-bar__dismiss {
    display: none;
    position: absolute;
    top: 50%;
    right: var(--space-md);
    width: 2rem;
    height: 2rem;
    padding: 0;
    translate: 0 -50%;
    font-size: var(--text-1);
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.announcement-bar.has-dismiss-js .announcement-bar__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.announcement-bar__dismiss:hover,
.announcement-bar__dismiss:focus-visible {
    background-color: color-mix(in srgb, var(--color-contrast) 18%, transparent);
}

@media screen and (max-width: 768px) {

    .announcement-bar__layout {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding-inline: var(--space-md) calc(var(--space-md) + 2.5rem);
    }

    .announcement-bar__dismiss {
        top: var(--space-xs);
        translate: none;
    }

}