/* Fluent Forms: match the design system's primary button (48px pill, lighter on hover). Hand-written; uses token variables only.
   Fluent Forms buttons don't carry WordPress's .wp-element-button class, so theme.json button styles miss them.
   The extra classes outrank Fluent's per-form styles (form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)). */

.fluentform .ff-btn.ff-btn-submit.ff_btn_style {
	min-height: var(--wp--custom--tap-target);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--hype-blue);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--type--button--font-size);
	line-height: var(--wp--custom--type--button--line-height);
	font-weight: var(--wp--custom--type--button--font-weight);
	opacity: 1;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
	background-color: var(--wp--preset--color--hype-blue-hover);
	color: var(--wp--preset--color--on-brand);
	opacity: 1;
}
/* Lift and shadow only where a pointer really hovers; on a phone a tapped button would keep them. */
@media (hover: hover) {
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
		transform: translateY(-1px);
		box-shadow: var(--wp--preset--shadow--card);
	}
}

.fluentform .ff-btn.ff-btn-submit.ff_btn_style:focus-visible {
	outline: 3px solid var(--wp--preset--color--focus-ring);
	outline-offset: 2px;
}

/* Fields: surface-raised with a border-control edge in both themes (tokens.json), so they stay the same colour
   at rest and when focused. Fluent Forms otherwise paints them white on focus, and black at rest in dark mode.
   !important beats Fluent's per-form colours. */
.fluentform .ff-el-group .ff-el-form-control,
.fluentform .ff-el-group .ff-el-form-control:focus {
	background-color: var(--wp--preset--color--surface-raised) !important;
	color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--border-control);
}

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

/* Fields: soft focus, as in the design system (Button/README focus rule) and Amelia. Fluent Forms draws a real
   1px border, so that turns hype-blue-deep and a 3px focus-ring glow sits outside it (Amelia's equivalent is
   a 1px ring plus a 4px glow). !important beats Fluent's own and per-form focus colours. */
.fluentform .ff-el-group .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--hype-blue-deep) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--focus-ring) 25%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style {
		transition: none;
	}
	.fluentform .ff-btn.ff-btn-submit.ff_btn_style:hover {
		transform: none;
	}
}

/* Two fields side by side: when one label wraps onto a second line, line the input boxes up along the bottom
   (Alex, 2026-10-29). Fluent's show/hide sets display inline on the field groups, so the cell does the aligning. */
.fluentform .ff-t-container > .ff-t-cell {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Thank-you message after a form is sent (every Fluent form; Alex, 2026-10-29): a pale green panel with a green
   stripe and a tick, so it reads as "done" at a glance. sage-tint behind ink text (12.9:1), the tick and stripe
   in sage-deep; both switch in dark mode. Fluent marks it role="status", so screen readers announce the text;
   the tick is decoration. The footer's newsletter version on navy is in patterns.css. */
.fluentform .ff-message-success,
.ff-message-success {
	position: relative;
	margin-top: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5) var(--wp--preset--spacing--4) calc(var(--wp--preset--spacing--5) + 32px);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--sage-deep);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: none;
	background: var(--wp--preset--color--sage-tint);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	/* No single word left alone on the last line. */
	text-wrap: pretty;
}
.ff-message-success::before {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--4);
	top: calc(var(--wp--preset--spacing--4) + 1px);
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--sage-deep);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.4-4.3-4.3 1.4-1.4 2.9 2.9 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.4-4.3-4.3 1.4-1.4 2.9 2.9 6-6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ff-message-success > :first-child {
	margin-top: 0;
}
.ff-message-success > :last-child {
	margin-bottom: 0;
}
.ff-message-success:focus {
	outline: none;
}