/* ============================================================
 * Breadcrumbs — hierarchical navigation context
 * Heilsugátt DS · net-new · CSS-only
 *
 * Markup: <nav aria-label="Brauðmylsna"><ol class="breadcrumb">
 *   <li class="breadcrumb-item"><a class="breadcrumb-link" href>…</a></li>
 *   <li class="breadcrumb-item" aria-current="page">…</li></ol></nav>
 * Separators are drawn by CSS (rotated-border chevron) — NO Font Awesome
 * font dependency, so they survive the production FA Pro kit.
 * ============================================================ */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;            /* long clinical paths wrap to a 2nd line */
  align-items: center;
  column-gap: 0;              /* horizontal spacing lives in the chevron margins (symmetric) */
  row-gap: 2px;              /* only applies when a long trail wraps */
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);    /* Figma text-xs = 12px */
  line-height: var(--line-height-xs);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
}

/* CSS-drawn chevron AFTER every item except the last. Decorative.
   Placed as ::after on the PREVIOUS item (not ::before on the next) so it
   sits OUTSIDE every item's padding — including the current-page item, whose
   own padding would otherwise shove a ::before chevron hard to the right. */
.breadcrumb-item:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 6px;
  border-top: 1.5px solid var(--fg-quinary);
  border-right: 1.5px solid var(--fg-quinary);
  transform: rotate(45deg);
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-md);   /* Figma radius-md = 8px */
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
}

/* Hover/focus = soft brand pill + brand-700 (light) / brand-400 (dark).
   WCAG fix: export used --text-brand-secondary (= brand-600, 3.28:1, FAIL).
   --text-brand-primary-alt = brand-700 light (5.38:1 PASS) / brand-400 dark. */
.breadcrumb-link:hover,
.breadcrumb-link:focus-visible {
  background-color: var(--bg-brand-primary-alt);
  color: var(--text-brand-primary-alt);
}
.breadcrumb-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}

.breadcrumb-ico { flex: 0 0 auto; font-size: 14px; color: var(--fg-quaternary); }

/* Current page — not a link. Figma: brand-700 (light) / brand-400 (dark),
   same medium weight as the links — the same token the hover uses. */
.breadcrumb-item[aria-current="page"] {
  padding: 4px 8px;
  color: var(--text-brand-primary-alt);
  font-weight: var(--font-weight-medium);
}