/* ==========================================================================
   Padexis — Gravity Forms in de huisstijl

   Vervangt de 646 KB eigen styling van Gravity Forms (foundation, framework en
   het orbital-thema), die in functions.php van deze template wordt gehaald.
   Alleen de GF-reset blijft staan.

   De regels hieronder zijn één op één die van `.form` en `.field` uit
   landing.css, toegepast op de markup die Gravity Forms genereert. Zo ziet het
   formulier eruit zoals in het LP3-design, met dezelfde tokens.
   ========================================================================== */

/* --- de omranding: de enige component op de pagina die er een krijgt -------- */
.gform_wrapper{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--radius-l);
  padding:clamp(var(--s-m),3vw,var(--s-l));
}

.gform_wrapper form{margin:0}

.gform_wrapper .gform_fields{
  display:flex;
  flex-direction:column;
  gap:var(--s-s);
  list-style:none;
  margin:0;
  padding:0;
}

.gform_wrapper .gfield{
  display:flex;
  flex-direction:column;
  gap:var(--s-3xs);
  margin:0;
  padding:0;
  list-style:none;
}

/* Een samengesteld veld (zoals Naam) is bij Gravity Forms een <fieldset> met
   een <legend>. Zonder hun CSS tekent de browser daar zijn eigen kader omheen;
   dat kader hoort niet in dit ontwerp, want de omranding zit al om het hele
   formulier. */
.gform_wrapper fieldset.gfield{
  border:0;
  min-inline-size:0;
}
.gform_wrapper fieldset.gfield > legend{
  padding:0;
  float:none;
  width:auto;
}

/* verborgen velden mogen geen ruimte innemen in de flex-kolom */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gform_hidden{display:none}

/* --- labels ---------------------------------------------------------------- */
.gform_wrapper .gfield_label{
  font-size:var(--t-s);
  font-weight:600;
  color:var(--n-900);
  letter-spacing:0;
  margin:0;
}

/* De verplicht-markering.
   Gravity Forms zet hier twee geneste spans neer met allebei de class
   `gfield_required`, waarvan de binnenste de tekst "(Vereist)" draagt. Het
   LP3-design toont die tekst niet — hij maakt het label rommelig en de meeste
   velden zijn toch verplicht. We laten één sterretje staan, in de kleur van
   bijschriften: genoeg om het verschil te zien, zonder dat het schreeuwt.
   De tekst blijft bestaan voor schermlezers. */
.gform_wrapper .gfield_required{
  color:var(--n-600);
  font-weight:400;
  margin-left:2px;
}
.gform_wrapper .gfield_required_text{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
/* alleen op de buitenste span, anders staat het sterretje er twee keer */
.gform_wrapper .gform-field-label > .gfield_required::after,
.gform_wrapper legend > .gfield_required::after{content:"*"}

/* --- invoervelden ---------------------------------------------------------- */
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper textarea,
.gform_wrapper select{
  font-family:inherit;
  font-size:var(--t-base);
  color:var(--n-900);
  width:100%;
  max-width:100%;
  height:48px;
  padding:0 var(--s-s);
  background:var(--n-0);
  border:1px solid var(--n-300);
  border-radius:var(--radius-m);
  box-shadow:none;
  transition:border-color var(--dur-hover) var(--ease);
}

.gform_wrapper textarea{
  min-height:110px;
  height:auto;
  padding:var(--s-xs) var(--s-s);
  resize:vertical;
}

/* het eigen pijltje uit het design, in plaats van het systeempijltje */
.gform_wrapper select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--n-600) 50%),
                   linear-gradient(135deg,var(--n-600) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}

.gform_wrapper input:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover{border-color:var(--n-600)}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  border-color:var(--n-900);
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* --- het naamveld: twee inputs naast elkaar -------------------------------- */
.gform_wrapper .ginput_complex{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-2xs);
}
.gform_wrapper .ginput_complex span{
  display:flex;
  flex-direction:column;
  gap:var(--s-3xs);
}
.gform_wrapper .ginput_complex label{
  order:-1;
  font-size:var(--t-caption);
  font-weight:400;
  color:var(--n-600);
}

@media (max-width:480px){
  .gform_wrapper .ginput_complex{grid-template-columns:1fr}
}

/* --- de knop --------------------------------------------------------------- */
.gform_wrapper .gform_footer{
  margin:var(--s-2xs) 0 0;
  padding:0;
}

.gform_wrapper .gform_button{
  font-family:inherit;
  font-size:var(--t-base);
  font-weight:600;
  width:100%;
  min-height:52px;
  padding:0 var(--s-m);
  color:var(--accent-ink);
  background:var(--accent);
  border:0;
  border-radius:var(--radius-m);
  cursor:pointer;
  transition:background var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease);
}
.gform_wrapper .gform_button:hover{background:var(--accent-hover);transform:translateY(-1px)}
.gform_wrapper .gform_button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gform_wrapper .gform_button[disabled]{opacity:.6;cursor:default;transform:none}

/* --- validatie ------------------------------------------------------------- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea{
  border-color:var(--err);
  background:var(--err-bg);
}

.gform_wrapper .validation_message{
  font-size:var(--t-s);
  color:var(--err);
  margin-top:var(--s-3xs);
  padding:0;
  background:none;
  border:0;
}

/* De samenvattende foutmelding bovenaan. Gravity Forms geeft die standaard een
   rood vlak over de volle breedte; hier volstaat een lijn, want elk veld toont
   zijn eigen melding er al onder. */
.gform_wrapper .gform_validation_errors{
  margin:0 0 var(--s-s);
  padding:var(--s-xs) var(--s-s);
  background:var(--err-bg);
  border:1px solid var(--err);
  border-radius:var(--radius-m);
  box-shadow:none;
}
.gform_wrapper .gform_validation_errors h2{
  font-size:var(--t-s);
  font-weight:600;
  color:var(--err);
  margin:0;
}

/* --- bevestiging ----------------------------------------------------------- */
.gform_confirmation_message{
  font-size:var(--t-lead);
  color:var(--n-900);
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--radius-l);
  padding:clamp(var(--s-m),3vw,var(--s-l));
}

/* --- de AJAX-spinner ------------------------------------------------------- */
.gform_wrapper .gform_ajax_spinner{
  width:20px;
  height:20px;
  margin-left:var(--s-2xs);
  vertical-align:middle;
}

/* --- binnen een .form-kader (de vier advertentiepagina's) ------------------ */
/* Daar heeft het omringende .form-blok al de rand en binnenruimte, met de tekst en
   de regels onder de knop erin. Het formulier zelf krijgt dan geen tweede kader. */
.form .gform_wrapper{background:none;border:0;border-radius:0;padding:0}
.form .gform_confirmation_message{border:0;padding:0;background:none}
/* Velden met layoutGridColumnSpan 6 naast elkaar, zoals in de designs. */
.form .gform_wrapper .gform_fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-s);row-gap:var(--s-s)}
.form .gform_wrapper .gfield{grid-column:span 12}
.form .gform_wrapper .gfield--width-half{grid-column:span 6}
.form .gform_wrapper .gfield--type-hidden,.form .gform_wrapper .gform_hidden{display:none}
@media (max-width:619.98px){.form .gform_wrapper .gfield--width-half{grid-column:span 12}}