/* Promo Banner block — strip placed in page content (e.g. under List + Links).
   Modes:
   - .promo-banner--static  : centered, normal text
   - .promo-banner--marquee : text scrolls on an infinite, seamless loop
   Colours come from CSS custom properties set inline per block. */

.promo-banner {
  --promo-banner-bg: #ffc700;
  --promo-banner-color: #002124;

  position: relative;
  width: 100%;
  background-color: var(--promo-banner-bg);
  color: var(--promo-banner-color);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.promo-banner a {
  color: inherit;
  text-decoration: underline;
}

.promo-banner p {
  margin: 0;
  display: inline;
}

.promo-banner__viewport {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 16px;
}

/* ---- Static ---- */
.promo-banner--static .promo-banner__viewport {
  text-align: center;
}

/* ---- Marquee ---- */
.promo-banner--marquee .promo-banner__viewport {
  max-width: none;
  padding: 12px 0;
  overflow: hidden;
}

.promo-banner__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Duration is overridden by JS to keep a constant px/s speed; this is the
     no-JS fallback. */
  animation: promo-banner-scroll 30s linear infinite;
}

.promo-banner--marquee:hover .promo-banner__track,
.promo-banner--marquee:focus-within .promo-banner__track {
  animation-play-state: paused;
}

.promo-banner__item {
  flex: 0 0 auto;
  padding: 0 24px;
  white-space: nowrap;
}

/* The track holds two identical sets; translating by -50% (one set width)
   produces a seamless, gapless loop regardless of text length. */
@keyframes promo-banner-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Editor placeholder for an empty block */
.promo-banner--placeholder {
  padding: 14px 16px;
  text-align: center;
  background-color: #f3f3f3;
  color: #777;
  font-style: italic;
}

@media screen and (max-width: 1023px) {
  .promo-banner {
    font-size: 14px;
  }

  .promo-banner__viewport {
    padding: 10px 16px;
  }

  .promo-banner--marquee .promo-banner__viewport {
    padding: 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-banner__track {
    animation: none;
    transform: none;
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
  }

  .promo-banner--marquee .promo-banner__item[aria-hidden='true'] {
    display: none;
  }
}