/*
 * Fluent Forms, restyled for the dark theme.
 *
 * WHY THIS FILE EXISTS AT ALL
 * The plugin ships a light skin (fluentform-public-default.css): white inputs,
 * grey borders, Apple system font, and background-color:#fff hardcoded on
 * :focus. Against #0b0c0f that is not a style mismatch, it is unreadable. The
 * theme had no form CSS whatsoever until now.
 *
 * WHY OVERRIDE THE SKIN RATHER THAN SUPPRESS IT
 * fluentform/load_default_public would let us own everything, but the skin also
 * carries the error, success and honeypot plumbing, which we would then have to
 * rebuild. Most of its visual surface is reachable through its own custom
 * properties, so it is retuned instead. If that ever stops being true, the
 * escape hatch is add_filter('fluentform/load_default_public','__return_false').
 *
 * SPECIFICITY
 * The skin's selectors are .ff-default X (0,2,0). Ours are .fluentform.ff-default
 * X (0,3,0) so they win deterministically rather than on enqueue order, which
 * we do not control — Fluent Forms enqueues its CSS while rendering the
 * shortcode.
 *
 * Loaded only on the four pages that embed a form; see inc/assets.php.
 */

/* Retune the plugin's own tokens instead of fighting every rule that reads them. */
.fluentform {
	--fluentform-primary: var(--wp--preset--color--accent);
	--fluentform-secondary: var(--wp--preset--color--text);
	--fluentform-border-color: var(--wp--preset--color--line);
	--fluentform-border-radius: 9px;
}

.fluentform.ff-default .ff-el-group {
	margin-bottom: 18px;
}

.fluentform.ff-default .ff-el-input--label label {
	margin-bottom: 7px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

/* The required asterisk; the skin leaves it at the browser's default red. */
.fluentform.ff-default .ff-el-is-required.asterisk-right label:after {
	color: var(--wp--preset--color--accent);
}

.fluentform.ff-default .ff-el-form-control {
	width: 100%;
	padding: 12px 14px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	/* The skin sets line-height:1, which clips descenders in the textarea. */
	line-height: 1.45;
}

/* The skin hardcodes background-color:#fff here, which flashes white on focus. */
.fluentform.ff-default .ff-el-form-control:focus {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
	box-shadow: none;
}

.fluentform.ff-default .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
	/* Firefox dims placeholders by default; the muted token is already dim enough. */
	opacity: 1;
}

.fluentform.ff-default textarea.ff-el-form-control {
	min-height: 130px;
	resize: vertical;
}

/* Consent checkbox. Not in the handoff mockup, but the forms carry one. */
.fluentform.ff-default .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.5;
}

.fluentform.ff-default .ff-el-form-check-input {
	margin-top: 2px;
	accent-color: var(--wp--preset--color--accent);
}

.fluentform.ff-default .ff-el-form-check-label a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * Submit button. Colours come from the form definition (scripts/lib-forms.php
 * emits them as an inline rule at form.fluent_form_N .ff-btn-submit:not(...),
 * which is (0,3,1) and beats anything reasonable here) — only the geometry the
 * inline rule does not set is worth declaring.
 */
.fluentform.ff-default .ff-btn-submit {
	width: 100%;
	padding: 15px 28px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14.5px;
	font-weight: 600;
}

/* Validation and confirmation messages. */
.fluentform.ff-default .text-danger,
.fluentform.ff-default .error-text {
	font-size: 12.5px;
}

.fluentform.ff-default .ff-message-success {
	padding: 18px 20px;
	background: var(--wp--custom--accent-wash--soft);
	border: 1px solid var(--wp--custom--accent-wash--border);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--text);
}

/*
 * Two fields on one row.
 *
 * The pair is marked in scripts/seed-forms.php with a container_class, which
 * Fluent Forms prints onto the .ff-el-group wrapper. Doing it this way rather
 * than with :nth-child means the layout follows the fields if the client
 * reorders them in the form editor, and it avoids Fluent Forms' own container
 * element, whose nesting would hide those fields from the notification email
 * builder in scripts/lib-forms.php.
 */
/*
 * NB the flex container is the FIELDSET, not the form: Fluent Forms wraps every
 * field in one, so the .ff-el-group divs are grandchildren of <form> and a flex
 * rule on the form itself lays out nothing. The hidden inputs alongside them are
 * display:none and so are not flex items; the screen-reader <legend> is, but it
 * is zero-height with no margin, so it costs one empty row of 0px.
 */
.fluentform.ff-default .frm-fluent-form > fieldset {
	display: flex;
	flex-wrap: wrap;
	/* Row gap is 0: .ff-el-group already carries its own margin-bottom. */
	gap: 0 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.fluentform.ff-default .frm-fluent-form > fieldset > * {
	flex: 1 1 100%;
	min-width: 0;
}

.fluentform.ff-default .frm-fluent-form > fieldset > .dbf-field-half {
	flex: 1 1 calc(50% - 8px);
}

/* 560px: the paired row stacks, matching the handoff. */
@media (max-width: 560px) {
	.fluentform.ff-default .frm-fluent-form > fieldset > .dbf-field-half {
		flex: 1 1 100%;
	}
}