:root {
    --bfct-navy: #0d1b2e;
    --bfct-accent: #ff8a00;
    --bfct-text: #1e293b;
    --bfct-bg: #f0f4f8;
    --bfct-white: #fff;
    --bfct-border: #e2e8f0;
    --bfct-radius: 10px;
    --bfct-max-width: 1100px;
}

.bfct-hero { position: relative; background:#000; overflow:hidden; min-height:220px; }
.bfct-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center right; opacity:.35; z-index:0; }
.bfct-hero__inner { position:relative; z-index:1; max-width:var(--bfct-max-width); margin:0 auto; padding:44px 24px 40px; display:flex; align-items:center; gap:40px; justify-content:space-between; }
.bfct-hero__text { flex:1 1 60%; min-width:0; }
.bfct-hero__title { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; color:#fff; margin:0 0 14px; line-height:1.2; letter-spacing:-.02em; }
.bfct-hero__intro { font-size:1rem; color:rgba(255,255,255,.82); line-height:1.65; margin:0 0 20px; }
.bfct-hero__author { display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:10px 16px 10px 10px; font-size:.82rem; color:rgba(255,255,255,.75); }
.bfct-hero__author img { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bfct-hero__author-info { display:flex; flex-direction:column; gap:3px; }
.bfct-hero__author-name strong { color:var(--bfct-accent); font-weight:600; }
.bfct-hero__author-date { font-size:.75rem; color:rgba(255,255,255,.5); }
.bfct-hero__image { flex:0 0 auto; width:clamp(140px,18vw,220px); display:flex; align-items:center; justify-content:center; }
.bfct-hero__image img { max-width:100%; height:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)); }

.bfct-breadcrumbs { background:#0c2116; border-bottom:1px solid rgba(255,255,255,.06); }
.bfct-breadcrumbs__inner { max-width:var(--bfct-max-width); margin:0 auto; padding:10px 24px; font-size:.78rem; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bfct-breadcrumbs__inner a { color:rgba(255,255,255,.55); text-decoration:none; }
.bfct-breadcrumbs__inner a:hover { color:var(--bfct-accent); }
.bfct-breadcrumbs__sep { opacity:.4; }
.bfct-breadcrumbs__current { color:rgba(255,255,255,.85); font-weight:500; }

.bfct-toc-bar { background:#e8f2ec; border-bottom:2px solid #c5e0ce; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.admin-bar .bfct-toc-bar { top:32px; }
.bfct-toc-bar__inner { max-width:var(--bfct-max-width); margin:0 auto; padding:0 24px; display:flex; align-items:stretch; min-height:52px; }
.bfct-toc-bar__label { background:#0c2116; color:#fff; font-size:.85rem; font-weight:700; padding:0 28px 0 14px; display:flex; align-items:center; gap:8px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); flex-shrink:0; border-left:4px solid var(--bfct-accent); }
.bfct-toc-bar__scroller { position:relative; flex:1 1 auto; min-width:0; overflow:hidden; }
.bfct-toc-bar__links { display:flex; align-items:center; width:100%; height:100%; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-behavior:smooth; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.bfct-toc-bar__links::-webkit-scrollbar { display:none; }
.bfct-toc-bar__links a { display:flex; flex:0 0 auto; align-items:center; padding:0 16px; height:100%; font-size:.82rem; font-weight:500; color:var(--bfct-text); text-decoration:none; white-space:nowrap; border-right:1px solid var(--bfct-border); }
.bfct-toc-bar__scroll { position:absolute; top:0; bottom:0; z-index:4; width:38px; border:0; margin:0; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--bfct-navy); background:#e8f2ec; transition:opacity .15s ease,background .15s ease; }
.bfct-toc-bar__scroll:hover { background:#fff; }
.bfct-toc-bar__scroll:focus-visible { outline:2px solid var(--bfct-accent); outline-offset:-2px; }
.bfct-toc-bar__scroll[hidden] { display:none !important; }
.bfct-toc-bar__scroll--prev { left:0; border-right:1px solid #c5e0ce; box-shadow:8px 0 14px rgba(232,242,236,.96); }
.bfct-toc-bar__scroll--next { right:0; border-left:1px solid #c5e0ce; box-shadow:-8px 0 14px rgba(232,242,236,.96); }
.bfct-toc-bar__scroll svg { width:17px; height:17px; display:block; }
.bfct-toc-bar__links a:first-child { border-left:1px solid var(--bfct-border); }
.bfct-toc-bar__links a:hover { background:var(--bfct-white); color:var(--bfct-navy); }
.bfct-toc-mobile { display:none; width:100%; }
.bfct-toc-mobile__toggle { width:100%; background:none; border:0; padding:14px 24px; font-size:.9rem; font-weight:700; color:var(--bfct-navy); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.bfct-toc-mobile__toggle span:first-child { display:flex; align-items:center; gap:8px; }
.bfct-toc-mobile__icon { transition:transform .25s; }
.bfct-toc-mobile__toggle.open .bfct-toc-mobile__icon { transform:rotate(180deg); }
.bfct-toc-mobile__list { display:none; flex-direction:column; border-top:1px solid var(--bfct-border); background:var(--bfct-white); }
.bfct-toc-mobile__list.open { display:flex; }
.bfct-toc-mobile__list a { padding:12px 24px; font-size:.88rem; color:var(--bfct-text); text-decoration:none; border-bottom:1px solid var(--bfct-border); }
.bfct-toc-mobile__list a:last-child { border-bottom:0; }

.bfct-main { background:var(--bfct-bg); padding:36px 24px 64px; }
.bfct-main__inner { max-width:var(--bfct-max-width); margin:0 auto; }
.bfct-section,.bfct-faq { background:var(--bfct-white); border-radius:var(--bfct-radius); padding:32px 36px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.bfct-section h2 { font-size:clamp(1.15rem,2.5vw,1.5rem); font-weight:800; color:var(--bfct-navy); margin:32px 0 24px !important; padding:0 0 0 14px !important; border-left:4px solid var(--bfct-accent) !important; text-transform:uppercase; line-height:1.3; scroll-margin-top:80px; letter-spacing:-.01em; }
.bfct-section h2:first-child { margin-top:0 !important; }
/* De bovenmarge is er voor tekst die direct achter een blok komt dat zelf geen
   marge meebrengt - `.bfov-wrap` van het bonusoverzicht heeft er geen enkele,
   dus zonder deze regel plakt de alinea tegen de onderste bonuskaart. Tussen
   twee alineas onderling verandert er niets: aangrenzende marges klappen samen
   tot 16px. De eerste alinea van een sectie krijgt hem niet, anders ontstaat er
   ruimte boven in het kader. */
.bfct-section p { color:var(--bfct-text); line-height:1.75; font-size:.97rem; margin:16px 0 !important; }
.bfct-section p:first-child { margin-top:0 !important; }
.bfct-section p:last-child { margin-bottom:0 !important; }
.bfct-section ul { list-style:disc !important; padding-left:24px !important; margin:0 0 16px !important; color:var(--bfct-text); line-height:1.75; font-size:.97rem; }
.bfct-section ol { list-style:decimal !important; padding-left:24px !important; margin:0 0 16px !important; color:var(--bfct-text); line-height:1.75; font-size:.97rem; }
.bfct-section li { list-style:inherit !important; margin-bottom:6px; padding-left:4px; }
.bfct-section a { color:#1a5fbb; text-decoration:underline; text-underline-offset:3px; }
.bfct-section a:hover { color:var(--bfct-accent); }
.bfct-section strong { font-weight:700; color:var(--bfct-navy); }
.bfct-section h3 { font-size:1.05rem !important; font-weight:700; color:var(--bfct-navy); margin:20px 0 10px; }
.bfct-section h4 { font-size:.95rem; font-weight:700; color:var(--bfct-text); margin:16px 0 8px; }
.bfct-section img { max-width:100%; height:auto; border-radius:8px; margin:16px 0; }
/* De regel hierboven zet met de margin-shorthand ook margin-left en -right op 0,
   en `.bfct-section img` is specifieker dan het `.aligncenter` van WordPress.
   Zonder de regels hieronder schoof elke in de editor gecentreerde afbeelding
   dus naar links zodra deze stylesheet binnenkwam. */
.bfct-section img.aligncenter,
.bfct-section figure.aligncenter,
.bfct-section .wp-caption.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.bfct-section img.alignnone { display:block; }
.bfct-section img.alignleft,
.bfct-section figure.alignleft { float:left; margin:8px 20px 16px 0; }
.bfct-section img.alignright,
.bfct-section figure.alignright { float:right; margin:8px 0 16px 20px; }
/* Een figure draagt zelf de marge; de afbeelding erin hoeft er geen. Een
   uitgelijnde afbeelding houdt zijn auto-marges: die selector telt een klasse
   meer. */
.bfct-section figure { margin:16px 0; }
.bfct-section figure img { margin:0; }
.bfct-section figcaption,
.bfct-section .wp-caption-text { margin-top:8px; font-size:.82rem; line-height:1.5; color:#64748b; text-align:center; }
.bfct-section iframe,.bfct-section video { max-width:100%; }
/* Een tabel kan niet smaller dan zijn kolominhoud. Zonder deze container duwt
   hij op een telefoon de hele pagina breder dan het scherm. bfct_wrap_tables()
   zet elke redactionele tabel hierin, ook als de auteur de div zelf niet
   meetypte. */
.bfct-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0; max-width:100%; background:var(--bfct-white); border:1px solid var(--bfct-border); border-bottom:3px solid var(--bfct-accent); border-radius:var(--bfct-radius); }
/* De marge zit op .bfct-table-wrap; de tabel zelf heeft er geen nodig. */
.bfct-section table { width:100%; border-collapse:collapse; font-size:.93rem; }
/* Kop in hetzelfde donkerblauw en dezelfde kapitalen als de H2 erboven. */
.bfct-section thead th { background:var(--bfct-navy); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:13px 16px; text-align:left; white-space:nowrap; border:0; }
/* Geen ruitjespatroon: alleen een lijn tussen de rijen, zoals in de kaarten. */
.bfct-section tbody td,.bfct-section tbody th { padding:13px 16px; text-align:left; border:0; border-top:1px solid var(--bfct-border); color:var(--bfct-text); line-height:1.6; vertical-align:top; }
.bfct-section tbody tr:first-child td,.bfct-section tbody tr:first-child th { border-top:0; }
.bfct-section tbody tr:nth-child(even) { background:var(--bfct-bg); }
.bfct-section tbody tr:hover { background:#fff6ec; }
.bfct-section tbody td:first-child,.bfct-section tbody th { font-weight:700; color:var(--bfct-navy); }
.bfct-section table caption { caption-side:top; padding:12px 16px; font-size:.82rem; color:#64748b; text-align:left; }
/* Een lange URL of code zonder spaties rekt zijn blok anders net zo goed op. */
.bfct-section,.bfct-faq__answer { overflow-wrap:break-word; }

.bfct-faq__title { font-size:clamp(1.15rem,2.5vw,1.5rem); font-weight:800; color:var(--bfct-navy); margin:0 0 20px; padding-bottom:12px; border-bottom:2px solid var(--bfct-bg); }
.bfct-faq__item { border-bottom:1px solid var(--bfct-border); }
.bfct-faq__item:last-child { border-bottom:0; }
.bfct-faq__question { width:100%; background:none; border:0; padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; text-align:left; font-size:.97rem; font-weight:700; color:var(--bfct-navy); }
.bfct-faq__question:hover { color:var(--bfct-accent); }
.bfct-faq__icon { width:22px; height:22px; border-radius:50%; background:var(--bfct-bg); border:2px solid var(--bfct-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; color:var(--bfct-navy); transition:background .2s,transform .25s,border-color .2s; }
.bfct-faq__item.open .bfct-faq__icon { background:var(--bfct-accent); border-color:var(--bfct-accent); color:#fff; transform:rotate(45deg); }
.bfct-faq__answer { display:none; padding:0 0 18px; font-size:.95rem; color:var(--bfct-text); line-height:1.75; }
.bfct-faq__answer.open,.bfct-faq__item.open .bfct-faq__answer { display:block; }
.bfct-faq__answer p { margin:0 0 12px; }
.bfct-faq__answer p:last-child { margin-bottom:0; }

@media (max-width:782px) {
    .admin-bar .bfct-toc-bar { top:46px; }
}
@media (max-width:768px) {
    .bfct-toc-bar__inner { display:none; }
    .bfct-toc-mobile { display:block; }
}
@media (max-width:680px) {
    .bfct-hero__bg { opacity:.2; }
    .bfct-hero__image { display:none; }
    .bfct-hero__inner { padding:32px 18px 28px; }
}
@media (max-width:600px) {
    .bfct-main { padding:24px 10px 48px; }
    .bfct-section,.bfct-faq { padding:22px 12px; }
    .bfct-section table { font-size:.88rem; }
    .bfct-section thead th { padding:11px 12px; }
    .bfct-section tbody td,.bfct-section tbody th { padding:11px 12px; font-size:.83rem; }
}