/* ==========================================================================
   Blok: Contact — formulier en gegevenskaart samengevoegd tot één paneel
   ========================================================================== */

.contact-panel {
	display: grid;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}
@media (min-width: 900px) {
	.contact-panel { grid-template-columns: 1.15fr 0.85fr; }
	.contact-panel--form-only,
	.contact-panel--info-only { grid-template-columns: 1fr; }
}


/* ---------- Formulier ---------- */
.form-card {
	background: var(--paper);
	padding: clamp(30px, 4.5vw, 48px);
}
.form-card__title { margin-bottom: 20px; }

.form-row {
	display: grid;
	gap: 18px;
	margin-bottom: 18px;
}
@media (min-width: 560px) {
	.form-row--2 { grid-template-columns: 1fr 1fr; }
}

.field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.field label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
}
.field .hint {
	font-weight: 400;
	color: rgba(var(--ink-rgb), 0.45);
	font-size: 0.82rem;
}
.field input,
.field select,
.field textarea {
	border: 1.5px solid rgba(var(--ink-rgb), 0.16);
	background: #fff;
	border-radius: var(--radius-s);
	padding: 13px 15px;
	font-size: 0.98rem;
	width: 100%;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--rinse);
	box-shadow: 0 0 0 4px var(--rinse-light);
}
.field textarea { resize: vertical; min-height: 120px; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c04a3d; }

.field__error {
	font-size: 0.82rem;
	color: #c04a3d;
	display: none;
}
.field.has-error .field__error { display: block; }

.field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 22px;
}
.field--check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--rinse);
	flex-shrink: 0;
}
.field--check label {
	font-weight: 400;
	font-size: 0.88rem;
	color: rgba(var(--ink-rgb), 0.72);
}

/* Honeypot — onzichtbaar voor mensen, wel invulbaar voor bots */
.field--trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-status {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var(--radius-s);
	font-size: 0.92rem;
	display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok  { background: var(--rinse-light); color: var(--rinse-dark); }
.form-status--err { background: #fbe7e4; color: #9a3a2d; }


/* ---------- Gegevenskaart ---------- */
.info-card {
	background: var(--mist-dim);
	color: var(--ink);
	padding: clamp(30px, 4.5vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 22px;
	border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
@media (min-width: 900px) {
	.info-card {
		border-top: 0;
		border-left: 1px solid rgba(var(--ink-rgb), 0.08);
	}
	.contact-panel--info-only .info-card { border-left: 0; }
}

.info-card h3 { font-size: 1.3rem; color: var(--ink); }

.info-card__row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.info-card__row svg {
	width: 21px;
	height: 21px;
	color: var(--rinse);
	flex-shrink: 0;
	margin-top: 2px;
}
.info-card__row a,
.info-card__row address {
	font-style: normal;
	font-size: 0.97rem;
	color: rgba(var(--ink-rgb), 0.85);
	line-height: 1.5;
}
.info-card__row a:hover { color: var(--rinse); }

.info-card__map {
	border-radius: var(--radius-m);
	overflow: hidden;
	margin-top: 4px;
}
.info-card__map iframe {
	width: 100%;
	height: 220px;
	border: 0;
	display: block;
	filter: grayscale(0.3) contrast(1.05);
}

.info-card__social { display: flex; gap: 10px; margin-top: 0; }
.info-card__social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(var(--ink-rgb), 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.info-card__social a:hover {
	background: var(--rinse);
	border-color: var(--rinse);
	color: #fff;
}
.info-card__social svg { width: 18px; height: 18px; }


/* ==========================================================================
   Gravity Forms — dezelfde vormgeving als het ingebouwde formulier.

   Gravity's "orbital"-thema is volledig opgebouwd uit CSS-variabelen. We zetten
   die tokens om naar de waarden van dit thema in plaats van met selectors en
   !important tegen hun stylesheet te vechten. Dat blijft ook na een update van
   de plugin overeind, want de tokennamen liggen vast.

   Belangrijk: het formulier moet in de moderne markup staan (markupVersion 2).
   In de oude "legacy" markup bestaan deze variabelen niet en ontbreekt het
   CSS-rooster voor velden van een halve breedte.
   ========================================================================== */

.form-card--gravity .gform_wrapper {
	margin: 0;

	/* ---- Invoervelden ---- */
	--gf-ctrl-font-family: var(--font-body);
	--gf-ctrl-font-size: 0.98rem;
	--gf-ctrl-font-weight: 400;
	--gf-ctrl-color: var(--ink);
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-border-color: rgba(var(--ink-rgb), 0.16);
	--gf-ctrl-border-width: 1.5px;
	--gf-ctrl-border-style: solid;
	--gf-ctrl-radius: var(--radius-s);
	--gf-ctrl-padding-x: 15px;
	--gf-ctrl-padding-y: 13px;
	--gf-ctrl-size: auto;
	--gf-ctrl-accent-color: var(--rinse);

	--gf-ctrl-bg-color-focus: #fff;
	--gf-ctrl-border-color-focus: var(--rinse);
	--gf-ctrl-color-focus: var(--ink);
	--gf-ctrl-border-color-hover: rgba(var(--ink-rgb), 0.3);

	--gf-ctrl-placeholder-color: rgba(var(--ink-rgb), 0.42);
	--gf-ctrl-placeholder-font-family: var(--font-body);
	--gf-ctrl-placeholder-opacity: 1;

	/* Fouten in dezelfde rode tint als het ingebouwde formulier */
	--gf-ctrl-border-color-error: #c04a3d;
	--gf-ctrl-bg-color-error: #fff;
	--gf-ctrl-color-error: var(--ink);
	--gf-local-error-color: #c04a3d;

	/* ---- Labels en beschrijvingen ---- */
	--gf-label-font-family: var(--font-body);
	--gf-label-font-size: 0.9rem;
	--gf-label-font-weight: 600;
	--gf-label-color-primary: var(--ink);
	--gf-label-color-secondary: rgba(var(--ink-rgb), 0.72);
	--gf-label-space-y-secondary: 7px;

	--gf-field-desc-font-family: var(--font-body);
	--gf-field-desc-font-size: 0.82rem;
	--gf-field-desc-color: rgba(var(--ink-rgb), 0.55);

	/* ---- Keuzevakjes ---- */
	--gf-ctrl-checkbox-check-radius: 4px;
	--gf-ctrl-choice-size: 18px;

	/* ---- De verzendknop ---- */
	--gf-ctrl-btn-font-family: var(--font-body);
	--gf-ctrl-btn-font-size: 0.98rem;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: 0;
	--gf-ctrl-btn-radius: var(--radius-pill);
	--gf-ctrl-btn-padding-x: 28px;
	--gf-ctrl-btn-padding-y: 15px;
	--gf-ctrl-btn-size: auto;
	--gf-ctrl-btn-border-width-primary: 1.5px;
	--gf-ctrl-btn-border-style-primary: solid;
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-bg-color-primary: var(--rinse);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-bg-color-hover-primary: var(--rinse-dark);
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-bg-color-focus-primary: var(--rinse-dark);
	--gf-ctrl-btn-border-color-focus-primary: transparent;
	--gf-ctrl-btn-color-focus-primary: #fff;

	/* ---- Ruimte tussen de velden ---- */
	--gf-form-gap-y: 18px;
	--gf-form-gap-x: 18px;
}

.form-card--gravity .gform_heading { display: none; }

/* De focusring van het thema (zachte blauwe gloed) op de velden. */
.form-card--gravity .gform_wrapper .gfield input:focus,
.form-card--gravity .gform_wrapper .gfield select:focus,
.form-card--gravity .gform_wrapper .gfield textarea:focus {
	box-shadow: 0 0 0 4px var(--rinse-light);
	outline: none;
}

.form-card--gravity .gform_wrapper textarea { min-height: 120px; resize: vertical; }

/* De verzendknop over de volle breedte, net als bij het ingebouwde formulier. */
.form-card--gravity .gform_footer {
	padding: 0;
	margin: 22px 0 0;
}
.form-card--gravity .gform_wrapper .gform_footer button,
.form-card--gravity .gform_wrapper .gform_footer input[type="submit"] {
	width: 100%;
	justify-content: center;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px -12px rgba(24, 34, 56, 0.65);
	transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-card--gravity .gform_wrapper .gform_footer button:hover,
.form-card--gravity .gform_wrapper .gform_footer input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 20px 36px -12px rgba(24, 34, 56, 0.7);
}
.form-card--gravity .gform_wrapper .gform_footer button:active { transform: scale(0.97); }

/* Foutmelding boven het formulier */
.form-card--gravity .gform_validation_errors {
	background: #fbe7e4 !important;
	border: 0 !important;
	border-radius: var(--radius-s) !important;
	box-shadow: none !important;
	padding: 14px 16px !important;
	margin: 0 0 18px !important;
}
.form-card--gravity .gform_validation_errors > h2 {
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	color: #9a3a2d;
	margin: 0;
	padding: 0;
}
.form-card--gravity .gform_validation_errors > h2::before { display: none; }

/* Bevestiging na verzenden */
.form-card--gravity .gform_confirmation_message,
.gform_confirmation_wrapper .gform_confirmation_message {
	background: var(--rinse-light);
	color: var(--rinse-dark);
	border-radius: var(--radius-s);
	padding: 18px 20px;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Het honeypot-veld van Gravity nooit tonen */
.form-card--gravity .gform_validation_container,
.form-card--gravity .gfield--type-honeypot { display: none !important; }


/* --------------------------------------------------------------------------
   Een paar waarden zet het orbital-thema niet op de wrapper maar rechtstreeks
   op het element. Die regels hebben vier klassen
   (.gform-theme.gform-theme--framework.gform_wrapper .button), dus we hangen er
   hier .gform-theme bij om er één stap boven te komen. Zo blijft alles gewone
   cascade en is !important nergens nodig.
   -------------------------------------------------------------------------- */

.form-card--gravity .gform_wrapper.gform-theme .gfield input,
.form-card--gravity .gform_wrapper.gform-theme .gfield select,
.form-card--gravity .gform_wrapper.gform-theme .gfield textarea {
	--gf-local-border-color: rgba(var(--ink-rgb), 0.16);
	--gf-local-radius: var(--radius-s);
	--gf-local-height: auto;
	--gf-local-padding-x: 15px;
	--gf-local-padding-y: 13px;

	border-color: rgba(var(--ink-rgb), 0.16);
	border-radius: var(--radius-s);
	/* Het thema zet line-height gelijk aan de veldhoogte; met `auto` daarvoor
	   in de plaats zou de tekst niet meer verticaal uitgelijnd staan. */
	line-height: 1.4;
	height: auto;
	min-height: 0;
	padding: 13px 15px;
}

.form-card--gravity .gform_wrapper.gform-theme .gfield input:hover,
.form-card--gravity .gform_wrapper.gform-theme .gfield select:hover,
.form-card--gravity .gform_wrapper.gform-theme .gfield textarea:hover {
	border-color: rgba(var(--ink-rgb), 0.3);
}

.form-card--gravity .gform_wrapper.gform-theme .gfield input:focus,
.form-card--gravity .gform_wrapper.gform-theme .gfield select:focus,
.form-card--gravity .gform_wrapper.gform-theme .gfield textarea:focus {
	border-color: var(--rinse);
	box-shadow: 0 0 0 4px var(--rinse-light);
	outline: none;
}

.form-card--gravity .gform_wrapper.gform-theme .gfield.gfield_error input,
.form-card--gravity .gform_wrapper.gform-theme .gfield.gfield_error select,
.form-card--gravity .gform_wrapper.gform-theme .gfield.gfield_error textarea {
	border-color: #c04a3d;
}

.form-card--gravity .gform_wrapper.gform-theme .gfield textarea {
	min-height: 120px;
	resize: vertical;
}

/* Labels op hetzelfde gewicht als bij het ingebouwde formulier. */
.form-card--gravity .gform_wrapper.gform-theme .gfield .gfield_label,
.form-card--gravity .gform_wrapper.gform-theme .gfield legend.gfield_label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ink);
}
.form-card--gravity .gform_wrapper.gform-theme .gfield_required { color: var(--rinse); }

/* De verzendknop over de volle breedte, zoals bij het ingebouwde formulier. */
.form-card--gravity .gform_wrapper.gform-theme .gform_footer .gform_button.button {
	--gf-local-width: 100%;
	--gf-local-height: auto;
	--gf-local-padding-x: 28px;
	--gf-local-padding-y: 15px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 15px 28px;
	font-size: 0.98rem;
	line-height: 1.2;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px -12px rgba(24, 34, 56, 0.65);
	transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-card--gravity .gform_wrapper.gform-theme .gform_footer .gform_button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 20px 36px -12px rgba(24, 34, 56, 0.7);
}
.form-card--gravity .gform_wrapper.gform-theme .gform_footer .gform_button.button:active {
	transform: scale(0.97);
}

/* Het toestemmingsvinkje. */
.form-card--gravity .gform_wrapper.gform-theme .gfield--type-consent .gfield_consent_label,
.form-card--gravity .gform_wrapper.gform-theme .gchoice label {
	font-weight: 400;
	font-size: 0.88rem;
	color: rgba(var(--ink-rgb), 0.72);
}