/**
 * Shared pagination component.
 *
 * Used by: archive-case-studies, how-we-can-help (AJAX).
 * Matches the HTML generated both by WordPress the_posts_pagination()
 * and by the JS renderPagination() helper in articles-search.js.
 */

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  margin-top: 64px;

  @media (max-width: 768px) {
    margin-top: 40px;
  }
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 12px;
  color: var(--color-black, #050505);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination .page-numbers.current {
  background-color: var(--color-blue-alpha-600-80, #10228DCC);
  color: var(--color-white, #ffffff);
}

.pagination .page-numbers:not(.prev):not(.next):not(.dots):not(.current):hover {
  background-color: var(--color-blue-alpha-600-80, #10228DCC);
  color: var(--color-white, #ffffff);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 16px;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-blue-alpha-600-80, #10228DCC);
}

.pagination .page-numbers.prev i,
.pagination .page-numbers.next i {
  font-size: 20px;
  color: var(--color-blue-600, #10228d);
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
  background-color: transparent;
  color: var(--color-blue-600-50, #10228D80);
}

.pagination .page-numbers.dots {
  background-color: transparent;
  cursor: default;
  pointer-events: none;
}