/* ============================================================
   Contact-formulier (h2g/contact-formulier) — info-kolom links,
   Gravity Forms-formulier (of mailto-fallback) rechts. Pixel-perfect naar:
   design/Contact+team/design_handoff_team_contact/contact-pagina.html

   GF-markup wordt hier volledig zelf gestijld (patroon uit footer.css):
   verdubbelde-klasse-selectors om GF-framework-styling te neutraliseren,
   legacy- én gravity-theme/orbital-markup afgedekt.
   ============================================================ */

.ctf-formulier {
  --ctf-kaart-bg:   #0D1420;
  --ctf-teal-hover: #5FD5C2;
  margin-top: 96px;
  scroll-margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 72px;
}

.ctf-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}

.ctf-info h2 { margin: 18px 0 14px; font-size: 34px; letter-spacing: -.5px; }
.ctf-uitleg {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--nile-300);
  text-wrap: pretty;
}
.ctf-terug { margin: 18px 0 0; font-size: 14.5px; }
.ctf-terug a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-h);
  font-weight: 600;
  color: var(--teal-300);
}
.ctf-terug a:hover { color: var(--ctf-teal-hover); }

/* ── Fallback-kaart (formId = 0 — nooit een dood formulier op de site) ── */
.ctf-fallback {
  background: var(--ctf-kaart-bg);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; /* exact uit design (--r-2xl is 16px) */
  padding: 36px;
}
.ctf-fallback p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--nile-300); }
.ctf-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: var(--r-md);
  background: var(--teal-300);
  color: #fff;
  transition: background .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.ctf-knop:hover {
  background: var(--ctf-teal-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(47,158,141,.35);
}

.ctf-footnote { margin-top: 18px; font-size: 13px; color: var(--nile-300); }

/* ── Gravity Forms — velden-grid ─────────────────────────────────────────────
   GF (orbital) werkt met een 12-koloms grid en zet de veldbreedte als span op
   het veld zelf (GF-editor "Veldbreedte 50%" → gfield--width-half → span 6).
   We nemen dat 12-kolomsmodel hier over met de 16px-gap uit het design; een
   eigen 2-koloms grid botst met GF's spans (alle velden onder elkaar). */
.ctf-form-wrap .gform_wrapper { margin: 0; max-width: 100%; }
.ctf-form-wrap .gform_wrapper.gform_wrapper .gform-body,
.ctf-form-wrap .gform_wrapper.gform_wrapper .gform_body { margin: 0; padding: 0; }

.ctf-form-wrap .gform_wrapper.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield { margin: 0; padding: 0; grid-column: 1 / -1; }

/* Veldbreedtes uit de GF-editor — expliciet geborgd (orbital + legacy-classes) */
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-half,
.ctf-form-wrap .gform_wrapper.gform_wrapper .gf_left_half,
.ctf-form-wrap .gform_wrapper.gform_wrapper .gf_right_half { grid-column: span 6; }
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-third { grid-column: span 4; }
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-full,
.ctf-form-wrap .gform_wrapper.gform_wrapper .gf_full_width,
.ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--type-textarea { grid-column: 1 / -1; }

/* Sublabels (bv. "Volledige naam" onder het naamveld): visueel verbergen —
   het hoofdlabel staat al boven het veld en de placeholder toont de hint
   (design). Blijft beschikbaar voor screenreaders. */
.ctf-form-wrap .gform_wrapper .gform-field-label--type-sub {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ctf-form-wrap .gform_wrapper .gform_footer,
.ctf-form-wrap .gform_wrapper .gform_page_footer {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Labels */
.ctf-form-wrap .gform_wrapper .gfield_label,
.ctf-form-wrap .gform_wrapper .gform-field-label {
  display: block;
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 600;
  color: #DFE5ED;
  margin-bottom: 6px;
}
.ctf-form-wrap .gform_wrapper .gfield_required { color: var(--gold-500); margin-left: 2px; }
.ctf-form-wrap .gform_wrapper .gfield_description,
.ctf-form-wrap .gform_wrapper .gform-field-description { color: var(--nile-300); font-size: 13px; margin-top: 4px; }

/* Invoervelden */
.ctf-form-wrap .gform_wrapper .ginput_container { margin: 0; }
.ctf-form-wrap .gform_wrapper input[type="text"],
.ctf-form-wrap .gform_wrapper input[type="email"],
.ctf-form-wrap .gform_wrapper input[type="tel"],
.ctf-form-wrap .gform_wrapper input[type="number"],
.ctf-form-wrap .gform_wrapper input[type="url"],
.ctf-form-wrap .gform_wrapper textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  color: #DFE5ED;
  font-family: var(--font-b);
  font-size: 14.5px;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s;
}
.ctf-form-wrap .gform_wrapper input::placeholder,
.ctf-form-wrap .gform_wrapper textarea::placeholder { color: #5A6A86; opacity: 1; }
.ctf-form-wrap .gform_wrapper input:focus,
.ctf-form-wrap .gform_wrapper textarea:focus { border-color: var(--teal-300); }
.ctf-form-wrap .gform_wrapper textarea { height: 140px; resize: vertical; }

/* Verzendknop (teal, zelfde stijl als .ctf-knop) */
.ctf-form-wrap .gform_wrapper .gform_footer input[type="submit"],
.ctf-form-wrap .gform_wrapper input[type="submit"],
.ctf-form-wrap .gform_wrapper button.gform_button,
.ctf-form-wrap .gform_wrapper .gform_button {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 28px;
  border: none;
  border-radius: var(--r-md);
  background: var(--teal-300);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.ctf-form-wrap .gform_wrapper .gform_footer input[type="submit"]:hover,
.ctf-form-wrap .gform_wrapper input[type="submit"]:hover,
.ctf-form-wrap .gform_wrapper button.gform_button:hover,
.ctf-form-wrap .gform_wrapper .gform_button:hover {
  background: var(--ctf-teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(47,158,141,.35);
}
.ctf-form-wrap .gform_wrapper .gform_ajax_spinner { width: 20px; height: 20px; vertical-align: middle; }

/* Notitie naast de verzendknop ("Reactie binnen één werkdag.") — wordt door
   render.php via de gform_submit_button-filter in de gform_footer geplaatst,
   zodat hij conform design op één regel met de knop staat. */
.ctf-form-wrap .gform_wrapper .gform_footer .ctf-verstuur-nb {
  font-size: 13px;
  color: var(--nile-300);
}

/* "* Verplicht"-legend: klein en onopvallend (blijft zichtbaar — a11y) */
.ctf-form-wrap .gform_wrapper .gform_required_legend {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--nile-300);
  margin: 0 0 4px;
}
.ctf-form-wrap .gform_wrapper .gfield--type-honeypot,
.ctf-form-wrap .gform_wrapper .gfield_visibility_hidden { display: none !important; }

/* Validatie — leesbaar op de donkere achtergrond */
.ctf-form-wrap .gform_wrapper .gform_validation_errors {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 10px 14px;
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.4);
  border-radius: var(--r-md);
}
.ctf-form-wrap .gform_wrapper .gform_validation_errors h2,
.ctf-form-wrap .gform_wrapper .gform_submission_error { color: #fca5a5; font-size: 13px; font-weight: 600; margin: 0; }
.ctf-form-wrap .gform_wrapper .gfield_validation_message,
.ctf-form-wrap .gform_wrapper .validation_message {
  grid-column: 1 / -1;
  color: #fca5a5;
  font-size: 12.5px;
  margin: 6px 0 0;
  padding: 0;
  background: none;
  border: 0;
}
.ctf-form-wrap .gform_wrapper .gfield_error input,
.ctf-form-wrap .gform_wrapper .gfield_error textarea { border-color: rgba(248,113,113,.7); }

/* Bevestiging na verzenden */
.ctf-form-wrap .gform_confirmation_wrapper,
.ctf-form-wrap .gform_confirmation_message,
.ctf-form-wrap .gform_wrapper .gform_confirmation_message {
  color: var(--teal-300);
  font-size: 15px;
  line-height: 1.6;
}

/* ── GF orbital-theme: kleuren op wortelniveau naar de huisstijl ────────────
   Op pagina's mét een formulier laadt GF zijn eigen stylesheet; het orbital-
   framework kleurt de knop dan via theme-variabelen (#204CE5 blauw) en wint
   qua specificiteit van gewone class-overrides. Door de variabelen zélf te
   overschrijven kleuren knop, hover en focus-accenten in één keer mee. */
.ctf-formulier .gform-theme.gform-theme--orbital,
.ctf-formulier .gform_wrapper.gform-theme {
  --gf-color-primary: var(--teal-300);
  --gf-ctrl-btn-bg-color-primary: var(--teal-300);
  --gf-ctrl-btn-bg-color-hover-primary: var(--ctf-teal-hover);
  --gf-ctrl-btn-color-primary: #fff;
  --gf-ctrl-btn-color-hover-primary: #fff;
  --gf-ctrl-btn-border-color-primary: transparent;
  --gf-ctrl-btn-border-color-hover-primary: transparent;
  --gf-ctrl-btn-radius: var(--r-md);
  /* GF's eigen grid-gap (default 2rem) gelijktrekken met de design-gap.
     !important: GF injecteert theme-variabelen inline met ID-specificiteit
     (#gform_wrapper_N…) waar een class-scope van verliest. De layout is
     daarnaast al geborgd via de directe gap-property op .gform_fields. */
  --gf-form-gap-x: 16px !important;
  --gf-form-gap-y: 16px !important;
}

@media (max-width: 1024px) {
  .ctf-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  /* Mobiel: alle velden op volle breedte, ongeacht de GF-veldbreedte */
  .ctf-form-wrap .gform_wrapper.gform_wrapper .gfield,
  .ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-half,
  .ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-third,
  .ctf-form-wrap .gform_wrapper.gform_wrapper .gfield--width-quarter { grid-column: 1 / -1; }
  .ctf-form-wrap .gform_wrapper .gform_footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ctf-fallback { padding: 26px; }
}