/* ===================================================
   PAGINATION (.pagination)
   Handle: militra-pagination. Deps: none.
   Loaded on: search results, every blog listing, and the single post
   (wp_link_pages output, .militra-post-pages).

   Lifted out of search.css (the .pagination block + its max-480 shrink) so the
   search pager and the blog pager are ONE component and stay pixel-identical.
   Retokenised on the way out: search.css's hard-coded #e6e8ec hairline is now
   var(--color-neutral-200, #e5e7eb), matching the rest of the site, and every
   var() carries a hard-coded fallback (search.css predates that convention).

   The markup is WP's own, from the_posts_pagination() / paginate_links():
     <nav class="navigation pagination"><div class="nav-links">
       <a class="prev page-numbers">…</a> <a class="page-numbers">1</a>
       <span class="page-numbers current">2</span>
       <span class="page-numbers dots">…</span> <a class="next page-numbers">…</a>
     </div></nav>

   NO OTHER STYLESHEET MAY RESTYLE THE PAGER. Consumers may only add outer
   spacing (e.g. blog-archive.css's `.militra-blog … > .pagination{margin-top}`).

   ⚠ FLAG TO OWNER (do NOT fix here): `.page-numbers.current` is white on
   #ff7544 ≈ 2.6:1, an AA failure inherited verbatim from search.css. It must
   be fixed for search and blog TOGETHER, in its own run — changing it here
   alone would silently restyle the live search page.
   =================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2, 0.5rem);
    margin-top: var(--spacing-8, 2rem);
    padding-top: var(--spacing-6, 1.5rem);
    border-top: 1px solid var(--color-neutral-200, #e5e7eb);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-2, 0.5rem);
    align-items: center;
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--border-radius-sm, 4px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #777e90);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
    border-color: var(--color-primary, #ff7544);
    color: var(--color-primary, #ff7544);
}

.pagination .page-numbers:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
}

.pagination .page-numbers.current {
    background: var(--color-primary, #ff7544);
    border-color: var(--color-primary, #ff7544);
    color: #ffffff;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
}

.pagination .page-numbers svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------------------------------------------------
   RESPONSIVE
   --------------------------------------------------- */
@media (max-width: 480px) {
    .pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
        font-size: var(--font-size-sm, 0.875rem);
    }
}

/* ---------------------------------------------------
   REDUCED MOTION — the hover colour survives; only the transition dies.
   --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pagination .page-numbers {
        transition: none;
    }
}