/* ==========================================================================
   Devgun Family Law -- Chrome: breadcrumb trail
   Markup partner: templates/BreadcrumbsTemplate.ss (nav > ol, current
   item aria-current, CSS-generated separators).

   Restyled 2026-07-06 (Dave): subtle, smaller, no bold, "not so obvious",
   and tucked directly under the banner via the .breadcrumb-bar wrapper
   (TopLevelPage + blog listing render it inside that slim strip; blog
   posts + profiles, which have no hero banner, render the bare
   .detail-breadcrumb at the top of their content). Muted forest-green
   links, no default underline (underline on hover for affordance),
   light separators. Tap height ~30px clears WCAG 2.5.8 AA (24px);
   deliberately below the 44px enhanced target since Dave asked for a
   quiet secondary nav, not a primary control.
   ========================================================================== */

/* Slim strip that hugs the underside of the hero banner. Full-bleed
   white; the inner matches the page content measure. */
.breadcrumb-bar {
  background: var(--color-white);
  padding: 0.625rem var(--space-page-gutter);
}

.breadcrumb-bar__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.detail-breadcrumb {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* When rendered outside the bar (blog post, profile) it still needs a
   little breathing room below itself. */
.breadcrumb-bar .detail-breadcrumb {
  margin: 0;
}

.detail-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.detail-breadcrumb__list li + li::before {
  content: "/";
  display: inline-block;
  margin: 0 0.4375rem;
  color: rgba(32, 49, 52, 0.35);
}

.detail-breadcrumb__link {
  color: rgba(46, 76, 81, 0.75);
  text-decoration: none;
  display: inline-block;
  /* Tap target: 0.5rem padding alone is ~30px tall (see file header) --
     enough to clear WCAG 2.5.8 AA but short of a comfortable 44px touch
     target. Extra padding + an equal negative margin grows only the
     tappable box; the margin box (and so the visible trail's rhythm)
     is unchanged, keeping the "quiet secondary nav" look intact. */
  padding: 0.8rem 0;
  margin: -0.3rem 0;
  white-space: nowrap;
  /* Override the global a{} token style (base.css sets every anchor to
     --fs-links 18px / --fw-bold): breadcrumb links are quiet secondary
     nav, so pull them back to the trail's own small, normal weight. */
  font-size: inherit;
  font-weight: 400;
}

@media (hover: hover) {
  .detail-breadcrumb__link:hover {
    color: var(--color-green-forest);
    text-decoration: underline;
  }
}

.detail-breadcrumb__link:focus {
  color: var(--color-green-forest);
  text-decoration: underline;
}

/* Same tap-target padding/margin envelope as .detail-breadcrumb__link
   (2026-08-04 team report: baseline wobble on the mobile profile trail
   "Home / Our Team / Ajay Devgun"). Root cause: the current-page item
   is a bare li with no nested <a>, so unlike its linked siblings it
   carried no padding/margin -- and the links' own -0.3rem top margin
   (part of the tap-target trick above) shifts THEIR baseline-alignment
   reference point as flex items, while the current item's did not.
   Giving every crumb the identical envelope restores one consistent
   reference point so align-items: baseline lines them all up cleanly.
   li is already block-level (and blockified as a flex item regardless
   of its own display value), but display is set explicitly here to
   mirror .detail-breadcrumb__link's declared properties exactly. */
.detail-breadcrumb__current {
  color: rgba(32, 49, 52, 0.55);
  display: inline-block;
  padding: 0.8rem 0;
  margin: -0.3rem 0;
}

/* Blog post + profile render the bare trail at the top of content (no
   banner to hug) -- give it a touch of space below. */
.detail-container > .detail-breadcrumb,
.profile-container > .detail-breadcrumb {
  margin-bottom: var(--space-gap);
}

/* Narrow viewports: clip ancestor links if a long title crowds the
   line -- never the current page (it may wrap instead). */
@media (max-width: 575.98px) {
  .detail-breadcrumb__list li:not(:last-child) .detail-breadcrumb__link {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}