/*
 * Sectie: contactgegevens en Gravity Forms.
 * Alleen geladen als de layout `contact` op de pagina staat.
 * Kleuren en radius komen uit de variabelen in base.css.
 */

.cp-contact {
	width: min(100%, var(--cp-header-max));
	margin-inline: auto;
	padding: 3.5rem 1rem 5rem;
	color: var(--cp-color-navy);
}

.cp-contact__grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

.cp-contact__cards {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-contact__card {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--cp-color-border);
	border-radius: var(--cp-radius-card);
	background: var(--cp-color-bg);
}

.cp-contact__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary-tint-strong);
	color: var(--cp-color-primary);
}

.cp-contact__label {
	margin: 0;
	color: rgb(1 28 56 / 0.5);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cp-contact__value {
	margin: 0.2rem 0 0;
	color: var(--cp-color-navy);
	font-weight: 700;
	line-height: 1.4;
}

.cp-contact__value a {
	color: inherit;
	text-decoration: none;
}

.cp-contact__value a:hover {
	color: var(--cp-color-primary);
}

.cp-contact__note {
	margin: 0.15rem 0 0;
	color: rgb(1 28 56 / 0.6);
	font-size: 0.875rem;
	line-height: 1.4;
}

.cp-contact__quote {
	margin-top: 1rem;
	padding: 1.5rem;
	border-radius: var(--cp-radius-card);
	background: var(--cp-color-navy);
	color: #fff;
}

.cp-contact__quote--solo {
	margin-top: 0;
}

.cp-contact__quote-title {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.35;
	text-wrap: wrap;
}

.cp-contact__accent {
	display: block;
	color: var(--cp-color-primary);
}

.cp-contact__quote-text {
	margin: 0.75rem 0 0;
	color: rgb(255 255 255 / 0.7);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cp-contact__quote-button {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.75rem 1.75rem;
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.cp-contact__quote-button:hover {
	background: var(--cp-color-primary-hover);
	color: #fff;
}

.cp-contact__panel {
	padding: 1.5rem;
	border: 1px solid var(--cp-color-border);
	border-radius: var(--cp-radius-card);
	background: var(--cp-color-bg);
	box-shadow: 0 12px 32px -16px rgb(1 28 56 / 0.18);
}

.cp-contact__title {
	margin: 0;
	color: var(--cp-color-navy);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
}

.cp-contact__intro {
	margin: 0.35rem 0 0;
	color: rgb(1 28 56 / 0.6);
	font-size: 0.875rem;
	line-height: 1.5;
}

.cp-contact__missing,
.cp-contact__privacy {
	margin: 0.75rem 0 0;
	color: rgb(1 28 56 / 0.5);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.cp-contact .gform_wrapper {
	margin: 1.25rem 0 0;
}

.cp-contact .gform_heading,
.cp-contact .gform_required_legend {
	margin: 0 0 1rem;
	color: rgb(1 28 56 / 0.5);
	font-size: 0.8125rem;
	font-weight: 500;
}

.cp-contact .gform_fields {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-contact .gfield_label,
.cp-contact .gform-field-label {
	display: inline-block;
	margin: 0 0 0.375rem;
	color: var(--cp-color-navy);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.cp-contact .gfield_required,
.cp-contact .gfield_required_asterisk {
	margin-left: 0.15rem;
	color: var(--cp-color-primary);
}

.cp-contact .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.cp-contact .gform_wrapper select,
.cp-contact .gform_wrapper textarea {
	width: 100%;
	padding: 0.625rem 1rem;
	border: 1px solid var(--cp-color-border);
	border-radius: var(--cp-radius-button);
	background-color: var(--cp-color-muted-bg);
	color: var(--cp-color-navy);
	font-size: 0.875rem;
	line-height: 1.4;
}

.cp-contact .gform_wrapper textarea {
	min-height: 8rem;
	resize: vertical;
}

.cp-contact .gform_wrapper select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011c38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
	appearance: none;
}

.cp-contact .gform_wrapper input:focus,
.cp-contact .gform_wrapper select:focus,
.cp-contact .gform_wrapper textarea:focus,
.cp-contact .gform_wrapper input:focus-visible,
.cp-contact .gform_wrapper select:focus-visible,
.cp-contact .gform_wrapper textarea:focus-visible {
	outline: none;
	border-color: rgb(176 9 9 / 0.6);
	box-shadow: 0 0 0 3px rgb(176 9 9 / 0.15);
}

.cp-contact .gfield_error input,
.cp-contact .gfield_error select,
.cp-contact .gfield_error textarea {
	border-color: var(--cp-color-primary);
}

.cp-contact .gfield_validation_message,
.cp-contact .validation_message {
	margin: 0.35rem 0 0;
	color: var(--cp-color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.cp-contact .gform_validation_errors {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgb(176 9 9 / 0.35);
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary-tint-strong);
	color: var(--cp-color-primary);
	font-size: 0.8125rem;
}

.cp-contact .gform_validation_errors h2,
.cp-contact .gform_submission_error {
	margin: 0;
	color: var(--cp-color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.cp-contact .gform_validation_errors ol {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
}

.cp-contact .gform_validation_errors a {
	color: var(--cp-color-primary);
}

.cp-contact .gform_footer {
	margin: 1.25rem 0 0;
	padding: 0;
}

.cp-contact .gform_button,
.cp-contact .cp-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.875rem 2.5rem;
	border: 0;
	border-radius: var(--cp-radius-button);
	background: var(--cp-color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.cp-contact .gform_button:hover,
.cp-contact .cp-contact__submit:hover {
	background: var(--cp-color-primary-hover);
	color: #fff;
}

.cp-contact__panel:has(.gform_confirmation_message) .cp-contact__privacy {
	display: none;
}

.cp-contact .gform_confirmation_message {
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: var(--cp-radius-button);
	background: rgb(1 28 56 / 0.06);
	color: var(--cp-color-navy);
	font-weight: 600;
	line-height: 1.5;
}

.cp-contact .gform_validation_container,
.cp-contact .gfield--type-honeypot,
.cp-contact .gfield_visibility_hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (min-width: 40em) {
	.cp-contact__cards {
		grid-template-columns: 1fr 1fr;
	}

	.cp-contact__quote {
		margin-top: 1.5rem;
	}

	.cp-contact__quote--solo {
		margin-top: 0;
	}
}

@media (min-width: 48em) {
	.cp-contact__panel {
		padding: 2rem;
	}

	.cp-contact .gform_fields {
		grid-template-columns: 1fr 1fr;
		column-gap: 1.25rem;
	}

	.cp-contact .gfield {
		grid-column: 1 / -1;
	}

	.cp-contact .gfield--width-half {
		grid-column: auto;
	}

	.cp-contact .gform_button,
	.cp-contact .cp-contact__submit {
		width: auto;
	}
}

@media (min-width: 64em) {
	.cp-contact {
		padding-inline: 2rem;
	}

	.cp-contact__grid {
		grid-template-columns: 1fr 1.3fr;
		gap: 3rem;
	}

	.cp-contact__cards {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-contact .gform_button,
	.cp-contact .cp-contact__submit,
	.cp-contact__quote-button {
		transition: none;
	}
}