/* ==========================================================================
   FluentForm shared form styles (global — shared with Contact page)
   + Talk to Engineer page-specific overrides
   ========================================================================== */

/* ---------- Shared: Inputs, textarea, select ---------- */
.ff-el-input input[type="text"],
.ff-el-input input[type="email"],
.ff-el-input input[type="tel"],
.ff-el-input input[type="number"],
.ff-el-input input[type="url"],
body.page-id-160 textarea.ff-el-form-control,
.ff-el-input select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem !important;
	font-family: inherit;
	color: #1f2937;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #fff;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	line-height: 1.6 !important;
}

.ff-el-input input:focus,
body.page-id-160 textarea.ff-el-form-control:focus,
.ff-el-input select:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Textarea: comfortable reading height + line-height (overrides FluentForm
   default, which only uses the backend `rows` count and crams the box).
   Higher specificity via body.page-id-160 + !important beats the plugin rule. */
body.page-id-160 textarea.ff-el-form-control {
	width: 100%;
	min-height: 150px;
	padding: 0.875rem 1rem !important;
	font-family: inherit !important; /* lock to page font, beat plugin system stack */
	font-size: 1rem !important;
	line-height: 1.7 !important;
	color: #1f2937;
	resize: vertical !important;
	box-sizing: border-box;
}

/* ---------- Shared: Field labels ---------- */
.ff-el-input label,
.ff-el-input .ff-el-input-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.375rem;
}

/* ---------- Shared: Select dropdown custom arrow ---------- */
.ff-el-input select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

/* ---------- Shared: Checkbox & Radio ---------- */
.ff-el-form-check {
	display: block;
	margin-bottom: 0.5rem;
}

.ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: #374151;
	cursor: pointer;
	line-height: 1.4;
	margin-bottom: 0;
}

.ff-el-form-check-input[type="checkbox"],
.ff-el-form-check-input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	opacity: 1 !important;
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	border: 1.5px solid #cbd5e1;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ff-el-form-check-input[type="checkbox"] {
	border-radius: 6px;
}

.ff-el-form-check-input[type="radio"] {
	border-radius: 50%;
}

.ff-el-form-check-input[type="checkbox"]:hover,
.ff-el-form-check-input[type="radio"]:hover {
	border-color: #2563eb;
}

.ff-el-form-check-input[type="checkbox"]:focus,
.ff-el-form-check-input[type="radio"]:focus,
.ff-el-form-check-input[type="checkbox"]:focus-visible,
.ff-el-form-check-input[type="radio"]:focus-visible,
.fluentform .ff-el-form-check-input[type="checkbox"]:focus,
.fluentform .ff-el-form-check-input[type="radio"]:focus,
.fluentform .ff-el-form-check-input[type="checkbox"]:focus-visible,
.fluentform .ff-el-form-check-input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.ff-el-form-check-input[type="checkbox"]:checked {
	background: #2563eb;
	border-color: #2563eb;
}

.ff-el-form-check-input[type="radio"]:checked {
	border-color: #2563eb;
	background: #fff;
}

/* Checkbox tick */
.ff-el-form-check-input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Radio dot */
.ff-el-form-check-input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2563eb;
	transform: translate(-50%, -50%);
}

/* ---------- Shared: Submit button ----------
   FluentForm outputs an inline <style> + fluentform-public-default.css that
   paints .ff-btn-submit with var(--fluentform-primary) and a 1px border using
   var(--fluentform-border-color) (appears black). We override directly on the
   real button classes with !important so the styling actually wins. */
.ff-btn.ff-btn-submit,
.fluentform button[type="submit"].ff-btn-submit,
.ff-el-group button[type="submit"].ff-btn-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 320px !important;
	align-self: flex-start !important;
	background: #111827 !important;
	border: 1px solid transparent !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	border-radius: 0.75rem !important;
	padding: 1rem 2.5rem !important;
	cursor: pointer !important;
	transition: background 0.2s, border-color 0.2s !important;
}

.ff-btn.ff-btn-submit:hover,
.fluentform button[type="submit"].ff-btn-submit:hover,
.ff-el-group button[type="submit"].ff-btn-submit:hover {
	background: #000000 !important;
	border-color: transparent !important;
	color: #ffffff !important;
}

/* ---------- Shared: Form title (if enabled) ---------- */
.fluentform h2,
.fluentform .ff-form-title {
	font-size: 1.25rem !important;
	line-height: 1.3;
	font-weight: 700;
	color: #111827;
	margin: 0 0 0.75rem !important;
}

/* ==========================================================================
   Talk to Engineer — page-specific overrides
   ========================================================================== */

/* ---------- Subtitle below h1 ---------- */
body.page-id-160 .entry-content > .wp-block-group:first-child h1 + .wp-block-spacer + p,
body.page-id-160 .entry-content > h1 + p {
	font-size: 1.125rem;
	color: #6b7280;
	line-height: 1.7;
	max-width: 48rem;
	margin: -0.5rem 0 2rem;
}

/* ---------- Form container: keep at 840px (narrower than the 1440px cards) ---------- */
body.page-id-160 .fluentform fieldset {
	min-inline-size: 840px !important;
	max-width: 840px !important;
}

body.page-id-160 .fluentform,
body.page-id-160 .fluentform_wrapper_2 {
	max-width: 840px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	body.page-id-160 .fluentform fieldset {
		min-inline-size: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   Visual enhancements (matching Contact page upgrades)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Two-tone background: top third light ice blue, bottom two-thirds white.
   We give <html> a solid bg via :has() so the body background is NOT
   propagated to the canvas (which would pin the split to the viewport and
   re-show blue on every scroll). With propagation stopped, the gradient
   percentage resolves against the body's full content height, giving a true
   "top 1/3 of the page" split. Tunable: change 33% to move the seam.
   -------------------------------------------------------------------------- */
html:has(body.page-id-160) {
	background: #ffffff;
}
body.page-id-160 {
	background-color: #F4F7F9; /* fallback (no :has support) */
	background-image: linear-gradient(
		to bottom,
		#F4F7F9 0,
		#F4F7F9 33%,
		#ffffff 33%,
		#ffffff 100%
	);
}

/* Form wrapper: white card on the gray page background. */
body.page-id-160 .fluentform {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 2rem 2rem 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
}

/* Enhanced inputs: more padding, clearer border, premium focus glow. */
body.page-id-160 .ff-el-input input[type="text"],
body.page-id-160 .ff-el-input input[type="email"],
body.page-id-160 .ff-el-input input[type="tel"],
body.page-id-160 .ff-el-input input[type="number"],
body.page-id-160 .ff-el-input input[type="url"],
body.page-id-160 textarea.ff-el-form-control,
body.page-id-160 .ff-el-input select {
	padding: 0.875rem 1rem !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 0.5rem !important;   /* unified 8px radius */
	background: #fff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.page-id-160 .ff-el-input input[type="text"]:focus,
body.page-id-160 .ff-el-input input[type="email"]:focus,
body.page-id-160 .ff-el-input input[type="tel"]:focus,
body.page-id-160 .ff-el-input input[type="number"]:focus,
body.page-id-160 .ff-el-input input[type="url"]:focus,
body.page-id-160 textarea.ff-el-form-control:focus,
body.page-id-160 .ff-el-input select:focus {
	border-color: #2563eb !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
	outline: none !important;
}

/* ==========================================================================
   Choice-field redesign — card grid (checkbox) + step selector (radio)
   Scope is by a custom CSS class placed on each FluentForm field
   (Advanced → CSS Class):  .rs-tech-challenge  /  .rs-project-stage
   This keeps the styling off any unrelated checkbox (e.g. a consent box).
   FluentForm markup per option:
     .ff-el-form-check  >  label.ff-el-form-check-label (input + span)
   The native input is visually hidden but stays focusable; the label card
   carries the selected / focus state via :has(input:checked/:focus-visible).
   ========================================================================== */

/* Visually hide the native checkbox/radio — the card is the control surface. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-input,
body.page-id-160 .rs-project-stage .ff-el-form-check-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	margin: 0 !important;
}

/* Reset the option cell; the label becomes the clickable card. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check,
body.page-id-160 .rs-project-stage .ff-el-form-check {
	margin-bottom: 0 !important;
}

/* Shared card surface. */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label,
body.page-id-160 .rs-project-stage .ff-el-form-check-label {
	display: flex !important;
	align-items: center;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.875rem;
	border: 1.5px solid #e2e8f0;        /* unified 1.5px border */
	border-radius: 0.5rem;               /* unified 8px radius */
	background: #ffffff;
	color: #374151;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:hover,
body.page-id-160 .rs-project-stage .ff-el-form-check-label:hover {
	border-color: #cbd5e1;
	background: #f9fafb;
}
/* Keyboard focus ring (accessibility). */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible),
body.page-id-160 .rs-project-stage .ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* --------------------------------------------------------------------------
   Primary Technical Challenge — 3-column selectable card grid (multi-select)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-tech-challenge .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625rem;
	padding-top: 0.35rem;   /* clearance for the selected checkmark badge */
}
@media (max-width: 680px) {
	body.page-id-160 .rs-tech-challenge .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 460px) {
	body.page-id-160 .rs-tech-challenge .ff-el-input--content {
		grid-template-columns: 1fr;
	}
}

/* Selected card: brand border + tint + checkmark badge (top-right). */
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked) {
	border-color: #2563eb;
	background: #eff6ff;
	color: #1d4ed8;
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label::after {
	content: "";
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background-color: #2563eb;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8rem;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity .18s ease, transform .18s ease;
}
body.page-id-160 .rs-tech-challenge .ff-el-form-check-label:has(.ff-el-form-check-input[type="checkbox"]:checked)::after {
	opacity: 1;
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   Current Project Stage — horizontal step / pill selector (single-select)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-project-stage .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
}
@media (max-width: 600px) {
	body.page-id-160 .rs-project-stage .ff-el-input--content {
		grid-template-columns: repeat(2, 1fr);
	}
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label {
	justify-content: center;
	text-align: center;
	font-weight: 600;
	padding: 0.875rem 0.5rem;
	background: #f1f5f9;     /* light, unselected */
	border-color: #e2e8f0;
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label:hover {
	background: #e9eef4;
	border-color: #cbd5e1;
}
body.page-id-160 .rs-project-stage .ff-el-form-check-label:has(.ff-el-form-check-input[type="radio"]:checked) {
	background: #2563eb;
	border-color: #2563eb;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* --------------------------------------------------------------------------
   Section micro-title + subtext (FluentForm field label & help message)
   -------------------------------------------------------------------------- */
body.page-id-160 .rs-tech-challenge .ff-el-input--label,
body.page-id-160 .rs-project-stage .ff-el-input--label {
	margin-bottom: 0.5rem;
}
body.page-id-160 .rs-tech-challenge .ff-el-help-message,
body.page-id-160 .rs-project-stage .ff-el-help-message {
	font-size: 0.8125rem;
	color: #9ca3af;
	line-height: 1.45;
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
}

/* ==========================================================================
   Melotto-style hero polish (centered hero + brand mark + accents)
   Mirrors the reference contact design: a centered headline/subtitle, a
   subtle red/rose brand asterisk, and asymmetric line-art accents flanking
   the hero title. The page background (#F8FAFC) and the white form card
   already match the reference, so only the hero treatment is added here.
   ========================================================================== */

/* Constrain + center the hero block (Kadence/group wrapper or bare h1). */
body.page-id-160 .entry-content {
	position: relative;
	overflow-x: hidden; /* keep absolutely-positioned accents from causing H-scroll */
}
body.page-id-160 .entry-content > .wp-block-group:first-of-type {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
body.page-id-160 .entry-content > h1,
body.page-id-160 .rs-tt-subtitle,
body.page-id-160 .entry-content > p {
	text-align: center;
}
body.page-id-160 .rs-tt-subtitle {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}
/* Hero stacking context. */
body.page-id-160 .entry-content > .wp-block-group:first-of-type,
body.page-id-160 .entry-content > h1 {
	position: relative;
	z-index: 1;
}

/* Center the form card (it already has the white card + blue focus ring). */
body.page-id-160 .fluentform,
body.page-id-160 .fluentform_wrapper_2 {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Redesign additions: input polish, brand-blue submit, bottom feature cards
   Clean centered layout, no side decorations. Page bg #F4F7F9, white form
   card, three light blue-gray feature cards below the form.
   ========================================================================== */

/* Placeholder text: light gray. */
body.page-id-160 .ff-el-input input::placeholder,
body.page-id-160 textarea.ff-el-form-control::placeholder,
body.page-id-160 .ff-el-input select::placeholder {
	color: #9ca3af;
	opacity: 1;
}

/* Remove any input icons FluentForm may render inside fields. */
body.page-id-160 .fluentform .ff-el-input-icon,
body.page-id-160 .fluentform .ff-input-icon {
	display: none !important;
}

/* Submit button: brand blue with hover darken (scoped to this page so the
   Contact page's dark button is untouched). */
body.page-id-160 .ff-btn.ff-btn-submit,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit {
	background: #1D4ED8 !important;
}
body.page-id-160 .ff-btn.ff-btn-submit:hover,
body.page-id-160 .fluentform button[type="submit"].ff-btn-submit:hover {
	background: #1E40AF !important;
}

/* Bottom feature cards (injected via functions.php, below the form).
   Container is wider (1440px) than the 840px form card for a layered look,
   and keeps a generous 100px gap above the footer. */
body.page-id-160 .rs-tt-features {
	max-width: 1440px;
	margin: 3rem auto 100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
body.page-id-160 .rs-tt-feature-card {
	background: #E9EFF3; /* light blue-gray, slightly deeper than page bg */
	border-radius: 1rem;
	padding: 2rem 1.5rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);
	transition: box-shadow .25s ease, transform .25s ease;
}
body.page-id-160 .rs-tt-feature-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .04);
	transform: translateY(-2px);
}
body.page-id-160 .rs-tt-feature-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: #2563EB; /* brand blue */
	display: flex;
	align-items: center;
	justify-content: center;
}
body.page-id-160 .rs-tt-feature-icon svg {
	width: 28px;
	height: 28px;
	color: #fff;
}
body.page-id-160 .rs-tt-feature-card h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 .5rem;
}
body.page-id-160 .rs-tt-feature-card p {
	font-size: .9375rem;
	color: #4b5563;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 700px) {
	body.page-id-160 .rs-tt-features {
		grid-template-columns: 1fr;
	}
}