/**
 * Component: Breadcrumbs
 * Navigation breadcrumbs with schema markup support
 */

/* @critical-start context: recipe,archive,blog */
.breadcrumbs {
  padding: var(--spacing-4) 0 var(--spacing-2) 0;
}

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.breadcrumbs-link {
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs-link:hover {
  color: var(--color-brand-600);
  text-decoration: underline;
}

.breadcrumbs-separator {
  color: var(--color-neutral-400);
  flex-shrink: 0;
}

.breadcrumbs-current {
  color: var(--color-neutral-900);
  font-weight: var(--font-weight-medium);
}
/* @critical-end */

/* Schema.org structured data support */
.breadcrumbs[itemscope] .breadcrumbs-link[itemprop="item"] {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .breadcrumbs {
    padding: var(--spacing-3) 0 var(--spacing-1) 0;
  }
}