/*
 * Fluent Forms adapter
 *
 * Goal: make the Fluent Forms enquiry form look exactly like the static build
 * (site/contact.html), which main.css was written against:
 *
 *   <div class="form-grid">
 *     <p class="field"><label for="x">Label</label><input id="x"></p>
 *     <p class="field field--full"><label>Message</label><textarea></textarea></p>
 *   </div>
 *   <p class="form-consent">…</p>
 *   <input type="submit" class="btn btn--block">
 *
 * Fluent Forms emits a different, deeper tree:
 *
 *   <form class="frm-fluent-form ff-el-form-top ff-form-loading">
 *     <fieldset>
 *       <div class="ff-el-group ff-el-form-top">      <- one per field
 *         <div class="ff-el-input--label">           <- label block
 *           <label …>Name</label>
 *         </div>
 *         <div class="ff-el-input--content">         <- control block
 *           <input class="ff-el-form-control">
 *         </div>
 *       </div>
 *       …
 *       <div class="ff-el-group ff_submit_btn_wrapper"><button …></div>
 *     </fieldset>
 *   </form>
 *
 * There is no .form-grid, so the two-column grid from main.css never applies.
 * The mapping is therefore:
 *   - every .ff-el-group becomes a .field (the flex column main.css styles);
 *   - the form element itself becomes the .form-grid (two-column grid);
 *   - .ff-el-input--label / .ff-el-input--content are flattened with
 *     display:contents so `.field > label` and `.field input` match again;
 *   - the message field (textarea) spans both columns like .field--full.
 *
 * main.css / pages.css stay byte-identical to the static build; every
 * correction lives in this file - same rule as the previous CF7 adapter.
 */

/* --- scaffolding ---------------------------------------------------- */

/*
 * Two things must never be visible:
 *   .ff_screen_reader_title  - the fieldset <legend> FF uses as an a11y title
 *   .ff-form-loading         - FF adds this class until its JS is ready;
 *                              without its stylesheet it would stay forever,
 *                              so make sure the form is never opacity:0
 */
.ff_screen_reader_title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/*
 * FF's own stylesheet is left in place (it carries the grid/borderless rules
 * the plugin needs), but the theme must win on typography and colours, so
 * everything below is declared at a specificity that beats it.
 */

/* --- structure: rebuild .form-grid / .field -------------------------- */

/*
 * The grid must live on the <fieldset>, not the <form>.
 *
 * FF nests every control one level deeper than the static build:
 *
 *   <form class="frm-fluent-form">
 *     <fieldset>            <-- FF wraps the whole body in this
 *       <legend class="ff_screen_reader_title">…</legend>
 *       <div class="ff-el-group">…</div>   (x N)
 *     </fieldset>
 *   </form>
 *
 * So <fieldset> is the form's only element child. Putting the grid on the
 * form therefore creates a single one-cell grid and every field stacks
 * vertically. The fieldset also ships inline styles that neutralise its own
 * border/margin/padding but leave display:block, so it must be turned into
 * the grid container explicitly.
 */
.fluentform .frm-fluent-form fieldset {
	display: grid;
	/* Same tracks/gap as main.css .form-grid */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px 16px;
	width: 100%;
	/* Keep the grid tracks on the fieldset itself. */
	min-inline-size: 0;
}

/* The form is then just a block wrapper. */
.fluentform .frm-fluent-form {
	display: block;
	width: 100%;
}

/* The a11y title FF renders as a <legend> must not become a grid cell. */
.fluentform .frm-fluent-form fieldset > .ff_screen_reader_title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.fluentform .ff-el-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Flatten the label/content wrappers so direct-child selectors match again. */
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--content {
	display: contents;
}

.fluentform .ff-el-input--label > label {
	font-size: var(--fs-micro);
	color: var(--c-ink-3);
	font-weight: 400;
	line-height: 1.4;
}

/* The message textarea spans the full width, like .field--full.
 * The hook class (.ff-field-full) is set on the control itself because
 * Fluent Forms does not propagate container_class onto the .ff-el-group
 * wrapper - relying on :has() alone would break whenever the wrapper's
 * contents get flattened. */
.fluentform .ff-el-group:has(textarea),
.fluentform .ff-el-group:has(.ff-field-full) {
	grid-column: 1 / -1;
}

/* --- controls -------------------------------------------------------- */

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
	width: 100% !important;
	max-width: none;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--c-bg-2) !important;
	border: 1px solid transparent !important;
	border-radius: 0;
	box-shadow: none !important;
	font: inherit;
	font-size: var(--fs-small);
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fluentform select {
	/* Native arrow, drawn identically to the previous adapter. */
	background-image:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	padding-right: 42px;
	cursor: pointer;
}

/*
 * The generic control rule above (".fluentform .ff-el-form-control, ...,
 * .fluentform textarea") has a higher specificity than a bare
 * ".fluentform textarea", so the shared min-height:48px would win here.
 * Qualify with the control class so this rule actually applies, and add
 * !important because the plugin's own stylesheet also carries a
 * ".ff-default textarea" height.
 */
.fluentform textarea.ff-el-form-control,
.fluentform textarea {
	min-height: 120px !important;
	resize: vertical;
	line-height: 1.6;
}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	outline: none;
	border-color: var(--c-ink) !important;
	background-color: #fff !important;
	box-shadow: none !important;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
	color: var(--c-ink-3);
}

/* --- required marker -------------------------------------------------- */

/*
 * The static build writes the asterisk inline, right after the label text:
 *
 *   <label>Name<span aria-hidden="true">*</span></label>
 *
 * Fluent Forms instead flags the label block with .ff-el-is-required and
 * leaves the asterisk to its own stylesheet - which this site's build does not
 * ship, so nothing would render. Reproduce the static markup with a ::after
 * so the marker sits directly after the word and is hidden from screen
 * readers by virtue of being decorative (aria-required is already on the
 * control itself).
 */
.fluentform .ff-el-is-required > label::after,
.fluentform .ff-el-input--label.ff-el-is-required > label::after {
	content: "*";
	margin-inline-start: 1px;
	color: #b3261e;
	font-style: normal;
}

/* The consent row keeps its own inline checkbox, so no marker there. */
.fluentform .form-consent .ff-el-is-required > label::after {
	content: none;
}

/* FF sometimes ships a real element instead of a pseudo-element; make sure
 * only one asterisk is ever visible. */
.fluentform .required_asterisk,
.fluentform .ff_required_asterisk {
	display: none !important;
}

/* --- consent row ------------------------------------------------------ */

/*
 * Static build: a single line of small grey text with a checkbox in front.
 * FF wraps it in .form-check; flatten that so the row matches .form-consent.
 */
.fluentform .ff-el-group.form-consent {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
	margin: 18px 0 0;
	font-size: var(--fs-micro);
	color: var(--c-ink-3);
	line-height: 1.5;
}

.fluentform .form-consent .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	margin: 0;
}

.fluentform .form-consent input[type="checkbox"] {
	width: 16px !important;
	height: 16px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--c-ink, #111);
	cursor: pointer;
}

.fluentform .form-consent .ff-el-form-check-label {
	display: block;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	font-weight: 400;
	cursor: pointer;
}

.fluentform .form-consent a {
	text-decoration: underline;
}

/* --- submit button ---------------------------------------------------- */

.fluentform .ff_submit_btn_wrapper {
	grid-column: 1 / -1;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}

.fluentform .ff_submit_btn_wrapper button,
.fluentform .ff_submit_btn_wrapper .btn,
.fluentform button[type="submit"],
.fluentform .ff-btn-submit {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid transparent !important;
	border-radius: 0;
	background: var(--c-ink, #111) !important;
	background-image: none !important;
	color: #fff !important;
	font: inherit;
	font-size: var(--fs-small);
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.fluentform button[type="submit"]:hover,
.fluentform .ff_submit_btn_wrapper button:hover {
	opacity: 0.86;
}

.fluentform button[type="submit"] svg,
.fluentform .ff_submit_btn_wrapper button svg {
	display: none;
}

/* The inline spinner FF injects while the form submits. */
.fluentform .ff-btn-submit .ff-btn-spinner,
.fluentform button[type="submit"] .ff-btn-spinner {
	display: none;
}

/* --- validation -------------------------------------------------------- */

.fluentform .error,
.fluentform .ff-el-error,
.fluentform .ff-invalid {
	margin: 6px 0 0;
	font-size: var(--fs-micro);
	color: #b3261e;
}

.fluentform input.ff-invalid,
.fluentform select.ff-invalid,
.fluentform textarea.ff-invalid,
.fluentform .has-error input,
.fluentform .has-error select,
.fluentform .has-error textarea {
	border-color: #b3261e !important;
}

/* --- success / error notice -------------------------------------------- */

/*
 * FF renders its own toast/message box. Collapse it while empty so it does
 * not leave a blank strip above the first field (the same problem the CF7
 * adapter had with .wpcf7-response-output).
 */
.fluentform .ff-form-message,
.fluentform .fluentform-notification,
.fluentform .ff-message {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--c-line, #e5e5e5);
	background: var(--c-bg-2, #f6f6f6);
	font-size: var(--fs-small, 14px);
}

.fluentform .ff-form-message:empty,
.fluentform .ff-message:empty {
	display: none;
	padding: 0;
	border: 0;
	margin: 0;
}

.fluentform .ff-form-message[role="alert"] {
	border-color: #b3261e;
	color: #b3261e;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 600px) {
	.fluentform .frm-fluent-form fieldset {
		grid-template-columns: 1fr;
	}

	.fluentform .ff-el-group:has(textarea),
	.fluentform .ff-el-group:has(.ff-field-full) {
		grid-column: auto;
	}
}