/* Estimate form (Fluent Forms): Leimer look and thumb-sized choices. Colours come from theme.json presets. */

.fluentform.leimer-estimate-form .ff-el-form-control {
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem; /* 16px keeps iOS from zooming on focus */
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.fluentform.leimer-estimate-form textarea.ff-el-form-control {
	min-height: 140px;
}

.fluentform.leimer-estimate-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.fluentform.leimer-estimate-form .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.fluentform.leimer-estimate-form .ff-el-group {
	margin-bottom: 1.5rem;
}

/* Choices as big tappable buttons. Fluent Forms' ff_list_buttons layout sits on the field group and
   draws each choice as a span inside its label; the real radio is hidden. */
.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check {
	margin: 0 0.5rem 0.5rem 0;
}

.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	white-space: normal;
	text-align: left;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label > span {
	border-left: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected:first-child label > span {
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
}

.fluentform.leimer-estimate-form .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within > span {
	outline: 3px solid var(--wp--preset--color--accent-deep);
	outline-offset: 2px;
	background-color: #fff;
}

/* Submit button: full width on phones, 48px tall. */
.fluentform.leimer-estimate-form .ff-btn-submit {
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
}

.fluentform.leimer-estimate-form .ff-btn-submit:hover,
.fluentform.leimer-estimate-form .ff-btn-submit:focus-visible {
	background: var(--wp--preset--color--accent-deep);
}

@media (max-width: 600px) {
	.fluentform.leimer-estimate-form .ff-btn-submit {
		width: 100%;
	}
}

.fluentform.leimer-estimate-form .leimer-form-privacy {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-soft);
}

.fluentform.leimer-estimate-form .text-danger,
.fluentform.leimer-estimate-form .error {
	color: #8a1c1c;
}

/* The form sits in a white card (the card family in cards.css; Ticket #277). One column on phones. */
.fluentform.leimer-estimate-form {
	padding: var(--wp--preset--spacing--40);
}

.fluentform.leimer-estimate-form fieldset {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
}

/* From tablet up the short fields pair two to a row; choices, Details and the button stay full width.
   Fluent Forms puts a field's name on its inputs, so :has() finds each field's group. */
@media (min-width: 700px) {
	.fluentform.leimer-estimate-form {
		padding: var(--wp--preset--spacing--50);
	}

	.fluentform.leimer-estimate-form fieldset {
		grid-template-columns: 1fr 1fr;
	}

	.fluentform.leimer-estimate-form fieldset > * {
		grid-column: 1 / -1;
	}

	.fluentform.leimer-estimate-form fieldset > .ff-el-group:has([data-name="your_name"]),
	.fluentform.leimer-estimate-form fieldset > .ff-el-group:has([data-name="email"]),
	.fluentform.leimer-estimate-form fieldset > .ff-el-group:has([data-name="phone"]),
	.fluentform.leimer-estimate-form fieldset > .ff-el-group:has([data-name="town"]),
	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="household_size"]),
	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="days_covered"]),
	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="box_location"]),
	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="heard_about"]) {
		grid-column: auto;
	}

	/* The preparedness form keeps its own order so the pairs sit side by side. */
	.fluentform.leimer-prep-form fieldset > * {
		order: 20;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="your_name"]) {
		order: 1;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="email"]) {
		order: 2;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="phone"]) {
		order: 3;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="town"]) {
		order: 4;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="interest"]) {
		order: 5;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="household_size"]) {
		order: 6;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="days_covered"]) {
		order: 7;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="household_needs"]) {
		order: 8;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="box_location"]) {
		order: 9;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="heard_about"]) {
		order: 10;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="referrer"]) {
		order: 11;
	}

	.fluentform.leimer-prep-form fieldset > .ff-el-group:has([data-name="details"]) {
		order: 12;
	}
}

/* On Contact the form sits inside a larger card that carries the "Get an estimate" heading (Ticket #320),
   so the form drops its own card there. */
.leimer-form-card .fluentform.leimer-estimate-form {
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}