/**
 * MD-act — Interne linkblok pills
 * Geenqueued vanuit functions.php (frontend + Elementor-preview).
 * Hoort bij shortcode [mdact_linkblok].
 *
 * Kleuren (MD-act design system):
 *   rand        = #D5E0D9   (standaard randkleur, gelijk aan fasen-streep/tabel; via --mdact-linkpill-rand)
 *   donkergroen = #2C4A3E   (tekst + hover-vulling; via --mdact-linkpill-kleur)
 *   wit         = #FFFFFF
 */

.mdact-linkpills {
    display: flex;
    flex-wrap: wrap; /* pills wrappen automatisch naar de volgende regel */
    gap: 8px;
}

.mdact-linkpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background-color: #FFFFFF;
    border: 1px solid var(--mdact-linkpill-rand, #D5E0D9);
    color: var(--mdact-linkpill-kleur, #2C4A3E);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Pijltje achter de tekst */
.mdact-linkpill::after {
    content: "\2192"; /* → */
    font-size: 1em;
    line-height: 1;
}

/* Hover, focus en klik: vullen met donkergroen. De klik-toestand staat er
   bewust bij: zonder :active pakt de pil op het klikmoment de linkkleur, en
   dan staat er groen op groen. */
.mdact-linkpill:hover,
.mdact-linkpill:focus-visible,
.mdact-linkpill:active {
    background-color: #2C4A3E;
    border-color: #2C4A3E;
    color: #FFFFFF;
}