/* Forms and Inputs */

/* Cloudflare Turnstile notice (an HTML field in each form, class
   turnstile--notice). The widget is invisible, so the notice is required, but
   it is meant to be barely there (Dmitriy, 2026-10-21): tiny, thin, faded.
   Opacity rather than a color, so it works on dark and light backgrounds. */
.gform_wrapper.gravity-theme .gfield.turnstile--notice {
	font-size: 10px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: .02em;
	opacity: .4;
}

.gform_wrapper.gravity-theme .turnstile--notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gform_wrapper :focus::placeholder { opacity: 0.2; font-weight: 500;}

/* =============================================================================
   Form block (acf/form) — Figma "RDV Updates" (rV6qH4Bg6mEgUuRh1VNSIa),
   "Forms" (2026-10-21), shown on cream.
   - A single stack of full-width fields, 25px apart, 470px wide. No labels
     on show: the field's name is its placeholder, and the label stays for
     screen readers (Gravity Forms' "Hidden" label setting).
   - Fields: 49px tall (the textarea 159px), a 1px red stroke, a 25% white
     fill, corners cut 10px top-right and bottom-left like the buttons.
     Roboto Medium 18px in black, 28px in.
   - Submit: solid red, the same cut, Roboto Medium 18px in white; not the
     site's stroked button with the arrow.
   - Ours (not in the Figma): focus thickens the stroke to 2px, hover darkens
     the button, errors in deep red under the field, the Turnstile notice
     under the button.
   The stroke is drawn by ::after on the input's container: a clip-path cut
   drops a border's diagonals, so the ring is an evenodd polygon (the outline,
   then the same outline --b in), as on the footer's sign-up field.
   ========================================================================== */

.form--block {
	--form-cut: 10px;
	--form-red: var(--rdv-red, #bf4042);
	--form-error: #8f2a2c; /* 6.1:1 on cream; --rdv-red is 4.2:1 */
	max-width: 470px;
}

.form--empty {
	padding: 20px;
	border: 1px dashed currentColor;
}

.form--block .gform_wrapper.gravity-theme {
	margin: 0;
}

/* One column: the fields, the button, then the Turnstile notice under it.
   GF's body and its 12-column grid step aside so the notice can follow the
   button, wherever it sits in the form's field list. */
.form--block .gform_wrapper.gravity-theme form {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.form--block .gform_wrapper.gravity-theme .gform_body,
.form--block .gform_wrapper.gravity-theme .gform_fields { display: contents; }

.form--block .gform_wrapper.gravity-theme .gfield { margin: 0; }

.form--block .gform_wrapper.gravity-theme .gfield.turnstile--notice {
	order: 1;
	margin-top: -13px;
}

/* --- the field box ---------------------------------------------------------- */
.form--block .gform_wrapper.gravity-theme .ginput_container:not(.ginput_container_consent):not(.ginput_container_checkbox):not(.ginput_container_radio) {
	--b: 1px;
	--k: calc(var(--form-cut) + var(--b) * 0.4142);
	position: relative;
	background: rgba(255, 255, 255, 0.25);
	clip-path: polygon(0 0, calc(100% - var(--form-cut)) 0, 100% var(--form-cut), 100% 100%, var(--form-cut) 100%, 0 calc(100% - var(--form-cut)));
}

.form--block .gform_wrapper.gravity-theme .ginput_container:not(.ginput_container_consent):not(.ginput_container_checkbox):not(.ginput_container_radio)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--form-red);
	clip-path: polygon(evenodd,
		0 0, calc(100% - var(--form-cut)) 0, 100% var(--form-cut), 100% 100%, var(--form-cut) 100%, 0 calc(100% - var(--form-cut)), 0 0,
		var(--b) var(--b), calc(100% - var(--k)) var(--b), calc(100% - var(--b)) var(--k),
		calc(100% - var(--b)) calc(100% - var(--b)), var(--k) calc(100% - var(--b)), var(--b) calc(100% - var(--k)),
		var(--b) var(--b));
	pointer-events: none;
}

.form--block .gform_wrapper.gravity-theme .ginput_container:has(:focus-visible) { --b: 2px; }
.form--block .gform_wrapper.gravity-theme .gfield_error .ginput_container { --b: 2px; }
.form--block .gform_wrapper.gravity-theme .gfield_error .ginput_container::after { background: var(--form-error); }

/* --- the controls inside it ------------------------------------------------- */
.form--block .gform_wrapper.gravity-theme input[type=text],
.form--block .gform_wrapper.gravity-theme input[type=email],
.form--block .gform_wrapper.gravity-theme input[type=tel],
.form--block .gform_wrapper.gravity-theme input[type=url],
.form--block .gform_wrapper.gravity-theme input[type=number],
.form--block .gform_wrapper.gravity-theme select,
.form--block .gform_wrapper.gravity-theme textarea {
	display: block;
	width: 100%;
	height: 49px;
	min-height: 0;
	margin: 0;
	padding: 0 20px 0 28px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #000;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .057em;
	box-shadow: none;
	outline: none;
}

/* outranks GF's own .gform_wrapper.gravity-theme .gfield textarea.large (288px) */
.form--block .gform_wrapper.gravity-theme .gfield textarea.textarea {
	height: 159px;
	padding-top: 14px;
	padding-bottom: 14px;
	resize: vertical;
}

/* the Figma's solid red triangle, 18x13, 20px in from the right */
.form--block .gform_wrapper.gravity-theme select {
	padding-right: 58px;
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpolygon points='0 0 18 0 9 13' fill='%23bf4042'/%3E%3C/svg%3E") no-repeat right 20px center / 18px 13px;
	cursor: pointer;
}

.form--block .gform_wrapper.gravity-theme ::placeholder {
	color: #000;
	opacity: 1;
}

/* --- errors ------------------------------------------------------------------ */
.form--block .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.form--block .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	margin: 0;
	color: var(--form-error);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

.form--block .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }

.form--block .gform_wrapper.gravity-theme .gfield_validation_message,
.form--block .gform_wrapper.gravity-theme .validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--form-error);
	font-size: 15px;
	line-height: 1.4;
}

/* --- Submit (GF's button carries .theme-button, so this beats buttons.css) -- */
.form--block .gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding: 0;
}

.form--block .gform_wrapper.gravity-theme .gform_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	background: var(--form-red);
	color: #fff;
	font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .057em;
	text-transform: none;
	box-shadow: none;
	clip-path: polygon(0 0, calc(100% - var(--form-cut)) 0, 100% var(--form-cut), 100% 100%, var(--form-cut) 100%, 0 calc(100% - var(--form-cut)));
	cursor: pointer;
	transition: background-color .2s ease;
}

.form--block .gform_wrapper.gravity-theme .gform_footer .gform_button::after { display: none; }

.form--block .gform_wrapper.gravity-theme .gform_footer .gform_button:hover {
	background: #9e3436;
	color: #fff;
}

/* the cut clips an outline, so focus is an inset ring */
.form--block .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--form-red);
}

.form--block .gform_confirmation_message {
	font-size: 21px;
	line-height: 1.33;
	letter-spacing: .03em;
}

body .gform_wrapper.gravity-theme input[type=email],
body .gform_wrapper.gravity-theme input[type=tel],
body .gform_wrapper.gravity-theme input[type=text],
body .gform_wrapper.gravity-theme input[type=submit] {
	font-size: 1rem;
	padding: .5em;
}

.ginput_container_consent {
    display: flex;
	line-height: 1.2em;
}

.ginput_container_consent input {
    align-self: flex-start;
    margin-right: 10px;
    margin-top: 0.3em;
}

/* --- Gravity Forms: keep <select> the same height as the text inputs ---
   A text input's height is line-height-driven: 1.5 × 1rem (24px) + .5em×2
   padding (16px) = 40px. But Chrome sizes a single <select> from its font +
   padding and IGNORES line-height, so it renders ~2px short. Fix: give the
   inputs an explicit line-height (to lock their height) and pin the select's
   min-height to the same value. */

body .gform_wrapper.gravity-theme input[type=email],
body .gform_wrapper.gravity-theme input[type=tel],
body .gform_wrapper.gravity-theme input[type=text] {
	font-size: 1rem;
	line-height: 1.5;          /* 24px — drives the 40px height */
	padding: .5em;             /* 8px top + 8px bottom */
	border: none;
	width: 100%;
	background: #fff;
	box-sizing: border-box;
}

body .gform_wrapper.gravity-theme select {
	font-size: 1rem;
	padding: .5em;
	padding-left: calc(.5em - 4px);   /* nudge to align with input text */
	color: var(--color-text-black);
	background: #fff;
	border: none;
	box-sizing: border-box;
	min-height: 40px;          /* == input height; line-height won't grow a select */
}

/* Gravity Forms bumps text inputs to a 48px touch target under 641px
   (basic.min.css sets line-height:2) but skips <select> — match it. */
@media (max-width: 641px) {
	body .gform_wrapper.gravity-theme select {
		min-height: 48px;
	}
}