/* Static contact form on contact.html (#contact-form + #contact-done).
 * The form is plain HTML in the page, submitted by contact.js; it no longer
 * relies on the contact bundle or the GigsRemote API. Site blue #535999.
 */
#contact-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
  margin-top: 30px;
}

#contact-form .enquiry-type-group {
  margin: 0;
  padding: 0;
  border: 0;
}

#contact-form .enquiry-type-group > legend {
  padding: 0;
  margin-bottom: 10px;
}

#contact-form .enquiry-type {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#contact-form .input-container {
  display: grid;
  gap: 6px;
  /* Don't stretch to the height of the tallest cell in the row (the message
   * textarea), so the country <select> keeps the height of a text input and the
   * label-to-field gap matches the other fields. */
  align-self: start;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 20px;
  border: 2px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
}

#contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border-color: #535999;
  outline: none;
}

#contact-form input,
#contact-form textarea {
  accent-color: #535999;
}

#contact-form .error {
  margin: 0;
  color: #b3261e;
  font-size: 14px;
}

#contact-form .gigs-btn {
  justify-self: start;
}

/* The form's display:grid comes from a two-id selector (#contact>#contact-form),
 * so its hidden state needs the same weight to win, otherwise the form stays
 * visible after a successful submit. */
#contact > #contact-form[hidden] {
  display: none;
}

#contact-done {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-top: 30px;
}

/* Keep the "Thank you!" block hidden until contact.js clears its hidden
 * attribute on a successful submit; without this, display:grid above overrides
 * the attribute and shows it at page load. */
#contact-done[hidden] {
  display: none;
}

/* Left-align the three sidebar blocks (Contact us / Book a meeting / Find us in
 * social media) so they share the left edge of "Contact us" instead of being
 * centred individually. */
@media only screen and (min-width: 1024px) {
  #contact > .contacts {
    justify-items: start;
  }

  #contact > .contacts > .contact {
    width: 100%;
    justify-self: start;
    text-align: left;
  }
}