/* ============================================================
   CCI breadcrumb — style variants
   ------------------------------------------------------------
   .crumbs is declared in TEN page stylesheets, in three different
   looks, all under the same class names. A shared breadcrumb widget
   would therefore render differently depending purely on which OTHER
   widget happened to share the page — and unstyled if it were alone.

   The three rule sets below are copied verbatim from those files and
   re-hung on an explicit modifier class, so the widget's Variant
   control decides the look. `.crumbs.cew-crumbs-blue` is (0,2,0) and
   outranks the single-class rules it replaces, whichever page
   stylesheet also happens to be loaded.

   Layout (height, gap, font, ellipsis) is identical in every variant,
   so it is declared once.
   ============================================================ */

.crumbs__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.crumbs a {
  font-weight: 500;
  flex: none;
  transition: 0.15s;
}
.crumbs__sep {
  flex: none;
}
.crumbs__current {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Light — career.css / news.css / news-article.css ---- */
.crumbs.cew-crumbs-light { background: #fff; }
.crumbs.cew-crumbs-light a { color: var(--ink-soft); }
.crumbs.cew-crumbs-light a:hover { color: var(--cci-blue); }
.crumbs.cew-crumbs-light .crumbs__sep { color: var(--silver); }
.crumbs.cew-crumbs-light .crumbs__current { color: var(--cci-blue); }

/* ---- Tint — our-brands.css (identical but for the bar colour) ---- */
.crumbs.cew-crumbs-tint { background: var(--tint); }
.crumbs.cew-crumbs-tint a { color: var(--ink-soft); }
.crumbs.cew-crumbs-tint a:hover { color: var(--cci-blue); }
.crumbs.cew-crumbs-tint .crumbs__sep { color: var(--silver); }
.crumbs.cew-crumbs-tint .crumbs__current { color: var(--cci-blue); }

/* ---- On blue — contact.css; flows into the blue page header ---- */
.crumbs.cew-crumbs-blue {
  background: linear-gradient(180deg, var(--cci-blue-700) 0%, var(--cci-blue) 100%);
}
.crumbs.cew-crumbs-blue a { color: rgba(255, 255, 255, 0.72); }
.crumbs.cew-crumbs-blue a:hover { color: #fff; }
.crumbs.cew-crumbs-blue .crumbs__sep { color: rgba(255, 255, 255, 0.42); }
.crumbs.cew-crumbs-blue .crumbs__current { color: var(--gold-soft); }