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: block;
    justify-content: initial;
    overflow: initial;
    margin-bottom: 0.375rem;
    font-size: var(--text-xs);
    line-height: var(--app-line-height);
  }

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

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

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

  .app-breadcrumb li + li::before {
    content: "/";
    color: var(--app-muted-color);
    font-size: 0.75em;
    margin-inline-end: 0.375rem;
    pointer-events: none;
  }

  .app-breadcrumb a {
    display: inline;
    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: 500;
    pointer-events: none;
  }
}