/* ============================================================================
   Mindward Collective — Gravity Forms
   ----------------------------------------------------------------------------
   Field, label, description, validation and submit styling matched to the
   approved contact form in the static build.

   Loaded only on pages that actually render a Gravity Form. See inc/assets.php
   — the enqueue is triggered from the gform_enqueue_scripts action, so the
   stylesheet never ships on pages without a form.

   Gravity Forms should be set to its "Theme Framework" output with the orbital
   theme disabled (see the Gravity Forms configuration document); these rules
   assume the standard gform_wrapper markup, not the orbital theme's.
   ========================================================================= */

.gform_wrapper.gravity-theme,
.mw-form-card .gform_wrapper {
	--gf-color-primary: var(--mw-accent);
	--gf-local-color: var(--mw-ink-900);
	font-family: var(--mw-font-text);
}

/* Optional card shell — add the class mw-form-card to the container that wraps
   the form block. */
.mw-form-card {
	padding: var(--mw-pad-card);
	background-color: var(--mw-white);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-lg);
	box-shadow: var(--mw-shadow-card);
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 20px;
}

.gform_wrapper.gravity-theme .gfield {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Labels and descriptions
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-semibold);
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--mw-navy-900);
}

/* Gravity Forms nests the marker: .gfield_required > .gfield_required_text,
   and styles the inner span red and italic at (0,4,0) — so the inner span has
   to be matched through its parent here, not on its own, or Gravity Forms wins
   on specificity no matter what order the files load in. Both are named so the
   marker
   reads as a quiet piece of guidance rather than an error that has already
   happened — the form has not been submitted yet. */
.gform_wrapper.gravity-theme .gfield_required,
.gform_wrapper.gravity-theme .gfield_required .gfield_required_text,
.gform_wrapper.gravity-theme .gfield_required .gfield_required_asterisk,
.gform_wrapper.gravity-theme .gfield_required .gfield_required_custom {
	margin-left: 4px;
	color: var(--mw-text-muted);
	font-family: var(--mw-font-text);
	font-style: normal;
	font-weight: var(--mw-weight-medium);
	font-size: 13px;
}

.gform_wrapper.gravity-theme .gfield_description {
	margin-top: 6px;
	padding: 0;
	color: var(--mw-text-muted);
	font-size: var(--mw-size-small);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid var(--mw-line-strong);
	border-radius: var(--mw-radius-md);
	background-color: var(--mw-white);
	color: var(--mw-ink-900);
	font-family: var(--mw-font-text);
	font-size: var(--mw-size-body);
	line-height: var(--mw-leading-body);
	transition:
		border-color var(--mw-dur-fast) var(--mw-ease-out),
		box-shadow var(--mw-dur-fast) var(--mw-ease-out);
}

.gform_wrapper.gravity-theme textarea {
	min-height: 140px;
	resize: vertical;
}

.gform_wrapper.gravity-theme select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	outline: none;
	border-color: var(--mw-blue-500);
	box-shadow: 0 0 0 3px var(--mw-blue-100);
}

/* Keyboard-only focus keeps the standard ring in addition to the field glow, so
   the control is unambiguous for keyboard users. */
.gform_wrapper.gravity-theme input:focus-visible,
.gform_wrapper.gravity-theme select:focus-visible,
.gform_wrapper.gravity-theme textarea:focus-visible {
	outline: 2px solid var(--mw-blue-500);
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme ::placeholder {
	color: var(--mw-slate-400);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   Choice fields
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gfield_checkbox label,
.gform_wrapper.gravity-theme .gfield_radio label {
	font-family: var(--mw-font-text);
	font-size: var(--mw-size-body);
	font-weight: var(--mw-weight-regular);
	color: var(--mw-ink-900);
}

.gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"],
.gform_wrapper.gravity-theme .gfield_radio input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--mw-accent);
}

/* Consent and checkbox rows need a comfortable hit area on touch. */
.gform_wrapper.gravity-theme .gchoice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-height: 32px;
	padding-block: 4px;
}

/* ---------------------------------------------------------------------------
   Validation
   Gravity Forms already wires aria-describedby and aria-invalid; these rules
   only make the state visible, and never rely on colour alone — the error text
   itself carries the message.
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea,
.gform_wrapper.gravity-theme [aria-invalid="true"] {
	border-color: #B3261E;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.10);
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 8px;
	padding: 10px 14px;
	border: 1px solid rgba(179, 38, 30, 0.35);
	border-radius: var(--mw-radius-sm);
	background-color: rgba(179, 38, 30, 0.06);
	color: #8C1D18;
	font-size: var(--mw-size-small);
	font-weight: var(--mw-weight-medium);
	line-height: 1.5;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 1px solid rgba(179, 38, 30, 0.35);
	border-radius: var(--mw-radius-md);
	background-color: rgba(179, 38, 30, 0.06);
	box-shadow: none;
}

.gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	margin: 0;
	color: #8C1D18;
	font-family: var(--mw-font-display);
	font-size: 16px;
	font-weight: var(--mw-weight-bold);
}

/* ---------------------------------------------------------------------------
   Submit
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_footer {
	margin-top: 8px;
	padding: 0;
}

.gform_wrapper.gravity-theme .gform_button,
.gform_wrapper.gravity-theme input[type="submit"],
.gform_wrapper.gravity-theme .gform_button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	padding: 13px 32px;
	border: 2px solid transparent;
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-accent);
	color: var(--mw-white);
	font-family: var(--mw-font-display);
	font-weight: var(--mw-weight-bold);
	font-size: 19px;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color var(--mw-dur-base) var(--mw-ease-out),
		transform var(--mw-dur-base) var(--mw-ease-out);
}

.gform_wrapper.gravity-theme .gform_button:hover,
.gform_wrapper.gravity-theme input[type="submit"]:hover {
	background-color: var(--mw-blue-600);
	color: var(--mw-white);
	transform: translateY(-2px);
}

.gform_wrapper.gravity-theme .gform_button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ---------------------------------------------------------------------------
   Confirmation
   ------------------------------------------------------------------------ */

.gform_confirmation_wrapper,
.gform_confirmation_message {
	padding: var(--mw-pad-card);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-radius-lg);
	background-color: var(--mw-ice-50);
	color: var(--mw-ink-900);
	font-size: var(--mw-size-lead);
	line-height: var(--mw-leading-lead);
}

/* On an AJAX submission Gravity Forms nests the message INSIDE the wrapper, so
   the rule above paints the panel twice — a bordered box inside a bordered box,
   inside the form card. The inner one keeps the type and drops the shell. */
.gform_confirmation_wrapper .gform_confirmation_message {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.gform_confirmation_message > :first-child {
	margin-top: 0;
}

.gform_confirmation_message > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Honeypot
   Gravity Forms hides its own honeypot; this is a belt-and-braces guard in case
   a theme reset re-exposes it. It stays out of the tab order and off-screen
   rather than display:none, which some bots detect.
   ------------------------------------------------------------------------ */

.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_validation_container * {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper.gravity-theme input,
	.gform_wrapper.gravity-theme select,
	.gform_wrapper.gravity-theme textarea,
	.gform_wrapper.gravity-theme .gform_button {
		transition: none;
	}

	.gform_wrapper.gravity-theme .gform_button:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Submit button inside the form card
   The approved design runs the submit full width of the card. Outside a card
   the button keeps its natural width, so the same styles serve a form placed
   anywhere.
   ------------------------------------------------------------------------ */

.mw-form-card .gform_wrapper.gravity-theme .gform_button,
.mw-form-card .gform_wrapper.gravity-theme input[type="submit"] {
	width: 100%;
}

/* The privacy note sits below the button, as page content rather than a form
   field — Gravity Forms renders every field above the footer, so a field could
   never appear here. */
.mw-form-card .mw-form-note {
	margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   Field rhythm
   Gravity Forms sets 16px on .gform_fields from its own stylesheet. Its rules
   are printed after this file unless the enqueue names them as dependencies
   (see inc/assets.php), so this is written as `row-gap` — the same property
   Gravity Forms uses — rather than the legacy `grid-row-gap` alias.
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .gform_fields {
	row-gap: 22px;
}

/* ---------------------------------------------------------------------------
   Consent field
   The consent field is its own markup — .ginput_container_consent, not the
   .gfield_checkbox the rules above cover — and Gravity Forms wraps its
   description in a bordered, padded .gfield_consent_description_text box that
   reads as a second input sitting under the checkbox. Flattened to a plain
   muted line, and the checkbox sized to the design.
   ------------------------------------------------------------------------ */

.gform_wrapper.gravity-theme .ginput_container_consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--mw-accent);
}

.gform_wrapper.gravity-theme .ginput_container_consent label {
	margin: 0;
	font-family: var(--mw-font-text);
	font-size: var(--mw-size-small);
	font-weight: var(--mw-weight-regular, 400);
	line-height: 1.55;
	color: var(--mw-text-body);
}

.gform_wrapper.gravity-theme .gfield_consent_description,
.gform_wrapper.gravity-theme .gfield_consent_description_text {
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	color: var(--mw-text-muted);
	font-size: 13px;
	line-height: 1.55;
}

.gform_wrapper.gravity-theme .gfield_consent_description {
	margin-top: 8px;
}