/* =========================================================
   Focus on Relationships — Formidable form skin.
   Maps the prototype's enrollment-form design onto Formidable's own
   rendered markup (.frm_* classes). Scoped to `.frm_forms` — the
   wrapper Formidable itself puts around every form it renders — NOT
   to a page-specific ancestor. That makes this skin apply wherever
   the form is embedded (any page/post/template), not just the one
   landing-page section it originally shipped inside of (`#enroll`,
   see CHANGELOG 1.3.8). Also enqueued globally in functions.php, so
   there's no per-template gate on either the stylesheet load or the
   selectors themselves.
   Selectors are field-TYPE based (input[type=…], .frm_checkbox,
   .frm_radio, generic .frm_form_field, etc.), never keyed to a
   specific field ID, so newly added fields of these same types
   (e.g. the child-info text/date/textarea/checkbox fields) are
   styled automatically without touching this file again.
   Reuses the design tokens defined in styles.css :root.
   ========================================================= */

.frm_forms .frm-show-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

/* ---- Canonical form typography (belt-and-braces) ----
   Form controls (input/select/textarea/button) do NOT inherit
   font-family from their wrapper by default in any browser, and
   Formidable renders several field types through different markup
   variants — a checkbox-GROUP's individual options render as
   `.frm_opt_container > .frm_checkbox > label`, while a standalone
   single checkbox field (e.g. "on-site childcare") renders through
   the same `.frm_opt_container > .frm_checkbox > label` structure
   but is easy to miss if selectors are ever narrowed to only one
   variant. Setting the family here — once, on `.frm_forms` itself
   AND explicitly on every control element — means nothing can
   silently fall through to Formidable's own default stylesheet or
   the browser's form-control default font, no matter which wrapper
   variant a given field type happens to render with.
   var(--f-body) is the single canonical source: the same family the
   rest of the site's body copy uses (see styles.css :root). */
.frm_forms {
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--c-ink);
}
.frm_forms :is(input, select, textarea, button) {
	font-family: var(--f-body);
}
.frm_forms ::placeholder {
	font-family: var(--f-body);
	color: var(--c-mute);
	opacity: 1;
}

/* ---- Section headings (Formidable "divider" fields) ---- */
.frm_forms .frm_section_heading {
	margin: 0;
	padding: 0;
	border: 0;
}
.frm_forms .frm_section_heading h3 {
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-brand);
	margin: var(--s-3) 0 var(--s-1);
	padding-bottom: var(--s-1);
	border-bottom: 1px solid var(--c-line);
}
.frm_forms .frm_section_heading:first-child h3 { margin-top: 0; }

/* ---- Field wrappers + labels ---- */
.frm_forms .frm_form_field { margin: 0 0 var(--s-2); }
.frm_forms .frm_primary_label {
	display: block;
	font-family: var(--f-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 6px;
	padding: 0;
}
.frm_forms .frm_required { color: var(--c-brand); }
.frm_forms .frm_description {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--c-mute);
	margin-top: 6px;
}

/* ---- Text inputs / date picker / select / textarea ----
   Covers every current + planned single-value field type: text,
   email, tel, number, native + Formidable-JS date pickers, dropdowns,
   and paragraph/textarea fields. */
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms input[type="number"],
.frm_forms input[type="date"],
.frm_forms select,
.frm_forms textarea {
	font-family: var(--f-body);
	font-size: 18px;
	letter-spacing: normal;
	text-transform: none;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	border-radius: 0;
	background: #fff;
	color: var(--c-ink);
	box-shadow: none;
	transition: border-color 220ms var(--ease),
		box-shadow 260ms var(--ease),
		background-color 220ms var(--ease);
}
.frm_forms input[type="text"]:focus,
.frm_forms input[type="email"]:focus,
.frm_forms input[type="tel"]:focus,
.frm_forms input[type="number"]:focus,
.frm_forms input[type="date"]:focus,
.frm_forms select:focus,
.frm_forms textarea:focus {
	outline: 2px solid var(--c-brand);
	outline-offset: 0;
	border-color: var(--c-brand);
	box-shadow: inset 0 -3px 0 0 var(--c-brand-deep),
		0 0 0 4px rgba(23, 111, 233, 0.12);
	background-color: #fafcff;
}

/* ---- Checkboxes / radios ----
   Covers both markup variants Formidable renders here: a checkbox-
   GROUP's individual options (`.frm_opt_container > .frm_checkbox >
   label`, field 36 "I'm interested in") and a standalone single
   checkbox field (same wrapper structure, field 21 "on-site
   childcare"). `.frm_opt_container label` is added as a belt-and-
   braces catch-all in case a future field/Formidable style variant
   renders an option label directly under `.frm_opt_container`
   without the `.frm_checkbox`/`.frm_radio` wrapper. */
.frm_forms .frm_checkbox,
.frm_forms .frm_radio { margin: 0 0 4px; }
.frm_forms .frm_checkbox label,
.frm_forms .frm_radio label,
.frm_forms .frm_opt_container label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-ink);
	margin: 0;
	min-height: 36px;
}
.frm_forms .frm_checkbox input[type="checkbox"],
.frm_forms .frm_radio input[type="radio"] {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin: 0;
}

/* ---- Combined Name field's a11y fieldset wrapper (v1.4.0 fix) ----
   Formidable renders every combined "Name" field (first/middle/last —
   here, the repeater's field 44 "Child") inside a real <fieldset>, for
   accessibility grouping: <fieldset aria-labelledby="…_label"> wrapping
   `.frm_combo_inputs_container`. Confirmed directly in form 5's live
   rendered markup. Formidable's own stylesheet only zeroes out a
   fieldset's border in two cases — a fieldset that's a DIRECT CHILD of
   `.frm_form_fields` (the one page-level fieldset), or a fieldset nested
   inside ANOTHER fieldset (`fieldset fieldset`) — and this field-level
   fieldset is neither: it's several plain <div>s deep, not a direct
   child, and it isn't nested inside a second fieldset. So it fell all
   the way through to the BROWSER'S OWN default fieldset styling (a
   visible grooved border box), which is exactly what was reading as "a
   box around just the child's first and last name" — nothing in this
   theme's own CSS was drawing that box on purpose. Reset generically
   (any <fieldset> Formidable renders anywhere in this form), so the
   only visible box from here on is the repeater-row card below. */
.frm_forms fieldset {
	min-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

/* ---- Repeater rows (Formidable Pro repeater fields, e.g. "Children") ----
   Formidable wraps each repeater ROW in its own numbered container —
   confirmed in form 5's live markup: `<div id="frm_section_42-0"
   class="frm_repeat_sec frm_repeat_42 frm_first_repeat
   frm_grid_container" data-column-count="4">` for field 42's "Children"
   repeater, one such div per row the user adds/removes. Field 44 (Name),
   45 (DOB), and 46 (Allergies) all render as siblings DIRECTLY inside
   this same `.frm_repeat_sec` — so styling the row container itself,
   not the narrower Name-field fieldset above, is what wraps all 4
   fields as one card. Formidable's own default here is just a thin
   bottom-border row SEPARATOR (no background, no full box) — this
   replaces that with an actual bordered/padded card matching this
   form's own field-grouping language (`.frm_button_submit`'s square
   corners, `.frm_message`'s border+padding treatment) rather than
   Formidable's blue-accented defaults. Field-type-based, not keyed to
   field ID 42 specifically, so any future repeater field on this form
   picks up the same card treatment automatically. */
.frm_forms .frm_repeat_sec {
	border: 1px solid var(--c-line);
	border-radius: 0;
	background: var(--c-paper);
	padding: var(--s-3);
	margin: 0 0 var(--s-2);
}
.frm_forms .frm_repeat_sec:last-child {
	/* Formidable's own :last-child rule (equal specificity, loads
	   earlier) zeroes border-bottom/padding-bottom on the last row so
	   its own thin separator doesn't double up against the "Add
	   another" button below it. That's the wrong behavior once every
	   row is a full card — the LAST row still needs its full border +
	   padding, same as every other row. Re-declared here at slightly
	   higher specificity (extra `:last-child`) so it always wins
	   regardless of stylesheet load order. */
	border: 1px solid var(--c-line);
	padding: var(--s-3);
	margin-bottom: var(--s-2);
}

/* ---- Repeater add/remove-row buttons ("Add Another Child" / "Remove") ----
   Formidable's own `.frm_button` default is a solid blue
   (`--submit-bg-color`, #4199FD) pill in Formidable's own font — visibly
   off-brand next to this form's actual submit button, and Formidable
   ships it with no explicit min-height/hover affordance beyond its
   built-in padding, so it read as a bare, easy-to-miss default rather
   than a clearly-clickable control. Restyled to the same
   mono/uppercase/letter-spaced button language as `.frm_button_submit`
   (see above), but as a lighter-weight pairing so neither competes with
   the real submit CTA: "Add" is an outlined brand-blue button, "Remove"
   is a quieter neutral button that turns this form's existing error-red
   (`#b00020`, already used by `.frm_error`/`.frm_blank_field` above) on
   hover, signaling a destructive action without shouting by default. */
.frm_forms .frm_repeat_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: var(--s-1) 0 0;
}
.frm_forms .frm_repeat_buttons .frm_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 0;
	line-height: 1;
	cursor: pointer;
	transition: background var(--d-sm) var(--ease),
		color var(--d-sm) var(--ease),
		border-color var(--d-sm) var(--ease);
}
.frm_forms .frm_repeat_buttons .frm_button svg.frm-svg-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.frm_forms .frm_repeat_buttons .frm_add_form_row {
	border: 1px solid var(--c-brand);
	background: #fff;
	color: var(--c-brand);
}
.frm_forms .frm_repeat_buttons .frm_add_form_row:hover {
	background: var(--c-brand);
	color: #fff;
}
.frm_forms .frm_repeat_buttons .frm_remove_form_row {
	border: 1px solid var(--c-line);
	background: transparent;
	color: var(--c-mute);
}
.frm_forms .frm_repeat_buttons .frm_remove_form_row:hover {
	border-color: #b00020;
	color: #b00020;
}

/* ---- Submit button (matches .btn--primary.btn--xl) ---- */
.frm_forms .frm_submit { margin: 0; }
.frm_forms .frm_button_submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-mono);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 22px 32px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--c-brand);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
	transition: background var(--d-sm) var(--ease),
		transform 140ms var(--ease),
		box-shadow 200ms var(--ease);
}
.frm_forms .frm_button_submit:hover { background: var(--c-brand-deep); }
.frm_forms .frm_button_submit:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ---- Success message (matches .enroll-form__success) ---- */
.frm_forms .frm_message {
	border: 1px solid var(--c-brand);
	background: var(--c-brand-soft);
	padding: var(--s-4);
	color: var(--c-ink);
}
.frm_forms .frm_message p { margin: 0; font-size: 18px; }

/* ---- Validation errors ---- */
.frm_forms .frm_error {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #b00020;
	margin-top: 6px;
}
.frm_forms .frm_blank_field input,
.frm_forms .frm_blank_field select,
.frm_forms .frm_blank_field textarea { border-color: #b00020; }

@media (max-width: 600px) {
	.frm_forms .frm_button_submit {
		width: 100%;
		justify-content: center;
		min-height: 56px;
	}
}

/* ---- Scale fields (.for-scale) — v1.4.2, page-survey.php ----
   Component spec: Juliet Polcsa (UX). Formidable's "Scale" field type
   VERIFIED LIVE 2026-08-11 (v1.4.3 fix — v1.4.2 got this wrong): a Scale
   field does NOT reuse the .frm_radio wrapper that plain radio groups use.
   Its real markup, read off marriage.vanguardmfa.org/survey, is:
       .frm_opt_container > div.frm_scale > label > input[type="radio"]
   with the number as a bare text node inside the label. v1.4.2 assumed
   .frm_radio (from Formidable's docs, never checked against output), so
   the flex-child rule below never matched: every cell collapsed to ~5px,
   the container's overflow:hidden clipped the numbers away, and the field
   rendered as an empty 38px bar. Do not "simplify" these selectors back
   to .frm_radio — that is the bug. Scoped to .for-scale (a
   CSS Layout Class set per-field in Formidable's Advanced tab — see
   formidable-import/for_survey.xml) so this never touches the plain
   radio fields elsewhere on this form (survey_skill) or on any other
   form on the site. Renders as ONE contiguous bordered strip (no gaps
   between numbers — every pixel belongs to exactly one target, so a
   slightly-off tap still lands on an adjacent number instead of a dead
   zone), each cell tall (56px) rather than wide, since width is the
   scarce resource on a 390px phone and height is not.

   THE ONE REAL DESIGN DECISION (flagged for Kate): the spec doc's Card ①
   table asks for the Before/Today pair "side by side in one row," and its
   own verification step 4 says to confirm that pairing at 390px. The
   arithmetic doesn't hold at that width without violating the harder
   constraint (no cramped targets, no accidental double-taps): at 390px,
   with the page's own gutter (24px/side, assets/css/styles.css
   :root/media queries) and this card's own padding (16px/side —
   .survey-page__card, assets/css/styles.css, chosen specifically to
   match this arithmetic), usable width is ~310px. Two 1-10 strips side by
   side in that space land at ~15-17px per number cell — below WCAG 2.2's
   24x24px minimum target size (SC 2.5.8). RESOLUTION: stack Before/Today
   vertically below the page's own existing 700px breakpoint (the same
   one .workshop-page/.survey-page already use for desktop-to-mobile
   padding — reused here, not a new breakpoint). Each strip then gets the
   full ~310px, landing at ~30px per cell. Above 700px, pair them side by
   side per the spec doc's literal instruction (Formidable's own
   frm_half/frm_first float layout already does this — no CSS needed for
   the paired case, only to UNDO it below 700px). This is a deliberate
   reading of "side by side" as "a matched pair," not a literal single CSS
   row at 390px, which the numbers rule out — flagged explicitly per the
   build brief. */
.frm_forms .for-scale .frm_opt_container {
  display: flex;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 0; /* this theme has no rounded corners anywhere */
  overflow: hidden;
}
.frm_forms .for-scale .frm_scale {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--c-line);
}
.frm_forms .for-scale .frm_scale:last-child { border-right: 0; }

.frm_forms .for-scale .frm_scale label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  height: 100%;
  margin: 0;
  padding: 0 2px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-sm) var(--ease), color var(--d-sm) var(--ease);
}

/* v1.4.3: scoped to `.frm_scale label >` rather than any descendant input.
   Two reasons, both learned the hard way on the live site (see the block
   comment above): (1) it must out-specify formidableforms.css, which was
   winning on width/height and leaving the input at its native 16px even
   though this rule's position/clip applied; (2) if Formidable ever changes
   the option wrapper again, this rule stops matching AT THE SAME TIME as
   the label rules that draw the replacement cell — so the field degrades
   to plain visible radios instead of vanishing entirely, which is exactly
   what v1.4.2 got wrong. Never widen this selector. */
.frm_forms .for-scale .frm_scale label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .frm_forms .for-scale .frm_scale label:hover {
    background: var(--c-brand-soft);
  }
}

.frm_forms .for-scale .frm_scale label:active {
  background: var(--c-brand-soft);
}

.frm_forms .for-scale .frm_scale label:has(input:checked) {
  background: var(--c-brand);
  color: #fff;
}

.frm_forms .for-scale .frm_scale label:has(input:focus-visible) {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
  box-shadow: inset 0 -3px 0 0 var(--c-brand-deep);
  z-index: 1;
}

@media (max-width: 700px) {
  .frm_forms .for-scale.frm_half,
  .frm_forms .for-scale.frm_first {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 701px) {
  .frm_forms .for-scale .frm_scale label { font-size: 18px; }
}

.frm_forms .for-scale.frm_blank_field .frm_opt_container {
  border-color: #b00020;
}