/* ==========================================================================
   Pagination Navigation CSS (Numbers)
   ========================================================================== */

.pagination {
    margin: 40px auto;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Garante estabilidade no mobile */
    gap: 8px;        /* Espaço entre os números */
}

/* Ocultar o Header H2 padrão do WordPress para leitores de tela */
.pagination .screen-reader-text {
    display: none;
}

/* Estilo padrão para os números e links (a) e (span) */
.pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background-color: var(--color-surface);
    color: var(--color-text-main);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Hover nos números (exeto o atual) e nas reticências "..." */
.pagination a.page-numbers:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Página atual / Ativa */
.pagination .current {
    background-color: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
    cursor: default;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Reticências (...) quando houver muitas páginas */
.pagination .dots {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0 5px;
    min-width: auto;
    color: var(--color-text-muted);
}