/* IJ contact form — Gravity Forms presentation.
   Every value here was measured off the Elementor form it replaces, at 1440px
   inside a 584px content column:

     grid        2 x 280px columns, 24px column gap, 24px row gap
     label       14/24 500 #575757, 8px below
     input       40px tall, 10/12 padding, 1px #E0E0E0, radius 6
     textarea    138px tall, 5/14 padding
     note        rgba(240,240,240,.5), 16px padding, radius 6, #737373 14/20
     button      40px tall, 10/16 padding, radius 4, #A9955B, 14/20 500,
                 14px icon with an 18px gap

   !important appears only where Gravity Forms' own theme stylesheet sets the
   same property with equal or higher specificity; nothing here is a layout
   value that a native Gravity Forms setting could have produced. */

.gform_wrapper.ij-contact-form,
.gform_wrapper .ij-contact-form {
	--ij-gf-accent: #a9955b;
	--ij-gf-text: #575757;
	--ij-gf-muted: #737373;
	--ij-gf-line: #e0e0e0;
	--ij-gf-font: "Source Sans 3", system-ui, -apple-system, sans-serif;
}

.ij-contact-form,
.ij-contact-form * {
	box-sizing: border-box;
}

.ij-contact-form {
	margin: 0;
	font-family: var(--ij-gf-font);
}

/* Gravity Forms prints a validation summary and a required-field legend that
   the replicated design does not have. */
/* These sit in .gform_wrapper, OUTSIDE the <form> that carries the form's own
   css class, so they have to be targeted on the wrapper (Gravity Forms appends
   "_wrapper" to the class). The legend keeps a 30px bottom margin even when
   emptied, which collapses out and pushes the whole form down. */
.ij-contact-form_wrapper .gform_required_legend,
.ij-contact-form_wrapper .gform_heading,
.ij-contact-form_wrapper .gform_description,
.ij-contact-form .gform_required_legend,
.ij-contact-form .gform_heading,
.ij-contact-form .gform_description {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The honeypot is a real field in the markup, so it claims a grid row and a
   24px row gap at the top of the form. Taking it out of flow the way Gravity
   Forms does itself keeps the spam trap working and the layout exact. */
.ij-contact-form .gform_validation_container,
.ij-contact-form .gfield--type-honeypot {
	display: none !important;
	position: absolute !important;
	left: -9000px;
}

/* ------------------------------------------------------------------ grid */

.ij-contact-form .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	column-gap: 24px !important;
	row-gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.ij-contact-form .gfield {
	grid-column: span 12;
	margin: 0 !important;
	padding: 0 !important;
}

.ij-contact-form .gfield--width-half {
	grid-column: span 6;
}

/* ----------------------------------------------------------------- label */

/* Gravity Forms renders labels and controls as inline-block. Inside a block
   parent that puts them on a line box, so the parent's strut adds ~1px above
   every label and ~7px of descender space below the textarea. Forcing block
   removes both and makes the field boxes measure exactly label + control. */
.ij-contact-form .gfield_label,
.ij-contact-form .gform-field-label {
	display: block !important;
	margin: 0 !important;
	padding: 0 0 8px !important;
	font-family: var(--ij-gf-font);
	font-size: 14px !important;
	line-height: 24px !important;
	font-weight: 500 !important;
	color: var(--ij-gf-text) !important;
	letter-spacing: normal;
	text-transform: none;
}

/* The Elementor form wrote the marker into the label text as " *" in the label
   colour; Gravity Forms emits a separate red span. */
.ij-contact-form .gfield_required {
	color: var(--ij-gf-text) !important;
	font-weight: inherit;
	font-size: inherit;
}

.ij-contact-form .gfield_required::before {
	content: " ";
}

.ij-contact-form .gfield_required .gfield_required_text {
	display: none;
}

/* --------------------------------------------------------------- controls */

.ij-contact-form .ginput_container {
	margin: 0 !important;
}

.ij-contact-form input[type="text"],
.ij-contact-form input[type="email"],
.ij-contact-form input[type="tel"],
.ij-contact-form input[type="url"],
.ij-contact-form input[type="number"],
.ij-contact-form textarea {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	font-family: var(--ij-gf-font);
	font-size: 14px !important;
	line-height: 18px !important;
	font-weight: 400 !important;
	color: var(--ij-gf-text) !important;
	background-color: #fff !important;
	border: 1px solid var(--ij-gf-line) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ij-contact-form input[type="text"],
.ij-contact-form input[type="email"],
.ij-contact-form input[type="tel"],
.ij-contact-form input[type="url"],
.ij-contact-form input[type="number"] {
	height: 40px !important;
	min-height: 40px;
	padding: 10px 12px !important;
}

.ij-contact-form textarea {
	height: 138px !important;
	min-height: 138px;
	padding: 5px 14px !important;
	resize: vertical;
}

.ij-contact-form input:focus,
.ij-contact-form textarea:focus {
	border-color: var(--ij-gf-accent) !important;
	box-shadow: 0 0 0 1px rgba(169, 149, 91, 0.25) !important;
}

.ij-contact-form ::placeholder {
	color: rgba(87, 87, 87, 0.5);
	opacity: 1;
}

/* ------------------------------------------------------------------ note */

.ij-contact-form .ij-f-note .gfield_label {
	display: none;
}

.ij-contact-form .ij-note {
	margin: 0;
	padding: 16px;
	border-radius: 6px;
	background-color: rgba(240, 240, 240, 0.5);
	font-family: var(--ij-gf-font);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: var(--ij-gf-muted);
}

/* ---------------------------------------------------------------- button */

.ij-contact-form .gform_footer {
	margin: 24px 0 0 !important;
	padding: 0 !important;
	justify-content: flex-start;
}

.ij-contact-form button.ij-gf__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px !important;
	column-gap: 18px !important;
	width: auto;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	font-family: var(--ij-gf-font);
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 500 !important;
	letter-spacing: normal;
	text-transform: none;
	color: #fff !important;
	background-color: var(--ij-gf-accent) !important;
	border: 0 !important;
	border-radius: 4px !important;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ij-contact-form button.ij-gf__submit:hover,
.ij-contact-form button.ij-gf__submit:focus {
	color: #fff !important;
	background-color: var(--ij-gf-accent) !important;
	opacity: 0.92;
}

.ij-contact-form .ij-gf__submit-icon {
	display: inline-flex;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}

.ij-contact-form .ij-gf__submit-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ------------------------------------------------------- validation state */

.ij-contact-form .gfield_error input,
.ij-contact-form .gfield_error textarea {
	border-color: #c0392b !important;
}

.ij-contact-form .gfield_validation_message,
.ij-contact-form .validation_message {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--ij-gf-font);
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: #c0392b;
}

/* Gravity Forms renders the summary above the <form>, so it needs the wrapper
   selector as well — same reason as the heading block near the top of this file.
   It also draws a warning glyph via a ::before on the h2. */
.ij-contact-form_wrapper .gform_validation_errors,
.ij-contact-form .gform_validation_errors {
	margin: 0 0 24px !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(192, 57, 43, 0.3) !important;
	border-radius: 6px !important;
	background-color: rgba(192, 57, 43, 0.05) !important;
	box-shadow: none !important;
	font-family: var(--ij-gf-font);
	font-size: 14px;
	line-height: 20px;
	color: #c0392b;
}

.ij-contact-form_wrapper .gform_validation_errors > h2,
.ij-contact-form .gform_validation_errors > h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ij-gf-font);
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 500 !important;
	color: #c0392b !important;
}

.ij-contact-form_wrapper .gform_validation_errors > h2::before,
.ij-contact-form .gform_validation_errors > h2::before {
	display: none !important;
}

/* ------------------------------------------------------------ confirmation */

.gform_confirmation_message {
	margin: 0;
	padding: 16px;
	border-radius: 6px;
	background-color: rgba(169, 149, 91, 0.08);
	font-family: var(--ij-gf-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--ij-gf-text);
}

.gform_confirmation_message p {
	margin: 0;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.ij-contact-form .gfield--width-half {
		grid-column: span 12;
	}

	.ij-contact-form button.ij-gf__submit {
		width: 100%;
	}
}