/* =============================================================
   RiverSpring — Announcement Bar (NON-STICKY, v3)
   The bar is a normal-flow solid block at the very top of the
   page and SCROLLS AWAY (not sticky). On mobile/tablet the theme
   fixes <header>/<burger>/<menu> to the viewport, so those are
   offset down by the bar's still-visible height (--rsl-follow)
   and slide up to their normal spots as the bar scrolls off —
   no overlap, no gap. Everything scoped to body.rsl-has-bar.
   Single source of truth for height: --rsl-bar-h.
   ============================================================= */

/* Figma: single line down to 768px; only the 320 (mobile) frame wraps to two
   lines. So single line >=768, two lines <=767 (the theme's own mobile bp). */
:root { --rsl-bar-h: 64px; }                 /* single line (>=768) — Figma 64px */
@media (max-width: 767px) { :root { --rsl-bar-h: 60px; } }  /* two lines (mobile) — Figma 60px */

/* How much of the bar is still on screen (px). JS feeds --rsl-scroll-y;
   CSS derives the rest, so resizing never needs a JS recompute. */
body.rsl-has-bar {
  --rsl-follow: max(0px, var(--rsl-bar-h) - var(--rsl-scroll-y, 0px));
}

.rsl-announce {
  display: block;
  position: relative;             /* normal flow — scrolls away (NOT sticky) */
  z-index: 1000;                  /* sit above the fixed header while both are at the top */
  height: var(--rsl-bar-h);
  overflow: hidden;
  /* Exact Figma gradient (node 7554:63375): cream edges, translucent navy at
     18%/81%, and solid navy only at the centre. Percentage-based stops preserve
     the same long, hazy transition across desktop and tablet widths. */
  background: linear-gradient(
    90deg,
    #f6f0d5 0%,
    rgba(40, 51, 83, 0.7) 18%,
    #283353 50%,
    rgba(40, 51, 83, 0.7) 81%,
    #f6f0d5 100%
  );
}

.rsl-announce,
.rsl-announce:hover,
.rsl-announce:focus { text-decoration: none; }

.rsl-announce__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                       /* Figma: text→arrow gap */
  padding: 0 16px;
}

.rsl-announce__text {
  color: #fff;
  font-size: 20px;                /* Figma single-line size (desktop) */
  font-weight: 400;               /* base = Regular (Deuterium Variable, inherited) */
  letter-spacing: 0.02em;         /* Figma: 2% */
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsl-announce__prefix   { font-weight: 500; }   /* Medium */
.rsl-announce__headline { font-weight: 500; }   /* Medium */
.rsl-announce__sep      { font-weight: 400; }
.rsl-announce__sub      { font-weight: 400; }   /* Regular */
.rsl-announce__th       { font-size: 0.645em; vertical-align: 0.5em; font-weight: 500; }  /* Figma: 12.9px on 20px */

.rsl-announce__arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsl-announce__arrow svg { width: 20px; height: 20px; display: block; }

.rsl-announce__mobile { display: none; }

.rsl-announce:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (min-width: 768px) {
    .rsl-announce:hover .rsl-announce__text  { transform: translateX(-5px); }
    .rsl-announce:hover .rsl-announce__arrow { transform: translateX(7px); }
  }
}

/* Mobile (<=767): two-line layout, 44px bar — matches Figma's 320 frame. */
@media (max-width: 767px) {
  .rsl-announce__inner { gap: 8px; padding: 0 12px; }
  .rsl-announce__desktop { display: none; }
  .rsl-announce__mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .rsl-announce__mobile .rsl-announce__headline,
  .rsl-announce__mobile .rsl-announce__sub {
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.25;            /* two lines fit the 44px bar without clipping */
    color: #fff;
    white-space: nowrap;
  }
  .rsl-announce__mobile .rsl-announce__headline { font-weight: 500; }
  .rsl-announce__mobile .rsl-announce__sub { font-weight: 400; }
  .rsl-announce__mobile .rsl-announce__th { font-size: 1em; vertical-align: baseline; }
  .rsl-announce__arrow { width: 18px; height: 18px; }
  .rsl-announce__arrow svg { width: 18px; height: 18px; }
}

/* =============================================================
   Non-sticky scroll handoff (<=1200px the theme fixes these to
   the viewport). Offset each down by --rsl-follow so at the top
   they sit below the bar, then slide up as the bar scrolls off.
   Content top-padding is UNCHANGED — the bar supplies its own
   height in normal flow (no double count).
   ============================================================= */
@media (max-width: 1200px) {
  body.rsl-has-bar #main > header { top: var(--rsl-follow); }

  /* .burger has no transform of its own — composes with its top/is-active. */
  body.rsl-has-bar .burger { transform: translateY(var(--rsl-follow)); }

  /* Menu keeps its translateX slide (offset via top, matched height). */
  body.rsl-has-bar #mobile-menu {
    top: calc(135px + var(--rsl-follow));
    height: calc(100dvh - 135px - var(--rsl-follow) - env(safe-area-inset-bottom));
  }
}
@media (max-width: 767px) {
  body.rsl-has-bar #mobile-menu {
    top: calc(72px + var(--rsl-follow));
    height: calc(100dvh - 72px - var(--rsl-follow) - env(safe-area-inset-bottom));
  }
}

/* While the aria-modal mobile menu is open, the bar is inert (JS also sets
   aria-hidden + tabindex=-1). */
body.mobile_menu_active .rsl-announce { pointer-events: none; }