/*
 * Structural rules for Elementor's loop-grid pagination.
 *
 * The export carried the page-scoped rules (spacing and the `color` for
 * `.page-numbers:not(.dots)`) but not the core stylesheet that turns each number into a
 * box — so the numbers rendered as bare dark-navy text, invisible against the
 * `about_section` background they sit on.
 *
 * Only layout/box treatment lives here; the per-page colour rules in
 * pages/resources.css still win for the inactive links.
 */

.elementor-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 4px;
    background: #fff;
    color: var(--e-global-color-primary, #002e3f);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.elementor-pagination a.page-numbers:hover,
.elementor-pagination .page-numbers.current {
    background: var(--e-global-color-secondary, #ebbc00);
    color: var(--e-global-color-primary, #002e3f);
}

/* Elementor renders a screen-reader-only "Page" prefix inside every number. */
.elementor-pagination .elementor-screen-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}