/* ==========================================================================
   BLOG FILTERS COMPONENT
   Used in: blog.html
   Note: Uses .page-header from titles.css for title
   ========================================================================== */

.blog-filters {
  padding: 0 1.5rem 1.5rem;
}

.blog-filters__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem; 
  margin-bottom: 4rem; 
}

.filter-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.filter-btn--active {
  background-color: var(--color-primary);
  color: var(--color-bg-light);
}

.filter-btn--active:hover {
  background-color: var(--color-primary-90);
}

.filter-btn--inactive {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-20);
}

.filter-btn--inactive:hover {
  background-color: var(--color-primary-5);
  border-color: var(--color-primary-30);
}