/* Breadcrumb navigation */
nav[role="navigation"][aria-labelledby="system-breadcrumb"] {
  margin: 1rem 0;
  padding: 0;
}

nav[role="navigation"][aria-labelledby="system-breadcrumb"] ol {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.75rem;
}

nav[role="navigation"][aria-labelledby="system-breadcrumb"] li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Add separator after each item except the last */
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:not(:last-child)::after {
  content: '›';
  margin-left: 0.75rem;
  color: #9ca3af;
  font-size: 1.1em;
  font-weight: 300;
}

/* First two breadcrumb links - darker color */
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:nth-child(1) a,
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:nth-child(2) a {
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:nth-child(1) a:hover,
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:nth-child(2) a:hover {
  color: #1f2937;
  text-decoration: underline;
}

/* Last breadcrumb item - lighter color (current page) */
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:last-child a {
  color: #9ca3af;
  text-decoration: none;
  font-weight: 400;
}

/* Alternative: If you want a different separator */
nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:not(:last-child)::after {
/* Solid arrow */
  /* content: '▸';      */
/* Right arrow */
  /* content: '→';      */
/* Mathematical bracket */
  /* content: '⟩';      */
/* Simple slash */
  /* content: '/';      */
}

/* Responsive - stack on very small screens */
@media (max-width: 480px) {
  nav[role="navigation"][aria-labelledby="system-breadcrumb"] ol {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  nav[role="navigation"][aria-labelledby="system-breadcrumb"] li:not(:last-child)::after {
    margin-left: 0.5rem;
  }
}