/* Site-wide announcement bar, above the header. */
.zn-announce {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 48px 9px 16px;
    background: #0b1020;
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    transition: opacity .25s ease, transform .25s ease;
}
.zn-announce[data-tone="teal"]  { background: #00A896; color: #03201d; }
.zn-announce[data-tone="amber"] { background: #b45309; }
.zn-announce[data-tone="rose"]  { background: #be123c; }
.zn-announce.is-out { opacity: 0; transform: translateY(-100%); }
.zn-announce-inner { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.zn-announce-tag {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18);
}
.zn-announce[data-tone="teal"] .zn-announce-tag { background: rgba(0, 0, 0, .14); }
.zn-announce-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.zn-announce-link:hover { text-decoration-thickness: 2px; }
.zn-announce-close {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
    background: transparent; color: inherit; cursor: pointer; opacity: .8;
    display: grid; place-items: center;
}
.zn-announce-close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.zn-announce-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.zn-announce-close svg { width: 14px; height: 14px; }

/* Pages that pin the header to the top of the window (home hero, listen, voice library)
   push it below the bar while the bar is shown. */
html.has-announce body:has(.fh) .site-header,
html.has-announce body:has(.ls-page) .site-header,
html.has-announce body:has(.vl-app) .site-header { top: var(--zn-announce-h, 40px); }

@media (max-width: 640px) {
    .zn-announce { font-size: .8rem; padding: 8px 44px 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .zn-announce { transition: none; } }