/* Amer policy marquee — shared structure for every design. The moving track
 * itself (.amer-marquee / __track / __run) is assets/amer-core.css; this
 * file only holds what both launch designs (2, 4) have in common: the band
 * that clips the track, the per-message "chip" (icon/text — or
 * text/separator — as one non-nesting link when the merchant gives it one),
 * and the spacing arithmetic the loop depends on.
 * Every size, colour and the gap VALUE that differs between designs lives in
 * that design's own -2.css / -4.css, scoped to .amer-policy-marquee--d2 /
 * --d4 (runbook 5.5 / conventions.md "Design variants"); each of those sets
 * --amer-policy-marquee-gap and nothing here needs to know the number. */
.amer-policy-marquee__band { overflow: hidden; }

/* Held still until it is full. The section writes several copies of the
 * messages (enough to fill a desktop band standing still, for the case
 * where no script runs at all); the inline BOOT under the section (and,
 * after it, amer-policy-marquee.js) rebuilds them to exactly as many as the
 * band needs and then marks the strip ready. Moving before that is what
 * made the strip run out of copies first and only then turn seamless
 * (Mohamed, 2026-09-22) — so until then it stands at the start of its
 * cycle, where what the band shows is the strip's own first copies. (With
 * scripts blocked that is where it stays; see the .jinja's amer_copies for
 * how wide a band those copies cover.) */
.amer-policy-marquee [data-amer-marquee]:not([data-amer-marquee-ready]) .amer-marquee__track { animation-play-state: paused; }

/* Reduced motion: stand still in BOTH directions. amer-core.css's own
 * reduced-motion rule (.amer-marquee__track { animation: none }) is outranked
 * in Arabic by its [dir="rtl"] .amer-marquee__track { animation-name:
 * amer-marquee-rtl }, so the strip kept moving for Arabic readers who asked
 * for no motion (measured: animation-name amer-marquee-rtl under
 * prefers-reduced-motion). Same specificity as that rule and later in the
 * page, so this one wins. The strip is still filled edge to edge. */
@media (prefers-reduced-motion: reduce) {
  .amer-policy-marquee .amer-marquee__track { animation: none; }
}

/* The seam. amer-core.css animates the track by translateX(-50%), i.e. by
 * exactly half the track's own width, and the track holds an even number of
 * identical copies ("runs") of the message list. That is only seamless when
 * half the track is a whole number of run PITCHES — the run plus the space
 * that follows it. Written as `gap` on the track (what this section used to
 * do) it is not: two runs with a 32px gap make a track of 2R+32, half of
 * which is R+16, so every cycle jumped back by half a gap — measured at 16px
 * on design 2 and 20px on design 4, a visible stutter once a cycle.
 * So the space between runs is the run's OWN trailing padding instead: each
 * run is R+gap wide, the track is N×(R+gap), and half of it is exactly N/2
 * runs. The gap the eye sees between the last chip of one copy and the first
 * chip of the next is unchanged.
 * (padding-inline-end, not padding-right: in Arabic the strip runs the other
 * way and the trailing edge is the left one.) */
.amer-policy-marquee .amer-marquee__run {
  gap: var(--amer-policy-marquee-gap, 32px);
  padding-inline-end: var(--amer-policy-marquee-gap, 32px);
}
.amer-policy-marquee .amer-policy-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--amer-policy-marquee-gap, 32px);
  color: inherit;
  text-decoration: none;
}
/* A message the merchant linked: an underline that fades in on hover (the
 * house rule wants a transition on every link; text-decoration itself cannot
 * animate, its colour can), and the same on keyboard focus. The strip also
 * stops while a link in it has keyboard focus, as it does under the pointer,
 * so the focused message does not slide away. */
a.amer-policy-marquee__item .amer-policy-marquee__text {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .3s ease;
}
a.amer-policy-marquee__item:hover .amer-policy-marquee__text,
a.amer-policy-marquee__item:focus-visible .amer-policy-marquee__text { text-decoration-color: currentColor; }
.amer-policy-marquee .amer-marquee--pause:focus-within .amer-marquee__track { animation-play-state: paused; }
.amer-policy-marquee__icon,
.amer-policy-marquee__sep { flex: none; line-height: 1; }
.amer-policy-marquee__icon-img { display: block; object-fit: contain; }