/* ============================================================
   VERSIEBEHEER — 06b-footer.css
   Bestandsversie: 1.0 · Release: R3 · 2026-07-20 · Full width & designconsistentie
   Changelog:
   1.0  NIEUW. Footer: zware inkt-rule, surface, ws-grid-split, mobiele
		GB Pro accordion (desktop opengedrukt), colofon in klein Inter.
		Vervangt 06-header-footer.css — dat bestand VERWIJDEREN en de
		enqueue in functions.php aanpassen.
   ============================================================ */

/* ============================================================
   WESA — 06b-footer.css
   Laag 6b: footer. Ontwerp v3/v4: zware inkt-rule bovenlangs,
   surface-achtergrond, ws-grid-split (merkkolom breder),
   colofonregel klein in Inter (geen mono — afgewezen patroon).
   Mobiel: kolomtitels als GB Pro accordion-toggles.
   Vervangt het lege 06-header-footer.css (hernoemen + enqueue
   aanpassen in functions.php).
   ============================================================ */


/* ------------------------------------------------------------
   FOOTER-WRAPPER
   ------------------------------------------------------------ */

.ws-site-footer {
  border-block-start: var(--wsa-border-heavy) solid var(--wsa-clr-rule);
  background-color: var(--wsa-clr-surface);
  margin-block-start: var(--wsa-space-3xl);
}

.ws-site-footer .ws-container {
  padding-block: var(--wsa-space-xl) var(--wsa-space-m);
}


/* ------------------------------------------------------------
   MERKKOLOM — zegel + omschrijving
   ------------------------------------------------------------ */

.ws-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wsa-space-s);
}

.ws-footer-brand__logo {
  block-size: 3rem;
  inline-size: auto;
}

.ws-footer-brand__text {
  font-size: var(--wsa-fs-300);
  color: var(--wsa-clr-text-secondary);
  line-height: var(--wsa-lh-body);
  max-width: 34ch;
}


/* ------------------------------------------------------------
   LINKKOLOMMEN — GB Pro accordion als structuur.
   Desktop: altijd open, toggle oogt als kolomtitel.
   Mobiel: inklapbaar met chevron.
   ------------------------------------------------------------ */

.ws-footer-col .gb-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wsa-space-2xs);
  inline-size: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  font-family: var(--wsa-ff-heading);
  font-weight: var(--wsa-fw-heading);
  font-size: var(--wsa-fs-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wsa-clr-text);
  cursor: pointer;
}

/* Chevron draait mee met open-state */
.ws-footer-col .ws-footer-chevron {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-inline-end: var(--wsa-border-bold) solid var(--wsa-clr-text-muted);
  border-block-end: var(--wsa-border-bold) solid var(--wsa-clr-text-muted);
  transform: rotate(45deg);
  transition: transform var(--wsa-transition-fast);
  flex-shrink: 0;
}

.ws-footer-col .gb-accordion__toggle[aria-expanded="true"] .ws-footer-chevron {
  transform: rotate(225deg);
}

/* Linklijst in de kolom */
.ws-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--wsa-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wsa-tap-target);
  color: var(--wsa-clr-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--wsa-fs-300);
}

.ws-footer-links a:hover {
  color: var(--wsa-clr-text);
}

/* Desktop (≥48em): accordion uitgeschakeld — alles open, chevron weg.
   TODO: bevestigen — check in devtools of GB Pro gesloten content met
   inline display verbergt; zo ja, dan is !important hier noodzakelijk. */
@media (min-width: 48em) {
  .ws-footer-col .gb-accordion__toggle {
	cursor: default;
	pointer-events: none;
	margin-block-end: var(--wsa-space-xs);
  }

  .ws-footer-col .ws-footer-chevron {
	display: none;
  }

  .ws-footer-col .gb-accordion__content {
	display: block !important;
	block-size: auto !important;
	visibility: visible !important;
  }
}

/* Mobiel (<48em): kolommen gescheiden door hairlines, ruime tap-targets */
@media (max-width: 47.99em) {
  .ws-footer-col {
	border-block-start: var(--wsa-border-hairline) solid var(--wsa-clr-border);
	padding-block-start: var(--wsa-space-xs);
  }

  .ws-footer-col .gb-accordion__toggle {
	min-height: var(--wsa-tap-target);
  }

  .ws-footer-col .gb-accordion__content {
	padding-block-start: var(--wsa-space-2xs);
  }
}


/* ------------------------------------------------------------
   COLOFONREGEL — hairline erboven, klein Inter
   ------------------------------------------------------------ */

.ws-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wsa-space-xs);
  margin-block-start: var(--wsa-space-l);
  padding-block-start: var(--wsa-space-s);
  border-block-start: var(--wsa-border-hairline) solid var(--wsa-clr-border);
  font-size: var(--wsa-fs-300);
  color: var(--wsa-clr-text-muted);
}

.ws-footer-bottom p {
  max-width: none;
}