/**
 * Nieuws: [rdbp_filters] (news-filters.php)
 * Pill-knoppen; de actieve knop is navy. Kleuren uit Divi (--gcid-*), met een vaste waarde als terugval.
 */
.rdbp_filters {
    --rdbp-bg: var(--gcid-z2qnf40t2c, #d3e1eb);
    --rdbp-color: var(--gcid-primary-color, #002458);
    --rdbp-active-bg: var(--gcid-primary-color, #002458);
    --rdbp-active-color: var(--gcid-n0rejr3tw1, #ffffff);
    --rdbp-size: 22px;
    --rdbp-padding: 0.7em 1.55em;
    --rdbp-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px var(--rdbp-gap);
    width: 100%;
}

.rdbp_filters:empty {
    display: none;
}

.rdbp_filters .rdbp_filter {
    appearance: none;
    margin: 0;
    margin: 10px 0px;
    margin-bottom: 0px;
    padding: 8px 17px;
    color: var(--rdbp-color);
    background: var(--rdbp-bg);
    border: 0;
    border-radius: 999px;
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rdbp_filters .rdbp_filter:hover {
    background: color-mix(in srgb, var(--rdbp-bg), var(--rdbp-color) 12%);
}

.rdbp_filters .rdbp_filter:focus-visible {
    outline: 2px solid var(--rdbp-active-bg);
    outline-offset: 3px;
}

.rdbp_filters .rdbp_filter.is-active,
.rdbp_filters .rdbp_filter.is-active:hover {
    color: var(--rdbp-active-color);
    background: var(--rdbp-active-bg);
}

/* Berichten in .rdp_posts */
.rdbp_hidden {
    display: none !important;
}

.rdbp_shown {
    animation: rdbp-fade-in 0.35s ease both;
}

@keyframes rdbp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rdbp_filters .rdbp_filter {
        transition: none;
    }

    .rdbp_shown {
        animation: none;
    }
}

@media (max-width: 767px) {
    .rdbp_filters {
        --rdbp-size: 16px;
        --rdbp-gap: 10px;
        gap: 10px;
    }
}