/* =============================================================================
   breadcrumb.css — reusable breadcrumb trail
   Desktop only. Visibility (display: none → block at 1024px+) is owned by
   .breadcrumb in css/layout.css, which already provides the structural slot
   inside .content-area, above .page-main, on every inner page. This file
   owns everything else: typography, spacing, and interaction states.

   Structure — identical on every page, only the items change:

     <nav class="breadcrumb" aria-label="Breadcrumb">
       <ol class="breadcrumb__list">
         <li class="breadcrumb__item">
           <a class="breadcrumb__link" href="../index.html">Home</a>
         </li>
         <li class="breadcrumb__item">
           <a class="breadcrumb__link" href="collection.html">Collection</a>
         </li>
         <li class="breadcrumb__item">
           <span class="breadcrumb__current" aria-current="page">Bibliographie</span>
         </li>
       </ol>
     </nav>

   Rules for populating a page's trail:
     - Every crumb except the last is an <a class="breadcrumb__link">.
     - The last crumb — the current page — is a
       <span class="breadcrumb__current" aria-current="page">, not a link,
       so it can't be clicked, hovered, or tabbed to.
     - Separators are CSS-generated (::after on every item but the last),
       not literal "/" characters in the DOM. This keeps the accessibility
       tree clean — screen readers announce a plain list of page names
       instead of reading a slash between every item.
     - Home is omitted on index.html itself (leave the <ol> out entirely) —
       there is no trail to show on the root page.
   ============================================================================= */


/* ── List ────────────────────────────────────────────────────────────────────── */

.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  height: 1.25rem;                       /* 20px */
}

/* Space between the breadcrumb and whatever follows it — .page-header on
   pages that have one (css/components/page-header.css), which adds no
   top margin of its own so this single value is the full gap, not stacked.
   display: none/block (mobile/desktop) stays owned by layout.css — not
   duplicated here, so this file can never accidentally show it on mobile. */
.breadcrumb {
  margin-bottom: var(--space-8);         /* 32px */
}


/* ── Items ───────────────────────────────────────────────────────────────────── */

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: 0.875rem;                   /* 14px */
  font-weight: 400;                      /* Regular */
  line-height: 1.25rem;                  /* 20px — matches .breadcrumb__list height */
  color: var(--color-gray-100);
  white-space: nowrap;
}

/* Separator — CSS-generated "/", not DOM content.
   margin-inline puts equal space on both sides of the glyph. */
.breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-inline: var(--space-2);         /* 8px each side */
  color: var(--color-gray-100);
}


/* ── Link (previous levels — clickable) ─────────────────────────────────────── */

.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  /* Hover intentionally undefined here — inherits the project-wide
     a:hover { opacity: 0.8 } rule from globals.css. */
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-rose-400);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ── Current page (last item — not clickable) ───────────────────────────────── */

.breadcrumb__current {
  color: inherit;
  cursor: default;
}