/* ═══════════════════════════════════════════════════
   Digital Armor — Breadcrumb component
   Loaded site-wide on every non-homepage page.
   Independent of compliance-specific navigation.
═══════════════════════════════════════════════════ */

/* ── Canonical breadcrumb HTML (copy into <main>, top of page) ─────────────
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li class="breadcrumb-sep" aria-hidden="true">›</li>
    <li><a href="/compliance/">Compliance</a></li>
    <li class="breadcrumb-sep" aria-hidden="true">›</li>
    <li class="breadcrumb-current" aria-current="page">HIPAA</li>
  </ol>
</nav>
   Use the same wrapper on every non-homepage page; vary the inner
   crumbs (Compliance / Blog / About / etc.). The current page is
   the last <li class="breadcrumb-current"> and is plain text.
─────────────────────────────────────────────────────────────────────── */

.breadcrumb {
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--navy-deeper);
}
.breadcrumb ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0.55rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--steel-light);
  scrollbar-width: none;
}
.breadcrumb ol::-webkit-scrollbar { display: none; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a {
  color: var(--steel-light);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb-sep {
  color: var(--text-muted);
  font-size: 0.9rem;
  user-select: none;
}
.breadcrumb-current {
  color: var(--white);
  font-weight: 500;
}