/* Fluent Forms ships its own stylesheets, so every rule here is scoped under the block wrapper and
   the form element, which outranks the plugin's `.ff-default .x` pairs without !important. */
.ff_guten_block.fluentform {
	/* Glyphs from Lucide (ISC), inlined like the breadcrumb house: a fixed design decision, not a
	   runtime lookup. Each one is painted with a mask, so the stroke color here is irrelevant. */
	--grave-contact-form-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
	--grave-contact-form-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E");
	--grave-contact-form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	/* Full-strength fg-muted reads as a filled field rather than as a prompt, so a placeholder is
	   mixed back toward the field it sits on. */
	--grave-contact-form-placeholder: color-mix(in srgb, var(--wp--preset--color--fg-muted) 55%, var(--wp--preset--color--surface));
	--grave-contact-form-field-padding-block: var(--wp--preset--spacing--30);
	--grave-contact-form-field-padding-inline: var(--wp--preset--spacing--40);
	--grave-contact-form-focus-width: 0.125rem;

	/* The plugin paints the asterisk, the invalid field and the error text from this one variable. */
	--fluentform-danger: var(--wp--custom--status--danger);

	container-name: grave-contact-form;
	container-type: inline-size;
}

.ff_guten_block.fluentform .frm-fluent-form {
	& .ff-el-group {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	& .ff-t-container {
		gap: var(--wp--preset--spacing--40);
	}

	& .ff-el-input--label {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	& .ff-el-input--label label {
		color: var(--wp--preset--color--fg-muted);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--typography--font-weight--medium);
		line-height: var(--wp--custom--typography--line-height--compact);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	& .ff-el-form-control {
		padding: var(--grave-contact-form-field-padding-block) var(--grave-contact-form-field-padding-inline);
		border: 1px solid transparent;
		border-radius: var(--wp--custom--radius--sm);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--fg);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--base);
		line-height: var(--wp--custom--typography--line-height--compact);
	}

	& .ff-el-form-control::placeholder {
		color: var(--grave-contact-form-placeholder);
		opacity: 1;
	}

	& .ff-el-form-control:focus {
		border-color: var(--wp--preset--color--primary-dark);
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--fg);
	}

	& :is(.ff-el-form-control, .ff-el-form-check-input, .ff-btn-submit):focus-visible {
		outline: var(--grave-contact-form-focus-width) solid var(--wp--preset--color--primary-dark);
		outline-offset: var(--grave-contact-form-focus-width);
	}

	& select.ff-el-form-control {
		appearance: none;
		padding-right: calc(var(--grave-contact-form-field-padding-inline) + var(--wp--preset--spacing--40));
	}

	& select.ff-el-form-control:has(option[value=""]:checked) {
		color: var(--grave-contact-form-placeholder);
	}

	/* The chevron rides on the wrapper rather than the select, so it can be masked in currentColor. */
	& .ff-el-input--content:has(> select.ff-el-form-control) {
		position: relative;
	}

	& .ff-el-input--content:has(> select.ff-el-form-control)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: var(--grave-contact-form-field-padding-inline);
		width: 1rem;
		height: 1rem;
		transform: translateY(-50%);
		background-color: var(--wp--preset--color--fg-muted);
		-webkit-mask: var(--grave-contact-form-chevron) center / contain no-repeat;
		mask: var(--grave-contact-form-chevron) center / contain no-repeat;
		pointer-events: none;
	}

	& textarea.ff-el-form-control {
		min-height: calc(
			6em * var(--wp--custom--typography--line-height--compact) + 2 *
				var(--grave-contact-form-field-padding-block)
		);
		resize: vertical;
	}

	& .ff-el-tc label.ff_tc_label {
		cursor: pointer;
		color: var(--wp--preset--color--fg-muted);
		font-size: var(--wp--preset--font-size--sm);
		line-height: var(--wp--custom--typography--line-height--compact);
	}

	& .ff-el-tc label.ff_tc_label > .ff_t_c {
		padding-left: var(--wp--preset--spacing--20);
	}

	& .ff-el-form-check-input {
		width: 1.125rem;
		height: 1.125rem;
		top: 0;
		accent-color: var(--wp--preset--color--primary-dark);
	}

	& .ff_submit_btn_wrapper {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
	}

	/* The button wears wp-element-button and the form runs in the plugin's inherit-theme mode, so
	   everything but the room for the glyph comes from theme.json. */
	& .ff-btn-submit {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
	}

	& .ff-btn-submit::after {
		content: "";
		flex: none;
		width: 1em;
		height: 1em;
		background-color: currentcolor;
		-webkit-mask: var(--grave-contact-form-arrow) center / contain no-repeat;
		mask: var(--grave-contact-form-arrow) center / contain no-repeat;
	}

	/* An invalid field gains a border where it had none, and its message gains a glyph, so the
	   state reads before its colour does. The border outlives the focus ring on purpose: a field
	   is still invalid while it is being corrected. */
	& .ff-el-is-error .ff-el-form-control {
		border-color: var(--wp--custom--status--danger);
	}

	& .error.text-danger {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		margin-top: var(--wp--preset--spacing--20);
		color: var(--wp--custom--status--danger);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--typography--font-weight--medium);
		line-height: var(--wp--custom--typography--line-height--compact);
	}

	& .error.text-danger::before {
		content: "";
		flex: none;
		width: 1em;
		height: 1em;
		background-color: currentcolor;
		-webkit-mask: var(--grave-contact-form-alert) center / contain no-repeat;
		mask: var(--grave-contact-form-alert) center / contain no-repeat;
	}
}

.ff_guten_block.fluentform .ff-message-success {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary-tint);
	box-shadow: none;
	color: var(--wp--preset--color--fg-dark);
}

/* The plugin stacks the pairs below 768px of viewport; the form also lives in a column narrower
   than that on the contact page, which is what the container query answers. */
@container grave-contact-form (width < 30rem) {
	.ff_guten_block.fluentform .frm-fluent-form .ff-t-container {
		display: block;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ff_guten_block.fluentform .frm-fluent-form {
		& .ff-el-form-control {
			transition: border-color var(--wp--custom--motion--duration--fast)
				var(--wp--custom--motion--easing--out);
		}

		& .error.text-danger {
			animation: grave-contact-form-notice var(--wp--custom--motion--duration--base)
				var(--wp--custom--motion--easing--out) both;
		}
	}

	.ff_guten_block.fluentform .ff-message-success {
		animation: grave-contact-form-notice var(--wp--custom--motion--duration--base)
			var(--wp--custom--motion--easing--out) both;
	}
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.ff_guten_block.fluentform .frm-fluent-form {
		& .ff-btn-submit::after {
			transition: transform var(--wp--custom--motion--duration--fast)
				var(--wp--custom--motion--easing--out);
		}

		& .ff-btn-submit:hover::after {
			transform: translateX(0.25em);
		}
	}
}

@keyframes grave-contact-form-notice {
	from {
		opacity: 0;
		transform: translateY(-0.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}