/* Contact — heading/text/NAW/map on one side, the Gravity Form on the other. */
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact__grid--single { grid-template-columns: 1fr; }
}

.contact__title { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 1.25rem; }

.contact__text { margin: 0 0 1.5rem; }
.contact__text > * { margin: 0 0 1.25rem; }
.contact__text > *:last-child { margin-bottom: 0; }
.contact__text p { color: #3a3f45; font-size: 1.3rem; }
.section--dark .contact__text p,
.section--accent .contact__text p { color: #fff; }

.contact__address { margin: 0 0 1.5rem; }
.contact__address p { margin: 0 0 .35rem; }
.contact__address a { color: inherit; text-decoration: none; }
.contact__address a:hover { text-decoration: underline; }

.contact__map iframe {
  width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 4px; display: block;
}

.contact__form-notice { color: #b3261e; font-size: .9rem; }

/* Gravity Forms ships its own layout CSS — keep the theme's footprint here to
   spacing/typography hand-off only, don't fight the plugin's own form markup. */
.contact__form { font-family: var(--font-body); }
.contact__form .gform_wrapper { font-family: inherit; }

/* Field layout: first 3 fields (Naam/E-mail/Telefoonnummer) stacked in a
   left column, the message textarea to their right, the privacy/consent
   field (and anything after it) full-width below both. Positional rather
   than type-based on purpose — this mirrors the fixed 5-field shape of the
   real form (3 inputs, 1 textarea, 1 consent field) rather than guessing at
   Gravity Forms field-type classes that would silently stop matching the
   moment a field is added, removed, or reordered.
   Counts using the "of S" selector list (:nth-child(An+B of S)), not plain
   :nth-child — Gravity Forms' honeypot, when enabled, injects an extra
   hidden .gfield (marked .gform_validation_container) at an arbitrary DOM
   position — confirmed live, it landed as the very *first* child — which
   throws off plain positional counting entirely. "of :not(...)" counts only
   among the real, visible fields regardless of where the honeypot lands.
   Uses a container query (not a viewport breakpoint) since .contact__form's
   own rendered width varies independently of the viewport — it's either the
   right half of a 2-column section or the section's full single-column
   width (see .contact__grid--single above).
   Gravity Forms already runs .gform_fields as its own 12-column CSS grid
   (confirmed by inspecting it live — redefining grid-template-columns here
   was overridden by the plugin's own rule and left every field a single
   ~80px track wide). So this works *with* that grid via grid-column spans
   instead of replacing it. */
.contact__form { container-type: inline-size; container-name: contact-form; }

@container contact-form (min-width: 32rem) {
  .contact__form .gform_fields > .gfield:nth-child(1 of :not(.gform_validation_container)) { grid-column: 1 / span 6; grid-row: 1; }
  .contact__form .gform_fields > .gfield:nth-child(2 of :not(.gform_validation_container)) { grid-column: 1 / span 6; grid-row: 2; }
  .contact__form .gform_fields > .gfield:nth-child(3 of :not(.gform_validation_container)) { grid-column: 1 / span 6; grid-row: 3; }
  .contact__form .gform_fields > .gfield:nth-child(4 of :not(.gform_validation_container)) { grid-column: 7 / span 6; grid-row: 1 / span 3; }
  .contact__form .gform_fields > .gfield:nth-child(n+5 of :not(.gform_validation_container)) { grid-column: 1 / span 12; }
  .contact__form .gform_fields > .gfield:nth-child(4 of :not(.gform_validation_container)) .ginput_container_textarea,
  .contact__form .gform_fields > .gfield:nth-child(4 of :not(.gform_validation_container)) textarea { height: 100%; }
}

/* Submit button: the theme's accessible blue (matches --color-blue-safe's
   ~4.5:1 contrast with white text — the brighter --color-blue fails that at
   ~3:1) instead of Gravity Forms' own default. The !important pair is
   deliberate: the Orbital theme drives the button's look through several
   layers of its own CSS custom properties rather than a plain background
   rule, so a normal-specificity override isn't reliably guaranteed to win. */
.contact__form .gform_footer { margin-top: 1.5rem; }
.contact__form .gform_button {
  background: var(--color-blue-safe) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
}
.contact__form .gform_button:hover,
.contact__form .gform_button:focus-visible {
  filter: brightness(0.92);
}