/* Promo bar — extracted from style.css for use on (site) pages */
/* ---------- Header ---------- */
/* top notification / download bar — stays pinned at the top on scroll */
.promo-bar {
  position: sticky;
  top: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0.5rem 1.25rem;
  background: #14141b;
  color: #a0a0a0;
  text-align: center;
}
.promo-bar__viewport {
  display: flex;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}
.promo-bar__track {
  display: flex;
}
.promo-bar__group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(0.5rem, 2vw, 1.25rem);
}
.promo-bar__group--dupe { display: none; }
.promo-bar__text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
}
.promo-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #ff4844;
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.02rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promo-bar__cta svg { transition: transform 0.25s ease; }
.promo-bar__cta:hover svg { transform: translateX(4px); }
/* the track holds two identical groups, so -50% lands exactly on the duplicate */
@keyframes promo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .promo-bar { padding-inline: 0; cursor: pointer; }
  .promo-bar__viewport { overflow: hidden; width: 100%; justify-content: flex-start; }
  .promo-bar__track { width: max-content; animation: promo-marquee 24s linear infinite; }
  .promo-bar__group { flex-wrap: nowrap; white-space: nowrap; padding-inline-end: clamp(1.5rem, 8vw, 3rem); }
  .promo-bar__group--dupe { display: flex; }
  .promo-bar:hover .promo-bar__track,
  .promo-bar:focus-within .promo-bar__track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .promo-bar { padding-inline: 1.25rem; cursor: auto; }
    .promo-bar__viewport { overflow: visible; }
    .promo-bar__track { width: auto; animation: none; }
    .promo-bar__group { flex-wrap: wrap; white-space: normal; padding-inline-end: 0; }
    .promo-bar__group--dupe { display: none; }
  }
}