/* Top offer banner - see partials/components/announcement_bar.html */

.announcement-bar {
  overflow: hidden;
  background-color: var(--button);
}

/* Animated mode: the static text stays in the page for screen readers only. */
.announcement-bar.is-animated .announcement-static {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.announcement-marquee {
  overflow: hidden;
  width: 100%;
}

.announcement-track {
  display: flex;
  width: max-content;
  animation: announcement-scroll var(--announcement-duration, 30s) linear infinite;
  will-change: transform;
}

/* Pause on hover so it can be read - mouse devices only: on touch screens a
   tap leaves :hover stuck on, which would freeze the bar for good. */
@media (hover: hover) and (pointer: fine) {
  .announcement-bar:hover .announcement-track {
    animation-play-state: paused;
  }
}

.announcement-group {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Padding + separator live on every item (not as a flex gap on the track),
   so both copies are exactly the same width and the loop has no jump. */
.announcement-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1.5rem;
}

.announcement-item::after {
  content: "•";
  padding-inline-start: 3rem;
  opacity: 0.7;
}

/* RTL page: copies are laid out right-to-left, so sliding right by one copy's
   width (50% of the track) brings the second copy exactly into the first's place. */
@keyframes announcement-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

/* Reduced-motion devices still scroll (the site owner wants the banner moving
   for everyone), just at half speed. */
@media (prefers-reduced-motion: reduce) {
  .announcement-track {
    animation-duration: calc(var(--announcement-duration, 30s) * 2);
  }
}