/* ============================================
   BREADCRUMBS PARTIAL STYLES
   Purpose: Navigation breadcrumbs component
   Used with: views/partials/breadcrumbs.ejs
   Mobile-first approach
   ============================================ */

/* ============================================
   BREADCRUMBS CONTAINER
   ============================================ */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: var(--font-size-small);
  color: var(--text-light);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .breadcrumbs {
    padding: 16px 0;
    font-size: var(--font-size-body);
    gap: 10px;
  }
}

/* ============================================
   BREADCRUMB LINKS
   ============================================ */

.breadcrumbs a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-weight: 500;
}

@media (min-width: 768px) {
  .breadcrumbs a {
    font-weight: 600;
  }
}

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

@media (min-width: 768px) {
  .breadcrumbs a:hover {
    color: var(--primary-blue-hover);
  }
}

/* ============================================
   SEPARATOR
   ============================================ */

.breadcrumbs .separator {
  color: var(--text-lighter);
  font-weight: 400;
  user-select: none;
}

@media (min-width: 768px) {
  .breadcrumbs .separator {
    color: var(--text-light);
  }
}

/* ============================================
   CURRENT PAGE (NOT CLICKABLE)
   ============================================ */

.breadcrumbs .current {
  color: var(--text-dark);
  font-weight: 600;
  cursor: default;
}

@media (min-width: 768px) {
  .breadcrumbs .current {
    font-weight: 700;
  }
}

/* ============================================
   TRUNCATE LONG BREADCRUMBS (MOBILE)
   ============================================ */

.breadcrumbs .current {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .breadcrumbs .current {
    max-width: none;
    white-space: normal;
  }
}