/**
 * Announcement bar — PDF p.1, top red strip. Supports one or more rotating
 * messages (Haven Settings → Announcement Bar); each optionally links out —
 * see assets/js/announcement-rotator.js for the rotation itself.
 */

.announcement-bar {
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  text-align: center;
  min-height: var(--announcement-height);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Restrained horizontal padding at the narrowest widths only (client
     feedback, 2026-09-01 — the message was wrapping to two lines there):
     the shared --container-padding floors at 1.25rem (20px/side) below
     ~500px, which is generous for a thin banner and eats into the width
     this single line of text needs. clamp() still reaches the exact same
     --container-padding value at wider widths, so nothing changes once
     there's room to spare. */
  padding: var(--space-2) clamp(0.75rem, 3vw, var(--container-padding));
}

/* Sized independently of which message is currently showing — every
   .announcement-bar__item below shares the exact same font-size/line-height,
   so a fixed line-height here keeps the bar's total height constant across
   the whole rotation. This is what stops rotation from ever moving the
   header/Hero below it (see hero.css, navigation.css). */
.announcement-bar__viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.6em;
}

.announcement-bar__item {
  font-family: var(--font-ui);
  font-weight: 400;
  /* Fluid, not a per-device breakpoint (client explicitly asked for a
     proper responsive fix, not an iPhone-specific hack): scales smoothly
     from 9.6px at 320px width up to the original, unchanged var(--fs-00)
     (13.6px) by 600px width and above — clamp() saturates at that upper
     bound on its own, so desktop/tablet need no separate override. Letter-
     spacing is already in `em`, so it scales down proportionally with this
     for free as the text shrinks — no separate clamp needed there. */
  font-size: clamp(0.6rem, 0.31rem + 1.43vw, var(--fs-00));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;

  /* Stacked on top of each other (not side by side) so rotating between
     them never changes the viewport's own size — see the comment above. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.announcement-bar__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.announcement-bar__item strong {
  font-weight: 700;
}

/* Linked announcements keep the exact same look as plain text at rest — no
   underline, matching the site-wide link reset (base.css) — and only gain
   an underline on hover/focus as the "this is clickable" cue. Keyboard
   focus ring and touch tap-highlight suppression are already handled
   site-wide (base.css: a:focus-visible, html[data-input-modality="touch"]),
   so nothing announcement-specific is needed for either. */
a.announcement-bar__item:hover,
a.announcement-bar__item:focus-visible {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__item {
    transition: none;
  }
}