/* WPBeter Breadcrumbs — sitewide balk direct onder de header
   ----------------------------------------------------------------------- */

/* Volle-breedte balk */
.wpbeter-breadcrumbs {
    background: var(--global-palette9, #fff);
    border-bottom: 1px solid #ddd;
}

/* Content-breedte binnenkant */
.wpbeter-breadcrumbs-inner {
    position: relative;
    overflow: hidden;
    max-width: var(--global-content-width, 1346px);
    margin: 0 auto;
    padding: 0.75rem var(--global-content-edge-padding, 2rem);
    font-size: .85rem;
}

/* Horizontaal scrollen bij lange trail, scrollbar verbergen */
.wpbeter-breadcrumbs .rank-math-breadcrumb p {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-right: 50px;
    margin: 0;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.wpbeter-breadcrumbs .rank-math-breadcrumb p::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

/* Kleuren */
.wpbeter-breadcrumbs a,
.wpbeter-breadcrumbs .separator {
    color: #4B5563;
    text-decoration: none;
}
.wpbeter-breadcrumbs .last {
    color: #666;
}
.wpbeter-breadcrumbs a:hover {
    color: var(--global-palette2);
}
.wpbeter-breadcrumbs .separator {
    margin: 0 10px;
    color: #7A8C7F;
}

/* Home-link vervangen door huis-icoon */
.wpbeter-breadcrumbs .rank-math-breadcrumb p a:first-child {
    font-size: 0;
    display: inline-flex;
    align-items: center;
}
.wpbeter-breadcrumbs .rank-math-breadcrumb p a:first-child::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    font-size: 1rem;
    background: #4B5563;
    vertical-align: text-bottom;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wpbeter-breadcrumbs .rank-math-breadcrumb p a:first-child:hover::before {
    background: var(--global-palette2);
}

/* Fade rechts (verdwijnt als je aan het eind bent — via JS) */
.wpbeter-breadcrumbs-inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--global-palette9, #fff));
    pointer-events: none;
    transition: opacity 0.2s;
}
.wpbeter-breadcrumbs.is-scrolled-end .wpbeter-breadcrumbs-inner::after {
    opacity: 0;
}

/* Oude breadcrumbs verbergen — vervangen door deze balk */
.entry-hero .kadence-breadcrumbs,
.kadence-breadcrumbs.rankmath-bc-wrap,
.wpbp-breadcrumb {
    display: none !important;
}