/**
 * Hierarchical facets styling
 * Provides a clean, accessible interface for parent/child category filtering
 */

/* Root list */
.facets-hierarchical-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px gap between items */
}

/* All hierarchy items */
.facets-hierarchical-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Remove default facet item margin */
.facets-hierarchical-item.m-form-element__header {
  margin-bottom: 0.5rem;
}

/* Parent items (have children) */
.facets-hierarchical-item--parent {
  font-weight: 500;
}

/* Nested child lists - indent and add visual guide */
.facets-hierarchical-list--nested {
  margin-top: 0.375rem;
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-gray-200, #e5e7eb);
  flex-basis: 100%;
  order: 2;
}

/* Remove nested details styling conflicts */
.facets-hierarchical-list--nested .m-details {
  margin: 0;
}

.facets-hierarchical-list--nested .m-details__content {
  padding: 0;
}

/* Hide nested details summary (we don't need double headers) */
.facets-hierarchical-list--nested .m-details__summary {
  display: none;
}

/* Show nested details as open by default */
.facets-hierarchical-list--nested .m-details[open] .m-details__content {
  display: block;
}

/* Leaf items (no children) */
.facets-hierarchical-item--leaf {
  font-weight: 400;
}

/* Active category styling */
.facets-hierarchical-item--active .facet-item__value,
.facets-hierarchical-item .is-active .facet-item__value {
  font-weight: 600;
  color: var(--color-primary-600, #4f46e5);
}

/* Ensure checkbox is checked when active */
.facets-hierarchical-item--active input[type="checkbox"],
.facets-hierarchical-item .is-active input[type="checkbox"] {
  /* Drupal already handles checked state via HTML, this is just visual reinforcement */
}

/* Active checkbox label styling */
.facets-hierarchical-item--active .m-form-element__label,
.facets-hierarchical-item .is-active .m-form-element__label {
  font-weight: 600;
}

/* Improve checkbox spacing and alignment */
.facets-hierarchical-item .m-form-element__children {
  order: -1; /* Place checkbox before label */
  flex-shrink: 0;
}

/* Adjust label text to align better */
.facets-hierarchical-item .m-form-element__label {
  flex: 1;
  padding-top: 0.25rem; /* Align with checkbox center */
  order: 0;
}

/* Hide the link (Facets uses it for AJAX) */
.facets-hierarchical-item > a {
  order: 1;
  flex-basis: 100%;
}

.facets-hierarchical-item .facet-item__value {
  display: inline-block;
  line-height: 1.5;
}

/* Parent/child visual differentiation */
.facets-hierarchical-item--parent > .m-form-element--label-inline .facet-item__value {
  font-size: 1rem;
}

.facets-hierarchical-item--leaf .facet-item__value {
  font-size: 0.9375rem;
  color: var(--color-gray-700, #374151);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .facets-hierarchical-list--nested {
    margin-left: 1.5rem;
    padding-left: 0.75rem;
  }

  /* Smaller font for better fit on mobile */
  .facets-hierarchical-item--leaf .facet-item__value {
    font-size: 0.875rem;
  }
}