/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* pagination: */

.blog-posts ul.pagination,
.pagination-wrapper ul.pagination {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.blog-posts ul.pagination li.page-item,
.pagination-wrapper ul.pagination li.page-item {
    width: 40px;
    height: 40px;
}

.blog-posts ul.pagination li.page-item a.page-link,
.pagination-wrapper ul.pagination li.page-item a.page-link {
    width: 100%;
    height: 100%;

    border: 2px solid var(--blue-dk);
    border-radius: var(--box-border-radius-sm);
    background: var(--white);

    font-family: "Cachet";
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-dk);

    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: all 0.2s ease;
}

/* Hover follows the blog-single pagination: blue at rest, purple on hover. */
.blog-posts ul.pagination li.page-item a.page-link:hover,
.pagination-wrapper ul.pagination li.page-item a.page-link:hover {
    border-color: var(--purple-dk);
    background: var(--purple-dk);
    color: var(--white);
}

/* Current page: solid brand blue — flat tokens, no gradient. */
.blog-posts ul.pagination li.page-item.active a.page-link,
.pagination-wrapper ul.pagination li.page-item.active a.page-link {
    border-color: var(--blue-dk);
    background: var(--blue-dk);
    color: var(--white);
}