/* ==========================================================================
   Bridle2Fit · voet en de knop terug naar boven
   Mobiel één kolom met uitklapbare secties, tablet twee kolommen,
   desktop merk plus vier kolommen (hoofdstuk 3a.1).
   ========================================================================== */

.b2f-footer{font-size:13.5px}
.b2f-footer__inner{
  max-width:var(--b2f-max);
  margin-inline:auto;
  padding:32px var(--b2f-gutter) 24px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.b2f-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

/* ---------- Merk ---------- */

.b2f-footer__brand{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom:22px;
}
.b2f-logo--footer{gap:12px}
.b2f-logo--footer .b2f-logo__shield{height:38px}
.b2f-footer__about{
  max-width:300px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--b2f-muted-dark);
}
.b2f-footer__social{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.b2f-footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--b2f-line-dark);
  color:var(--b2f-warm-white);
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
.b2f-footer__social-link:hover{border-color:var(--b2f-gold);color:var(--b2f-warm-white)}

/* ---------- Kolommen ---------- */

.b2f-fcol{border-top:1px solid var(--b2f-line-dark)}
.b2f-fcol:last-child{border-bottom:1px solid var(--b2f-line-dark)}
.b2f-fcol__title{
  font-size:10.5px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--b2f-gold);
}
.b2f-fcol__title--static{display:none}
.b2f-fcol__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:52px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
.b2f-fcol__toggle .b2f-icon{transition:transform var(--b2f-dur) var(--b2f-ease)}
.b2f-fcol__toggle[aria-expanded="true"] .b2f-icon{transform:rotate(180deg)}

.b2f-fcol__list{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0 0 14px;
  list-style:none;
}
/* Mobiel dicht, tot iemand de kop aantikt. Zonder JavaScript blijft alles open. */
.js .b2f-fcol__list{display:none}
.js .b2f-fcol__list.is-open{display:flex}
.b2f-fcol__list a{
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
}
.b2f-fcol__list a:hover,
.b2f-fcol__list a[aria-current="page"]{color:var(--b2f-gold)}

/* De herroepingslink: op mobiel los onderin, vanaf tablet in de kolom Service. */
.b2f-fcol__withdrawal{display:none}

/* ---------- Onderste regel ---------- */

.b2f-footer__bottom{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* Ruimte voor de knop terug naar boven, die rechtsonder zweeft. */
  padding-right:calc(var(--b2f-totop-size) + var(--b2f-totop-offset) - var(--b2f-gutter) + 12px);
  font-size:12px;
  color:var(--b2f-muted-dark);
}
.b2f-footer__withdrawal{font-size:14px}
.b2f-footer__withdrawal:empty{display:none}
/* Een knop, geen tekstlink: de wet wil de herroepingsfunctie duidelijk
   zichtbaar. Zelfde knop op mobiel (onderin) en desktop (kolom Service). */
.b2f-footer .b2f-withdrawal{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--b2f-gold);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.3;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--b2f-warm-white);
  transition:background var(--b2f-dur) var(--b2f-ease),color var(--b2f-dur) var(--b2f-ease);
}
.b2f-footer .b2f-withdrawal::after{content:"\2192";color:var(--b2f-gold);transition:color var(--b2f-dur) var(--b2f-ease)}
.b2f-footer .b2f-withdrawal:hover,
.b2f-footer .b2f-withdrawal[aria-current="page"]{background:var(--b2f-gold);color:var(--b2f-graphite)}
.b2f-footer .b2f-withdrawal:hover::after,
.b2f-footer .b2f-withdrawal[aria-current="page"]::after{color:var(--b2f-graphite)}
.b2f-footer__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0}
.b2f-footer__sep{display:none;width:1px;height:12px;background:var(--b2f-line-dark)}
.b2f-footer__maker{display:inline-flex;align-items:center;min-height:44px;font-size:11.5px;color:var(--b2f-neutral)}
.b2f-footer__maker:hover{color:var(--b2f-gold)}
.b2f-footer__switch{display:flex;flex-wrap:wrap;gap:10px}
.b2f-footer__switch:empty{display:none}
.b2f-footer__chip{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--b2f-line-dark);
  background:transparent;
  color:var(--b2f-warm-white);
  font:inherit;
  font-size:13px;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--b2f-dur) var(--b2f-ease);
}
.b2f-footer__chip:hover{border-color:var(--b2f-gold)}

/* ---------- Tablet: twee kolommen, alles open ---------- */

@media (min-width:768px){
  .b2f-footer__inner{padding:48px var(--b2f-gutter) 28px;gap:40px}
  .b2f-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
  .b2f-footer__brand{grid-column:1 / -1;padding-bottom:0}
  .b2f-fcol,
  .b2f-fcol:last-child{border:0}
  .b2f-fcol__title{font-size:11px;margin-bottom:10px}
  .b2f-fcol__title--static{display:block}
  .b2f-fcol__title--toggle{display:none}
  .js .b2f-fcol__list{display:flex}
  .b2f-fcol__list{padding:0}
  .b2f-fcol__list a{min-height:0;padding-block:6px;font-size:13.5px}
  .b2f-fcol__withdrawal{display:block;margin-top:12px}
  .b2f-fcol__list .b2f-withdrawal{min-height:40px;padding:9px 14px;font-size:11.5px}
  .b2f-footer__withdrawal{display:none}

  .b2f-footer__bottom{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:16px 32px;
    padding-top:24px;
    border-top:1px solid var(--b2f-line-dark);
    font-size:13px;
  }
  .b2f-footer__maker{font-size:12px}
  .b2f-footer__sep{display:block}
}

/* ---------- Desktop: merk plus vier kolommen ---------- */

@media (min-width:1100px){
  .b2f-footer__inner{padding:64px var(--b2f-gutter) 32px;gap:44px}
  .b2f-footer__grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
  .b2f-footer__brand{grid-column:auto}
  .b2f-logo--footer{gap:14px}
  .b2f-logo--footer .b2f-logo__shield{height:46px}
  .b2f-fcol__list a{padding-block:6px}
}

/* ---------- Terug naar boven, met een gouden ring die meeloopt ---------- */

:root{--b2f-totop-size:52px;--b2f-totop-offset:20px}
@media (min-width:1100px){:root{--b2f-totop-size:66px;--b2f-totop-offset:44px}}

.b2f-totop{
  --p:0;
  position:fixed;
  right:var(--b2f-totop-offset);
  bottom:calc(var(--b2f-totop-offset) + var(--b2f-sticky-h, 0px));
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--b2f-totop-size);
  height:var(--b2f-totop-size);
  color:var(--b2f-warm-white);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s;
  --b2f-focus:var(--b2f-gold-deep);
}
.b2f-totop.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .4s ease,transform .4s ease;
}
.b2f-totop:hover{color:var(--b2f-warm-white)}
.b2f-totop__ring{
  position:absolute;
  inset:0;
  border-radius:var(--b2f-radius-round);
  background:conic-gradient(var(--b2f-gold) calc(var(--p) * 360deg), rgba(207,200,195,.25) 0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.b2f-totop__core{
  position:absolute;
  inset:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--b2f-radius-round);
  background:var(--b2f-graphite);
  transition:background .35s ease;
}
.b2f-totop__shield{
  width:24px;
  height:auto;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.b2f-totop__core .b2f-icon{
  position:absolute;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.b2f-totop:hover .b2f-totop__ring{transform:scale(1.06)}
.b2f-totop:hover .b2f-totop__core{background:var(--b2f-panel)}
.b2f-totop:hover .b2f-totop__shield,
.b2f-totop:focus-visible .b2f-totop__shield{opacity:0;transform:translateY(-10px)}
.b2f-totop:hover .b2f-icon,
.b2f-totop:focus-visible .b2f-icon{opacity:1;transform:none}
.b2f-totop__cap{
  position:absolute;
  right:calc(100% + 12px);
  white-space:nowrap;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--b2f-muted);
  opacity:0;
  transform:translateX(8px);
  transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
@media (hover:hover){
  .b2f-totop:hover .b2f-totop__cap{opacity:1;transform:none}
}

@media (min-width:1100px){
  .b2f-totop__shield{width:30px}
}

/* Geen zwevende knop over het podium van een configurator (THEMA-BRIEFING). */
.b2f-is-configurator .b2f-totop{display:none}

/* De taalkiezers van WPML zelf (onderaan de pagina en bij een bericht). Het
   thema heeft zijn eigen land- en taalkeuze in de kop en de footer; zet WPML
   ze toch aan, dan staan ze er niet dubbel. Zet ze bij voorkeur uit onder
   WPML → Talen, dan worden ze ook niet geladen. */
.wpml-ls-statics-footer,
.wpml-ls-statics-post_translations{display:none}
