/* Sitewide breadcrumb strip (injected by build.mjs directly under the header).
   Palette matches the shared header/footer: #0b0e11 ink, #e5b020 accent.

   It sits above the page's own hero rather than inside it because the heroes
   differ per template — the theme title banner, the dark /service/ hero, the
   hand-built /platform/ one — and a strip that moves around between sections
   stops being the fixed landmark a breadcrumb is supposed to be. */

.yv-crumbs {
  background: #fff;
  border-bottom: 1px solid #e8eaee;
}

/* Selector doubled deliberately: the legacy theme sets a bottom margin on
   every ol and li at equal specificity, which won it the cascade and left the
   strip with 30px of dead space under the trail. */
.yv-crumbs .yv-crumbs__list {
  max-width: 1180px;
  margin: 0 auto;
  padding: 13px 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  line-height: 1.5;
}

.yv-crumbs .yv-crumbs__list li {
  margin: 0;
  display: flex;
  align-items: center;
  color: #5b6472;
}

/* Decorative separator: CSS content, so the list reads as a list rather than
   as "Home slash Website slash Website Design". */
.yv-crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: #b3bac6;
}

.yv-crumbs a {
  color: #5b6472;
  text-decoration: none;
  text-underline-offset: 4px;
}

.yv-crumbs a:hover,
.yv-crumbs a:focus {
  color: #0b0e11;
  text-decoration: underline;
}

.yv-crumbs a:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 4px;
  border-radius: 2px;
}

.yv-crumbs [aria-current="page"] {
  color: #0b0e11;
  font-weight: 600;
}

@media (max-width: 650px) {
  .yv-crumbs .yv-crumbs__list { padding: 11px 18px; font-size: 12.5px; }
  .yv-crumbs li + li::before { margin: 0 8px; }
}