/* Sponsors strip: CSS marquee. Base rules first; Bekifft-specific changes at the end. */
.marquee-css {
  color: var(--bk-cream-100);
  background-color: var(--bk-black);
  width: 100%;
  max-width: 42em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.marquee-css__list {
  flex: none;
  align-items: center;
  display: flex;
  position: relative;
}

.marquee-css__item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex: 0;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  display: flex;
}

.marquee-css__item-p {
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
  line-height: 1;
}

.marquee-css__item-svg {
  width: 1em;
}

/* CSS Keyframe Animation */
@keyframes translateX { 
	to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* ---- Bekifft ---- */
.sponsors-strip { background: var(--bk-black); position: relative; z-index: 2; /* above the Draw Path line, which runs behind it */ width: 100vw; margin-left: calc(50% - 50vw); padding: var(--bk-space-2) 0; overflow: clip; }
.sponsors-strip .marquee-css { max-width: none; background-color: transparent; color: var(--bk-cream-100); }
.sponsors-strip .marquee-css__item { grid-column-gap: var(--bk-space-8); padding-right: var(--bk-space-8); padding-top: 0; padding-bottom: 0; }
.sponsors-strip .marquee-css__item-p { font-family: var(--bk-font-body); font-size: var(--bk-text-md); line-height: var(--bk-lh-none); text-transform: uppercase; color: var(--bk-cream-400); }
.sponsors-strip .marquee-css__logo { display: block; width: auto; flex: none; filter: grayscale(1) brightness(1.1); }   /* sponsor logos are monochrome, shown white */
.sponsors-strip .marquee-css__logo--invert { filter: invert(1); }   /* CannaZen logo is black on white: inverted, it becomes white on the black strip */
@media (prefers-reduced-motion: reduce) { .sponsors-strip [data-css-marquee-list] { animation: none !important; } .sponsors-strip .marquee-css { overflow-x: auto; } }