/*
  Breadcrumbs — rendered by the hero (templates/partials/hero.php), sitting on
  the page surface just BELOW the hero's green wave band. Home is a house icon;
  separators are chevrons. Dark-green text (Montserrat) on the light content
  surface. See components/wave-band.css for the wave overhang it has to clear.
*/

.breadcrumbs {
  padding-block-start: calc(var(--row-spacer) - 1rem);
}

/* Clear the wave band's downward overhang (mirrors `.wave-band + .entry-content`
   — when breadcrumbs are present they, not the content, follow the band). */
.wave-band + .breadcrumbs {
  margin-block-start: var(--wave-band-overhang);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__link,
.breadcrumbs__current {
  font-family: var(--font-sans-serif);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-green-strong);
}

.breadcrumbs__link {
  text-decoration: none;
}

.breadcrumbs__link:hover {
  text-decoration: underline;
}

.breadcrumbs__home {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__icon {
  display: block;
  width: 1.125rem;  /* ~18px */
  height: 1.125rem;
}

.breadcrumbs__sep {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-inline: var(--space-2xs);  /* 8px each side, per design */
  color: var(--color-green-strong);
}

/* Builder hero: the hero + wave + breadcrumbs live in one stretched row, so the
   wave laps onto the breadcrumbs (not the next row). The first row after it drops
   the wave overhang AND tucks up close, via a local --row-spacer of 2rem — read
   by the margin-block-start below (which out-specifies wave-band.css's
   calc(--row-spacer + overhang), so the overhang is dropped and the gap is 2rem).
   The .vc_clearfix variant covers full-width rows. */
.vc_row:has(.wave-band):has(.breadcrumbs) + .vc_row,
.vc_row:has(.wave-band):has(.breadcrumbs) + .vc_clearfix + .vc_row {
  --row-spacer: 2rem;
  margin-block-start: var(--row-spacer);
}