/* Contact form fields: matches the live site's rendered values.
   site.css styles the classic markup with an older look (sans-serif 12px, 12px
   padding, #ccc border, 24px gaps); the live form component renders it in the site
   font at 16px. These rules pin the live values. */

.form-wrapper .field-list .field .field-element {
  font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #000;
  background: #fafafa;
  padding: 10px;
  margin: 0;
  border: 1px solid #a9a9a9;
  border-radius: 0;
}

.form-wrapper .field-list textarea.field-element {
  min-height: 100px;
}

.form-wrapper .field-list .title,
.form-wrapper .field-list legend.title {
  font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
  text-transform: none;
  color: rgba(8, 27, 51, 0.8);
  margin: 0;
  padding: 0 0 4px;
}

.form-wrapper .field-list legend.title {
  padding-bottom: 0;
}

.form-wrapper .field-list .field .caption {
  font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.32px;
  color: rgba(8, 27, 51, 0.8);
  display: block;
  margin: 0;
  padding: 0;
}

.form-wrapper .field-list .description {
  font-family: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.32px;
  display: inline;
  padding: 0;
}

.form-wrapper .field-list .form-item.field,
.form-wrapper .field-list .fields .field {
  margin-bottom: 18px;
}

/* First / last name sit side by side, 223px each in a 457px form on the live site. */
.form-wrapper .field-list .fields.name {
  display: flex;
  gap: 10px;
  margin: 0;
}

.form-wrapper .field-list .fields.name .field {
  float: none;
  width: auto;
  flex: 1 1 0;
  margin-left: 0;
}

.mab-form-message:empty {
  display: none;
}

/* reCAPTCHA box: only takes space once the checkbox is actually rendered. */
.mab-captcha-wrapper { margin: 0 0 18px; }
.mab-captcha:empty { display: none; }