.alt-announce {
  position: relative;
  display: block;
  background: var(--alt-announce-bg);
  color: var(--alt-announce-text);
}

.alt-announce[hidden] { display: none; }

.alt-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* The reference bar is a flat 40px: 20px of line box inside 10px padding. */
  min-height: var(--alt-announce-h, 40px);
  padding-block: var(--alt-announce-pad);
}

.alt-announce__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  text-align: center;
}

/* Every message stacks in the same cell; only the active one is painted, so the
   bar never jumps height as the copy changes length. */
.alt-announce__track {
  display: grid;
  grid-template-areas: "slide";
  align-items: center;
}

.alt-announce__item {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  font-family: var(--alt-font-body);
  font-size: var(--alt-announce-size);
  letter-spacing: var(--alt-announce-tracking);
  line-height: 20px;
}

.alt-announce__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Without JS there is no active class, so show the first message. */
.alt-announce__track > .alt-announce__item:first-child {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.alt-announce__track.is-ready > .alt-announce__item:first-child:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}

.alt-announce__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alt-announce__nav,
.alt-announce__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--alt-hover-duration) ease;
}
.alt-announce__nav:hover,
.alt-announce__close:hover { opacity: 1; }

.alt-announce__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .alt-announce__item { font-size: var(--alt-announce-size-m); }
  .alt-announce__close { right: 6px; }
  .alt-announce__close svg { width: 15px; height: 15px; }
}

/* ---- anchor colour re-assertion (see fix_link_specificity) ---- */
a.alt-announce__link { color: inherit; }
/* The rotator stacks its messages, so the window has to be clipped to one
   line or the bar grows to the height of all of them. */
.alt-announce__viewport {
  height: var(--alt-announce-h);
  overflow: hidden;
}
.alt-announce__inner { min-height: var(--alt-announce-h); }
.alt-announce__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--alt-announce-h);
}

/* --- reference fixes --- */
/* The grid stack was resolving to one row per message, so the 40px window
   only ever showed a sliver. Absolute stacking is deterministic. */
.alt-announce__viewport { position: relative; height: var(--alt-announce-h); }
.alt-announce__track {
  position: relative;
  display: block;
  height: var(--alt-announce-h);
}
.alt-announce__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--alt-announce-h);
  padding-inline: 32px;
  line-height: 1.25;
  white-space: nowrap;
}

/* Long messages shrink rather than disappear. */
@media (max-width: 900px) {
  .alt-announce__item { font-size: calc(var(--alt-announce-size-m, var(--alt-announce-size)) * 0.92); }
}
@media (max-width: 600px) {
  .alt-announce__item { padding-inline: 36px; font-size: calc(var(--alt-announce-size-m, var(--alt-announce-size)) * 0.82); }
}