/* ===========================
      BAOIAM - ANNOUNCEMENT BAR

      A slim full-width strip above the navbar carrying a still
      "Applications Closing soon" message.

      Not sticky — nav already sticks to the top on its own (see
      navbar.css), so this scrolls away with the page and the nav takes
      over the top edge once the user scrolls past it.

      This used to be a marquee: the track held a dozen identical copies
      of the message and animated translateX(0 -> -50%), which landed
      back on a matching frame and so looped without a seam. It holds
      still now. The markup still carries all those copies — the track
      centres itself and every copy after the first is hidden, which
      keeps the change small in both directions if the movement is ever
      wanted back.
=========================== */

.announcement-bar {
  position: relative;
  overflow: hidden;
  /* White, not the cream it was. The navbar below is a pale cream gradient
     and this bar was #FFF7F2, so the two ran together as one band and the
     strip stopped reading as its own thing. The orange is carried by the
     call to action inside it, as before. */
  background: #FFFFFF;
}

/* The message for screen readers/status tools — the track itself is
   aria-hidden since it repeats the same text many times over. */
.announcement-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Held still, and on one copy of the message rather than the dozen the
   markup carries. Those copies exist so a marquee can loop without a seam;
   with nothing moving they would tile the same sentence across the bar and
   read as a marquee somebody paused, so every one after the first is
   hidden and the track centres what is left.

   The copies stay in the markup. Putting the movement back is this rule
   and a keyframe, not a change to any page. */

.announcement-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.announcement-msg:not(:first-child) {
  display: none !important;
}

.announcement-msg {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* Horizontal padding is the space between copies. See the track above for
     why this is not a flex gap. */
  padding: 10px 24px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  white-space: nowrap;
  color: #1A1A1A;
  max-width: 100%;
}

/* The call to action carries the brand colour and the weight. */
.announcement-msg b {
  font-weight: 700;
  color: var(--primary, #FF6600);
}

.announcement-clock {
  font-size: 14px;
  line-height: 1;
  color: var(--primary, #FF6600);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .announcement-msg {
    font-size: 12px;
    gap: 6px;
    padding: 7px 12px;
  }

  .announcement-clock {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .announcement-msg {
    font-size: 10.8px;
    gap: 4px;
    padding: 6px 8px;
  }

  .announcement-clock {
    font-size: 11.5px;
  }
}