/*
 * Formidable forms in the look of Enfold.
 * The IDs refer to themes/ricamsterdam/CUSTOMIZATIONS.md: P-13 below, P-02 at the end.
 *
 * Formidable's own stylesheet stays on for the layout (columns, toggles, date picker,
 * repeaters, conditional sections). This file decides how a form looks, whatever
 * style the form has in Formidable's Styler and however that style is set up on a
 * site. The Styler is therefore not the place to change the look of a form.
 *
 * Two layers:
 * 1. Formidable 7 draws its forms from CSS variables. Each style sets its own on
 *    ".frm_style_NAME.with_frm_style"; "#top .with_frm_style" outranks every one of
 *    them, so the values below apply to every form, also in widgets this file does
 *    not mention (date picker, toggles, progress bar).
 * 2. Enfold styles labels and fields with "#top label" and "#top input", which beat
 *    Formidable's rules. Where that gets in the way, the rules below set the
 *    property itself.
 *
 * Colours and sizes come from Enfold's variables, with the RIC values as fallback.
 */

/* P-13 Formidable forms in the look of Enfold */

/* 1. Formidable's variables, filled in from Enfold. */
#top .with_frm_style {
  --font: var(--enfold-font-family-body, "open sans", Helvetica, Arial, sans-serif);
  --font-size: var(--enfold-font-size-content-font, 14px);
  --base-font-size: var(--enfold-font-size-content-font, 14px);

  --form-width: 100%;
  --form-desc-size: 1em;
  --form-desc-color: var(--enfold-main-color-color, #666666);
  --title-size: var(--enfold-font-size-theme-h3, 20px);
  --title-color: var(--enfold-main-color-heading, #222222);

  /* Labels: semibold at text size. Open Sans is loaded in 400 and 600 only, so a
     "bold" label is a faked 700. */
  --label-color: var(--enfold-main-color-heading, #222222);
  --weight: 600;
  --label-padding: 0 0 6px 0;
  --required-color: var(--enfold-main-color-primary, #e57200);
  --required-weight: 600;

  /* Choices of radio buttons and check boxes: plain text. */
  --check-font-size: 1em;
  --check-label-color: var(--enfold-main-color-color, #666666);
  --check-weight: 400;
  --toggle-font-size: 1em;

  /* Help text right under its field. */
  --description-font-size: 0.92em;
  --description-color: var(--enfold-main-color-meta, #8d8d8d);
  --description-weight: 400;
  --description-margin: 5px 0 0 0;

  /* Fields. */
  --field-font-size: 1em;
  --field-height: auto;
  --line-height: 1.65em;
  --field-pad: 8px 10px;
  --field-margin: 20px;
  --field-weight: 400;
  --text-color: var(--enfold-main-color-color, #666666);
  --border-color: var(--enfold-main-color-border, #e1e1e1);
  --bg-color: var(--enfold-main-color-bg2, #ffffff);
  --bg-color-active: var(--enfold-main-color-bg2, #ffffff);
  --border-color-active: var(--enfold-main-color-primary, #e57200);
  --border-radius: 2px;
  --box-shadow: none;

  /* Errors: one red for the field, its message and the summary above the form. */
  --border-color-error: #b94a48;
  --text-color-error: var(--enfold-main-color-color, #666666);
  --bg-color-error: var(--enfold-main-color-bg2, #ffffff);
  --error-bg: #f2dede;
  --error-border: #ebccd1;
  --error-text: #b94a48;
  --error-font-size: 1em;

  /* Sections: a heading like an h3 in the content, with a line above it. */
  --section-font-size: var(--enfold-font-size-theme-h3, 20px);
  --section-color: var(--enfold-main-color-heading, #222222);
  --section-weight: 600;
  --section-pad: 25px 0 0 0;
  --section-mar-top: 10px;
  --section-mar-bottom: 15px;
  --section-bg-color: transparent;
  --section-border-color: var(--enfold-main-color-border, #e1e1e1);
  --section-border-width: 1px;
  --section-border-style: solid;
  --section-border-loc: -top;

  /* Buttons: Enfold's theme button. The Styler had the hover text dark grey on every
     site; Enfold keeps it white. */
  --submit-font-size: 0.92em;
  --submit-weight: 400;
  --submit-text-color: var(--enfold-main-color-constant-font, #ffffff);
  --submit-bg-color: var(--enfold-main-color-primary, #e57200);
  --submit-border-color: var(--enfold-main-color-button-border, #c35000);
  --submit-border-width: 1px;
  --submit-border-radius: 2px;
  --submit-margin: 10px;
  --submit-padding: 9px 22px;
  --submit-shadow-color: transparent;
  --submit-hover-color: var(--enfold-main-color-constant-font, #ffffff);
  --submit-hover-bg-color: var(--enfold-main-color-button-border, #c35000);
  --submit-hover-border-color: var(--enfold-main-color-button-border2, #c35000);
  --submit-active-color: var(--enfold-main-color-constant-font, #ffffff);
  --submit-active-bg-color: var(--enfold-main-color-button-border, #c35000);
  --submit-active-border-color: var(--enfold-main-color-button-border2, #c35000);

  /* Widgets in the theme colour. */
  --progress-active-bg-color: var(--enfold-main-color-primary, #e57200);
  --toggle-on-color: var(--enfold-main-color-primary, #e57200);
  --slider-color: var(--enfold-main-color-primary, #e57200);
  --date-head-bg-color: var(--enfold-main-color-primary, #e57200);
  --date-head-color: var(--enfold-main-color-constant-font, #ffffff);
  --date-band-color: var(--enfold-main-color-primary, #e57200);

  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.65em;
  color: var(--text-color);
}

/* 2. Where Enfold's own form rules win over Formidable's. */

/* "#top label" makes every label bold at 0.92em, also each choice of a radio
   button or check box. */
#top .with_frm_style .frm_primary_label {
  font-size: 1em;
  font-weight: var(--weight);
  line-height: 1.4em;
}
#top .with_frm_style .frm_radio label,
#top .with_frm_style .frm_checkbox label,
#top .with_frm_style .frm_toggle_container label {
  font-size: var(--check-font-size);
  font-weight: var(--check-weight);
  line-height: 1.5em;
}

/* A label to the left of its field lines up with the text in the field. */
#top .with_frm_style .frm_left_container > .frm_primary_label {
  padding-top: 9px;
}

/* "#top input" gives every field Enfold's font, padding and a 20px margin below.
   The field container already keeps fields apart; the margin pushed help texts and
   error messages away from the field they belong to. */
#top .with_frm_style input[type="text"],
#top .with_frm_style input[type="email"],
#top .with_frm_style input[type="tel"],
#top .with_frm_style input[type="number"],
#top .with_frm_style input[type="url"],
#top .with_frm_style input[type="password"],
#top .with_frm_style input[type="search"],
#top .with_frm_style select,
#top .with_frm_style textarea {
  font-family: var(--font);
  font-size: var(--field-font-size);
  color: var(--text-color);
  background-color: var(--bg-color);
  border: var(--field-border-width, 1px) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--field-pad);
  margin: 0;
  height: auto;
}
#top .with_frm_style input:focus,
#top .with_frm_style select:focus,
#top .with_frm_style textarea:focus {
  border-color: var(--border-color-active);
}
#top .with_frm_style .frm_blank_field input[type],
#top .with_frm_style .frm_blank_field select,
#top .with_frm_style .frm_blank_field textarea {
  border-color: var(--border-color-error);
}

/* "#top label span" gives the asterisk of a required field Enfold's dark grey. */
#top .with_frm_style .frm_required {
  font-size: inherit;
  font-weight: var(--required-weight);
  color: var(--required-color);
}

/* Help text and error message right under the field. Formidable writes the Styler's
   font and size into these rules instead of using its variables. */
#top .with_frm_style .frm_description,
#top .with_frm_style .frm_error {
  font-family: var(--font);
  font-size: var(--description-font-size);
  font-weight: 400;
  line-height: 1.5em;
  margin: 5px 0 0;
  padding: 0;
}
#top .with_frm_style .frm_description {
  color: var(--description-color);
}
#top .with_frm_style .frm_scale label,
#top .with_frm_style .dz-message,
#top .with_frm_style .frm_error_style span {
  font-family: var(--font);
}

/* The summary above the form is focused after a failed submit; no black frame. */
#top .frm_forms .frm_error_style {
  border-radius: var(--border-radius);
  padding: 12px 15px;
  outline: none;
}
#top .frm_forms .frm_error_style ul {
  margin: 4px 0 0;
}

/* Buttons. Older forms have an <input type="submit">, for which Formidable writes the
   Styler's colours into the rule instead of using its variables. */
#top .with_frm_style .frm_submit button,
#top .with_frm_style .frm_submit input[type="submit"],
#top .with_frm_style .frm_submit input[type="button"] {
  font-family: var(--font);
  font-size: var(--submit-font-size);
  font-weight: var(--submit-weight);
  line-height: 1.65em;
  color: var(--submit-text-color);
  background: var(--submit-bg-color);
  border: var(--submit-border-width) solid var(--submit-border-color);
  border-radius: var(--submit-border-radius);
  padding: var(--submit-padding);
  box-shadow: none;
  width: auto;
  height: auto;
}
#top .with_frm_style .frm_submit button:hover,
#top .with_frm_style .frm_submit button:focus,
#top .with_frm_style .frm_submit input[type="submit"]:hover,
#top .with_frm_style .frm_submit input[type="submit"]:focus,
#top .with_frm_style .frm_submit input[type="button"]:hover,
#top .with_frm_style .frm_submit input[type="button"]:focus {
  color: var(--submit-hover-color);
  background: var(--submit-hover-bg-color);
  border-color: var(--submit-hover-border-color);
}

/* The date picker carries the form's classes too; its month and year controls need
   less room than a field. */
#top .flatpickr-calendar .numInputWrapper input,
#top .flatpickr-calendar select {
  padding: 4px 6px;
}

/* Section headings. Formidable takes the line off the heading and its margin away,
   so the first field sits against it. Sections without a name only group fields
   for conditional logic; their empty heading takes no room. */
#top .with_frm_style .frm_section_heading > h3 {
  font-size: var(--section-font-size);
  font-weight: var(--section-weight);
  line-height: 1.3em;
  color: var(--section-color);
  border-top: var(--section-border-width) var(--section-border-style) var(--section-border-color);
  padding: 20px 0 0;
  margin: 10px 0 15px;
}
#top .with_frm_style .frm_section_heading > h3:has(> span:empty) {
  display: none;
}

/* Radio buttons and check boxes: an outline that stands out against the page, and
   the theme colour when the browser draws them itself. */
#top .with_frm_style .frm_radio input[type="radio"]:not(:checked),
#top .with_frm_style .frm_checkbox input[type="checkbox"]:not(:checked) {
  border-color: var(--enfold-main-color-meta, #8d8d8d);
}
#top .with_frm_style input[type="radio"],
#top .with_frm_style input[type="checkbox"] {
  accent-color: var(--border-color-active);
}

/* P-02 Inline box */
.frm_inline_box {
  border-radius: 0 !important;
  margin-bottom: 20px;
}