/*
 * Chatter Intake Manager — het formulier op de website.
 *
 * De kleuren komen uit het thema: --ink, --paper, --copper en de rest staan
 * op :root in style.css van Imperior. De fallbacks erachter zijn er voor het
 * geval de shortcode ooit in een ander thema terechtkomt.
 *
 * Het formulier staat in de leeskolom van page.php (.prose). Een paar regels
 * hieronder draaien de typografie daarvan terug, want een formulier is geen
 * lopende tekst.
 */

.cf {
  --cf-ink:        var(--ink, #070707);
  --cf-ink-2:      var(--ink-2, #101011);
  --cf-lijn:       var(--line, rgba(244, 239, 229, .09));
  --cf-lijn-2:     var(--line-2, rgba(244, 239, 229, .17));
  --cf-paper:      var(--paper, #F4EFE5);
  --cf-paper-dim:  var(--paper-dim, #AAA49A);
  --cf-paper-faint:var(--paper-faint, #8F8A82);
  --cf-koper:      var(--copper, #C08A5C);
  --cf-koper-lift: var(--copper-lift, #DBA173);
  --cf-koper-deep: var(--copper-deep, #7B4B29);
  --cf-rood:       #D08070;
  --cf-ease:       var(--ease, cubic-bezier(.2, .7, .3, 1));

  color: var(--cf-paper);
  font-size: 1rem;
  line-height: 1.6;
}

/* In .prose krijgt elk kind een marge; de secties regelen hun eigen ruimte. */
.prose .cf > * + * { margin-top: 0; }

/*
 * De fade-in van het thema uitzetten op deze pagina.
 *
 * page.php zet de inhoud in .prose.rv. Die wordt pas zichtbaar als 12% van
 * het blok in beeld komt, en 12% van een formulier van ruim 8000px past in
 * geen enkel scherm — het blok zou dus permanent op opacity 0 blijven staan.
 *
 * Deze selector is specifieker dan die van het thema (0,3,1 tegen 0,2,1),
 * dus de volgorde waarin de stylesheets binnenkomen maakt niet uit. De
 * body-class komt uit chatter_body_class() in inc/formulier.php.
 */
body.chatter-formulier-pagina .prose.rv {
  opacity: 1;
  transform: none;
}

.cf * { box-sizing: border-box; }

/* ── de inleiding ──────────────────────────────────────────────────────── */

.cf-intro {
  border-left: 1px solid var(--cf-koper-deep);
  padding-left: clamp(16px, 2.4vw, 26px);
  margin-bottom: clamp(38px, 6vh, 64px);
  color: var(--cf-paper-dim);
}
.cf-intro p { margin: 0 0 .9em; }
.cf-intro p:last-child { margin-bottom: 0; }
.cf-waarschuwing { color: var(--cf-paper); }
.cf-waarschuwing strong { color: var(--cf-koper-lift); font-weight: 500; }

/* ── de secties ────────────────────────────────────────────────────────── */

.cf-sectie {
  padding-top: clamp(30px, 5vh, 52px);
  margin-top: clamp(30px, 5vh, 52px);
  border-top: 1px solid var(--cf-lijn);
}
.cf-sectie:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.cf-sectie__kop { margin-bottom: clamp(22px, 3vh, 34px); }

.cf-eyebrow {
  margin: 0 0 .7em;
  font-size: .685rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cf-koper);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .85em;
}
.cf-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--cf-koper);
  opacity: .6;
  flex: none;
}

.cf-sectie__titel {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--cf-paper);
}

.cf-sectie__uitleg {
  margin: .9em 0 0;
  color: var(--cf-paper-dim);
  font-size: .94rem;
  line-height: 1.6;
}

/* ── een veld ──────────────────────────────────────────────────────────── */

.cf-velden { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 30px); }

.cf-veld { margin: 0; }

.cf-label {
  display: block;
  margin: 0 0 .6em;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--cf-paper);
  font-weight: 400;
  padding: 0;
}
.cf-ster { color: var(--cf-koper); margin-left: .25em; }

.cf-vraag,
.cf-uitleg {
  margin: -.2em 0 .7em;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--cf-paper-dim);
}
.cf-uitleg { color: var(--cf-paper-faint); font-size: .82rem; }

.cf-invoer {
  width: 100%;
  background: rgba(244, 239, 229, .02);
  border: 1px solid var(--cf-lijn-2);
  border-radius: 2px;
  color: var(--cf-paper);
  font-family: inherit;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.55;
  padding: .85em 1em;
  transition: border-color .3s var(--cf-ease), background .3s var(--cf-ease);
  -webkit-appearance: none;
  appearance: none;
}
.cf-invoer:hover { border-color: rgba(244, 239, 229, .28); }
.cf-invoer:focus {
  outline: none;
  border-color: var(--cf-koper);
  background: rgba(192, 138, 92, .04);
}
.cf-invoer::placeholder { color: var(--cf-paper-faint); }

textarea.cf-invoer { resize: vertical; min-height: 7.5em; display: block; }

input[type="date"].cf-invoer { max-width: 16rem; }
input[type="date"].cf-invoer::-webkit-calendar-picker-indicator {
  filter: invert(.75) sepia(.3);
  cursor: pointer;
}

/* ── keuzes ────────────────────────────────────────────────────────────── */

.cf-groep { border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-groep .cf-label { margin-bottom: .75em; }

.cf-keuzes { display: flex; flex-wrap: wrap; gap: 10px; }

.cf-keuze {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  border: 1px solid var(--cf-lijn-2);
  border-radius: 2px;
  padding: .72em 1.1em;
  cursor: pointer;
  color: var(--cf-paper-dim);
  font-size: .9rem;
  transition: all .28s var(--cf-ease);
  background: rgba(244, 239, 229, .02);
}
.cf-keuze:hover { border-color: var(--cf-paper-faint); color: var(--cf-paper); }
.cf-keuze input { accent-color: var(--cf-koper); width: 16px; height: 16px; margin: 0; flex: none; }
.cf-keuze:has(input:checked) {
  border-color: var(--cf-koper);
  color: var(--cf-paper);
  background: rgba(192, 138, 92, .09);
}
.cf-keuze:has(input:focus-visible) { outline: 2px solid var(--cf-koper); outline-offset: 2px; }

/* ── de twee bevestigingen ─────────────────────────────────────────────── */

.cf-akkoord {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  color: var(--cf-paper-dim);
  font-size: .92rem;
  line-height: 1.6;
}
.cf-akkoord input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cf-akkoord__vink {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--cf-lijn-2);
  border-radius: 2px;
  position: relative;
  transition: all .25s var(--cf-ease);
}
.cf-akkoord__vink::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--cf-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s var(--cf-ease);
}
.cf-akkoord:hover .cf-akkoord__vink { border-color: var(--cf-paper-faint); }
.cf-akkoord input:checked + .cf-akkoord__vink { background: var(--cf-koper); border-color: var(--cf-koper); }
.cf-akkoord input:checked + .cf-akkoord__vink::after { transform: rotate(45deg) scale(1); }
.cf-akkoord input:focus-visible + .cf-akkoord__vink { outline: 2px solid var(--cf-koper); outline-offset: 2px; }

/* ── foutmeldingen ─────────────────────────────────────────────────────── */

.cf-fout {
  margin: .55em 0 0;
  font-size: .82rem;
  color: var(--cf-rood);
  display: flex;
  align-items: center;
  gap: .5em;
}
.cf-fout::before { content: '!'; font-weight: 600; }
.cf-fout[hidden] { display: none; }

.cf-veld.is-fout .cf-invoer { border-color: var(--cf-rood); }
.cf-veld.is-fout .cf-akkoord__vink { border-color: var(--cf-rood); }
.cf-veld.is-fout .cf-label { color: var(--cf-paper); }

/* ── de honeypot ───────────────────────────────────────────────────────── */

.cf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── verzenden ─────────────────────────────────────────────────────────── */

.cf-captcha { margin-top: clamp(28px, 4vh, 40px); }

.cf-voet {
  margin-top: clamp(32px, 5vh, 52px);
  padding-top: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--cf-lijn);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}

.cf-verzend { border: 0; font-family: inherit; }
.cf-verzend[disabled] { opacity: .55; cursor: wait; transform: none; }

.cf-voet__noot {
  margin: 0;
  font-size: .82rem;
  color: var(--cf-paper-faint);
  max-width: 34ch;
}

.cf-melding {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--cf-lijn-2);
  border-left: 2px solid var(--cf-rood);
  background: var(--cf-ink-2);
  color: var(--cf-paper);
  font-size: .9rem;
  line-height: 1.55;
}
.cf-melding[hidden] { display: none; }

.cf-recaptcha-noot {
  margin: 20px 0 0;
  font-size: .76rem;
  color: var(--cf-paper-faint);
  line-height: 1.5;
}
.cf-recaptcha-noot a { color: var(--cf-paper-dim); }

/* ── het scherm na het verzenden ───────────────────────────────────────── */

.cf-klaar {
  border: 1px solid var(--cf-lijn-2);
  background: var(--cf-ink-2);
  padding: clamp(30px, 5vw, 56px);
  text-align: left;
}
.cf-klaar[hidden] { display: none; }
.cf-klaar__titel {
  margin: .3em 0 .5em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.024em;
  line-height: 1.1;
  color: var(--cf-paper);
}
.cf-klaar__tekst { margin: 0; color: var(--cf-paper-dim); max-width: 48ch; }

/* ── kleinere schermen ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .cf-keuzes { gap: 8px; }
  .cf-keuze { padding: .65em .9em; font-size: .86rem; }
  .cf-voet { flex-direction: column; align-items: stretch; }
  .cf-verzend { width: 100%; }
  .cf-voet__noot { max-width: none; }
}

/* ── minder beweging ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cf * { transition: none !important; }
}