/* ============================================================================
   Worklane — Fluent Forms contact form (id=1) skin
   Scope: .fluentform_wrapper_1  /  form.fluent_form_1
   Target: matches design in deliverables/design/Worklane Contact.html
   — component tokens from global.css (--color-*, --spacing-*, --radius-*, etc.)
   — does NOT alter FF validation JS or form schema
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Form shell — flex column, same gap as the design .contact-form
   -------------------------------------------------------------------------- */
form.fluent_form_1 {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
}

/* FF injects a fieldset with heavy inline styles — reset visual chrome */
form.fluent_form_1 fieldset {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
}

/* --------------------------------------------------------------------------
   2. Labels — match .wl-field__label
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-el-input--label label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--fw-medium);
	color: var(--color-contrast-muted);
	letter-spacing: var(--tracking-snug);
	margin-bottom: 0; /* gap handled at .ff-el-group level */
}

/*
 * FF already appends " *" via its own public CSS:
 *   .asterisk-right label:after { content:" *"; color:var(--fluentform-danger); }
 * Override only the color to use the emerald token — do NOT add another ::after.
 */
form.fluent_form_1 .ff-el-input--label.asterisk-right label::after {
	color: var(--color-accent-1);
}

/* --------------------------------------------------------------------------
   3. Inputs, select, textarea — match .wl-input / .wl-select / .wl-textarea
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: var(--spacing-30) var(--spacing-40);
	background: var(--color-surface-2);
	border: 1px solid var(--color-neutral-strong);
	border-radius: calc(var(--radius-sm) * var(--radius-scale));
	color: var(--color-contrast);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	line-height: var(--lh-normal);
	transition: border-color var(--transition), box-shadow var(--transition),
	            background var(--transition);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

form.fluent_form_1 .ff-el-form-control::placeholder {
	color: var(--color-contrast-subtle);
}

form.fluent_form_1 .ff-el-form-control:hover {
	border-color: var(--color-accent-border);
}

form.fluent_form_1 .ff-el-form-control:focus,
form.fluent_form_1 .ff-el-form-control:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-color: var(--color-accent-1);
}

/* Textarea — minimum height + no horizontal resize */
form.fluent_form_1 textarea.ff-el-form-control {
	min-height: 7.5rem;
	resize: vertical;
}

/* Select — custom caret (matches .wl-select) */
form.fluent_form_1 select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg,  transparent 50%, var(--color-contrast-muted) 50%),
		linear-gradient(135deg, var(--color-contrast-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: var(--spacing-60);
}

/* --------------------------------------------------------------------------
   4. Field groups — vertical stack with label + control gap
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-el-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-20);
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Two-column row: Full name + Email side-by-side at ≥768px
      FF renders them as sequential .ff-el-group elements inside the fieldset.
      Target the 2nd and 3rd .ff-el-group (name=full_name, name=email).
      We wrap them with a CSS grid trick using the :has() selector where
      available; fallback: target by input[name] attribute within fieldset.
   -------------------------------------------------------------------------- */

/*
 * Approach: wrap the two groups in a pseudo-row via CSS grid on the fieldset.
 * FF fieldset is now display:flex flex-direction:column.
 * We use a named grid on fieldset and place the two groups side by side.
 *
 * Since we can't insert a DOM wrapper, we use CSS grid on the fieldset itself
 * and assign grid-column to the name/email groups.
 */
form.fluent_form_1 fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-40);
	/* reset flex from rule #1 — grid takes over */
}

/* Full-width elements: radio group, topic, message, consent, submit */
form.fluent_form_1 .ff-el-group.ff_list_inline,
form.fluent_form_1 .ff-el-group:has(select.ff-el-form-control),
form.fluent_form_1 .ff-el-group:has(textarea.ff-el-form-control),
form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox),
form.fluent_form_1 .ff_submit_btn_wrapper {
	grid-column: 1 / -1;
}

/*
 * Name + email naturally occupy col 1 and col 2 of the remaining row
 * because they are the only two .ff-el-group elements without a full-width
 * override above. No explicit grid-column needed.
 */

/* Mobile: collapse all to single column */
@media (max-width: 560px) {
	form.fluent_form_1 fieldset {
		grid-template-columns: 1fr;
	}

	form.fluent_form_1 .ff-el-group.ff_list_inline,
	form.fluent_form_1 .ff-el-group:has(select.ff-el-form-control),
	form.fluent_form_1 .ff-el-group:has(textarea.ff-el-form-control),
	form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox),
	form.fluent_form_1 .ff_submit_btn_wrapper {
		grid-column: 1 / 1;
	}
}

/* --------------------------------------------------------------------------
   6. "I am a…" role-card radio control
   WLS-46: replaced flat inline pills (visually ambiguous) with clearly-separated
   selectable cards that mirror the register page's .wl-role-card design language.
   Three cards in a row (equal-width), stacked below 480px.
   FF DOM: .ff-el-input--content > .ff-el-form-check × 3
             each .ff-el-form-check > label.ff-el-form-check-label
               > input[type=radio] + span (label text is INSIDE the label element)
   -------------------------------------------------------------------------- */

/* Row container — strip the old grouped-pill background; cards are now
   individually bordered so the wrapper is just a transparent flex row. */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-input--content {
	display: flex;
	gap: var(--spacing-30);
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* Each option wrapper stretches to fill equal width */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check {
	flex: 1;
}

/* Hide the native radio input visually — keep it in the a11y tree */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-input.ff-el-form-check-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

/*
 * Role card — unselected state.
 * Mirrors .wl-role-card (auth.css §12): bordered surface, cursor pointer,
 * accent transition. The label fills the full .ff-el-form-check cell.
 */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	padding: var(--spacing-30) var(--spacing-40);
	border: 1.5px solid var(--color-neutral-strong);
	border-radius: calc(var(--radius-md) * var(--radius-scale));
	background: var(--color-surface-2);
	color: var(--color-contrast-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--fw-medium);
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	transition: background var(--transition), border-color var(--transition),
	            color var(--transition), box-shadow var(--transition);
	gap: 0;
}

/* span inside label carries the visible text — no extra styling needed */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-label > span {
	pointer-events: none;
}

/*
 * Selected card state — accent border + tint, matching .wl-role-card--selected.
 * FF input is INSIDE the label, so :has() is the clean path for checked state.
 */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-label:has(.ff-el-form-check-radio:checked) {
	border-color: var(--color-accent-1);
	background: var(--color-accent-weak);
	color: var(--color-accent-1);
	font-weight: var(--fw-semibold);
	box-shadow: 0 0 0 1px var(--color-accent-border) inset;
}

/* Hover — unselected cards pick up a light accent tint (matches .wl-role-card hover) */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-label:not(:has(.ff-el-form-check-radio:checked)):hover {
	border-color: var(--color-accent-border);
	background: var(--color-accent-weak);
	color: var(--color-contrast);
}

/* Focus-visible ring — keyboard accessible */
form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-form-check-label:has(.ff-el-form-check-radio:focus-visible) {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Stack to single column below 480px (matches .wl-role-picker__options breakpoint) */
@media (max-width: 480px) {
	form.fluent_form_1 .ff-el-group.ff_list_inline .ff-el-input--content {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   7. Consent checkbox — matches .wl-check / .wl-check__box
   -------------------------------------------------------------------------- */

/*
 * WLS-12: The .ff-el-form-check-label is an inline-flex box. When any ancestor
 * carries text-align:center (either from FF base CSS or the global fieldset
 * centering rule), the inline-level label drifts to the centre of its cell.
 * Fix: force the .ff-el-input--content wrapper (direct parent of the label) to
 * block layout and explicitly left-align — overrides any inherited text-align.
 */
form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox) .ff-el-input--content {
	display: block;
	text-align: left;
	/* WLS-12 margin fix: FF applies a calculated margin-left (~278px) as its
	   inline-label column offset — same specificity as our rule, but loaded after
	   us. !important is required to win the cascade without adding an extra class. */
	margin-left: 0 !important;
	margin-inline-start: 0 !important; /* logical-property counterpart for safety */
}

form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox) .ff-el-form-check-label {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--spacing-30);
	cursor: pointer;
	min-height: 2.75rem;
	font-size: var(--font-size-sm);
	color: var(--color-contrast-muted);
}

form.fluent_form_1 .ff-el-form-check-input.ff-el-form-check-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	margin-top: 0.15rem; /* optical alignment with first line of text */
	background: var(--color-surface-2);
	border: 1px solid var(--color-neutral-strong);
	border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.6);
	display: grid;
	place-content: center;
	transition: background var(--transition), border-color var(--transition);
	cursor: pointer;
}

form.fluent_form_1 .ff-el-form-check-input.ff-el-form-check-checkbox:checked {
	background: var(--color-accent-1);
	border-color: var(--color-accent-1);
}

/* Checkmark tick */
form.fluent_form_1 .ff-el-form-check-input.ff-el-form-check-checkbox:checked::after {
	content: "";
	display: block;
	width: 0.32rem;
	height: 0.62rem;
	margin-top: -2px;
	border: solid var(--color-accent-on);
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

form.fluent_form_1 .ff-el-form-check-input.ff-el-form-check-checkbox:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-color: var(--color-accent-1);
}

/* Privacy Policy link inside consent span */
form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox) a {
	color: var(--color-accent-1);
	text-decoration: none;
	font-weight: var(--fw-medium);
}

form.fluent_form_1 .ff-el-group:has(.ff-el-form-check-checkbox) a:hover {
	color: var(--color-accent-1-hover);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   8. Submit button — matches .wl-btn .wl-btn--primary .wl-btn--block
      FF may inject inline style on the button via button_style setting;
      use !important only on background/color to defeat any inline override.
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-btn-submit {
	display: flex !important;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-20);
	min-height: 2.75rem;
	padding: 0 var(--spacing-50);
	background: var(--color-accent-1) !important;
	color: var(--color-accent-on) !important;
	border: 1px solid transparent;
	border-radius: calc(var(--radius-md) * var(--radius-scale));
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-snug);
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition), border-color var(--transition),
	            color var(--transition), transform var(--transition),
	            box-shadow var(--transition);
	/* Reset FF btn defaults */
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

form.fluent_form_1 .ff-btn-submit:hover {
	background: var(--color-accent-1-hover) !important;
}

form.fluent_form_1 .ff-btn-submit:active {
	background: var(--color-accent-1-active) !important;
	transform: translateY(1px);
}

form.fluent_form_1 .ff-btn-submit:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-color: var(--color-accent-1);
}

form.fluent_form_1 .ff-btn-submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* --------------------------------------------------------------------------
   9. Validation error states — mirrors .wl-field--error
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-el-group.has_error .ff-el-form-control {
	border-color: var(--color-error-fg);
}

form.fluent_form_1 .ff-el-group.has_error .ff-el-input--label label {
	color: var(--color-error-fg);
}

form.fluent_form_1 .error.text-danger {
	display: flex;
	align-items: center;
	gap: var(--spacing-20);
	font-size: var(--font-size-sm);
	color: var(--color-error-fg);
	margin-top: var(--spacing-10);
}

/* --------------------------------------------------------------------------
   10. FF loading / success overlay — keep functional, light theming
   -------------------------------------------------------------------------- */
form.fluent_form_1 .ff-message-success {
	background: var(--color-success-bg);
	border: 1px solid var(--color-accent-border);
	border-radius: calc(var(--radius-sm) * var(--radius-scale));
	color: var(--color-success-fg);
	padding: var(--spacing-40);
	font-size: var(--font-size-base);
}