/* wgf-breadcrumb.css — Module M03: Universal entity-path trail.
   Appears below the page header on every detail and discovery page.
   Gives Google a clean internal-link ladder via BreadcrumbList JSON-LD.
   Colours/type come only from _tokens.css — no :root block here. */

/* Core nav shell */
.bc-nav{
  display:block;
  width:100%;
}

.bc-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}

/* Each list item: crumb + separator pair */
.bc-nav li{
  display:flex;
  align-items:center;
  white-space:nowrap;
}

/* Separator chevron — purely decorative */
.bc-sep{
  display:inline-block;
  color:var(--wgf-border-neutral);
  font-size:var(--text-xs);
  padding:0 var(--space-2);
  line-height:1;
  user-select:none;
}

/* Crumb link */
.bc-link{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  text-decoration:none;
  line-height:1.4;
  border-radius:3px;
  padding:1px 2px;
  text-underline-offset:2px;
}
@media(prefers-reduced-motion:no-preference){
  .bc-link{
    transition:color var(--motion-fast) var(--ease-standard);
  }
}
.bc-link:hover{
  color:var(--wgf-link);
  text-decoration:underline;
}
.bc-link:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* Home icon glyph on first crumb */
.bc-home-icon{
  width:1em;
  height:1em;
  fill:currentColor;
  vertical-align:-.12em;
  margin-right:3px;
  flex:0 0 auto;
}

/* Current page crumb — not a link; slightly brighter than muted, not gold */
.bc-current{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  opacity:.88;
  line-height:1.4;
}

/* ── Ellipsis expand button (mobile truncation) ── */
.bc-ellipsis{
  display:none;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:1px var(--space-2);
  cursor:pointer;
  line-height:1.6;
}
@media(prefers-reduced-motion:no-preference){
  .bc-ellipsis{
    transition:
      color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);
  }
}
.bc-ellipsis:hover{
  color:var(--wgf-link);
  border-color:var(--wgf-border);
}
.bc-ellipsis:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* ── Mobile truncation mode ──
   Applied by JS when viewport width ≤ 520px (or the preview width wrapper is narrow).
   Hides the middle crumbs and shows the ellipsis button instead.
   Expanded state: .bc-nav--truncated.bc-nav--expanded restores all crumbs. */

.bc-nav--truncated .bc-middle{
  display:none;
}
.bc-nav--truncated .bc-ellipsis{
  display:inline-flex;
  align-items:center;
}
.bc-nav--truncated.bc-nav--expanded .bc-middle{
  display:flex;
}
.bc-nav--truncated.bc-nav--expanded .bc-ellipsis{
  display:none;
}