/* =========================================================
   Breadcrumbs — Desktop only, Theme-safe
   ========================================================= */

/* -----------------------------
   Theme tokens
   ----------------------------- */
:root {
  /* text */
  --breadcrumb-text: var(--muted);
  --breadcrumb-active: var(--text);
  --breadcrumb-hover: var(--accent);

  /* glass */
  --breadcrumb-bg-glass: var(--glass, rgba(255, 255, 255, 0.04));
  --breadcrumb-border-glass: rgba(255, 255, 255, 0.08);
}

/* Light theme tuning */
[data-theme="light"] {
  --breadcrumb-bg-glass: rgba(0, 0, 0, 0.04);
  --breadcrumb-border-glass: rgba(0, 0, 0, 0.08);
}

/* -----------------------------
   Base breadcrumb
   ----------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;

  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;

  color: var(--breadcrumb-text);
  margin: 0 0 12px;
}

/* -----------------------------
   Links
   ----------------------------- */
.breadcrumb a {
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.breadcrumb a:hover {
  color: var(--breadcrumb-hover);
  opacity: 1;
}

/* -----------------------------
   Separator
   ----------------------------- */
.breadcrumb .sep {
  opacity: 0.45;
  user-select: none;
}

/* -----------------------------
   Current crumb
   ----------------------------- */
.breadcrumb .current {
  color: var(--breadcrumb-active);
  font-weight: 600;
  opacity: 0.95;
  cursor: default;
  white-space: nowrap;
}

/* -----------------------------
   Glass / pill variant
   ----------------------------- */
.breadcrumb--glass {
  display: inline-flex;
  align-items: center;

  padding: 6px 12px;
  border-radius: 999px;

  background: var(--breadcrumb-bg-glass);
  border: 1px solid var(--breadcrumb-border-glass);

  /* subtle lift on dark, neutral on light */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .breadcrumb--glass {
  box-shadow: none;
}