/**
 * Contact Form 7 styling ("gh-form" family). CF7 ships with no visual
 * styling of its own, and this project's forms previously carried Tailwind
 * utility classes baked directly into the form template — this file
 * replaces that with the theme's own design system (same color tokens and
 * spacing conventions as css/blocks.css), so the form no longer depends on
 * Tailwind being loaded at all.
 *
 * Layout follows the design guide's own contact-form artboard: a 260px
 * label column beside a flexible input column, stacking to one column on
 * narrow screens.
 *
 * @package astra-child
 */

.gh-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 15px;
	line-height: 1.7;
}
.gh-form-title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
}
.gh-form-row {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.gh-form-label {
	padding-top: 12px;
	font-weight: 700;
}
/* Contact Form 7 wraps the label and every field in a <p> (auto-paragraph),
   and the site-wide "body.gh-block-page p { margin-bottom: 1.75em !important }"
   then adds ~28px under each: it pushed the input 37px below its label. The
   form's own gaps (row gap / .gh-form gap) do the spacing instead. */
body.gh-block-page .gh-form p {
	margin-block-end: 0 !important;
}
/* Same auto-paragraph also inserts a <br> right after a block-level label,
   which renders as an empty line between the label and its field. */
.gh-form .gh-form-sublabel + br,
.gh-form .gh-form-label + br {
	display: none;
}
.gh-form-required {
	color: #c4571a;
	font-weight: 400;
}
.gh-form-sublabel {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #6b655d;
}
.gh-form-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: #6b655d;
}
.gh-form-notice {
	margin-top: 10px;
	background: #e6eef9;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.8;
}
.gh-form-notice p {
	margin: 0;
}
.gh-form-notice p + p {
	margin-top: 6px;
}
.gh-form-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.gh-form-field-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Label-beside-input needs room: a 260px label column leaves the input only
   ~half of a tablet-width screen, so the row stacks (label above input) from
   960px down instead of 700px. The 3-up small-field grid can stay 3-up longer. */
@media (max-width: 960px) {
	.gh-form-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.gh-form-label {
		padding-top: 0;
	}
}
@media (max-width: 700px) {
	.gh-form-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* Field controls. CF7 wraps every tag in its own <span class="wpcf7-form-
   control-wrap">, so sizing the tag itself to 100% keeps the wrap from
   adding any extra width constraints of its own. */
.gh-form .wpcf7-form-control-wrap {
	display: block;
}
.gh-form input[type="text"],
.gh-form input[type="tel"],
.gh-form input[type="email"],
.gh-form select,
.gh-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #d9d3c8;
	border-radius: 10px;
	background: #ffffff;
	font: inherit;
	color: #3d3a36;
}
.gh-form textarea {
	min-height: 0;
	resize: vertical;
}
/* Drop-down: the browser's native arrow sits flush against the right edge
   (the field's right padding is ignored for it). Draw our own chevron with
   appearance:none so it keeps 16px of air, and reserve room for it so long
   option text never runs underneath. */
.gh-form select,
.gh-form .wpcf7 select.wpcf7-form-control,
.gh-form select.wpcf7-form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* CF7's ".wpcf7 select.wpcf7-form-control { padding: 6px 10px }" (also
	   inlined by Astra) out-ranks ".gh-form select", hence the extra selectors. */
	padding: 10px 44px 10px 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b655d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	cursor: pointer;
}
.gh-form input:focus,
.gh-form select:focus,
.gh-form textarea:focus {
	outline: none;
	border-color: #f08207;
	box-shadow: 0 0 0 3px rgba(240, 130, 7, 0.15);
}

/* Consent checkboxes + submit. */
.gh-form-consent {
	border-top: 1px solid #e3ddd2;
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.gh-form-consent .wpcf7-list-item {
	margin: 0;
}
.gh-form-consent label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 500;
}
.gh-form-consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: #f08207;
}
.gh-form-consent-note {
	margin: 0;
	font-size: 13px;
	color: #6b655d;
}
.gh-form-submit {
	margin-top: 8px;
}
.gh-form .wpcf7-submit {
	min-width: 320px;
	min-height: 64px;
	border: 0;
	border-radius: 999px;
	background: #f08207;
	color: #ffffff;
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
}
.gh-form .wpcf7-submit:hover {
	background: #d97207;
}
.gh-form .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* CF7's own validation UI (unstyled otherwise). */
.gh-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #c4571a;
}
.gh-form .wpcf7-not-valid {
	border-color: #c4571a;
}
.wpcf7-response-output {
	margin: 16px 0 0 !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
}