/* =========================================================
   PERFRIG — UNIFIED PAGINATION
   Single source of truth for all pagination styling.
   Scoped entirely to .pagination — the wrapper output
   by perfrig_pagination() in inc/pagination.php.

   Do NOT add pagination styles to any other CSS file.
   Visual standard: Search results pagination design.

   Specificity note:
   Selectors use element+class (a.page-numbers, span.page-numbers)
   to achieve specificity (0,2,1), which beats the legacy
   .pagination .page-numbers rule in single-team-page.css
   at (0,2,0), regardless of stylesheet load order.
   !important is used only on border-radius, background, and
   border — the three properties where the legacy file
   directly conflicts with the intended values.
========================================================= */


/* ── Wrapper ─────────────────────────────────────────── */

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
    margin-bottom: 60px;
}


/* ── Items — all page-numbers elements ───────────────── */
/*
   Targets both <a> and <span> page-numbers explicitly.
   Specificity: (0,2,1) — beats legacy (0,2,0).
   !important on border-radius, background, border only.
*/

.pagination a.page-numbers,
.pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    background: #0f1217 !important;
    border: 1px solid #222 !important;
    border-radius: 8px !important;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
}


/* ── Hover (anchor links only — not spans) ───────────── */
/*
   Specificity: (0,3,1) — beats legacy a:hover at (0,3,0).
   !important on background and border-color.
*/

.pagination a.page-numbers:hover {
    background: #06D7F6 !important;
    color: #000;
    border-color: #06D7F6 !important;
}


/* ── Prev / Next — explicit rules ────────────────────── */
/*
   paginate_links() outputs class="prev page-numbers" and
   class="next page-numbers", so a.page-numbers already
   applies all shared styles. These rules:
   1. Override width: 38px → auto + min-width so text-based
      labels ("« Prev" / "Next »") are never clipped.
      Single-char arrows (← →) still render at 38px minimum.
   2. Provide a full style fallback for edge cases where a
      theme or plugin strips page-numbers from these links.
   Specificity: (0,2,1) — same as a.page-numbers; placed
   after it so width/padding win for prev/next only.
*/

.pagination a.prev,
.pagination a.next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: auto;
    min-width: 38px;
    padding: 0 12px;
    background: #0f1217 !important;
    border: 1px solid #222 !important;
    border-radius: 8px !important;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: 0.2s;
}

.pagination a.prev:hover,
.pagination a.next:hover {
    background: #06D7F6 !important;
    color: #000;
    border-color: #06D7F6 !important;
}


/* ── Current / active page ───────────────────────────── */
/*
   Specificity: (0,3,0) — beats legacy .current at (0,2,0).
   !important on background and border-color.
*/

.pagination .page-numbers.current {
    background: #06D7F6 !important;
    color: #000;
    border-color: #06D7F6 !important;
    font-weight: 700;
}


/* ── Dots separator ─────────────────────────────────── */
/*
   Specificity: (0,3,0) — no conflict in legacy file.
*/

.pagination .page-numbers.dots {
    opacity: 0.5;
    cursor: default;
}


/* ── Responsive — narrow viewports ──────────────────── */

@media (max-width: 600px) {

    .pagination {
        gap: 6px;
    }

    .pagination a.page-numbers,
    .pagination span.page-numbers {
        width: 32px;
        height: 32px;
    }

    .pagination a.prev,
    .pagination a.next {
        height: 32px;
        min-width: 32px;
        padding: 0 10px;
    }

}