/*
 * Stylesheet for the Jobconcepts COMBI plugin pagination.
 *
 * This file defines custom styling for the page navigation links used in
 * the combined job search results. The styles aim to align with the
 * Jobster theme aesthetic by leveraging the theme's CSS variables when
 * available (e.g. --pxpMainColor and --pxpMainColorLight). The rules
 * target the .jc-combi-pagination wrapper added around the pagination
 * markup in the template.
 */

/*
 * Override default WordPress posts pagination styles for the COMBI plugin.
 * WordPress outputs pagination links within a <nav> element that contains
 * a <div class="nav-links"> wrapper. Each link or current page is a
 * <span> or <a> element with the class "page-numbers". There is no <ul>
 * wrapper by default. We use flexbox to arrange the links horizontally and
 * style them with rounded borders and color transitions.
 */

.jc-combi-pagination nav {
    display: block;
}

.jc-combi-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

.jc-combi-pagination .nav-links .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--pxpMainColorLight, #e1e1e1);
    color: var(--pxpMainColor, #1f3c88);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}

/* Current page indicator */
.jc-combi-pagination .nav-links .page-numbers.current {
    background-color: var(--pxpMainColor, #1f3c88);
    color: #fff;
    border-color: var(--pxpMainColor, #1f3c88);
}

/* Hover state for links */
.jc-combi-pagination .nav-links .page-numbers:not(.current):hover {
    background-color: var(--pxpMainColor, #1f3c88);
    color: #fff;
    border-color: var(--pxpMainColor, #1f3c88);
}

/* Dots (ellipsis) styling */
.jc-combi-pagination .nav-links .page-numbers.dots {
    border: none;
    padding: 0.5rem 0.75rem;
    color: var(--pxpMainColor, #1f3c88);
}