/* ================================================================
   Sync Inn Digital — Services Loop Ticker
   Infinite horizontal scroll marquee on orange background.
   Content managed globally in Appearance → Sync Inn Settings → Services Loop.
   No per-page fields — renders the same on every page.

   All colours use var(--sid-*) global CSS custom properties.
   ================================================================ */

/* ── Outer strip ─────────────────────────────────────────────── */

.sid-svc-loop {
  background-color: var(--sid-orange);
  width: 100%;
  overflow: hidden;
  /* No padding — the items carry their own vertical padding */
}

/* ── Scrolling track ─────────────────────────────────────────── */

/*
 * The track is twice as wide as a single list of items.
 * The animation slides it left by exactly 50% (= one full list width),
 * then instantly resets — creating a perfectly seamless loop.
 */
.sid-svc-loop__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Speed controlled by --sid-svc-speed; default 35 s */
  animation: sid-svc-scroll var(--sid-svc-speed, 35s) linear infinite;
  will-change: transform;
}

.sid-svc-loop__track:hover {
  animation-play-state: paused;
}

@keyframes sid-svc-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Individual service item ─────────────────────────────────── */

.sid-svc-loop__item {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 18px 15px;
  font-family: 'Poppins', var(--sid-font-heading, sans-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--sid-white);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sid-svc-loop__item:hover {
  opacity: 0.8;
}

/* ── Separator "/" ───────────────────────────────────────────── */

.sid-svc-loop__sep {
  display: inline-block;
  color: var(--sid-white);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  /* Slight vertical nudge so the slash sits visually centered */
  margin-top: -2px;
}

/* ── Responsive: scale down text on smaller screens ─────────── */

@media (max-width: 767px) {
  .sid-svc-loop__item {
    font-size: 20px;
    padding: 14px 18px;
    gap: 18px;
  }

  .sid-svc-loop__sep {
    font-size: 16px;
  }
}

@media (max-width: 479px) {
  .sid-svc-loop__item {
    font-size: 16px;
    padding: 16px 8px;
    gap: 14px;
  }

  .sid-svc-loop__sep {
    font-size: 13px;
  }
}