/* ==========================================================================
   ANNOUNCEMENT BAR
   Continuous horizontal scroll above the header.

   Two rules keep this from becoming an irritant: it pauses on hover so a message
   can actually be read, and it stops entirely under prefers-reduced-motion,
   where it becomes a static centred line instead.
   ========================================================================== */

.ann {
  position: relative;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1;
  --ann-fg: #fff;
}

.ann--green { background: var(--tbs-green-deep); color: var(--ann-fg); }
.ann--gold  { background: var(--gold); --ann-fg: #241B08; color: var(--ann-fg); }
.ann--cream { background: var(--cream-deep); --ann-fg: var(--tbs-green); color: var(--ann-fg);
              border-bottom: 1px solid var(--line); }

.ann__viewport {
  overflow: hidden;
  /* Room for the close button so a message never slides under it. */
  padding-right: 40px;
}

.ann__track {
  display: flex;
  width: max-content;
  animation: ann-scroll var(--ann-speed, 40s) linear infinite;
}

/* Pause on hover so a message can be read, and on focus so keyboard users can
   reach the links inside it.

   The hover half is gated behind (hover: hover) deliberately. On a touch screen
   :hover sticks to the last element tapped, and scrolling the page with a finger
   over the bar is enough to trigger it — so the marquee would freeze and stay
   frozen. That is why the bar looked broken on mobile while working on desktop.

   :focus-within stays unconditional: it only fires when something inside is
   genuinely focused, which is exactly when the text needs to hold still. */
@media (hover: hover) {
  .ann:hover .ann__track { animation-play-state: paused; }
}

.ann:has(:focus-visible) .ann__track {
    animation-play-state: paused;
}

.ann__set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

@keyframes ann-scroll {
  from { transform: translateX(0); }
  /* -50% because the list is rendered twice; one set width is exactly half. */
  to   { transform: translateX(-50%); }
}

.ann__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 9px;
  white-space: nowrap;
}

.ann__icon { flex: 0 0 auto; opacity: .8; }

.ann__sep {
  padding-inline: var(--sp-5);
  opacity: .35;
}

.ann__link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.ann--green .ann__link { color: var(--gold); }
.ann__link:hover { text-decoration-thickness: 2px; }

.ann__close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  opacity: .55;
  cursor: pointer;
}

.ann__close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.ann--gold .ann__close:hover, .ann--cream .ann__close:hover { background: rgba(0, 0, 0, .08); }

/* Dismissed for the session. */
.ann[hidden] { display: none; }

/* ---- Reduced motion --------------------------------------------------- */
/* Scrolling text is genuinely difficult for some readers, so it becomes a
   single static line rather than simply slowing down. */

@media (prefers-reduced-motion: reduce) {
    .ann__track {
        animation: none;
        width: 100%;
    }

    .ann__set:nth-child(2) {
        display: none;
    }

    /* Wrap instead of clip. The old rule centred one flex row and hid the
     overflow, so announcement 1 showed and 2..n were invisible with no way to
     reach them — which reads as a bar stuck on one message rather than a
     deliberately static bar. */
    .ann__set {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
    }

    .ann__item {
        white-space: normal;
    }

    .ann__viewport {
        padding-inline: 44px;
    }
}

@media (max-width: 639px) {
  .ann { font-size: 0.76rem; }
  .ann__sep { padding-inline: var(--sp-4); }
}