/* =========================================================================
   NGF — Simple forms (the short name/email/subject/message webforms).
   Scoped to .ngf-simple-form, attached from ngf_form_alter in ngf.theme.
   Generic Drupal form markup only: .form-item, plain text/email/textarea
   inputs, .form-actions, .button/.button--primary — Webform emits all of
   these, which is why nothing here is webform-specific.
   The instrument request form is styled separately (instrument-request.css);
   it is a multi-step form with markup these rules do not cover.
   ========================================================================= */

.ngf-simple-form {
  max-width: var(--ngf-maxw-copy);
  margin: 0 auto;
  padding: 0 var(--ngf-sp-6) var(--ngf-sp-16);
}

.ngf-simple-form__title {
  font-size: var(--ngf-fs-3xl);
  margin-bottom: var(--ngf-sp-6);
}

.ngf-simple-form .form-item,
.ngf-simple-form .js-form-item {
  margin-bottom: var(--ngf-sp-5);
}

.ngf-simple-form label {
  display: block;
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  color: var(--ngf-fg-2);
  margin-bottom: var(--ngf-sp-2);
}

.ngf-simple-form label.form-required::after {
  content: " *";
  color: var(--ngf-danger);
}

.ngf-simple-form input[type="text"],
.ngf-simple-form input[type="email"],
.ngf-simple-form textarea {
  display: block;
  width: 100%;
  padding: var(--ngf-sp-3) var(--ngf-sp-4);
  border: 1px solid var(--ngf-border-strong);
  border-radius: var(--ngf-r-md);
  background: var(--ngf-bg-surface);
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-base);
  color: var(--ngf-fg-1);
  transition: border-color var(--ngf-dur-base) var(--ngf-ease-out),
              box-shadow var(--ngf-dur-base) var(--ngf-ease-out);
}

.ngf-simple-form textarea {
  min-height: 200px;
  resize: vertical;
}

.ngf-simple-form input[type="text"]:focus,
.ngf-simple-form input[type="email"]:focus,
.ngf-simple-form textarea:focus {
  outline: none;
  border-color: var(--ngf-seismic-400);
  box-shadow: 0 0 0 3px var(--ngf-seismic-100);
}

.ngf-simple-form .description {
  font-size: var(--ngf-fs-sm);
  color: var(--ngf-fg-3);
  margin-top: var(--ngf-sp-1);
}

.ngf-simple-form .form-actions {
  display: flex;
  align-items: center;
  gap: var(--ngf-sp-3);
  margin-top: var(--ngf-sp-8);
}

.ngf-simple-form .button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--ngf-sp-6);
  border-radius: var(--ngf-r-sm);
  border: 1px solid var(--ngf-border-strong);
  background: transparent;
  font-family: var(--ngf-font-body);
  font-size: var(--ngf-fs-sm);
  font-weight: var(--ngf-w-semi);
  letter-spacing: var(--ngf-tr-wide);
  text-transform: uppercase;
  color: var(--ngf-fg-1);
  cursor: pointer;
  transition: background-color var(--ngf-dur-base) var(--ngf-ease-out),
              color var(--ngf-dur-base) var(--ngf-ease-out),
              border-color var(--ngf-dur-base) var(--ngf-ease-out);
}
.ngf-simple-form .button:hover {
  background: var(--ngf-ink-800);
  color: var(--ngf-white);
  border-color: var(--ngf-ink-800);
}

.ngf-simple-form .button--primary {
  background: var(--ngf-seismic-500);
  border-color: var(--ngf-seismic-500);
  color: var(--ngf-white);
}
.ngf-simple-form .button--primary:hover {
  background: var(--ngf-seismic-600);
  border-color: var(--ngf-seismic-600);
}

/* Confirmation page. Its own route, so it reuses the container and title
   rules above via .ngf-simple-form and only needs the message and back link
   styled. See ngf_preprocess_webform_confirmation() in ngf.theme. */

.ngf-simple-form--confirmation {
  padding-top: var(--ngf-sp-12);
}

.ngf-simple-form--confirmation .webform-confirmation__message {
  font-size: var(--ngf-fs-lg);
  margin-bottom: var(--ngf-sp-8);
}

.ngf-simple-form--confirmation .webform-confirmation__back a {
  display: inline-block;
  font-weight: var(--ngf-w-semi);
  text-decoration: none;
  color: var(--ngf-seismic-500);
}

.ngf-simple-form--confirmation .webform-confirmation__back a:hover {
  text-decoration: underline;
}