:root{
  --ef-footer-bg:#080f1e;
  --ef-footer-bg-2:#0b1426;
  --ef-footer-line:rgba(255,255,255,.09);
  --ef-footer-heading:#f4f7fc;
  --ef-footer-text:#aebbd0;
  --ef-footer-muted:#7f8da5;
  --ef-footer-accent:#5d9df6;
}

/* Canonical ExchangeFacts footer.
   This deliberately has its own namespace so page-level footer rules cannot
   turn it white or change its spacing. */
body footer.ef-footer{
  display:block;
  margin:64px 0 0;
  padding:0 !important;
  border:0 !important;
  border-top:1px solid var(--ef-footer-line) !important;
  background:
    radial-gradient(circle at 80% 0,rgba(37,99,235,.09),transparent 34%),
    linear-gradient(180deg,var(--ef-footer-bg-2) 0,var(--ef-footer-bg) 100%) !important;
  color:var(--ef-footer-text) !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ef-footer .wrap{
  width:min(100% - 48px,1320px);
  max-width:1320px;
  margin-inline:auto;
  padding-inline:0;
}

.ef-footer .footgrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:42px 72px !important;
  margin:0 auto !important;
  padding:52px 0 42px !important;
}

.ef-footer .footcol{
  min-width:0;
}

.ef-footer .footcol strong{
  display:block;
  margin:0 0 15px;
  color:var(--ef-footer-heading) !important;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
}

.ef-footer .footcol:not(:first-child) strong{
  color:var(--ef-footer-accent) !important;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ef-footer .footcol a{
  display:block;
  width:max-content;
  max-width:100%;
  padding:5px 0 !important;
  color:var(--ef-footer-text) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.45;
  text-decoration:none !important;
  transition:color .16s ease,transform .16s ease;
}

.ef-footer .footcol a:hover,
.ef-footer .footcol a:focus-visible{
  color:#fff !important;
  transform:translateX(2px);
}

.ef-footer .footcol a:focus-visible,
.ef-footer .footsocial a:focus-visible{
  outline:2px solid var(--ef-footer-accent);
  outline-offset:4px;
  border-radius:4px;
}

.ef-footer .footbottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  margin:0 auto !important;
  padding:18px 0 20px !important;
  border-top:1px solid var(--ef-footer-line) !important;
  color:var(--ef-footer-muted) !important;
  font-size:12.5px !important;
  line-height:1.5;
}

.ef-footer .footsocial{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.ef-footer .footsocial a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  color:#d9e3f2 !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}

.ef-footer .footsocial a:hover{
  border-color:rgba(93,157,246,.7);
  background:rgba(37,99,235,.16);
  color:#fff !important;
}

@media(max-width:760px){
  body footer.ef-footer{margin-top:48px}
  .ef-footer .wrap{width:min(100% - 40px,1320px)}
  .ef-footer .footgrid{
    grid-template-columns:1fr 1fr !important;
    gap:34px 28px !important;
    padding:42px 0 34px !important;
  }
  .ef-footer .footcol:first-child{grid-column:1/-1}
}

@media(max-width:480px){
  .ef-footer .footgrid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .ef-footer .footcol:first-child{grid-column:auto}
  .ef-footer .footbottom{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
}

/* Skip-link (WCAG 2.4.1). Staat hier omdat footer.css het enige stylesheet is
   dat elke pagina laadt; app.css wordt maar door ~21 pagina's gebruikt en liet
   de link op de rest onopgemaakt bovenaan staan. */
.ef-skip{position:absolute;left:-9999px;top:0;z-index:9999;background:#fff;color:#101b33;
  padding:10px 18px;border:1px solid rgba(214,222,235,.9);border-radius:0 0 12px 0;
  font:700 15px/1.3 Inter,system-ui,sans-serif;text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(16,27,51,.45)}
.ef-skip:focus{left:0}

/* UX-audit 23 aug 2026: tekstlinks hadden geen zichtbare toetsenbordfocus. */
a:focus-visible{outline:3px solid #2F64EB;outline-offset:2px;border-radius:3px}
/* In het megamenu staat outline bewust uit; geef toetsenbordfocus daar de
   hoverachtergrond zodat hij toch zichtbaar is. */
.nav-item .mega-panel a:focus-visible{background:#EEF3FC;outline:none;border-radius:8px}