/* ================================================
   ANNOUNCEMENT BANNER
   ================================================
   A strip under the fixed header, laid out like the
   breadcrumbs bar: full-bleed background, content held
   in the site container.

   POSITIONING
   .site-header is position:fixed, 80px tall, z-index 10,
   and every template clears it itself - most with
   .main-content's padding-top:80px, but home.php, 404.php,
   the two single-post templates, single-profile_cpt.php and
   template-author.php use their own wrappers instead. The
   banner is fixed directly beneath the header at z-index 9,
   so it tucks BEHIND it when it slides away.

   The room for the banner is made by an empty sibling,
   .announcement-banner-spacer, printed straight after it.
   Two earlier attempts were wrong: padding .main-content
   covered the top of every template that does not use that
   wrapper (home.php, 404.php, the two single-post templates,
   single-profile_cpt.php, template-author.php - the Blog
   listing's H1 sat under the banner), and padding body
   dragged the header down with the content, because the
   header is fixed with no top of its own and so sits at its
   static position. The spacer comes after the header in the
   markup, so it moves nothing that is fixed, and it adds to
   each template's own header offset instead of replacing it,
   which is why no breakpoint needs a second rule.

   WHY NOTHING REFLOWS WHEN IT HIDES
   That padding never changes. The banner slides up behind
   the header and the space it occupied stays - but that
   space is at the very top of the document, and the script
   only starts hiding once you are scrolled past it, so the
   gap is always above the viewport. Animating the padding
   instead would move the page under the reader's scroll.

   Colours come in as custom properties set per instance on
   the element, so each language can run its own palette
   without a stylesheet per banner.
   ================================================ */

.announcement-banner {
    --ab-bg: #f0f0f0;
    --ab-text: #1e1e23;
    --ab-accent: #00e65f;
    --ab-height: 48px;

    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 9;

    background-color: var(--ab-bg);
    color: var(--ab-text);

    /* Slides up behind the header. Nothing else animates. */
    transform: translateY(0);
    transition: transform 0.28s ease;
    will-change: transform;
}

.announcement-banner.is-hidden {
    transform: translateY(-100%);
}

/* --ab-height is measured by the script and written onto body, so this
   always matches the real height even when the message wraps to two
   lines. The 48px fallback is the one-line height, used before the
   script runs and if it never does. */
.announcement-banner-spacer {
    height: var(--ab-height, 48px);
}

.announcement-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ---- icon ---- */

.announcement-banner__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--ab-accent);
}

.announcement-banner__icon--custom {
    object-fit: contain;
}

/* ---- message ----
   The Figma sets 23px, which is display size for a strip this thin and
   larger than the body scale. 1rem with a step down at the narrow end keeps
   it readable and lets a long announcement wrap to two lines rather than
   force a scrollbar, which is what Onclusive asked for. */

.announcement-banner__message {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
}

.announcement-banner__message p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.announcement-banner__message p + p {
    margin-top: 2px;
}

.announcement-banner__message strong,
.announcement-banner__message b {
    font-weight: 700;
}

.announcement-banner__message a {
    color: inherit;
    text-decoration: underline;
}

/* ---- Learn more ----
   Bold label, 2px accent underline, chevron. The underline and the chevron
   both take the accent on hover; the label shifts to it too. Subtle, and it
   reuses the house green rather than inventing a hover treatment. */

.announcement-banner__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 1px;

    padding: 1px 0;
    border-bottom: 2px solid var(--ab-accent);

    color: var(--ab-text);
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;

    transition: color 0.2s ease, border-color 0.2s ease;
}

.announcement-banner__link:hover,
.announcement-banner__link:focus-visible {
    color: var(--ab-accent);
    border-bottom-color: currentColor;
    text-decoration: none;
}

.announcement-banner__chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.announcement-banner__link:hover .announcement-banner__chevron,
.announcement-banner__link:focus-visible .announcement-banner__chevron {
    transform: translateX(2px);
}

.announcement-banner__link:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 3px;
}

/* ---- narrow ----
   Onclusive asked for it to read as a small announcement bar on a phone
   rather than a shrunken desktop strip: tighter type, the icon kept beside
   the first line, the link dropping under the message. */

@media (max-width: 1024px) {
    .announcement-banner__message {
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {
    .announcement-banner__inner {
        padding: 8px 16px;
        gap: 6px;
    }

    .announcement-banner__message {
        font-size: 0.8125rem;
        line-height: 1.3;
        flex: 1 1 auto;
    }

    .announcement-banner__icon {
        width: 18px;
        height: 18px;
    }

    .announcement-banner__link {
        flex: 1 0 100%;
        justify-content: center;
        font-size: 0.8125rem;
        border-bottom: 0;
    }

    .announcement-banner__link-text {
        border-bottom: 2px solid var(--ab-accent);
        padding-bottom: 1px;
    }

    .announcement-banner__chevron {
        width: 16px;
        height: 16px;
    }
}

/* Someone who has asked for less motion gets the banner without the slide. */
@media (prefers-reduced-motion: reduce) {
    .announcement-banner,
    .announcement-banner__link,
    .announcement-banner__chevron {
        transition: none;
    }
}