/* ── Breadcrumb — giraffetree.com ────────────────────────────────────────────
   Static positioning: breadcrumb-bar.js inserts .wj-bc directly before <main>.
   #header is position:sticky (reserves its own space at rest), so this lands
   cleanly between the header and the hero with no offset needed. Colors use
   this site's shadcn-style HSL theme vars so it tracks any future palette edit. */
.wj-bc { font-size: .82rem; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); padding: .65rem 1rem; }
.wj-bc ol { list-style: none; padding: 0; margin: 0 auto; max-width: 72rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
.wj-bc li { display: flex; align-items: center; gap: .4rem; color: hsl(var(--muted-foreground)); }
.wj-bc li + li::before { content: "/"; opacity: .5; }
.wj-bc a { color: hsl(var(--primary)); text-decoration: none; }
.wj-bc a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.wj-bc li[aria-current="page"] span { color: hsl(var(--foreground)); font-weight: 600; }
@media (max-width: 640px) { .wj-bc { font-size: .76rem; padding: .55rem .85rem; } }