/**
 * The contact form, once it moved into WPForms.
 *
 * Same design as the hand-rolled form this replaced: the rules below are the
 * `.fc-contact__form` block from contact.css, retargeted at the markup WPForms
 * renders. WPForms' own stylesheet is switched off on this page
 * (inc/wpforms-contact.php filters `disable-css` to 3), so there is nothing to
 * outspecify here except the Elementor kit, which is why the field and button
 * declarations carry !important the same way contact.css does.
 *
 * Field ids referenced by class:
 *   .fc-field       every field, so the panel can scope to our own fields only
 *   .fc-half        first name / last name / email / phone, two per row
 *   .fc-tour-field  the AppFolio unit picker, shown only in tour mode
 *   .fc-optional    phone, whose label carries the "(optional)" note
 */

/* ============ WHAT THE PLUGIN STYLESHEET WOULD HAVE HIDDEN ============ */

/* Switching WPForms' stylesheet off takes its hiding utilities with it, and
   these are not decorative: .wpforms-field-hp is the honeypot, rendered as a
   real text input labelled "Message", and .wpforms-hidden carries the
   screen-reader-only half of every error message. Left alone, both render as
   visible content in the panel. Same declarations the plugin's own full
   stylesheet uses.

   The v3 anti-spam field hides itself with an inline <style> the plugin
   injects per form, so it needs nothing here. */
.fc-contact__panel .wpforms-field-hp {
	display: none !important;
	position: absolute !important;
	left: -9000px !important;
}

.fc-contact__panel .wpforms-hidden {
	display: none !important;
}

/* ============ CONTAINER ============ */

.fc-contact__panel .wpforms-container {
	margin: 0;
}

.fc-contact__panel .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* The two-up rows the old markup built with .fc-contact__row. A grid rather
   than nested wrappers because conditional logic hides fields individually,
   and a hidden grid item collapses cleanly while a half-empty flex row would
   not. */
.fc-contact__panel .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 20px;
	align-items: start;
}

.fc-contact__panel .wpforms-field {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 0;
}

.fc-contact__panel .wpforms-field.fc-half {
	grid-column: span 1;
}

/* ============ LABELS ============ */

/* Same uppercase micro-label the homepage search bar uses. */
.fc-contact__panel .wpforms-field-label {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(31, 36, 25, 0.72);
}

/* Sized against the 10px label it sits in, so it reads as a marker, not a speck. */
.fc-contact__panel .wpforms-required-label {
	margin-left: 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 0;
	letter-spacing: 0;
	vertical-align: -3px;
	color: var(--green);
	border: 0;
	text-decoration: none;
}

/* The old markup spelled this out in the label itself. */
.fc-contact__panel .fc-optional .wpforms-field-label::after {
	content: ' (optional)';
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: rgba(31, 36, 25, 0.4);
}

.fc-contact__panel .wpforms-field-sublabel {
	display: none;
}

/* ============ CONTROLS ============ */

/* The Elementor kit ships
   `.elementor-kit-99 input:not([type="button"]):not([type="submit"])` with its
   own font, color and border, which outspecifies a plain class selector here.
   It does not reach `textarea`/`select`, so without !important only the text
   inputs would pick up the kit's styling instead of this form's own. Same
   override pattern contact.css and home.css already use against this kit. */
.fc-contact-template .fc-contact__panel .wpforms-field input[type='text'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='email'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='tel'],
.fc-contact-template .fc-contact__panel .wpforms-field select,
.fc-contact-template .fc-contact__panel .wpforms-field textarea {
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	line-height: 1.5;
	color: var(--ink) !important;
	background-color: transparent !important;
	border: 1px solid rgba(31, 36, 25, 0.18) !important;
	border-radius: 3px !important;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-shadow: none;
}

.fc-contact-template .fc-contact__panel .wpforms-field input[type='text'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='email'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='tel'],
.fc-contact-template .fc-contact__panel .wpforms-field select {
	height: 48px;
}

.fc-contact-template .fc-contact__panel .wpforms-field textarea {
	min-height: 132px;
	resize: vertical;
}

.fc-contact-template .fc-contact__panel .wpforms-field ::placeholder {
	color: rgba(31, 36, 25, 0.52);
}

/* Native select chrome would otherwise show the OS default arrow, so one in
   the brand ink is drawn here and the control's own one suppressed. */
.fc-contact-template .fc-contact__panel .wpforms-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231f2419' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/* The options list is painted by the OS, not the page, so it needs its own
   dark colours or it renders as white text on white. */
.fc-contact-template .fc-contact__panel .wpforms-field select option {
	color: var(--ink);
	background: #fff;
}

.fc-contact-template .fc-contact__panel .wpforms-field input:hover,
.fc-contact-template .fc-contact__panel .wpforms-field select:hover,
.fc-contact-template .fc-contact__panel .wpforms-field textarea:hover {
	border-color: rgba(31, 36, 25, 0.32) !important;
}

.fc-contact-template .fc-contact__panel .wpforms-field input:focus,
.fc-contact-template .fc-contact__panel .wpforms-field select:focus,
.fc-contact-template .fc-contact__panel .wpforms-field textarea:focus {
	outline: none;
	border-color: var(--green) !important;
	background-color: rgba(74, 124, 58, 0.04) !important;
	box-shadow: 0 0 0 3px rgba(74, 124, 58, 0.16);
}

/* WPForms marks a failed field with .wpforms-error on the control itself,
   where the old markup used aria-invalid. */
.fc-contact-template .fc-contact__panel .wpforms-field input.wpforms-error,
.fc-contact-template .fc-contact__panel .wpforms-field select.wpforms-error,
.fc-contact-template .fc-contact__panel .wpforms-field textarea.wpforms-error {
	border-color: #ce5c4a !important;
}

.fc-contact-template .fc-contact__panel .wpforms-field input.wpforms-error:focus,
.fc-contact-template .fc-contact__panel .wpforms-field select.wpforms-error:focus,
.fc-contact-template .fc-contact__panel .wpforms-field textarea.wpforms-error:focus {
	border-color: #ce5c4a !important;
	box-shadow: 0 0 0 3px rgba(206, 92, 74, 0.28);
}

/* Chrome paints its own near-white autofill background over the field; the
   inset shadow repaints the panel colour so a saved-address fill does not
   flash yellow, and the text is forced back to ink. */
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill,
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill:hover,
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	caret-color: var(--ink);
}

/* ============ ERRORS AND DESCRIPTIONS ============ */

.fc-contact__panel .wpforms-field em.wpforms-error,
.fc-contact__panel .wpforms-error-container {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.4;
	color: #963527;
	background: none;
	border: 0;
}

/* The AppFolio hand-off note under the unit picker, which was
   .fc-contact__form-note in the old markup. */
.fc-contact__panel .wpforms-field-description {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--warm-gray);
}

/* ============ NOTICES ============ */

/* The submitted-successfully message, matching .fc-contact__notice--ok. */
.fc-contact__panel .wpforms-confirmation-container,
.fc-contact__panel .wpforms-confirmation-container-full {
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--green);
	border-radius: 3px;
	background: rgba(74, 124, 58, 0.1);
	color: var(--green-dark);
	font-size: 14.5px;
	line-height: 1.5;
}

.fc-contact__panel .wpforms-confirmation-container p,
.fc-contact__panel .wpforms-confirmation-container-full p {
	margin: 0;
	color: inherit;
}

/* Form-level failures (a CAPTCHA that did not verify, a send that failed),
   matching .fc-contact__notice--error. */
.fc-contact__panel .wpforms-error-container-full,
.fc-contact__panel .wpforms-form > .wpforms-error-container {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 3px solid #ce5c4a;
	border-radius: 3px;
	background: rgba(206, 92, 74, 0.1);
	color: #963527;
	font-size: 14.5px;
	line-height: 1.5;
}

.fc-contact__panel .wpforms-error-container-full p,
.fc-contact__panel .wpforms-form > .wpforms-error-container p {
	margin: 0;
	color: inherit;
}

/* ============ CAPTCHA ============ */

/* Turnstile paints its own widget; all this does is give it the same rhythm
   as a field and stop it forcing the panel wider on a phone. */
.fc-contact__panel .wpforms-recaptcha-container {
	padding: 0;
	max-width: 100%;
	overflow-x: auto;
}

.fc-contact__panel .wpforms-recaptcha-container iframe {
	max-width: 100%;
}

/* Turnstile renders at its "flexible" size here (inc/wpforms-contact.php),
   which fills whatever width its container has, so match the submit button. */
.fc-contact__panel .wpforms-recaptcha-container,
.fc-contact__panel .wpforms-turnstile {
	width: 100%;
}

/* ============ SUBMIT ============ */

/* The brand .btn / .btn-primary rules live in home.css, which never loads on
   this page, so the submit carries the full button treatment itself rather
   than inheriting a class that is not there. Shape and type match the homepage
   buttons; !important is what it takes to beat the Elementor kit's own
   `.elementor-kit-99 button` padding and radius. */
.fc-contact__panel .wpforms-submit-container {
	padding: 0;
	margin: 0;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	margin-top: 4px;
	padding: 0 24px !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
	background-color: var(--green) !important;
	border: 1.5px solid var(--green) !important;
	border-radius: 3px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit:focus {
	background-color: var(--green-light) !important;
	border-color: var(--green-light) !important;
	transform: translateY(-2px);
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* While the submission is in flight, and in tour mode before a unit is
   picked. */
.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled {
	background-color: rgba(31, 36, 25, 0.22) !important;
	border-color: rgba(31, 36, 25, 0.22) !important;
	cursor: not-allowed;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled:focus,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled:focus {
	background-color: rgba(31, 36, 25, 0.22) !important;
	border-color: rgba(31, 36, 25, 0.22) !important;
	transform: none;
}

.fc-contact__panel .wpforms-submit-spinner {
	margin-left: 10px;
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact-template .fc-contact__panel button.wpforms-submit:hover,
	.fc-contact-template .fc-contact__panel button.wpforms-submit:focus {
		transform: none;
	}
}

/* ============ SCHEDULE A TOUR MODE ============ */

/* WPForms conditional logic does the showing and hiding (and, more to the
   point, the matching validation); this only carries the 200ms crossfade the
   old JS ran when the two shapes swapped, driven by assets/contact-tour.js. */
.fc-contact__panel .wpforms-field-container.is-fc-mode-exiting {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.fc-contact__panel .wpforms-field-container.is-fc-mode-entering {
	opacity: 0;
	transform: translateY(8px);
}

.fc-contact__panel .wpforms-field-container.is-fc-mode-entered {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Draws the eye to the Subject field right after the bento card fills it in,
   so "Schedule a tour" landing pre-selected doesn't read as if nothing
   happened. */
@keyframes fc-contact-subject-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 124, 58, 0.45);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(74, 124, 58, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(74, 124, 58, 0);
	}
}

.fc-contact__panel .wpforms-field--pulse select {
	border-radius: 3px;
	animation: fc-contact-subject-pulse 1.1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact__panel .wpforms-field-container.is-fc-mode-exiting,
	.fc-contact__panel .wpforms-field-container.is-fc-mode-entering,
	.fc-contact__panel .wpforms-field-container.is-fc-mode-entered {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fc-contact__panel .wpforms-field--pulse select {
		animation: none;
	}
}

/* ============ RESPONSIVE ============ */

/* Two-up name and email/phone pairs are too narrow to type into on a phone. */
@media (max-width: 600px) {
	.fc-contact__panel .wpforms-field-container {
		grid-template-columns: 1fr;
	}

	.fc-contact__panel .wpforms-field.fc-half {
		grid-column: 1 / -1;
	}
}