/* BlazeForce SEO — deelknoppen.
 *
 * Kleuren lopen via custom properties, zodat een theme ze kan overschrijven:
 *   --bf-share-accent      knop- en icoonkleur (standaard: tekstkleur)
 *   --bf-share-on-accent   tekstkleur op een gevulde knop
 *   --bf-share-surface     achtergrond van de zwevende rail en mobiele balk
 *   --bf-share-surface-text tekstkleur daarop
 * De dubbele klasse (.bf-share.bf-share) wint van theme-regels als
 * `.entry-content a` en `.entry-content ul` zonder !important.
 */

.bf-share {
    --bf-share-accent: currentColor;
    --bf-share-on-accent: #fff;
    --bf-share-surface: #fff;
    --bf-share-surface-text: #111827;
    --bf-share-h: 2.5rem;
    --bf-share-px: 1rem;
    --bf-share-gap: .5rem;
    --bf-share-icon: 1.125rem;
    --bf-share-font: .9375rem;
    --bf-share-radius: 999px;
    margin: 2rem 0;
    clear: both;
}

.bf-share.bf-share--size-sm { --bf-share-h: 2.125rem; --bf-share-px: .75rem; --bf-share-icon: 1rem; --bf-share-font: .875rem; }
.bf-share.bf-share--size-lg { --bf-share-h: 3rem; --bf-share-px: 1.25rem; --bf-share-icon: 1.3125rem; --bf-share-font: 1rem; --bf-share-gap: .625rem; }

.bf-share.bf-share--color-custom { --bf-share-accent: var(--bf-share-custom, #0f4c81); --bf-share-on-accent: var(--bf-share-custom-on, #fff); }
.bf-share.bf-share--color-brand .bf-share__button { --bf-share-accent: #374151; }
.bf-share.bf-share--color-brand .bf-share__button--linkedin { --bf-share-accent: #0a66c2; }
.bf-share.bf-share--color-brand .bf-share__button--whatsapp { --bf-share-accent: #128c4b; }
/* Merk-/eigen kleur geldt ook voor de knop zelf, niet alleen de wrapper. */
.bf-share.bf-share--color-brand .bf-share__button,
.bf-share.bf-share--color-custom .bf-share__button { color: var(--bf-share-accent); }

.bf-share .bf-share__heading {
    margin: 0 0 .75rem;
    font-size: var(--bf-share-font);
    font-weight: 600;
    line-height: 1.4;
}

.bf-share.bf-share--no-heading .bf-share__heading,
.bf-share .bf-share__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bf-share.bf-share .bf-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bf-share-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bf-share--align-center .bf-share__heading { text-align: center; }
.bf-share--align-center .bf-share__list { justify-content: center; }
.bf-share--align-end .bf-share__heading { text-align: right; }
.bf-share--align-end .bf-share__list { justify-content: flex-end; }

.bf-share.bf-share .bf-share__item {
    margin: 0;
    padding: 0;
}

.bf-share.bf-share .bf-share__item::before,
.bf-share.bf-share .bf-share__item::marker { content: none; }

.bf-share .bf-share__item[hidden] { display: none !important; }

.bf-share.bf-share .bf-share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-width: var(--bf-share-h);
    min-height: var(--bf-share-h);
    margin: 0;
    padding: 0 var(--bf-share-px);
    font: inherit;
    font-size: var(--bf-share-font);
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
    color: var(--bf-share-accent);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--bf-share-radius);
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.bf-share .bf-share__icon {
    flex: none;
    width: var(--bf-share-icon);
    height: var(--bf-share-icon);
}

.bf-share .bf-share__button .bf-share__icon:nth-of-type(2) { display: none; }
.bf-share .bf-share__button.is-copied .bf-share__icon:first-of-type { display: none; }
.bf-share .bf-share__button.is-copied .bf-share__icon:nth-of-type(2) { display: block; }

.bf-share .bf-share__button:focus { outline: none; }
.bf-share .bf-share__button:focus-visible {
    outline: 2px solid var(--bf-share-accent);
    outline-offset: 2px;
}

.bf-share .bf-share__button:active { transform: translateY(1px); }

/* Weergave: alleen icoon / alleen tekst. Het label blijft voor schermlezers bestaan. */
.bf-share--display-icon .bf-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.bf-share.bf-share--display-icon .bf-share__button { padding: 0; }
.bf-share--display-label .bf-share__icon { display: none !important; }

/* --- Stijlen ----------------------------------------------------------- */

.bf-share.bf-share--style-pill .bf-share__button,
.bf-share.bf-share--style-soft .bf-share__button,
.bf-share.bf-share--style-circle .bf-share__button {
    background: rgba(127, 127, 127, .1);
    background: color-mix(in srgb, var(--bf-share-accent) 9%, transparent);
    border-color: rgba(127, 127, 127, .2);
    border-color: color-mix(in srgb, var(--bf-share-accent) 18%, transparent);
}

.bf-share.bf-share--style-pill .bf-share__button:hover,
.bf-share.bf-share--style-soft .bf-share__button:hover,
.bf-share.bf-share--style-circle .bf-share__button:hover {
    background: color-mix(in srgb, var(--bf-share-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--bf-share-accent) 35%, transparent);
}

.bf-share--style-soft { --bf-share-radius: .625rem; }
.bf-share--style-circle { --bf-share-radius: 50%; }

.bf-share.bf-share--style-outline .bf-share__button { border-color: var(--bf-share-accent); }
.bf-share.bf-share--style-outline .bf-share__button:hover,
.bf-share.bf-share--style-solid .bf-share__button {
    color: var(--bf-share-on-accent);
    background: var(--bf-share-accent);
    border-color: var(--bf-share-accent);
}

/* Gevuld met themakleur: currentColor als achtergrond, dus tekst in de paginakleur omkeren. */
.bf-share.bf-share--style-solid.bf-share--color-theme .bf-share__button,
.bf-share.bf-share--style-outline.bf-share--color-theme .bf-share__button:hover {
    color: var(--bf-share-on-accent);
}
.bf-share.bf-share--style-solid .bf-share__button:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
    filter: brightness(1.08);
}

.bf-share.bf-share--style-minimal { --bf-share-gap: .25rem 1.25rem; }
.bf-share.bf-share--style-minimal .bf-share__button {
    min-height: 2rem;
    min-width: 0;
    padding: 0;
    border-radius: 0;
}
.bf-share.bf-share--style-minimal.bf-share--display-icon .bf-share__button { min-width: 2rem; }
.bf-share.bf-share--style-minimal .bf-share__button:hover .bf-share__label {
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* --- Zwevende rail (desktop) ------------------------------------------- */

.bf-share--rail:not(.bf-share--preview) {
    position: fixed;
    top: 50%;
    left: max(1rem, env(safe-area-inset-left, 0px));
    z-index: 40;
    margin: 0;
    transform: translateY(-50%);
}

.bf-share.bf-share--rail .bf-share__list {
    flex-direction: column;
    padding: .5rem;
    background: var(--bf-share-surface);
    border-radius: calc(var(--bf-share-h) / 2 + .5rem);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .06);
}
.bf-share--style-soft.bf-share--rail .bf-share__list { border-radius: 1rem; }
.bf-share.bf-share--rail.bf-share--color-theme { color: var(--bf-share-surface-text); }

@media (max-width: 1279px) {
    .bf-share--rail:not(.bf-share--preview) { display: none !important; }
}

@media (min-width: 1280px) {
    .bf-share--rail-fallback { display: none !important; }
}

/* --- Vaste balk onderin (mobiel) --------------------------------------- */

.bf-share--bar:not(.bf-share--preview) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    margin: 0;
    transition: transform .25s ease;
}

.bf-share.bf-share--bar {
    padding: .625rem max(1rem, env(safe-area-inset-right, 0px)) calc(.625rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
    background: var(--bf-share-surface);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .12), 0 -1px 0 rgba(15, 23, 42, .06);
}
.bf-share.bf-share--bar.bf-share--color-theme { color: var(--bf-share-surface-text); }

.bf-share.bf-share--bar .bf-share__list { flex-wrap: nowrap; justify-content: center; }
.bf-share.bf-share--bar:not(.bf-share--style-circle):not(.bf-share--display-icon) .bf-share__item { flex: 1 1 0; min-width: 0; }
.bf-share.bf-share--bar:not(.bf-share--style-circle):not(.bf-share--display-icon) .bf-share__button { width: 100%; }
.bf-share.bf-share--bar .bf-share__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Meerdere kanalen in de balk: tabbalk met icoon boven een klein label, zodat
   vier knoppen naast elkaar passen. De enkele "Delen"-knop blijft horizontaal. */
.bf-share.bf-share--bar:not(.is-native-only).bf-share--display-icon_label:not(.bf-share--style-circle) { --bf-share-radius: .875rem; }
.bf-share.bf-share--bar:not(.is-native-only).bf-share--display-icon_label .bf-share__button {
    flex-direction: column;
    gap: .25rem;
    min-height: 3.25rem;
    padding: .375rem .25rem;
    font-size: .75rem;
}
.bf-share.bf-share--bar:not(.is-native-only).bf-share--display-label .bf-share__button {
    padding: 0 .375rem;
    font-size: .8125rem;
}
.bf-share.bf-share--bar:not(.is-native-only) .bf-share__list { gap: .375rem; }

/* De balk schuift pas in beeld na wat scrollen (share.js); zonder JS staat hij er direct. */
.bf-share--bar.is-enhanced:not(.is-visible):not(.bf-share--preview) {
    visibility: hidden;
    transform: translateY(110%);
    transition: transform .25s ease, visibility 0s linear .25s;
}

@media (prefers-reduced-motion: reduce) {
    .bf-share .bf-share__button,
    .bf-share--bar { transition: none; }
}

@media print {
    .bf-share { display: none !important; }
}