/* ════════════════════════════════════════════════════════════════════════
   11-pagination.css — číslované stránkování (blog, archivy, hledání, WC)

   Markup: voala_pagination() v includes/template-tags.php
   (paginate_links s type=list → nav.vo-pagination > ul.page-numbers).

   Jazyk webu: pill tvary jako tlačítka, aktivní stránka = červený pill,
   Novější/Starší jako obrysová varianta.
   ════════════════════════════════════════════════════════════════════════ */

.vo-pagination {
  margin-top: clamp(42.4px, calc(25.69px + 4.286vw), 87.4px);
  font-family: var(--font-base);
}

.vo-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-pagination .page-numbers li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-pagination .page-numbers li::before,
.vo-pagination .page-numbers li::marker { content: none; }

/* Číslo stránky */
.vo-pagination a.page-numbers,
.vo-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--black-voala);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.vo-pagination a.page-numbers:hover {
  border-color: var(--red-voala);
  color: var(--red-voala);
}

/* Aktivní stránka */
.vo-pagination span.page-numbers.current {
  background: var(--red-voala);
  color: var(--white-voala);
}

/* Výpustka */
.vo-pagination span.page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  color: var(--muted);
}

/* Novější / Starší */
.vo-pagination a.page-numbers.prev,
.vo-pagination a.page-numbers.next {
  padding: 0 18px;
  border-color: var(--red-voala);
  color: var(--red-voala);
}
.vo-pagination a.page-numbers.prev:hover,
.vo-pagination a.page-numbers.next:hover {
  background: var(--red-voala);
  color: var(--white-voala);
}

.vo-pagination a.page-numbers:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}