/* ==========================================================================
   Hierarchy - Parent/Child Resource Display (Compact Tag Style)
   ========================================================================== */

/* Compact hierarchy section with inline label and tags */
.hierarchy-compact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Override content-section spacing for compact hierarchy */
.content-section.hierarchy-compact {
  margin-bottom: var(--space-sm);
}

.hierarchy-compact strong {
  color: var(--warm-grey-dark);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  white-space: nowrap;
  padding-top: 0.25rem;
}

/* Container for multiple hierarchy tags */
.hierarchy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  flex: 1;
  min-width: 0; /* Allow shrinking below content width */
}

/* Individual hierarchy tag (inline badge/chip style) */
.hierarchy-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--parchment-300);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--warm-grey-dark);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.hierarchy-tag:hover {
  background-color: var(--parchment-400);
  border-color: var(--parchment-500);
  color: var(--campaign-primary-color, var(--warm-grey-dark));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hierarchy-tag-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Children count badge */
.hierarchy-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  background-color: rgba(var(--warm-grey-dark-rgb, 74, 66, 53), 0.15);
  color: var(--warm-grey-dark);
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* Differentiate parent vs children with opacity */
.hierarchy-tag-child .hierarchy-tag-icon {
  opacity: 0.7;
}