/* ===================================================================
   BLOK: FOOTER  —  v2-stijl (donker navy, groene accentlijn bovenaan)
   Zelfstandig gekleurd met expliciete hex zodat de footer overal in het
   thema klopt, ook op pagina's zonder styles-v2.css.
   =================================================================== */
.footer {
  position: relative;
  background: #0A1B3D;                            /* --kbo-navy-900 */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-2xl, 4rem) var(--space-lg, 2rem);
}
.footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(120deg, #A8FF00, #00A1F1);
  opacity: 0.9;
}
.footer__top {
  display: flex; flex-direction: column; gap: var(--space-lg, 2rem);
  padding-bottom: var(--space-lg, 2rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__logo img { height: 36px; width: auto; }
.footer__tagline {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-sm, 0.875rem);
  max-width: 38ch;
  margin-top: var(--space-sm, 1rem);
}
.footer__nav { display: flex; }
.footer__nav-list { display: flex; flex-wrap: wrap; gap: var(--space-md, 1.5rem); }
.footer__nav a {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s ease;
}
.footer__nav a:hover { color: #FFFFFF; }
.footer__bottom {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-top: var(--space-lg, 2rem);
  font-size: var(--text-sm, 0.875rem);
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
  .footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}