/**
 * Webform styling.
 *
 * The membership and contact forms are the site's two transactional pages: the
 * membership one is how people join, and it runs to four steps. The vendor
 * theme sets its labels and options at 14px against 18.5px body text, which
 * makes the part you have to read and act on the smallest text on the page.
 */

/* ---- The form's own heading ---- */

.webform-submission-form .intbir-form__h2,
.intbir-form__h2 {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--intbir-ink, #1f1f1f);
  margin: 0 0 14px;
}

.webform-submission-form .intbir-form__lede,
.intbir-form__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--intbir-ink-muted, #4a4746);
  margin: 0 0 12px;
  max-width: 62ch;
}

.webform-submission-form .intbir-form__note,
.intbir-form__note {
  font-size: 17px;
  line-height: 1.55;
  color: var(--intbir-ink-muted, #4a4746);
  margin: 0 0 12px;
  max-width: 68ch;
}

/* ---- Questions and answers ---- */

.webform-submission-form label,
.webform-submission-form .fieldset-legend,
.webform-submission-form legend {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--intbir-ink, #1f1f1f);
}

/* An option is something you read and choose, so it should not be smaller than
   the prose that introduced it. Regular weight keeps the question dominant. */
.webform-submission-form .js-form-type-radio label,
.webform-submission-form .js-form-type-checkbox label,
.webform-submission-form .form-type-radio label,
.webform-submission-form .form-type-checkbox label,
.webform-submission-form .option {
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.webform-submission-form .js-form-type-radio,
.webform-submission-form .js-form-type-checkbox {
  margin-bottom: 10px;
}

/* Bigger hit area than the browser default, which is hard to aim at. */
.webform-submission-form input[type="radio"],
.webform-submission-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -3px;
  accent-color: var(--intbir-crimson, #a00000);
}

.webform-submission-form .description,
.webform-submission-form .form-item__description,
.webform-submission-form .webform-element-description {
  font-size: 16px;
  line-height: 1.5;
  color: var(--intbir-meta, #615c58);
  margin-top: 5px;
}

/* ---- Text inputs ---- */

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="tel"],
.webform-submission-form textarea,
.webform-submission-form select {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 17px;
  padding: 10px 12px;
  border: 1px solid var(--intbir-field-border, #d9d4d0);
  border-radius: 2px;
  max-width: 34em;
  width: 100%;
}

.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form input[type="url"]:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
  border-color: var(--intbir-crimson, #a00000);
  outline: 2px solid rgba(160, 0, 0, 0.18);
  outline-offset: 1px;
}

/* ---- Progress through the wizard ---- */

.webform-progress .progress-step .progress-title,
.webform-progress-tracker .progress-title {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 16px;
}

/* ---- CAPTCHA ----
   The captcha module appends its element after everything else, which puts it
   below the Continue button - people reach the button before they have seen
   the question they must answer. Flex ordering moves the actions last. */

.webform-submission-form {
  display: flex;
  flex-direction: column;
}

.webform-submission-form > .form-actions,
.webform-submission-form > .webform-actions {
  order: 10;
  margin-top: 8px;
}

.webform-submission-form .captcha {
  order: 9;
  margin: 18px 0 4px;
  padding: 16px 18px;
  background: var(--intbir-surface-tint, #faf8f6);
  border: 1px solid var(--intbir-border, #e3dfdc);
}

.webform-submission-form .captcha label,
.webform-submission-form .captcha .fieldset-legend {
  font-size: 17px;
}

/* ---- Buttons ---- */

.webform-submission-form .form-actions .form-submit,
.webform-submission-form .webform-button--next,
.webform-submission-form .webform-button--previous {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .webform-submission-form .intbir-form__h2,
  .intbir-form__h2 { font-size: 27px; }
  .webform-submission-form .intbir-form__lede,
  .intbir-form__lede { font-size: 17.5px; }
  .webform-submission-form label,
  .webform-submission-form legend { font-size: 17px; }
}

/* ---- Section headings on the single-page form ----
   Without the wizard's step titles the three groups would run together, so
   each gets a heading with a rule above it to separate the page into parts a
   reader can still take one at a time. */
.webform-submission-form .intbir-form__section {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--intbir-ink, #1f1f1f);
  margin: 34px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--intbir-hairline, #efebe8);
}

/* ---- Working-group checkboxes ----
   The list is laid out in two columns. The theme floats each item, which the
   longest label overflows, dropping its text below its own checkbox while the
   shorter ones stay inline. Flex keeps box and label on one line whatever the
   label's length, and aligns them to the first line rather than the middle so
   a wrapped label still sits beside its box. */
.webform-submission-form .wg_list .js-form-type-checkbox,
.webform-submission-form .wg_list .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  float: none;
  margin-bottom: 9px;
}

.webform-submission-form .wg_list .js-form-type-checkbox input,
.webform-submission-form .wg_list .form-type-checkbox input {
  flex: 0 0 auto;
  margin: 3px 0 0;
}

.webform-submission-form .wg_list .js-form-type-checkbox label,
.webform-submission-form .wg_list .form-type-checkbox label {
  flex: 1 1 auto;
  margin: 0;
}

/* Before a route is chosen there is nothing to fill in or submit. */
.webform-submission-form.intbir-awaiting-route .captcha,
.webform-submission-form.intbir-awaiting-route > .form-actions,
.webform-submission-form.intbir-awaiting-route > .webform-actions {
  display: none;
}