/* ============================================================================
 * File: css/components/pagination.css
 * Theme: portalv4.0
 * Criado: 2026-05-31 — padronização da paginação do tema.
 * ----------------------------------------------------------------------------
 * COMPONENTE ÚNICO de paginação. Visual canônico = o da página de busca
 * (.search-pagination): número atual com sublinhado dourado, hover dourado,
 * "← Anterior" / "Próxima →" em itálico serifado, sem caixa preta/dourada.
 *
 * IMPORTANTE — cores LITERAIS, não var():
 *   As páginas do tema definem cada uma o seu próprio :root e as var() CONFLITAM
 *   (ex.: --accent-red é dourado #9A7209 na busca e vermelho #A51C30 em notícias).
 *   Como este componente é carregado global e usado em qualquer template, ele
 *   NÃO pode depender dessas var() — senão muda de cor conforme a página. Por
 *   isso os valores abaixo são fixos (espelham os tokens da busca).
 *
 * Markup esperado (gerado por unileao_pagination() em functions.php, idêntico
 * ao the_posts_pagination()):
 *   .pagination-wrap > nav.navigation.pagination > .nav-links > a|span.page-numbers
 *
 * Alias .search-pagination: mantém a página de busca (que usa o wrapper antigo)
 * renderizando pelo mesmo componente.
 * ============================================================================ */

.pagination-wrap,
.search-pagination {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #d8d3c5;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

/* Linha de links — o the_posts_pagination/paginate_links envolve tudo em .nav-links */
.pagination-wrap .nav-links,
.search-pagination .nav-links {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Cada número/seta */
.pagination-wrap .page-numbers,
.search-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: .05em;
    font-weight: 600;
    transition: color .2s;
}

.pagination-wrap .page-numbers:hover,
.search-pagination .page-numbers:hover {
    color: #9A7209;
}

/* Página atual — sublinhado dourado */
.pagination-wrap .page-numbers.current,
.search-pagination .page-numbers.current {
    color: #1a1a1a;
    border-bottom: 2px solid #9A7209;
}

.pagination-wrap .page-numbers.dots,
.search-pagination .page-numbers.dots {
    color: #999;
}

/* Setas "← Anterior" / "Próxima →" — itálico serifado */
.pagination-wrap .page-numbers.prev,
.pagination-wrap .page-numbers.next,
.search-pagination .page-numbers.prev,
.search-pagination .page-numbers.next {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 400;
    padding: 0 .75rem;
}

/* Esconde o <h2 class="screen-reader-text"> que o the_posts_pagination injeta
   — fica acessível pra leitor de tela, mas invisível no layout. */
.pagination-wrap .screen-reader-text,
.search-pagination .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile */
@media (max-width: 600px) {
    .pagination-wrap .page-numbers,
    .search-pagination .page-numbers {
        min-width: 32px;
        height: 32px;
        padding: 0 6px;
    }
}