/**
 * Breadcrumb — extracted from chrome.css (@layer legacy) into an UNLAYERED file
 * (Phase 2.5). Drupal's system breadcrumb renders inside `.region-content` via
 * templates/navigation/breadcrumb.html.twig as `.breadcrumbs > a/span.breadcrumb`;
 * this file is attached by that template, so it only loads where a breadcrumb
 * renders.
 *
 * Cascade-layer decision: UNLAYERED. In chrome.css these rules sat in
 * `@layer legacy` and needed `!important` on `display`/`color` only to beat the
 * `@layer base` `a { color }` / preflight rules (a later layer wins normal
 * declarations). Unlayered beats every layer by specificity, so the
 * `!important` workarounds are dropped here. The per-context overrides
 * (article.css blog hero = white; blog.css container/flex; pricing) stay in
 * their own unlayered files and keep winning by their higher specificity
 * (3–6 classes vs the 1–2 here), independent of source order.
 *
 * Two rendered contexts this preserves:
 *  - content pages: bordered inline-block bar, brand-blue links, #232323 current,
 *    brand-blue home + chevron glyphs.
 *  - article/blog hero (article.css/blog.css): white, borderless, flex — those
 *    files override the generics below.
 *
 * #009fed -> --color-brand; other hexes kept literal (no exact token).
 */

/* Generic chevron separator before each crumb (white-ish — the article banner
   default). `.region-content .breadcrumb:before` below repaints it brand-blue
   for in-content breadcrumbs. */
.breadcrumb:before {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  margin: 0 10px 0 8px;
  content: "\e5cc";
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  font-family: "Material Icons";
  vertical-align: top;
}

.breadcrumb:first-child:before {
  display: none;
}

.breadcrumb:last-child {
  color: #fff;
}

/* Content-page breadcrumb bar: thin brand-tint rule above and below, not on
   article pages (those put the trail on the blue hero). */
body:not(.page-node-type-article) .region-content .breadcrumbs {
  display: inline-block;
  margin: 0 0 10px;
  padding: 10px 0;
  border-top: 1px solid #e7f5fd;
  border-bottom: 1px solid #e7f5fd;
}

.region-content .breadcrumb {
  font-size: 12px;
  font-size: 0.8571428571rem;
  display: inline-block;
  color: var(--color-brand);
  vertical-align: middle;
}

/* Home glyph before the first crumb (Drupal "home" icon). */
.region-content .breadcrumb:first-child:before {
  word-wrap: normal;
  display: inline-block;
  margin-right: 10px;
  margin-left: 0;
  content: "\e88a";
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 1;
  font-family: "Material Icons";
  letter-spacing: normal;
  direction: ltr;
  text-transform: none;
  white-space: nowrap;
  transition: 0.3s linear;
}

.region-content .breadcrumb:visited {
  color: #0048a7;
}

.region-content .breadcrumb:before {
  content: "\e5cc";
  color: var(--color-brand);
  font-weight: 100;
  font-size: inherit;
  vertical-align: middle;
}

/* Current page (last crumb) — dark, non-link. */
.region-content .breadcrumb:last-child {
  color: #232323;
  font-weight: 400;
}