/* ========================================
   Pagination
   - Shared list-page pagination control
   ======================================== */

.pagination {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 40px 0 0;
}

/* Hidden modifier — overrides the flex display when JS toggles visibility */
.pagination--hidden {
  display: none !important;
}

.pagination__numbers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pagination__page,
.pagination__prev,
.pagination__next {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--allied-blue);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  /* Reset browser defaults */
  appearance: none;
  -webkit-appearance: none;
}

.pagination__prev,
.pagination__next {
  padding: 0 14px;
  gap: 6px;
}

.pagination__page:hover,
.pagination__prev:not([disabled]):hover,
.pagination__next:not([disabled]):hover {
  border-color: var(--allied-blue);
  background-color: rgba(5, 93, 151, 0.06);
  color: var(--allied-blue-hover);
}

/* Explicit green outline (not low-alpha blue ring) so the indicator clears 3:1 contrast against the white button face and surrounding page. */
.pagination__page:focus-visible,
.pagination__prev:focus-visible,
.pagination__next:focus-visible {
  outline: 2px solid var(--allied-green);
  outline-offset: 2px;
  border-color: var(--allied-blue);
}

.pagination__page--current,
.pagination__page--current:hover {
  background-color: var(--allied-blue);
  border-color: var(--allied-blue);
  color: #fff;
  cursor: default;
}

.pagination__page[disabled],
.pagination__prev[disabled],
.pagination__next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination__page[disabled]:hover,
.pagination__prev[disabled]:hover,
.pagination__next[disabled]:hover {
  border-color: #ccc;
  background-color: #fff;
  color: var(--allied-blue);
}

.pagination__ellipsis {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: #999;
  padding: 0 8px;
  line-height: 40px;
  user-select: none;
}

@media (max-width: 768px) {
  .pagination {
    gap: 6px;
  }

  .pagination__numbers {
    gap: 6px;
  }

  .pagination__page,
  .pagination__prev,
  .pagination__next {
    min-width: 36px;
    height: 36px;
  }

  .pagination__prev,
  .pagination__next {
    padding: 0 10px;
    font-size: 0; /* hide "Prev"/"Next" text nodes; arrow glyphs restored below */
  }

  .pagination__prev::before {
    content: '\2190' / ''; /* ← */
    font-size: 1rem;
  }

  .pagination__next::after {
    content: '\2192' / ''; /* → */
    font-size: 1rem;
  }

  .pagination__ellipsis {
    line-height: 36px;
    padding: 0 6px;
  }
}

@media (max-width: 480px) {
  .pagination {
    margin-top: 28px;
  }

  /* Keep first + current + last page buttons visible; hide the middle neighbors.
     Result at 320px: [←] [1] … [current] … [N] [→] */
  .pagination__page:not(.pagination__page--current):not(:first-of-type):not(:last-of-type) {
    display: none;
  }
}