/* ============================================================
   breadcrumbs.css — LegiList breadcrumb trail

   Opt-in: a page sets $breadcrumb_style = 'll' before including
   nav.php, which adds .ll-breadcrumbs-v2 and loads this file in
   place of the inline block in includes/breadcrumbs.php. Pages that
   do not opt in are untouched.

   Two things it fixes over the inline version:

   1. Alignment. The old rule used its own max-width and left padding
      per route, which left the trail out of step with the page under
      it. This measures itself with --ll-wrap, the same token the
      page uses, so the first crumb sits on the page's left edge.

   2. Colour. Nothing here is a hard-coded hue. Links take
      --ll-accent, so the trail carries whichever silo it is in. The
      fallbacks let it render correctly on pages that have not
      adopted legilist.css yet.
   ============================================================ */

.ll-breadcrumbs-v2 {
  width: 100%;
  margin: 14px auto -16px;
  padding: 0;
}

.ll-breadcrumbs-v2 .ll-breadcrumbs-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  width: var(--ll-wrap, min(1180px, 100% - 48px));
  /* the original include's style block targets .ll-breadcrumbs-inner
     unscoped and caps it at 1120px; override it explicitly so the two
     can coexist while sections move across one at a time */
  max-width: none;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--ll-font, "Segoe UI", system-ui, -apple-system, sans-serif);
  font-size: 0.84rem;
  line-height: 1.2;
}

.ll-breadcrumbs-v2 .ll-breadcrumbs-inner > li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* The separator is drawn here rather than marked up, so it is not a
   list item and is never announced. A path separator rather than a
   chevron: it reads as a route, and sits quieter between the two
   weights either side of it. */
.ll-breadcrumbs-v2 .ll-breadcrumbs-inner > li + li::before {
  content: "/";
  margin: 0 9px;
  color: var(--ll-line-strong, #cfd5dd);
  font-weight: 400;
}

/* Where you came from is quiet. No pill, no background: the trail
   should not look like a row of controls. */
.ll-breadcrumbs-v2 .ll-breadcrumbs-inner a {
  padding: 2px 0;
  color: var(--ll-ink-3, #5d6b7a);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.14s ease;
}

.ll-breadcrumbs-v2 .ll-breadcrumbs-inner a:hover {
  background: none;
  color: var(--ll-accent, #1c335f);
  text-decoration: none;
}

/* Where you are now takes the silo colour and a marker rule beneath
   it — the same short accent rule the masthead and the section heads
   use, so the trail belongs to the page rather than floating above it. */
.ll-breadcrumbs-v2 .ll-breadcrumbs-inner .current {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  color: var(--ll-accent, #1c335f);
  font-weight: 600;
  line-height: 1.2;
}

.ll-breadcrumbs-v2 .ll-breadcrumbs-inner .current::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  background: var(--ll-accent, #1c335f);
}

/* long trailing labels (an article title, a person's name) are
   truncated rather than allowed to push the trail onto a second line */
.ll-breadcrumbs-v2 .ll-breadcrumbs-inner .crumb-label {
  display: inline-block;
  max-width: 380px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

@media (max-width: 640px) {
  .ll-breadcrumbs-v2 .ll-breadcrumbs-inner {
    font-size: 0.8rem;
  }

  .ll-breadcrumbs-v2 .ll-breadcrumbs-inner > li + li::before {
    margin: 0 5px;
  }

  .ll-breadcrumbs-v2 .ll-breadcrumbs-inner .crumb-label {
    max-width: 170px;
  }
}