/* public/css/components/breadcrumb.css */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 5px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--color-black);
}

.breadcrumb .separator {
  color: var(--color-border);
}

.breadcrumb .current {
  color: var(--color-black);
  font-weight: 500;
}

@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .breadcrumb {
    display: none;
  }
}