/* ==========================================================================
   Texium Solutions — Process Steps widget
   Consumes design tokens from theme.css only. Per-step accent color is
   passed via the --texium-step-accent custom property (set inline per
   item from the widget's repeater), everything else uses tokens.
   ========================================================================== */

.texium-steps {
  position: relative;
  /* The orbiting dot's box extends past each circle, so the last step's
     orbit can reach beyond the row and add a sliver of page scroll. */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--texium-space-md);
  padding-top: var(--texium-space-lg);
}

.texium-steps__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Allowed to shrink: at narrower desktop widths four fixed-width
     items plus their gaps exceed the container and would push the page
     into horizontal scroll. */
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

/* Node: circle + ring + connecting dot below */

.texium-steps__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--texium-step-accent, var(--texium-primary));
}

.texium-steps__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--texium-surface);
  box-shadow: var(--texium-shadow-sm);
}

.texium-steps__ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  /* Fallback for browsers without color-mix() support: a plain border
     using the accent color directly (no transparency). */
  border: 1px dashed var(--texium-step-accent, var(--texium-primary));
  border: 1px dashed color-mix(in srgb, var(--texium-step-accent, var(--texium-primary)) 45%, transparent);
  pointer-events: none;
}

.texium-steps__ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px dotted var(--texium-border);
  border: 1px dotted color-mix(in srgb, var(--texium-step-accent, var(--texium-primary)) 30%, transparent);
}

.texium-steps--no-ring .texium-steps__ring {
  display: none;
}

.texium-steps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--texium-step-accent, var(--texium-primary));
}

.texium-steps__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.texium-steps__icon i {
  font-size: 56px;
  line-height: 1;
}

/* Orbiting dot. The dot rides an invisible box the size of the dashed
   ring: the box spins, and the dot counter-spins at the same rate so it
   stays visually upright while travelling the ring's circumference.
   Each step starts at a different angle (--texium-step-orbit-start, set
   inline per item) so the four dots are not locked in formation. */

.texium-steps__dot {
  position: absolute;
  inset: -18px;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(var(--texium-step-orbit-start, 0deg));
  animation: texium-step-orbit 14s linear infinite;
  animation-delay: var(--texium-step-orbit-delay, 0s);
}

/* The visible dot itself, parked at the top of the spinning box. */

.texium-steps__dot::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--texium-step-accent, var(--texium-primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--texium-step-accent, var(--texium-primary)) 18%, transparent);
}

@keyframes texium-step-orbit {
  to {
    transform: rotate(calc(var(--texium-step-orbit-start, 0deg) + 360deg));
  }
}

/* A soft trailing pulse on the ring, so the orbit reads as motion even
   when the dot is on the far side of a circle. */

.texium-steps__ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: color-mix(in srgb, var(--texium-step-accent, var(--texium-primary)) 55%, transparent);
  animation: texium-step-orbit 14s linear infinite;
  animation-delay: var(--texium-step-orbit-delay, 0s);
  transform: rotate(var(--texium-step-orbit-start, 0deg));
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .texium-steps__dot::after {
    box-shadow: none;
  }

  .texium-steps__ring::after {
    display: none;
  }
}

/* Body: title + description */

.texium-steps__body {
  margin-top: var(--texium-space-xl);
  max-width: 22ch;
  /* Never wider than the share of the row this item actually has. */
  width: 100%;
}

.texium-steps__title {
  margin: 0 0 var(--texium-space-sm);
  font-family: var(--texium-font-heading);
  font-size: var(--texium-font-size-h4);
  font-weight: var(--texium-weight-bold);
  line-height: var(--texium-leading-heading);
  color: var(--texium-heading);
}

.texium-steps__desc {
  margin: 0;
  font-size: var(--texium-font-size-sm);
  line-height: var(--texium-leading-body);
  color: var(--texium-text-muted);
}

/* Connector: straight gradient line between two steps, sitting at the
   circle's vertical center. Positioned and sized by theme.js (measures
   the two circles it connects and spans exactly between their edges)
   so it always meets both circles regardless of gap size, breakpoint,
   or circle size overrides — flexbox alone can't guarantee that here
   since items shrink to content width and centering leaves a variable
   gap between them. */

.texium-steps__connector {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 2px;
  opacity: 0.7;
  pointer-events: none;
  /* JS sets top to the connected circle's vertical center; this
     centers the bar itself on that point rather than starting there.
     scaleX draws the line in on scroll — width itself is set inline by
     JS, so the reveal has to ride a different property to avoid the two
     overwriting each other. */
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--texium-ease-out);
}

.texium-steps__connector.is-drawn {
  transform: translateY(-50%) scaleX(1);
}

/* A brighter pulse travelling the line, suggesting flow between steps. */

.texium-steps__connector::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--texium-primary) 85%, transparent) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-100%);
}

.texium-steps__connector.is-drawn::after {
  opacity: 1;
  animation: texium-step-flow 3.2s ease-in-out 700ms infinite;
}

@keyframes texium-step-flow {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

.texium-steps--no-connectors .texium-steps__connector {
  display: none;
}

/* Scroll reveal: each step fades/slides in with a per-item delay set
   inline by the widget. Uses the base .texium-reveal transform/opacity
   transition and reduced-motion handling from theme.css unchanged. */

/* Reduced motion: keep the layout, drop the looping animation. The
   connector still needs its drawn state or the lines would be invisible. */

@media (prefers-reduced-motion: reduce) {
  .texium-steps__dot,
  .texium-steps__ring::after,
  .texium-steps__connector::after {
    animation: none;
  }

  .texium-steps__ring::after {
    display: none;
  }

  .texium-steps__connector {
    transform: translateY(-50%) scaleX(1);
    transition: none;
  }
}

@media (max-width: 900px) {
  .texium-steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--texium-space-xl);
  }

  .texium-steps__item {
    flex-direction: row;
    text-align: left;
    gap: var(--texium-space-md);
  }

  .texium-steps__node {
    flex-shrink: 0;
  }

  .texium-steps__circle {
    width: 96px;
    height: 96px;
  }

  .texium-steps__ring {
    inset: -10px;
  }

  .texium-steps__icon,
  .texium-steps__icon i {
    width: 36px;
    height: 36px;
    font-size: 36px;
  }

  .texium-steps__dot {
    display: none;
  }

  .texium-steps__body {
    margin-top: 0;
    max-width: none;
    text-align: left;
  }

  .texium-steps__connector {
    display: none;
  }
}