/* Contact us. Both form classes are repeated so these win over the theme's
   general webform rules. */

/* The page around the form. The theme spaces every page section 100px
   apart; the design keeps the tabs and the form close to the header. */
.node__content:has(.webform-submission-contact-us-form) > div:first-child {
  margin-top: 0;
}

.node__content:has(.webform-submission-contact-us-form) > div:not(:last-child) {
  margin-bottom: 24px;
}

/* Form and sidebar as two thirds and one third, as in the design. The
   layout's own column options stop at three quarters and one quarter. */
@media screen and (min-width: 768px) {
  .row:has(> .col-md-9 .webform-submission-contact-us-form) > .col-md-9 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }

  .row:has(> .col-md-9 .webform-submission-contact-us-form) > .col-md-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Fields: the theme's own webform styling, as on production (white, 1px
   grey border, 380px inputs, 600px message box). Only the layout below is
   specific to this form. */

/* Type across the top, First and Family Name side by side, Email on its own
   line, then the message, as production lays them out. */
.webform-submission-form.webform-submission-contact-us-form > .js-webform-type-radios,
.webform-submission-form.webform-submission-contact-us-form > .form-item-description {
  flex-basis: 100%;
}

.webform-submission-form.webform-submission-contact-us-form > .form-item-email {
  margin-inline-end: calc(100% - 380px);
}

.webform-submission-form.webform-submission-contact-us-form fieldset.captcha {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.webform-submission-form.webform-submission-contact-us-form fieldset.captcha > legend {
  display: none;
}

/* Greyed out until the required fields are filled. */
.webform-submission-form.webform-submission-contact-us-form .form-actions .webform-button--submit:disabled {
  border-color: #e5e7eb;
  background: #e5e7eb;
  color: #9da4ae;
  cursor: not-allowed;
}