/*
 * ESP breadcrumb component
 *
 * Shared across Bricks content templates.  This deliberately styles only the
 * visual .svc-crumbs component; it does not alter BreadcrumbList JSON-LD.
 */
.svc-crumbs {
  background: #fff;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

.svc-crumbs .esp-container {
  padding-block: 14px;
}

.svc-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-muted, #64748b);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.4;
}

.svc-crumbs li {
  display: block;
  margin: 0;
  padding: 0;
}

.svc-crumbs a {
  color: var(--text-muted, #64748b);
  font-weight: 600;
  text-decoration: none;
}

.svc-crumbs a:hover {
  color: var(--blue-700, #124a8a);
  text-decoration: underline;
}

.svc-crumbs .sep {
  color: var(--ink-300, #cbd5e1);
}

.svc-crumbs .current,
.svc-crumbs [aria-current="page"] {
  color: var(--text-strong, #0a2a52);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .svc-crumbs .esp-container { padding-block: 11px; }
  .svc-crumbs ol { gap: 6px; font-size: 12.5px; }
}