/**
 * "Op de hoogte blijven" — Gravity Form styling.
 *
 * SCOPE: every rule is scoped under .lct-newsletter-form_wrapper, the
 * wrapper class Gravity Forms derives from this one form's cssClass
 * ("lct-newsletter-form"). Nothing here is a global Gravity Forms
 * override, so any other form on the site — existing or future — keeps
 * its own styling untouched. That is a hard requirement of the brief.
 *
 * Layout and values measured from P8-KENNISBANK at 1440:
 *   one inline row, centred, total width 592
 *   input  280 x 44, 8px radius, white
 *   button 281 x 43, 8px radius, navy, label "Aanmelden"
 *   gap between them 32
 */

.lct-newsletter-form_wrapper {
	--lct-nl-navy: var( --e-global-color-brand_navy, #03224e );
	--lct-nl-orange: var( --e-global-color-brand_orange, #d78135 );
	--lct-nl-grey: var( --e-global-color-brand_body_grey, #5a5a60 );
	--lct-nl-radius: 8px;
}

/* ------------------------------------------------------------------
 * One inline row: field + submit, centred.
 *
 * Gravity Forms renders the fields list and the footer as two separate
 * blocks, so the form itself becomes the flex row and both children are
 * placed on it.
 * ------------------------------------------------------------------ */

.gform_wrapper.lct-newsletter-form_wrapper form,
.lct-newsletter-form_wrapper form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 32px;
}

.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gform_fields {
	display: block;
	grid-template-columns: none;
	width: 280px;
	max-width: 100%;
}

.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gform_footer {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gfield {
	margin: 0;
	padding: 0;
}

/* Label is hidden at the form level; keep it available to screen readers. */
.lct-newsletter-form_wrapper .gfield_label,
.lct-newsletter-form_wrapper .gform_required_legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Email input
 *
 * Gravity Forms ships `.gform_wrapper.gravity-theme .gform_fields .gfield input`,
 * which outranks a single-class selector. The wrapper class sits on the same
 * element as .gform_wrapper.gravity-theme, so chaining all three matches GF's
 * own specificity and wins on source order — no !important needed, and the
 * scope is still this one form.
 * ------------------------------------------------------------------ */

.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gfield input[type="email"],
.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gfield input[type="text"],
.lct-newsletter-form_wrapper input[type="email"],
.lct-newsletter-form_wrapper input[type="text"] {
	width: 100%;
	height: 44px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var( --lct-nl-radius );
	background-color: #fff;
	color: var( --lct-nl-navy );
	font-size: 16px;
	line-height: 44px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lct-newsletter-form_wrapper input[type="email"]:focus,
.lct-newsletter-form_wrapper input[type="text"]:focus {
	outline: none;
	border-color: var( --lct-nl-navy );
	box-shadow: 0 0 0 3px rgba( 3, 34, 78, .10 );
}

.lct-newsletter-form_wrapper input::placeholder {
	color: var( --lct-nl-navy );
	opacity: 1;
}
.gform_wrapper.gravity-theme .gform_validation_errors {
    display: none;
}
/* ------------------------------------------------------------------
 * Submit button — 281 x 43 navy in the reference
 * ------------------------------------------------------------------ */

.lct-newsletter-form_wrapper .gform_button,
.lct-newsletter-form_wrapper input[type="submit"],
.lct-newsletter-form_wrapper button.gform_button {
	display: inline-block;
	width: 281px;
	max-width: 100%;
	height: 43px;
	padding: 0 24px;
	border: 0;
	border-radius: var( --lct-nl-radius );
	background-color: var( --lct-nl-navy );
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 43px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.lct-newsletter-form_wrapper .gform_button:hover,
.lct-newsletter-form_wrapper input[type="submit"]:hover,
.lct-newsletter-form_wrapper button.gform_button:hover {
	background-color: var( --lct-nl-orange );
	color: #fff;
}

.lct-newsletter-form_wrapper .gform_button:focus-visible,
.lct-newsletter-form_wrapper button.gform_button:focus-visible {
	outline: 2px solid var( --lct-nl-orange );
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Validation + confirmation
 * ------------------------------------------------------------------ */

.lct-newsletter-form_wrapper .gfield_required {
	color: var( --lct-nl-orange );
}

.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gfield_description.validation_message, .lct-newsletter-form_wrapper .validation_message {
    margin-top: 8px;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    text-align: left;
    background: transparent;
    border: 0;
}

.lct-newsletter-form_wrapper .gform_confirmation_message {
	padding: 18px 20px;
	border-radius: var( --lct-nl-radius );
	background-color: #fff;
	color: var( --lct-nl-navy );
	text-align: center;
}

/* ------------------------------------------------------------------
 * Responsive — existing Elementor breakpoints only
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	.gform_wrapper.lct-newsletter-form_wrapper form,
	.lct-newsletter-form_wrapper form {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gform_fields {
		width: 100%;
	}

	.lct-newsletter-form_wrapper .gform_button,
	.lct-newsletter-form_wrapper input[type="submit"],
	.lct-newsletter-form_wrapper button.gform_button {
		width: 100%;
		height: 48px;
		line-height: 48px;
	}

	.gform_wrapper.gravity-theme.lct-newsletter-form_wrapper .gfield input[type="email"] {
		height: 48px;
		line-height: 48px;
		font-size: 16px; /* keeps iOS from zooming on focus */
	}
}