/**
 * MD-act — Breadcrumb (kennisbank)
 * Geenqueued vanuit functions.php (frontend + Elementor-preview).
 * Hoort bij shortcode [mdact_breadcrumb].
 *
 * Opbouw: Home  ›  Kennis  ›  Categorie  ›  Berichttitel
 *
 * Kleuren (instelbaar via CSS-variabelen):
 *   link    = #C0C0C0   (Home, Kennis, Categorie; via --mdact-bc-link)
 *   huidige = #FFFFFF   (de pagina waar je staat; via --mdact-bc-current)
 *   pijltje = #C0C0C0   (gedempt; via --mdact-bc-sep)
 *
 * Staat doorgaans op een donkere achtergrond (donkergroene hero).
 */

.mdact-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* Zwaarder opgeschreven dan de globale linkstijl van Elementor (Site
   Settings), anders krijgen de kruimels het groen met onderstreping van
   gewone links in lopende tekst. */
.mdact-breadcrumb a.mdact-breadcrumb__link {
    color: var(--mdact-bc-link, #C0C0C0) !important;
    text-decoration: none !important;
    transition: color .2s ease;
}

.mdact-breadcrumb a.mdact-breadcrumb__link:hover,
.mdact-breadcrumb a.mdact-breadcrumb__link:focus-visible {
    color: var(--mdact-bc-current, #FFFFFF) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.mdact-breadcrumb .mdact-breadcrumb__current {
    color: var(--mdact-bc-current, #FFFFFF);
}

/* Scheidingspijltje tussen de items */
.mdact-breadcrumb__sep {
    display: inline-flex;
    align-items: center;
    color: var(--mdact-bc-sep, #C0C0C0);
    line-height: 1;
}

.mdact-breadcrumb__sep::before {
    content: "\203A"; /* › */
    font-size: 1.1em;
    line-height: 1;
}