/* =================================================================
   PAGINATION
   Circled arrow Previous / Next for Elementor pagination.
   Loaded by inc/enqueue.php.
   ================================================================= */

/* ---------------------------------------------------------------
   Add  icon-pagination  to the Loop Grid (or Posts) widget. The
   script (assets/js/pagination.js) swaps the Previous / Next text for
   the kit's ipg-arrow-left / ipg-arrow-right; this draws the circles.
   Page numbers keep their Elementor Style-tab settings.

   Tune per placement (Elementor Custom CSS on the widget):
     --pg-size        circle diameter            (40px)
     --pg-icon        arrow size                 (16px)
     --pg-gap         space between arrows and numbers (32px)
     --pg-color       circle + arrow colour      (cobalt)
   Hover fills the circle; on the first/last page the unavailable
   arrow is shown faded (Elementor outputs it as a span, not a link).
--------------------------------------------------------------- */
.icon-pagination .elementor-pagination .page-numbers.prev,
.icon-pagination .elementor-pagination .page-numbers.next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pg-size, 40px);
    height: var(--pg-size, 40px);
    padding: 0;
    border: 1.5px solid var(--pg-color, var(--ipg-cobalt));
    border-radius: 999px;
    color: var(--pg-color, var(--ipg-cobalt)) !important;
    font-size: 0;               /* hides the text before the icon lands */
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.icon-pagination .elementor-pagination .page-numbers.prev {
    margin-inline-end: var(--pg-gap, 32px);
}
.icon-pagination .elementor-pagination .page-numbers.next {
    margin-inline-start: var(--pg-gap, 32px);
}
.icon-pagination .elementor-pagination .page-numbers.prev i,
.icon-pagination .elementor-pagination .page-numbers.next i {
    font-size: var(--pg-icon, 16px);
    line-height: 1;
}
.icon-pagination .elementor-pagination a.page-numbers.prev:hover,
.icon-pagination .elementor-pagination a.page-numbers.next:hover,
.icon-pagination .elementor-pagination a.page-numbers.prev:focus-visible,
.icon-pagination .elementor-pagination a.page-numbers.next:focus-visible {
    background-color: var(--pg-color, var(--ipg-cobalt));
    color: #fff !important;
}
/* unavailable direction (first / last page) */
.icon-pagination .elementor-pagination span.page-numbers.prev,
.icon-pagination .elementor-pagination span.page-numbers.next {
    opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
    .icon-pagination .elementor-pagination .page-numbers.prev,
    .icon-pagination .elementor-pagination .page-numbers.next { transition: none; }
}