/* labels */
.wpcf7-form label {
  float: none;
  font-weight: bold;
  display: block;
  color: var(--ee-blue);
  font-family: 'Lato', sans-serif;
  font-size: 1.375rem;
  margin: 0 !important;
}



/* Turnstile box under the Send row (contact-form.njk). */
/* Empty until the first character is typed (contact-form.njk), so the gap
   under Send appears with the check, not before it. */
.ee-contact-form .ee-cf-turnstile:not(:empty) {
  margin-top: 16px;
}

/* inputs */
.input-container {
  margin: 1rem 0;
}

.input-container p {
  margin: 0;
}

.wpcf7-form .input-container input:not([type=submit]),
.wpcf7-form .input-container textarea,
.wpcf7-form .input-container select {
  outline: none;
  border: none;
}

.input-container:has(:focus) {
  box-shadow: var(--focus-border);
}

.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input:not([type=submit]) {
  font-family: 'Lato', sans-serif;
  width: 100%!important;
  max-width: initial;
  font-size: 22px!important;
  border-radius: 10px;
  padding: 21px 25px !important;
  border: none;
}

.wpcf7-form textarea {
  height: 200px;
  resize: none;
}

/* buttons */
.wpcf7-form input[type=submit] {
  margin: 8px 0 0 !important;
}

/* spinner */
.contact-submit {
  position: relative;
  margin: 90px 0;
}

@media only screen and (min-width: 1280px) {
  .contact-submit {
      margin: 30px 0 !important;
  }
}

.wpcf7-spinner {
  position: absolute;
  bottom: calc(50% - 4px);
  transform: translate(50%, 50%);
  right: 50%;
  margin: 0;
  opacity: 0.5;
}

/* message */
.wpcf7 form .wpcf7-response-output,
.wpcf7-not-valid-tip {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: normal !important;
}

.wpcf7-not-valid-tip,
.red-asterisk {
  color: #A30000;
  background-color: transparent;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #A30000;
}

.wpcf7 form .wpcf7-response-output {
  text-align: center;
}

.required-msg {
  margin: 48px 0 24px;
}

/* Error state of the status line under the Send button (set by the script in
   contact-form.njk). Without it a failed send rendered in the same muted italic
   14px as the "We usually respond in one day" hint on /contact/, and unstyled on
   /services/, so Meryl read it as a low-contrast hint rather than an error
   (issue #31 item 3). #A30000 is at least 7:1 on both the white page and the
   grey card. The selector's specificity (1,2,0) beats
   `.ee-contact-page #contact-form-status` (1,1,0) in ee-contact.css, which is
   linked after this sheet. */
/* Success state of the same line. Meryl's recorded review (clip S1-05) found
   the confirmation (then "Thanks! Knomo is doing a little dance…"; now "We
   appreciate your message…") small, italic and easy to miss. Upright bold brand blue with a matching bar, same shape as the
   error state so the two read as siblings; #293C8F is 9.8:1 on white. */
.ee-contact-form #contact-form-status.is-success {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ee-blue);
  border-left: 4px solid var(--ee-blue);
  padding-left: 12px;
}

.ee-contact-form #contact-form-status.is-error {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.125rem; /* same size as the success state */
  color: #A30000;
  border-left: 4px solid #A30000;
  padding-left: 12px;
}

.wpcf7-form[data-status="submitting"] #submit {
  color: transparent;
}

/* Field error messages, set by the script in contact-form.njk when Send finds a
   problem (issue #31 item 23). Same red and bar as the status line's error
   state, so a field error and a failed send read as the same kind of thing.
   The message sits between the label and the field, where it is read with the
   label and stays visible above the on-screen keyboard. */
.ee-contact-form .cf-field-error {
  display: block;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: #A30000;
  border-left: 4px solid #A30000;
  padding-left: 12px;
  margin: 4px 0 8px;
}

.ee-contact-form .cf-field-error[hidden] {
  display: none;
}

/* The message carries the error; the border is a second cue, not the only one.
   The id lifts the specificity to (1,1,1) so it beats the 3px ink border that
   ee-contact.css (linked after this sheet) sets at (0,3,1). */
#contact-form input[aria-invalid="true"],
#contact-form textarea[aria-invalid="true"] {
  border-color: #A30000;
}