breadcrumb-the-shire/web/css/components/app-breadcrumb.css

@layer components {
  /*
   * Breadcrumb navigation — WAI-ARIA breadcrumb pattern with CSS-only separators.
   *
   * Self-contained: explicitly resets inherited shell nav/ol/li rules
   * (app-shell.css lines 2844-2956) to avoid layout side-effects.
   */
  .app-breadcrumb {
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }

  .app-breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    min-width: 0;
  }

  .app-breadcrumb li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-width: 0;
    flex-shrink: 1;
  }

  .app-breadcrumb li:first-child,
  .app-breadcrumb li:last-child {
    flex-shrink: 0;
  }

  .app-breadcrumb li::before {
    content: none;
  }

  .app-breadcrumb li + li::before {
    content: "/";
    color: var(--app-muted-color);
    font-size: 0.75em; /* em-relative sizing — intentional */
    margin-inline-end: 0.375rem;
    pointer-events: none;
    flex-shrink: 0;
  }

  .app-breadcrumb a,
  .app-breadcrumb [aria-current="page"] {
    display: inline-block;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  .app-breadcrumb a {
    margin: 0;
    padding: 0;
    color: var(--app-muted-color);
    text-decoration: none;
    border-radius: var(--app-border-radius);
    transition: color var(--app-transition);
  }

  .app-breadcrumb a:hover {
    color: var(--app-primary-hover);
    text-decoration: underline;
    text-underline-offset: var(--app-text-underline-offset);
  }

  .app-breadcrumb a:focus-visible {
    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
    color: var(--app-contrast);
    outline: var(--app-outline-width) solid var(--app-primary-focus);
    outline-offset: 0.125rem;
  }

  .app-breadcrumb [aria-current="page"] {
    color: var(--app-color);
    font-weight: var(--font-medium);
    pointer-events: none;
  }

  /* Breadcrumb is desktop-only chrome — the hamburger drawer owns navigation
     below md. Must live in the components layer to override .app-breadcrumb's
     own display:flex (cross-layer specificity does not apply). */
  @media (max-width: 767px) {
    .app-breadcrumb {
      display: none;
    }
  }
}