/* assets/css/breadcrumb.css — single source for the visible breadcrumb bar. */
html, body { margin: 0; }
.wj-bc.wj-bc--bar {
  position: static;
  background: var(--navy, #16233F);
  border-bottom: 3px solid var(--coral, #F1592C);
}
.wj-bc.wj-bc--bar ol {
  list-style: none; margin: 0; padding: 10px 24px; max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem;
}
.wj-bc.wj-bc--bar li { color: #C4CCDE; display: flex; align-items: center; gap: 6px; }
.wj-bc.wj-bc--bar li:not(:first-child)::before { content: "/"; margin-right: 6px; color: #5b6785; }
.wj-bc.wj-bc--bar a { color: #fff; text-decoration: none; }
.wj-bc.wj-bc--bar a:hover { color: var(--sun, #F2B705); }
.wj-bc.wj-bc--bar li[aria-current="page"] { color: #fff; font-weight: 600; }

/* Pages with a dark [HERO] directly after the breadcrumb bar tuck cleanly underneath it. */
.wj-bc--bar ~ main .wj-page-hero,
.wj-bc--bar ~ .wj-page-hero { margin-top: 0 !important; }