/* Breadcrumb — M22.
 *
 * A thin mono band under the masthead. The uppercasing is done here rather than
 * in the template, so the words in the DOM stay as they were written — a term
 * name, a page title — and only their appearance changes.
 */

/* DR-01: the trail sits on a full water band, directly under the navy bar.
 * Water appears where a visitor is oriented, which is exactly what a breadcrumb
 * is for. Every word on it is navy — slate on sky is 3.3:1 and fails (C14), so
 * the muted/strong distinction is carried by weight here, not by colour. */
.pl-breadcrumb {
  background: var(--c-water);
  color: var(--c-on-water);
  border-bottom: 0;
}

.pl-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-1);
  font-size: 0.78125rem;   /* 12.5px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The links carry the height rather than the container: a 12px line of text is
 * a target nobody can hit, and the trail is one of the few places a visitor
 * navigates by tapping precisely. */
.pl-breadcrumb__link,
.pl-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pl-breadcrumb__link {
  color: var(--c-on-water);
  text-decoration: none;
}

.pl-breadcrumb__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The page you are on is the end of the trail, and it is not a link. Same ink
 * as the rest of the band, heavier — the difference a colour would have made
 * is not available on water and does not need to be. */
.pl-breadcrumb__current {
  color: var(--c-on-water);
  font-weight: 500;
}

.pl-breadcrumb__sep {
  opacity: 0.55;
}

/* On a narrow screen the trail wrapped to two lines, and with DR-01's water
 * band behind it that doubled the chrome to 194px — a quarter of the screen
 * before a word of content.
 *
 * What wraps is the last item: the title of the page you are already on,
 * repeated in 13px directly above the same words set in 46px. It is hidden
 * from sight and kept in the accessibility tree, so a screen reader still
 * hears the complete trail and the band is one line again.
 *
 * The separator before it goes too — a trail ending in a slash reads as
 * truncation, which is not what happened. */
@media (max-width: 47.99rem) {
  .pl-breadcrumb__current,
  .pl-breadcrumb__inner > *:nth-last-child(2) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}