/*
 * Contact - formulier + info-sidebar.
 * Bevat ook de styling van de Gravity Forms-output (scoped op .contact-form).
 */

.contact {
  padding:    var(--space-8) 0 var(--space-24);
  background: var(--color-bg-white);
}

.contact__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

.contact__grid {
  display:               grid;
  grid-template-columns: 1.45fr 1fr;
  gap:                   var(--space-16);
  align-items:           start;
}

/* ----------------------------------------
 * Form block
 * ---------------------------------------- */

.form-block__title {
  margin:         0 0 var(--space-3);
  font-size:      28px;
  font-weight:    var(--font-extrabold);
  letter-spacing: -0.6px;
  color:          var(--color-text-heading);
}

.form-block__lead {
  margin:      0 0 var(--space-8);
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-meta);
}

.form-block__hint {
  margin:      var(--space-5) 0 0;
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-text-meta);
}

.contact-form__notice {
  padding:       var(--space-6);
  background:    var(--color-bg-section);
  border:        1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  color:         var(--color-text-meta);
}

/* ----------------------------------------
 * Gravity Forms (afgestemd op het ontwerp)
 * ---------------------------------------- */

.contact-form .gform_wrapper form {
  margin: 0;
}

.contact-form .gform_required_legend {
  display: none;
}

.contact-form .gform_wrapper .gform_fields {
  row-gap:    var(--space-5);
  column-gap: var(--space-5);
}

.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper legend.gfield_label {
  display:        block;
  margin-bottom:  var(--space-2);
  font-size:      13.5px;
  font-weight:    var(--font-semibold);
  color:          var(--color-text-heading);
}

.contact-form .gform_wrapper .gfield_required {
  color:       var(--color-accent);
  margin-left: 2px;
}

.contact-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper input[type="tel"],
.contact-form .gform_wrapper input[type="url"],
.contact-form .gform_wrapper input[type="number"],
.contact-form .gform_wrapper textarea,
.contact-form .gform_wrapper select {
  width:                   100%;
  padding:                 14px 16px;
  border:                  1px solid var(--color-border);
  border-radius:           10px;
  background:              var(--color-bg-white);
  font-family:             var(--font-body);
  font-size:               14.5px;
  color:                   var(--color-text-heading);
  transition:              border-color var(--transition-fast),
                           box-shadow var(--transition-fast);
  -webkit-appearance:      none;
  appearance:              none;
}

.contact-form .gform_wrapper input:focus,
.contact-form .gform_wrapper textarea:focus,
.contact-form .gform_wrapper select:focus {
  outline:      none;
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(120, 159, 30, 0.12);
}

/* Select (dropdown, bv. "Onderwerp").
 * Gravity Forms tekent zijn eigen chevron met (0,0,1,1) / hover (0,0,2,1),
 * terwijl onze background-shorthand hierboven (0,0,2,1) de afbeelding wist en
 * background-repeat op 'repeat' zet — waardoor GF's hover-chevron tegelt
 * (de "zigzag"). Daarom nemen we de select volledig over met (0,0,4,1): één
 * eigen chevron, no-repeat, ruimte rechts, en een leesbare placeholder. */
.contact-form .gform_wrapper.gform-theme select.gfield_select {
  /* GF forceert op de control een vaste hoogte (38px) met line-height:38px;
   * samen met onze verticale padding duwt dat de gekozen tekst/placeholder uit
   * de box (onzichtbaar). Line-height normaliseren + padding verticaal terug-
   * brengen zodat de tekst binnen dezelfde 38px netjes gecentreerd staat. */
  padding:             9px 44px 9px 16px;
  line-height:         1.2;
  color:               var(--color-text-heading);
  background-color:    var(--color-bg-white);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235a6469' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  background-size:     12px 8px;
}

/* Placeholder-optie gedempt tonen zolang er niets is gekozen. */
.contact-form .gform_wrapper.gform-theme select.gfield_select:has(option.gf_placeholder:checked) {
  color: #a3a8a8;
}

.contact-form .gform_wrapper textarea {
  min-height:  140px;
  line-height: 1.55;
  resize:      vertical;
}

.contact-form .gform_wrapper input::placeholder,
.contact-form .gform_wrapper textarea::placeholder {
  color: #a3a8a8;
}

.contact-form .gform_wrapper .gfield_consent .gfield_label,
.contact-form .gform_wrapper .gchoice label {
  display:     inline;
  font-size:   13.5px;
  font-weight: var(--font-medium);
  color:       var(--color-text-meta);
}

.contact-form .gform_wrapper input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.contact-form .gform_footer {
  margin-top: var(--space-6);
  padding:    0;
}

/* Verzendknop — identiek aan de site-CTA (.btn--primary).
 * Gravity Forms 2.10 laadt zijn eigen "orbital/framework"-thema dat de knop
 * blauw kleurt via een selector met specificiteit (0,0,6,1) (basis) en
 * (0,0,7,1) (hover/focus). Daarom scopen we hier bewust mee op de GF-thema-
 * klassen: onze basisregel is (0,0,7,1), de state-regel (0,0,8,1). Zo winnen
 * we de cascade zonder !important en raken we uitsluitend de submit-knop. */
.contact-form .gform_wrapper.gform-theme .gform_footer
  :is(input[type="submit"], button).button.gform_button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  width:           auto;
  block-size:      auto;
  height:          auto;
  min-height:      0;
  padding:         20px 50px;
  background-color: var(--color-accent);
  color:           #ffffff;
  border:          none;
  border-radius:   var(--radius-full);
  font-family:     var(--font-heading);
  font-size:       15px;
  font-weight:     var(--font-semibold);
  line-height:     1;
  letter-spacing:  var(--tracking-normal);
  white-space:     nowrap;
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   box-shadow var(--transition-fast),
                   transform var(--transition-fast);
  -webkit-appearance: none;
  appearance:      none;
}

.contact-form .gform_wrapper.gform-theme .gform_footer
  :is(input[type="submit"], button).button.gform_button:is(:hover, :focus, :focus-visible, :active) {
  background-color: var(--color-accent-dark);
  color:            #ffffff;
  box-shadow:       var(--shadow-primary-hover);
  transform:        translateY(-1px);
}

.contact-form .gform_wrapper .gfield_error input,
.contact-form .gform_wrapper .gfield_error textarea,
.contact-form .gform_wrapper .gfield_error select {
  border-color: #c0392b;
}

/* ----------------------------------------
 * Info sidebar
 * ---------------------------------------- */

.info-block {
  position:      sticky;
  top:           var(--space-6);
  padding:       var(--space-10) var(--space-8);
  background:    var(--color-bg-section);
  border:        1px solid var(--color-border);
  border-radius: 18px;
}

.info-block__title {
  margin:         0 0 var(--space-2);
  font-size:      19px;
  font-weight:    var(--font-bold);
  letter-spacing: -0.3px;
  color:          var(--color-text-heading);
}

.info-block__sub {
  margin:      0 0 var(--space-6);
  font-size:   var(--text-sm);
  line-height: 1.55;
  color:       var(--color-text-meta);
}

.info-block__list {
  display:        flex;
  flex-direction: column;
}

.info-item {
  display:       flex;
  gap:           var(--space-4);
  padding:       var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.info-item:last-child {
  border-bottom: none;
}

.info-item__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           42px;
  height:          42px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  background:      var(--color-bg-accent-soft);
  color:           var(--color-accent);
}

.info-item__icon svg {
  width:  20px;
  height: 20px;
}

.info-item__label {
  margin-bottom:  var(--space-1);
  font-size:      var(--text-xs);
  font-weight:    var(--font-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          var(--color-text-meta);
}

.info-item__value {
  font-size:   15.5px;
  font-weight: var(--font-semibold);
  line-height: 1.45;
  color:       var(--color-text-heading);
}

.info-item__value a {
  color:           var(--color-text-heading);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.info-item__value a:hover {
  color: var(--color-accent);
}

.info-item__meta {
  margin-top:  var(--space-1);
  font-size:   var(--text-sm);
  line-height: 1.4;
  color:       var(--color-text-meta);
}

.info-block__divider {
  height:     1px;
  margin:     var(--space-6) 0 var(--space-5);
  background: var(--color-border);
}

.info-note {
  display:       flex;
  gap:           var(--space-3);
  align-items:   flex-start;
  padding:       var(--space-4);
  background:    var(--color-bg-accent-soft);
  border-radius: var(--radius-md);
}

.info-note svg {
  width:       18px;
  height:      18px;
  margin-top:  1px;
  flex-shrink: 0;
  color:       var(--color-accent);
}

.info-note span {
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color:       var(--color-text-heading);
}

@media (max-width: 960px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }
  .info-block {
    position: static;
  }
}