/**
 * Breadcrumbs (VX Toolkit) — structural styles + token defaults.
 *
 * Colours fall back to your Elementor global colours, so it's on-brand with
 * zero config; every value is overridden by the matching Elementor control.
 * The sliding-underline effect only applies when the root has .vx-bc--underline
 * (the "Hover underline" switcher).
 */

.vx-bc {
  --vx-bc-sep: "\203A"; /* › */
  font-size: 14px;
  line-height: 1.5;
}

.vx-bc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.vx-bc-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* separator between items */
.vx-bc-item + .vx-bc-item::before {
  content: var(--vx-bc-sep);
  margin: 0 8px;
  color: var(--e-global-color-subtle, #9aa3c4);
  flex-shrink: 0;
}

/* linked crumb */
.vx-bc-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding-bottom: 2px;
  color: var(--e-global-color-accent, #1f2540);
  transition: color 0.2s ease;
}
.vx-bc-link:hover {
  color: var(--e-global-color-primary, #4f46e5);
}

/* current crumb */
.vx-bc-current .vx-bc-text {
  color: var(--e-global-color-muted, #5c6584);
}

/* home icon */
.vx-bc-ico svg,
.vx-bc-ico i {
  width: 1em;
  height: 1em;
  font-size: inherit;
  display: inline-block;
  vertical-align: -0.1em;
}
.vx-bc-ico svg { fill: currentColor; }

/* sliding underline — only when enabled via the control */
.vx-bc--underline .vx-bc-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.vx-bc--underline .vx-bc-link:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .vx-bc-link,
  .vx-bc--underline .vx-bc-link::after { transition: none; }
}