.breadcrumbs {
  display: block;

  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-secondary);

  font-size: clamp(0.75rem, 2vw, 0.875rem);
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.breadcrumbs > span:first-child:last-child {
  display: contents;
}

.breadcrumbs a {
  display: inline;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-link), var(--color-link));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.3s ease, background-size 0.3s ease;
}

html:not(.v-mobile) .breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--color-link);
  background-size: 100% 1px;
  outline: none;
}

.breadcrumbs span {
  color: var(--color-text-secondary);
}

.breadcrumbs .breadcrumb_last {
  color: var(--color-text-secondary);
  font-weight: 500;
  display: inline;
}

/*
 * Touch screens. A crumb is a 12px word, a 14px-tall target. Vertical padding
 * on an inline link widens what a finger can hit without moving the line; the
 * hover underline is drawn in the content box, so it stays under the word.
 */
@media (pointer: coarse) {
  .breadcrumbs a {
    padding: 12px 0;
    background-origin: content-box;
    background-clip: content-box;
  }
}

@media (max-width: 899px) {
  .breadcrumbs {
    line-height: 1.6;
  }
  .breadcrumbs span {
    white-space: normal;
    word-break: break-word;
  }
}

/* Other paths of a teacher or a staff member (impulse_breadcrumb_more_*() in
   includes/acf/acf-blocks.php): «+N» in the link colour at the end of the
   trail, and under it more lines of the same crumbs. */
/* Kept a little apart from the name, so it does not read as part of it. */
.breadcrumbs__more-toggle {
  display: inline;
  margin: 0 0 0 0.9em;
  padding: 0;
  border: 0;
  font: inherit;
  font-weight: 500;
  color: var(--color-link);
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(var(--color-link), var(--color-link));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.3s ease, background-size 0.3s ease;
}

html:not(.v-mobile) .breadcrumbs__more-toggle:hover,
.breadcrumbs__more-toggle:focus-visible {
  color: var(--color-link-hover);
  background-size: 100% 1px;
  outline: none;
}

/* Clips the lines while breadcrumbs-more.js slides them open or shut. */
.breadcrumbs__more {
  overflow: hidden;
}

.breadcrumbs__trail {
  display: block;
  margin-top: 0.35em;
}