/* ═══════════════════════════════════════════════════════════════════
   breadcrumb.css — the ONLY breadcrumb styling on the site.
   ─────────────────────────────────────────────────────────────────────
   Markup comes from views/partials/breadcrumb.ejs and nowhere else.
   Loaded globally via views/partials/head.ejs.

   This file replaced six parallel systems:
     .hero-breadcrumb*    entexis.css        7 pages
     .blog-breadcrumb     entexis.css        2 pages
       + .bc-sep / .bc-current
     .about-breadcrumb*   nowhere            1 page, unstyled, so its
                                             links carried hand-patched
                                             inline colours
     .breadcrumb*         entexis.css        dead (backup views only)
     .svc-breadcrumb*     services/show.ejs  dead (no markup used it)
     .cs-breadcrumb*      case-studies/      dead (no markup used it)
     .lb-breadcrumb-wrap  labs.css           dead (no lab passes a trail)

   Naming follows the .ent-faq* house convention: one prefix, one owner.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset against the bare `nav` selector ────────────────────────────
   entexis.css:49 styles the element `nav` directly (the site header:
   flex, white plate, 18px 72px padding, bottom border, backdrop blur).
   The breadcrumb is correctly a <nav aria-label="Breadcrumb">, so it
   inherits all of that unless every property is put back. A class beats
   a bare element selector on specificity, so no !important is needed. */
.ent-bc {
  padding: 0;
  display: block;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
  position: static;
}

/* ── Base: breadcrumb bar above a hero (was .hero-breadcrumb-wrap) ── */
.ent-bc-wrap { background: var(--bg); padding: 16px 72px 0; }
.ent-bc { font-size: 12px; color: #6b7280; }
.ent-bc a { color: #6b7280; text-decoration: none; }
.ent-bc a:visited { color: #6b7280; }
.ent-bc a:hover { color: var(--navy); }
.ent-bc-sep { margin: 0 8px; }
.ent-bc-cur { color: var(--navy); }

@media (max-width: 768px) {
  .ent-bc-wrap { padding: 12px 20px 0; }
}

/* ── .is-boxed: white plate + hairline, for a light page with no hero
      gradient behind it (was .blog-breadcrumb). ────────────────────── */
.ent-bc-wrap.is-boxed {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 20px 72px;
}
.ent-bc-wrap.is-boxed .ent-bc { color: var(--muted); }
.ent-bc-wrap.is-boxed .ent-bc a { color: var(--muted); transition: color .2s; }
.ent-bc-wrap.is-boxed .ent-bc a:hover { color: var(--navy); }
.ent-bc-wrap.is-boxed .ent-bc-sep { opacity: .4; }
.ent-bc-wrap.is-boxed .ent-bc-cur { color: var(--navy); font-weight: 600; }

/* Side-gutter ramp for the blog-style pages. It must track the article
   containers (.blog-article-header / .blog-layout: 72 -> 36 -> 20), NOT
   the hero ramp above, or the breadcrumb drifts out of line with the
   copy beneath it between 640px and 1024px. Applies to both the boxed
   variant and the insight-post context, which share that gutter. */
@media (max-width: 1024px) {
  .ent-bc-wrap.is-boxed,
  .blog-hero-wrap .ent-bc-wrap { padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 640px) {
  .ent-bc-wrap.is-boxed,
  .blog-hero-wrap .ent-bc-wrap { padding-left: 20px; padding-right: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark contexts. The page never asks for these: the surrounding hero
   class selects them, so a template cannot forget to opt in.
   ═══════════════════════════════════════════════════════════════════ */

/* Services / industries / case studies / about / campaigns — the navy
   ramp hero. Breadcrumb sits on the exact colour the gradient starts
   at (0%) so the seam between them is invisible.
   Ported from inside-pages.css. */
body:has(.svc-hero-wrap) .ent-bc-wrap {
  background: #1a2857;
  padding-top: 20px;
  padding-bottom: 4px;
}
body:has(.svc-hero-wrap) .ent-bc,
body:has(.svc-hero-wrap) .ent-bc a,
body:has(.svc-hero-wrap) .ent-bc-cur { color: rgba(255,255,255,0.7); }
body:has(.svc-hero-wrap) .ent-bc a:hover { color: #ffffff; }

/* Insight posts — the gradient is owned by .blog-hero-wrap, so the
   breadcrumb goes fully transparent and only supplies its own spacing.
   Ported from inside-pages.css + the inline block in blog-post.ejs. */
.blog-hero-wrap .ent-bc-wrap {
  background: transparent;
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 16px;
}
.blog-hero-wrap .ent-bc,
.blog-hero-wrap .ent-bc a { color: rgba(255,255,255,0.7); }
.blog-hero-wrap .ent-bc a:hover { color: #ffffff; }
.blog-hero-wrap .ent-bc-sep,
.blog-hero-wrap .ent-bc-cur { color: rgba(255,255,255,0.75); opacity: 1; }

/* Labs — breadcrumb sits INSIDE the navy hero stage so the gradient
   runs edge to edge behind the floating nav pill. The large top
   padding is nav clearance. Ported from labs.css. */
.labs-page-hero .ent-bc-wrap {
  background: transparent;
  padding: 130px 40px 0;
  position: relative;
  z-index: 2;
}
.labs-page-hero .ent-bc,
.labs-page-hero .ent-bc a,
.labs-page-hero .ent-bc-cur { color: rgba(255,255,255,0.72); }
.labs-page-hero .ent-bc a:hover { color: #ffffff; }

@media (max-width: 768px) {
  .labs-page-hero .ent-bc-wrap { padding: 104px 20px 0; }
}

/* Career detail — the breadcrumb sits inside .contact-hero, which
   already supplies the navy-deep plate and its own padding. This
   replaces the inline rgba(255,255,255,.5) that was hand-applied to
   each link because .about-breadcrumb had no stylesheet at all. */
.contact-hero .ent-bc-wrap { background: transparent; padding: 0; }
.contact-hero .ent-bc,
.contact-hero .ent-bc a,
.contact-hero .ent-bc-cur { color: rgba(255,255,255,0.5); }
.contact-hero .ent-bc a:hover { color: #ffffff; }