/* ==========================================================================
   Blok — Kruimelpad
   Klein en rustig; past op navy en op licht doordat alles via currentColor
   en --tekst-zacht loopt (band--navy definieert die opnieuw).
   ========================================================================== */
.b-kruimelpad {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.b-kruimelpad__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b-kruimelpad__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  max-width: 100%;
  color: var(--tekst-zacht);
}

/* Scheidingsteken: getekende chevron (geen tekst, dus niet voorgelezen),
   achter elk item behalve het laatste: een afgebroken regel begint zo nooit
   met een chevron */
.b-kruimelpad__item:not(:last-child)::after {
  content: "";
  flex: none;
  width: .38em;
  height: .38em;
  margin-right: .12em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: .6;
  transform: rotate(45deg);
}

/* Links: zacht, met een subtiele onderstreping die bij hover vol wordt.
   "a.b-kruimelpad__link" wint van ".band--navy a:not(.btn)" (zelfde
   specificiteit, later geladen). Padding: aanraakdoel minimaal 24px hoog. */
.b-kruimelpad a.b-kruimelpad__link {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-block: .2rem;
  color: inherit;
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .25em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.b-kruimelpad a.b-kruimelpad__link:hover {
  color: var(--navy);
  text-decoration-color: currentColor;
}
.band--navy .b-kruimelpad a.b-kruimelpad__link:hover { color: var(--wit); }

/* Huidige pagina: volle tekstkleur. Is de titel te lang voor de regel, dan
   kapt hij af met een beletselteken (hij staat voluit in de h1 eronder). */
.b-kruimelpad__huidig,
.b-kruimelpad__tekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-block: .2rem;
}
.b-kruimelpad__huidig {
  color: var(--navy);
  font-weight: var(--fw-bold);
}
.band--navy .b-kruimelpad__huidig { color: var(--wit); }

/* Eigen strook (arg 'band'), voor templates zonder pagina-hero */
.b-kruimelpad--strook {
  padding-block: .85rem;
  border-bottom: 1px solid var(--lijn);
}
.b-kruimelpad--strook.band--navy { border-bottom-color: transparent; }

/* Mobiel, pad van drie of meer, binnen de pagina-hero: de huidige pagina
   alleen voor screenreaders (de titel staat direct eronder als h1). Zo blijft
   het pad één regel. Als losse strook (arg 'band') staat er niet per se een h1
   onder, dus daar blijft de huidige pagina zichtbaar (afgekapt met …). */
@media (max-width: 639.98px) {
  .b-kruimelpad:not(.b-kruimelpad--strook) .b-kruimelpad__item:last-child:nth-child(n+3) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .b-kruimelpad:not(.b-kruimelpad--strook) .b-kruimelpad__item:nth-last-child(2):nth-child(n+2)::after { content: none; }
}