/* ==========================================================================
   Sitevoet (.dv) — de gedeelde footer op alle publieke pagina's en /nieuws/.
   De regels hierboven horen bij de oude voet, die alleen nog op de les- en
   beheerpagina's staat. Ze bijten elkaar niet: elke regel hier is specifieker
   (footer.dv verslaat footer). Opruimen kan pas als die pagina's ook om zijn.
   Eigen variabelen, want :root verschilt tussen style.css en nieuws.css.
   ========================================================================== */
footer.dv {
  --dv-grond: #434343;
  --dv-tekst: #EEEBE4;
  --dv-zacht: rgba(238, 235, 228, .62);
  --dv-lijn: rgba(238, 235, 228, .22);
  --dv-rood: #b22a26;
  --dv-roodfel: #A80807;
  background: var(--dv-grond);
  color: var(--dv-tekst);
  padding: 64px 32px 0;
  border-top: 0;
  font-family: var(--font-body, 'Roboto', Arial, sans-serif);
  font-weight: 300;
  /* De lespagina's hebben eigen footer-regels (gecentreerd, kleiner, marge
     erboven). Hier vlak zetten, zodat de voet op élke pagina identiek is. */
  margin: 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}

.dv-binnen {
  max-width: 1200px;
  margin: 0 auto;
}

.dv-kolommen {
  display: grid;
  grid-template-columns: 1fr 0.75fr 0.75fr 1.7fr;
  gap: 48px;
}

.dv a {
  color: var(--dv-tekst);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.dv a:hover {
  opacity: .8;
}

/* Toetsenbordgebruikers navigeren hierop: niet weghalen. */
.dv a:focus-visible,
.dv button:focus-visible,
.dv input:focus-visible {
  outline: 2px solid var(--dv-rood);
  outline-offset: 2px;
}

.dv-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kolom 1: nieuwsbrief */
.dv-brief {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 340px;
}

/* !important is hier geen luiheid maar noodzaak. De typografie-instelling uit
   /admin spuit `h2{font-size:...!important}` in, en de lespagina's zetten hun
   eigen h2-gewicht. Beide raakten deze kop, waardoor hij per pagina anders was
   (40px/gewicht 400 op de site, 32px/gewicht 700 op een lespagina). De voet
   hoort overal gelijk te zijn; alleen de voet-schuif mag hem raken, en die
   gaat over de links. */
footer.dv .dv-briefkop {
  font-family: var(--font-heading, 'Bebas Neue', sans-serif);
  font-size: 32px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  color: #FFFFFF;
}

footer.dv .dv-briefuitleg {
  margin: 0;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.6;
  color: var(--dv-zacht);
}

.dv-briefform {
  display: grid;
  gap: 8px;
  margin: 0;
}

.dv-veld {
  display: block;
}

.dv-brief input[type="text"]:not(.footer-newsletter-honeypot),
.dv-brief input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body, 'Roboto', Arial, sans-serif);
  font-weight: 300;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--dv-lijn);
  border-radius: 8px;
  background: #FFFFFF;
  color: #666666;
}

.dv .footer-newsletter-button {
  font-family: var(--font-body, 'Roboto', Arial, sans-serif);
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  padding: 12px 20px;
  border: 2px solid var(--dv-rood);
  border-radius: 8px;
  background: var(--dv-rood);
  color: #FFFFFF;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.dv .footer-newsletter-button:hover:not(:disabled) {
  background: var(--dv-roodfel);
  border-color: var(--dv-roodfel);
}

.dv .footer-newsletter-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
}

.dv-briefklein {
  margin: 0;
  font-family: var(--font-handwritten, 'Caveat', cursive);
  font-size: 17px;
  color: var(--dv-zacht);
}

.dv-briefgelukt,
.dv-brieffout {
  display: none;
  margin: 0;
}

.dv-briefgelukt {
  font-family: var(--font-handwritten, 'Caveat', cursive);
  font-size: 19px;
  color: var(--dv-tekst);
}

.dv-brieffout {
  font-size: 14px;
  line-height: 1.5;
  color: #F5A9A7;
}

.dv-brief.is-success .dv-briefform,
.dv-brief.is-success .dv-briefklein {
  display: none;
}

.dv-brief.is-success .dv-briefgelukt,
.dv-brief.is-error .dv-brieffout {
  display: block;
}

/* Kolommen 2 tot 4: navigatie.
   Dit zijn echte <nav>-elementen (elk met eigen aria-label), en de kale
   nav-regel bovenin dit bestand plakt die vast bovenaan het scherm. Zonder
   deze terugzetting schieten de kolommen uit het raster. */
.dv nav.dv-kolom {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

.dv-kolom {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dv-kolomkop {
  font-family: var(--font-heading, 'Bebas Neue', sans-serif);
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dv-zacht);
}

/* .footer-links staat er ook op: main.js vult die kolom uit /admin. */
.dv .dv-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.dv .dv-links a,
.dv .dv-los {
  font-size: 15px;
  line-height: 1.45;
}

/* Kolom 4: magazinekaartjes */
.dv-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dv .dv-kaart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  padding: 10px 12px;
  color: #000000;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 150ms ease;
}

.dv .dv-kaart:hover {
  opacity: 1;
  border-color: var(--dv-rood);
}

.dv-kaart-rubriek {
  font-family: var(--font-heading, 'Bebas Neue', sans-serif);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dv-rood);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Onderbalk */
.dv-onder {
  position: relative;
  max-width: 1200px;
  margin: 48px auto 0;
  border-top: 1px solid var(--dv-lijn);
  padding: 20px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dv-logo {
  display: block;
  flex: 0 0 auto;
}

.dv-logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* De sensei zit gecentreerd op de scheidingslijn, tussen logo en contactregel.
   Absoluut geplaatst en dus buiten de rij-hoogte gehouden: zo blijft de voet
   even hoog als zonder hem. */
.dv-sensei {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  height: 130px;
  width: auto;
  display: block;
  pointer-events: none;
}

.dv-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--dv-zacht);
}

.dv-meta a[href="/privacy.html"] {
  color: var(--dv-zacht);
}

@media (max-width: 1100px) {
  .dv-kolommen {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  /* Nieuwsbrief en magazine boven, de twee navkolommen daaronder. */
  .dv-brief { order: 1; }
  .dv-magazine { order: 2; }
  .dv-kolom:not(.dv-magazine) { order: 3; }
  /* Iets ruimer dan op desktop, maar niet over de halve breedte uitgerekt. */
  .dv-brief { max-width: 420px; }
  .dv-sensei { height: 110px; }
}

@media (max-width: 700px) {
  footer.dv {
    padding: 48px 20px 0;
  }
  .dv-kolommen {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dv-kaarten {
    grid-template-columns: 1fr;
  }
  /* Op een telefoon staat de onderbalk onder elkaar; een zwevende sensei zou
     dan over het logo vallen. Hij gaat weer in de rij staan, bovenaan. */
  .dv-sensei {
    position: static;
    transform: none;
    height: 120px;
    align-self: center;
    order: -1;
  }
  .dv-onder {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dv-meta {
    gap: 14px;
  }
}