/* ============================================================
   PUPstreat – Trust Marquee Widget  |  marquee.css
   ============================================================ */

/* ── Keyframes ── */
@keyframes pup-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Wrapper ── */
.pup-marquee-wrap {
  background-color : #2a1f1a;
  border-top       : 1px solid #2a1f1a;
  border-bottom    : 1px solid #2a1f1a;
  overflow         : hidden;
  padding          : 18px 0;
  width            : 100%;
  /* prevent the bar from being taller than needed on any screen */
  box-sizing       : border-box;
}

/* ── Scrolling track ── */
.pup-marquee-track {
  display          : flex;
  align-items      : center;
  gap              : 48px;            /* overridden inline from widget setting */
  white-space      : nowrap;
  width            : max-content;     /* shrink-wraps all items × 2 */

  animation-name            : pup-marquee;
  animation-timing-function : linear;
  animation-iteration-count : infinite;
  animation-duration        : 30s;   /* overridden inline */
}

/* Pause on hover */
.pup-marquee-track.pup-pause-hover:hover {
  animation-play-state: paused;
}

/* ── Individual item ── */
.pup-marquee-item {
  display     : inline-flex;
  align-items : center;
  gap         : 14px;
  font-size   : 13px;
  font-weight : 500;
  color       : #faf6f1;
  letter-spacing: 0.01em;
  line-height : 1;
  flex-shrink : 0;        /* never wrap */
}

/* ── Bullet ── */
.pup-marquee-bullet {
  color       : #8b5c3e;
  flex-shrink : 0;
  line-height : 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet  (≤ 1024 px) – slightly smaller text, tighter padding */
@media (max-width: 1024px) {
  .pup-marquee-wrap {
    padding: 14px 0;
  }
  .pup-marquee-item {
    font-size : 12px;
    gap       : 12px;
  }
  .pup-marquee-track {
    gap: 36px !important;
  }
}

/* Mobile  (≤ 767 px) – compact text, faster feel */
@media (max-width: 767px) {
  .pup-marquee-wrap {
    padding: 12px 0;
  }
  .pup-marquee-item {
    font-size : 11px;
    gap       : 10px;
  }
  .pup-marquee-track {
    gap: 28px !important;
    /* Speed up slightly on small screens so users see more items */
    animation-duration: 20s !important;
  }
}

/* Very small  (≤ 400 px) */
@media (max-width: 400px) {
  .pup-marquee-item {
    font-size: 10px;
    gap: 8px;
  }
  .pup-marquee-track {
    gap: 22px !important;
    animation-duration: 16s !important;
  }
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .pup-marquee-track {
    animation: none;
    /* Show items as a static centred flex row instead */
    justify-content : center;
    flex-wrap       : wrap;
    width           : 100%;
    gap             : 20px !important;
    padding         : 0 20px;
  }
  /* Hide the duplicate set so nothing repeats */
  .pup-marquee-track > *:nth-child(n + 7) {
    display: none;
  }
}