/* Paginacja. Jeden wyglad dla terminarza, wynikow wyszukiwania, bloga
   i archiwow. Markup wychodzi z IRender::pagination(), a na terminarzu
   trafia tam takze przez odpowiedz AJAX, dlatego klasa .wp-pagenavi
   zostaje - trzyma sie jej assets/js/schedule-ajax.js. */

.wp-pagenavi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2rem 0;
    padding: 1rem 0
}

.wp-pagenavi .pages {
    margin-right: 1rem;
    color: var(--color-text-muted);
    font-size: .9rem
}

.wp-pagenavi a,
.wp-pagenavi .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: .5rem;
    text-decoration: none;
    color: var(--color-base-text);
    border: 1px solid var(--color-grey);
    border-radius: var(--radius);
    transition: all .2s ease
}

.wp-pagenavi a:hover {
    background: var(--color-light-grey);
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.wp-pagenavi .current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: 600
}

/* Strzalki: kolor bierze SVG przez currentColor. */
.wp-pagenavi .page-icons {
    min-width: auto;
    padding: .5rem .75rem;
    color: var(--color-navy)
}

.wp-pagenavi .page-icons svg path {
    transition: stroke .2s ease
}

.wp-pagenavi .page-icons:hover {
    color: var(--color-primary)
}

@media (max-width: 640px) {
    .wp-pagenavi {
        gap: .25rem
    }

    .wp-pagenavi .pages {
        flex-basis: 100%;
        margin: 0 0 .5rem;
        text-align: center
    }

    .wp-pagenavi a,
    .wp-pagenavi .current {
        min-width: 36px;
        height: 36px
    }
}