/* =====================================================================
   bk-slices.css — nieuwe huisstijl voor de OUDE slice-pagina's
   ALLES onder .bk gescoped: deze pagina's zitten óók in de .bk-wrapper
   (bk_use_new_style() is true voor niet-Woo pagina's), dus zonder .bk-
   scope erven de regels de nieuwe-stijl-context niet en vallen ze kaal.
   Structuur uit de oude type_*.css blijft; kleur/vlak/typografie wint hier.
   ===================================================================== */

/* ---- 0. Slice-pagina reset: geen witte marge boven het eerste vlak ---- */
.bk .page__content { padding-top: 0; margin-top: 0; }
.bk .page__content > .slice:first-child { margin-top: 0; }
.bk .slice__inner { margin: 0; padding: 0; }

/* ---- 1. Groene volvlak-achtergronden eruit ---- */
.bk .slice--type_19,
.bk .slice--type_3 .slice-content--bg--dark,
.bk .slice-content--bg--dark {
  background: var(--bk-off-1);
  color: var(--bk-ink);
}
.bk .slice--type_19 .slice-content__inner__header h1,
.bk .slice--type_19 .slice-content__inner__header p,
.bk .slice--type_19 .slice-content__inner__header li span { color: var(--bk-ink); }

/* ---- 2. Formulierpagina's (aanmelden type_19 / contact type_18) ---- */
.bk .slice--type_18 .slice-content,
.bk .slice--type_19 .slice-content { padding: 0; overflow: visible; }
.bk .slice--type_18 .container,
.bk .slice--type_19 .container {
  max-width: var(--bk-maxw);
  margin-inline: auto;
  padding: 72px var(--bk-pad) 80px;
}
.bk .slice--type_18 .slice-content__inner,
.bk .slice--type_19 .slice-content__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px){
  .bk .slice--type_18 .slice-content__inner,
  .bk .slice--type_19 .slice-content__inner { grid-template-columns: 1fr; gap: 32px; }
  .bk .slice--type_18 .container,
  .bk .slice--type_18 .container,
  .bk .slice--type_19 .container { padding-top: 56px; padding-bottom: 56px; }
}

/* intro-kolom: titel op PASSENDE maat (niet de 54px homepage-h1) */
.bk .slice--type_18 .slice-content__inner__header h1,
.bk .slice--type_19 .slice-content__inner__header h1 {
  font-family: var(--bk-serif);
  color: var(--bk-ink);
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.bk .slice--type_18 .slice-content__inner__header p,
.bk .slice--type_18 .slice-content__inner__header .content-typography,
.bk .slice--type_19 .slice-content__inner__header p {
  font-family: var(--bk-sans);
  color: var(--bk-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.bk .slice--type_18 .slice-content__inner__header a[href^="mailto"] {
  display: inline-block; margin-top: 8px;
  font-family: var(--bk-sans); font-weight: 600; color: var(--bk-green);
}

/* USP-lijst (aanmelden): strak, kleine gap, groene checks op token */
.bk .slice--type_19 .slice-content__inner__header ul {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.bk .slice--type_19 .slice-content__inner__header li {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
}
.bk .slice--type_19 .slice-content__inner__header li svg { flex: 0 0 20px; margin-top: 3px; }
.bk .slice--type_19 .slice-content__inner__header li svg circle { fill: var(--bk-green); }
.bk .slice--type_19 .slice-content__inner__header li span {
  font-family: var(--bk-sans); color: var(--bk-body);
  font-size: 15px; line-height: 1.5;
}

/* formulier-kaart (rechts) */
.bk .slice--type_18 .slice-content__inner__form,
.bk .slice--type_19 .slice-content__inner__form {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius-lg, 20px);
  padding: 36px;
  box-shadow: 0 18px 44px rgba(29,29,27,.06);
}
.bk .slice--type_18 .slice-content__inner__form h2,
.bk .slice--type_19 .slice-content__inner__form h2 {
  font-family: var(--bk-serif); color: var(--bk-ink);
  font-size: 24px; margin: 0 0 24px;
}

/* ---- 3. Contact Form 7 velden — breed geraakt (label > input, p > input, alles) ---- */
.bk .slice--type_18 .wpcf7 p,
.bk .slice--type_19 .wpcf7 p { margin: 0 0 18px; }
.bk .slice--type_18 .wpcf7 label,
.bk .slice--type_19 .wpcf7 label {
  display: block; font-family: var(--bk-sans);
  font-size: 13.5px; font-weight: 500; color: var(--bk-ink); margin: 0 0 6px;
}
.bk .slice--type_18 .wpcf7-form-control-wrap,
.bk .slice--type_19 .wpcf7-form-control-wrap { display: block; }
.bk .slice--type_18 .wpcf7 input[type=text],
.bk .slice--type_18 .wpcf7 input[type=email],
.bk .slice--type_18 .wpcf7 input[type=tel],
.bk .slice--type_18 .wpcf7 input[type=url],
.bk .slice--type_18 .wpcf7 input[type=number],
.bk .slice--type_18 .wpcf7 textarea,
.bk .slice--type_18 .wpcf7 select,
.bk .slice--type_19 .wpcf7 input[type=text],
.bk .slice--type_19 .wpcf7 input[type=email],
.bk .slice--type_19 .wpcf7 input[type=tel],
.bk .slice--type_19 .wpcf7 input[type=url],
.bk .slice--type_19 .wpcf7 input[type=number],
.bk .slice--type_19 .wpcf7 textarea,
.bk .slice--type_19 .wpcf7 select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--bk-sans);
  font-size: 15px;
  color: var(--bk-ink);
  background: var(--bk-off-1);
  border: 1px solid var(--bk-line);
  border-radius: 12px;
  padding: 13px 15px;
  line-height: 1.4;
  transition: border-color .15s ease, background .15s ease;
}
.bk .slice--type_18 .wpcf7 input:focus,
.bk .slice--type_18 .wpcf7 textarea:focus,
.bk .slice--type_18 .wpcf7 select:focus,
.bk .slice--type_19 .wpcf7 input:focus,
.bk .slice--type_19 .wpcf7 textarea:focus,
.bk .slice--type_19 .wpcf7 select:focus {
  outline: none; border-color: var(--bk-green); background: #fff;
}
.bk .slice--type_18 .wpcf7 textarea,
.bk .slice--type_19 .wpcf7 textarea { min-height: 120px; resize: vertical; }
.bk .slice--type_18 .wpcf7 input::placeholder,
.bk .slice--type_19 .wpcf7 input::placeholder { color: var(--bk-muted); }

/* submit = dark pill */
.bk .slice--type_18 .wpcf7 input[type=submit],
.bk .slice--type_19 .wpcf7 input[type=submit],
.bk .slice--type_18 .wpcf7-submit,
.bk .slice--type_19 .wpcf7-submit {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center;
  height: var(--bk-btn-h, 54px);
  padding: 0 30px; margin-top: 8px;
  background: var(--bk-black, #020300); color: #fff;
  font-family: var(--bk-sans); font-size: 15px; font-weight: 500;
  border: 0; border-radius: var(--bk-btn-radius, 14px); cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.bk .slice--type_18 .wpcf7 input[type=submit]:hover,
.bk .slice--type_19 .wpcf7 input[type=submit]:hover,
.bk .slice--type_18 .wpcf7-submit:hover,
.bk .slice--type_19 .wpcf7-submit:hover { opacity: .9; transform: translateY(-1px); }
.bk .slice--type_18 .wpcf7 .wpcf7-not-valid-tip,
.bk .slice--type_19 .wpcf7 .wpcf7-not-valid-tip {
  font-family: var(--bk-sans); font-size: 12.5px; color: #C0392B; margin-top: 4px;
}


/* ---- 4. Aanmelden: type_3-slider verbergen (voegt niks toe) ---- */
.bk .page__content .slice--type_19 ~ .slice--type_3 { display: none; }

/* ---- 5. type_3 content-slider (standalone boek/event-pagina's) ---- */
.bk .slice--type_3 .slice-content { padding: 56px 0 64px; }
.bk .slice--type_3 .slice-content__inner h2.ts--medium-title {
  font-family: var(--bk-serif); color: var(--bk-ink); margin: 0 0 28px;
}
.bk .slice--type_3 .swiper-navigation__prev,
.bk .slice--type_3 .swiper-navigation__next { cursor: pointer; opacity: .85; transition: opacity .15s ease; }
.bk .slice--type_3 .swiper-navigation__prev:hover,
.bk .slice--type_3 .swiper-navigation__next:hover { opacity: 1; }
.bk .slice--type_3 .swiper-navigation__prev svg,
.bk .slice--type_3 .swiper-navigation__next svg { color: var(--bk-green); }

/* ---- 6. Oud Zeer Gesprek: type_97/98/99 ---- */
.bk .slice--type_98 .slice-98 { padding: 56px 0; }
.bk .slice--type_98 .container { max-width: var(--bk-maxw); margin-inline: auto; padding-inline: var(--bk-pad); }
.bk .slice--type_98 .slice-98__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 900px){ .bk .slice--type_98 .slice-98__columns { grid-template-columns: 1fr; gap: 28px; } }
.bk .slice--type_98 .slice-98__col.content-typography { font-family: var(--bk-sans); color: var(--bk-body); font-size: 16px; line-height: 1.65; }
.bk .slice--type_98 .slice-98__col.content-typography h1,
.bk .slice--type_98 .slice-98__col.content-typography h2,
.bk .slice--type_98 .slice-98__col.content-typography h3 { font-family: var(--bk-serif); color: var(--bk-ink); }
.bk .slice--type_99 { font-family: var(--bk-sans); color: var(--bk-body); }
.bk .slice--type_99 h1,.bk .slice--type_99 h2,.bk .slice--type_99 h3 { font-family: var(--bk-serif); color: var(--bk-ink); }
.bk .slice--type_97 .slice-97 { padding: 40px 0; }
.bk .slice--type_97 .container { max-width: var(--bk-maxw); margin-inline: auto; padding-inline: var(--bk-pad); }


/* ---- v2.55: aanmelden — oude type_19 constraints neutraliseren + input-hoogte ---- */
@media (min-width: 1030px) {
  .bk .slice--type_19 .slice-content__inner__header { gap: 0; }
  .bk .slice--type_19 .slice-content__inner__header h1 { max-width: none; }
  .bk .slice--type_19 .slice-content__inner__header p { max-width: none; }
}
/* consistente veldhoogte (was: alleen padding -> ongelijk) */
.bk .slice--type_19 .wpcf7 input[type=text],
.bk .slice--type_19 .wpcf7 input[type=email],
.bk .slice--type_19 .wpcf7 input[type=tel],
.bk .slice--type_19 .wpcf7 input[type=url],
.bk .slice--type_19 .wpcf7 input[type=number],
.bk .slice--type_19 .wpcf7 select,
.bk .slice--type_18 .wpcf7 input[type=text],
.bk .slice--type_18 .wpcf7 input[type=email],
.bk .slice--type_18 .wpcf7 input[type=tel],
.bk .slice--type_18 .wpcf7 select {
  height: 52px; padding: 0 16px; line-height: 52px;
}
.bk .slice--type_19 .wpcf7 textarea,
.bk .slice--type_18 .wpcf7 textarea { min-height: 120px; padding: 14px 16px; line-height: 1.5; }

/* ---- v2.57: oude fixed-header compensatie uit critical-default-page.css neutraliseren ----
   Die bundel (inline in <head>) zet .header{position:fixed} + main{padding-top:95/105px}
   + .admin-bar header{top:32px} voor het OUDE header-systeem. De nieuwe .bk-header is
   relative, dus die main-padding is een overbodig gat boven de content. Op nieuwe-stijl
   (.bk) pagina's zetten we het terug. */
.bk main { padding-top: 0; }
.bk .bk-header { position: relative; top: auto; }
.admin-bar .bk .bk-header { top: auto; }


/* ---- v2.59: aanmelden USP-lijst — nette vinkjes (zwarte bol + wit vinkje, zoals .bk-benefits) ---- */
.bk .slice--type_19 .slice-content__inner__header ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bk .slice--type_19 .slice-content__inner__header ul li {
  position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0;
}
/* de inline-svg uit de markup verbergen (we tekenen het vinkje via ::before, net als de rest van de site) */
.bk .slice--type_19 .slice-content__inner__header ul li > svg { display: none; }
.bk .slice--type_19 .slice-content__inner__header ul li::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--bk-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'><path d='M2 5.8L4.3 8 9 2.5' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/11px no-repeat;
}
.bk .slice--type_19 .slice-content__inner__header ul li span {
  font-family: var(--bk-sans); font-size: 16px; line-height: 1.5; color: var(--bk-body);
}