/* ============================================================================
   BREADCRUMBS COMPONENT

   Compact navigation trail emitted by Breadcrumbs.astro on
   help, feature, and legal pages.

   Required HTML structure:
     <nav class="breadcrumbs" aria-label="Breadcrumb">
       <ol>
         <li><a href="/">Home</a><span class="breadcrumbs__sep">/</span></li>
         <li><span>Current page</span></li>
       </ol>
     </nav>
   ============================================================================ */

/* Toolbar layout: breadcrumb on the left, share button on the right.
   When the share button is absent the breadcrumb still aligns left. */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

/* Separator emitted as a CSS pseudo-element on every item after the
   first. This yields symmetric spacing — 0.5rem before "/" and
   0.5rem after — without the asymmetry that resulted from putting
   the separator inside the preceding <li> alongside flex gap. */
.breadcrumbs li:not(:first-child)::before {
  content: '/';
  margin: 0 0.5rem;
  color: var(--text-muted, var(--text-secondary));
}

.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

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