/* ============================================================================
   Formidable Forms — the WHOLE presentation, including layout.
   Ported from design-export/formidable/forms.css.

   The site runs Formidable with "Formidable Styling" UNTICKED, so neither
   formidableforms.css nor the with_frm_style wrapper does anything — and
   functions.php dequeues the plugin sheet as a belt-and-braces. So this file is
   not a skin over Formidable's CSS; it is all of it, layout included.

   Formidable's width classes (frm_half, frm_third, frm_two_thirds, frm_fourth,
   frm_three_fourths, frm_sixth) are bare class names with no widths once the
   plugin sheet is gone — they are implemented here on a flex container. Miss it
   and every two-column form silently renders as one column.

   Class names are Formidable's own and are NOT ours to rename. No literal
   colour: every value is a token. Sizing follows the site's "Big Text" template
   (21px field text, 52px min control height, 24px checkboxes/radios). */

/* ------------------------------------------------------------- container --- */
.frm_forms { max-width: var(--content-max-narrow); }
.frm_form_fields > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.frm_form_fields legend.frm_screen_reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frm_forms > .frm_description { font-size: 1.3rem; line-height: 1.6; color: var(--muted); max-width: var(--measure); margin-bottom: 1.6rem; }

/* ------------------------------------------------------------------ grid ---
   Formidable emits the width class on the FIELD wrapper. Flex basis (not grid
   columns), so a wrapping row of differently-sized fields collapses cleanly and
   a conditionally-hidden field leaves no hole. */
.frm_fields_container { display: flex; flex-wrap: wrap; gap: 1.5rem 1.3rem; }
.frm_form_field { flex: 1 1 100%; min-width: 0; margin: 0; }
.frm_form_field.frm_half { flex: 1 1 calc(50% - .65rem); }
.frm_form_field.frm_third { flex: 1 1 calc(33.333% - .87rem); }
.frm_form_field.frm_two_thirds { flex: 1 1 calc(66.666% - .44rem); }
.frm_form_field.frm_fourth { flex: 1 1 calc(25% - .98rem); }
.frm_form_field.frm_three_fourths { flex: 1 1 calc(75% - .33rem); }
.frm_form_field.frm_sixth { flex: 1 1 calc(16.666% - 1.09rem); }
.frm_form_field.frm_full { flex: 1 1 100%; }
/* frm_first / frm_last only mattered for Formidable's float clearing; kept as
   no-ops so markup carrying them is not broken by their absence. */
.frm_form_field.frm_first, .frm_form_field.frm_last { }

@media (max-width: 32em) {
  .frm_form_field.frm_half, .frm_form_field.frm_third, .frm_form_field.frm_two_thirds,
  .frm_form_field.frm_fourth, .frm_form_field.frm_three_fourths,
  .frm_form_field.frm_sixth { flex: 1 1 100%; }
}

/* ----------------------------------------------------------------- labels --- */
.frm_primary_label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.25; color: var(--text-heading); margin-bottom: .45rem; }
/* A form dropped straight onto a coloured/dark section ground (no card/accent
   panel) had navy --text-heading labels — e.g. navy on ucdon's teal bg-blue.
   Flip labels + help text to white on those grounds. The card/accent panel rules
   in contact.css are more specific (two classes + descendant) so they still win
   and keep their own label colour. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.frm_primary_label, .frm_description) {
  color: var(--white);
}
.frm_form_field.frm_inline_container { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.frm_form_field.frm_inline_container .frm_primary_label { margin-bottom: 0; flex: 0 0 auto; }
.frm_form_field.frm_none_container > .frm_primary_label,
.frm_form_field .frm_primary_label.frm_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frm_none_container > .frm_primary_label { display: none; }

/* Required marker — the brand's emphasis colour, not a literal red. */
.frm_required { color: var(--em-color); font-weight: 800; margin-left: .15rem; }

/* ------------------------------------------------- descriptions and help --- */
.frm_description { font-size: var(--fs-min); line-height: 1.5; color: var(--muted); margin-top: .4rem; }
.frm_primary_label + .frm_description { margin-top: 0; margin-bottom: .5rem; }

/* ----------------------------------------------------------------- inputs --- */
.frm_form_field input[type="text"],
.frm_form_field input[type="email"],
.frm_form_field input[type="url"],
.frm_form_field input[type="tel"],
.frm_form_field input[type="number"],
.frm_form_field input[type="password"],
.frm_form_field input[type="date"],
.frm_form_field input[type="datetime-local"],
.frm_form_field input[type="month"],
.frm_form_field input[type="week"],
.frm_form_field input[type="time"],
.frm_form_field input[type="search"],
.frm_form_field select,
.frm_form_field textarea {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: 1.3125rem; line-height: 1.4;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--box-border); border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.frm_form_field textarea { min-height: 150px; resize: vertical; }
.frm_form_field input::placeholder,
.frm_form_field textarea::placeholder { color: var(--neutral-500); opacity: 1; }
.frm_form_field input:hover,
.frm_form_field select:hover,
.frm_form_field textarea:hover { border-color: var(--neutral-400); }
.frm_form_field input:focus,
.frm_form_field select:focus,
.frm_form_field textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.frm_form_field input:disabled,
.frm_form_field select:disabled,
.frm_form_field textarea:disabled { background: var(--light); color: var(--muted); cursor: not-allowed; }

/* Select arrow, redrawn with gradients (no asset to lose) once appearance is off. */
.frm_form_field select {
  padding-right: 2.8rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-heading) 50%),
    linear-gradient(135deg, var(--text-heading) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.frm_form_field select[multiple] { background-image: none; padding-right: 1rem; min-height: 150px; }

/* ------------------------------------------------- checkboxes and radios --- */
.frm_opt_container { display: grid; gap: .7rem; }
.frm_opt_container.frm_inline_opts,
.frm_opt_container.horizontal_radio { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.frm_checkbox label,
.frm_radio label {
  display: flex; align-items: flex-start; gap: .75rem;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-min);
  line-height: 1.5; color: var(--ink); cursor: pointer;
  min-height: 30px; padding: .35rem 0; max-width: var(--measure);
}
.frm_checkbox label:hover,
.frm_radio label:hover { color: var(--text-heading); }
.frm_form_field input[type="checkbox"],
.frm_form_field input[type="radio"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.frm_form_field.frm_single_checkbox .frm_opt_container label { padding-block: .5rem; }
.frm_other_input { margin-top: .5rem; }

/* ------------------------------------------------------------ file upload --- */
.frm_form_field input[type="file"] {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: var(--fs-min);
  color: var(--muted); background: var(--white);
  border: 1px dashed var(--box-border); border-radius: var(--radius-sm); padding: 1rem; cursor: pointer;
}
.frm_form_field input[type="file"]:hover { border-color: var(--accent); }
.frm_form_field input[type="file"]::file-selector-button {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min);
  color: var(--btn-primary-text); background: var(--btn-primary-bg);
  border: 0; border-radius: var(--radius-pill); padding: .7rem 1.4rem; margin-right: 1rem;
  cursor: pointer; transition: background var(--transition);
}
.frm_form_field input[type="file"]::file-selector-button:hover { background: var(--link-hover); }
.frm_dropzone, .frm_upload_progress { border-radius: var(--radius-sm); }
.frm_dropzone { border: 1px dashed var(--box-border); background: var(--white); padding: 1.6rem; text-align: center; }
.frm_dropzone.dz-drag-hover { border-color: var(--accent); background: var(--light); }

/* --------------------------------------------------------------- sections --- */
.frm_section_heading { flex: 1 1 100%; margin-top: 1.2rem; }
.frm_section_heading:first-child { margin-top: 0; }
.frm_section_heading > h3,
.frm_section_heading > .frm_section_heading_title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.75rem;
  line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--text-heading);
  padding-top: 1.2rem; border-top: 4px solid var(--accent); margin: 0 0 .4rem;
}
.frm_section_heading > .frm_description { margin-bottom: 1rem; max-width: var(--measure); }
.frm_section_spacing { padding-bottom: .4rem; }
.frm_repeat_sec, .frm_repeat_grid { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; background: var(--white); }
.frm_add_form_row, .frm_remove_form_row {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min);
  color: var(--link); background: none; border: 0; cursor: pointer; padding: .5rem 0;
}
.frm_add_form_row:hover, .frm_remove_form_row:hover { color: var(--link-hover); }

/* ------------------------------------------------------------------ HTML --- */
.frm_html_container { font-size: 1.3rem; line-height: 1.6; color: var(--ink); max-width: var(--measure); }
.frm_html_container h2, .frm_html_container h3 { font-family: var(--font-display); color: var(--text-heading); }

/* --------------------------------------------------------------- buttons --- */
.frm_submit, .frm_final_submit { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .6rem; }
.frm_button_submit, .frm_button, .frm_prev_page, .frm_next_page, .frm_save_draft {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min);
  line-height: 1; text-decoration: none; cursor: pointer; min-height: 52px; padding: 1rem 1.9rem;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.frm_button_submit, .frm_next_page { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.frm_button_submit:hover, .frm_next_page:hover { background: var(--link-hover); }
.frm_prev_page, .frm_save_draft { background: transparent; color: var(--link); border-color: var(--box-border); }
.frm_prev_page:hover, .frm_save_draft:hover { border-color: var(--link); }
.frm_button_submit[disabled], .frm_button_submit.frm_ajax_loading { opacity: .6; cursor: progress; }

/* ------------------------------------------------- errors and validation ---
   No dedicated error token in the system; --surface-brand is the nearest dark-
   enough hue for white text on every brand. Errors also carry a NON-colour
   signal (a filled "!" glyph and a 4px left bar) because on four of six brands
   --surface-brand is also --btn-primary-bg, and WCAG 1.4.1 rules out colour on
   its own regardless. */
.frm_form_field.frm_blank_field input,
.frm_form_field.frm_blank_field select,
.frm_form_field.frm_blank_field textarea,
.frm_form_field.frm_blank_field input[type="file"] { border-color: var(--surface-brand); border-width: 2px; }
.frm_error { display: flex; align-items: flex-start; gap: .45rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min); line-height: 1.45; color: var(--surface-brand); margin-top: .45rem; }
.frm_error::before {
  content: "!"; flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem;
  border-radius: 50%; background: var(--surface-brand); color: var(--white);
  font-family: var(--font-display); font-size: var(--fs-min); line-height: 20px; text-align: center;
}
.frm_error_style {
  background: var(--white); border: 1px solid var(--surface-brand); border-left: 6px solid var(--surface-brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.2rem 1.4rem; margin-bottom: 1.6rem;
  font-size: var(--fs-min); line-height: 1.55; color: var(--ink);
}
.frm_error_style strong { color: var(--surface-brand); display: block; margin-bottom: .3rem; }
.frm_error_style ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.frm_form_field.frm_blank_field { border-left: 4px solid var(--surface-brand); padding-left: 1rem; margin-left: -1.25rem; }
.frm_message, .frm_success_style {
  background: var(--light); border-left: 6px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.4rem 1.6rem;
  font-size: 1.3rem; line-height: 1.6; color: var(--ink);
}
.frm_message p:last-child, .frm_success_style p:last-child { margin-bottom: 0; }

/* Password strength (Pro). */
.frm_password_checks { font-size: var(--fs-min); color: var(--muted); margin-top: .4rem; }

/* ------------------------------------------------------------ multi-page --- */
.frm_page_bar { flex: 1 1 100%; margin-bottom: 1.6rem; }
.frm_rootline { display: flex; list-style: none; margin: 0; padding: 0; gap: .3rem; }
.frm_rootline_single { flex: 1 1 0; }
.frm_rootline_single .frm_page_back,
.frm_rootline_single a, .frm_rootline_single span {
  display: block; padding: .7rem .5rem .8rem; border-top: 4px solid var(--line);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min); color: var(--muted); text-decoration: none;
}
.frm_rootline_single.frm_current_page a,
.frm_rootline_single.frm_current_page span { border-top-color: var(--accent); color: var(--text-heading); }
.frm_rootline_single.frm_completed_page a { border-top-color: var(--accent); color: var(--link); }
.frm_percent_complete { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }

/* ----------------------------------------------------- captcha and honeypot --- */
.frm_captcha_block, .frm-g-recaptcha { margin-block: .4rem; }
.frm_verify { position: absolute !important; left: -9999px; }
.frm_screen_reader, .frm_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- Pro extras ------
   Styled where the markup is predictable (date/time, range, star, total, word
   count, confirmation). Class names are Formidable's documented output. */
.frm_star_group { display: inline-flex; gap: .2rem; }
.frm_range_container { display: flex; align-items: center; gap: 1rem; }
.frm_range_container input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }
.frm_range_value, .frm_total, .frm_word_count { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.frm_time_select { display: flex; gap: .6rem; }
.frm_time_select select { flex: 1 1 auto; }
.frm_conf_field { margin-top: 1rem; }

/* --------------------------------------------------- form-beside-a-rail shell ---
   Our class (not Formidable's) for a form next to a reassurance rail. Stacks at
   64em, matching .results-layout. Optional — a full-width form ignores it. */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.6rem; align-items: start; }
.form-layout__aside { position: sticky; top: 1.4rem; display: grid; gap: 1.3rem; align-content: start; }
@media (max-width: 64em) {
  .form-layout { grid-template-columns: 1fr; }
  .form-layout__aside { position: static; }
}

/* --------------------------------------------------------------- printing --- */
@media print {
  .frm_submit, .frm_final_submit, .frm_page_bar, .frm_captcha_block, .frm-g-recaptcha { display: none; }
  .frm_form_field input, .frm_form_field textarea, .frm_form_field select { border: 1px solid var(--neutral-400); background: none; }
}