/* Rayne-Lab breadcrumb / current-location indicator.
 * Compact hierarchy display that replaces the old large article-return pill.
 * The breadcrumb stays readable while scrolling without letting article text
 * show through or visually collide with it. */

.breadcrumb-location {
  position: sticky;
  top: 74px;
  z-index: 42;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .42rem;
  margin: 0 0 1.35rem;
  padding: .72rem 0 .78rem;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: var(--ink, #09090b);
  color: var(--muted-2);
  font-size: .7rem;
  line-height: 1.45;
  letter-spacing: .025em;
  isolation: isolate;
}

/* Extend the opaque reading surface slightly beyond the article column so
 * scrolling headings/body copy never peeks around the sticky breadcrumb. */
.breadcrumb-location::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -18px;
  background: var(--ink, #09090b);
  border-bottom: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}

.breadcrumb-location::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18px;
  right: -18px;
  bottom: -12px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(9,9,11,.92), rgba(9,9,11,0));
  pointer-events: none;
}

.breadcrumb-location a {
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}

.breadcrumb-location a:hover,
.breadcrumb-location a:focus-visible {
  color: var(--gold-bright);
}

.breadcrumb-location a:focus-visible {
  outline: 1px solid rgba(210,170,77,.65);
  outline-offset: 3px;
}

.breadcrumb-separator {
  color: rgba(142,139,132,.46);
  user-select: none;
}

.breadcrumb-current {
  color: var(--fg-soft);
}

@media (max-width: 680px) {
  .breadcrumb-location {
    top: 64px;
    gap: .34rem;
    margin-bottom: 1.05rem;
    padding: .62rem 0 .68rem;
    font-size: .66rem;
  }

  .breadcrumb-location::before {
    left: -10px;
    right: -10px;
  }

  .breadcrumb-location::after {
    left: -10px;
    right: -10px;
  }
}