/*
 * Fluent Forms styling — Support (form id 3) and Contact (form id 4) pages.
 *
 * Fluent Forms is a third-party plugin: its markup isn't block markup, so
 * theme.json presets can't reach it directly. Every color/size/spacing value
 * below is still copied from the theme.json preset it corresponds to (see
 * the token reference table in CLAUDE.md) rather than re-guessed, so the
 * form matches the surrounding page exactly. Loaded only on the support and
 * contact pages (see functions.php), never sitewide.
 */

/* Field labels: 13.5px / 600 / heading-text, ~8px gap above the input to
   match the design's flex-column label+input gap (Fluent Forms doesn't use
   flex here, so the gap is reproduced as margin instead). */
.fluentform .ff-el-input--label {
	margin-bottom: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--heading-text);
}

/* Required asterisk uses the same red Fluent Forms already defines
   (--fluentform-danger) — left as-is, it's already accessible contrast. */

/* Text/email/url/select/textarea fields. */
.fluentform .ff-el-form-control {
	font-family: 'Inter', sans-serif;
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--14);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--heading-text);
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--text-faint);
	opacity: 1;
}

.fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.fluentform textarea.ff-el-form-control {
	resize: vertical;
}

/* Support form only: pair Email + Store URL side by side like the design,
   while Issue Type / Describe Your Issue / Screenshot URL stay full width.
   The Name field already lays first/last side by side on its own (Fluent
   Forms' built-in .ff-t-container flex, >=768px). storemapify-ff-span2 is
   set via each field's own "container_class" setting (a real Fluent Forms
   field option) rather than guessed at with position-based selectors, so it
   survives future edits made in the form builder UI. */
#fluentform_3 fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

#fluentform_3 .ff-name-field-wrapper,
#fluentform_3 .storemapify-ff-span2,
#fluentform_3 .ff_submit_btn_wrapper {
	grid-column: 1 / -1;
}

/* Submit button: Fluent Forms writes its own background/color/border-radius
   as inline styles from the imported demo form's button settings (a blue
   that isn't in our palette). !important is required to beat an inline
   style — there's no field setting for this that maps to a theme.json
   preset instead. */
.fluentform .ff-btn-submit {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--surface) !important;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--14) var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--sm) !important;
	cursor: pointer;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background: var(--wp--preset--color--primary-hover) !important;
	border-color: var(--wp--preset--color--primary-hover) !important;
}

/* Success state (shown in place of the form after submission) — reuses the
   theme's success tokens, the same pairing used for checkmarks elsewhere. */
.ff-message-success {
	border: 1px solid var(--wp--preset--color--success);
	background: var(--wp--preset--color--success-tint);
	color: var(--wp--preset--color--heading-text);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--22);
	box-shadow: none;
}

@media (max-width: 767px) {
	#fluentform_3 fieldset {
		display: block;
	}
}