/* Contact page form styles. */

.contactPage .section {
  margin-top: 28px;
}

.contactForm {
  display: grid;
  gap: 20px;
  max-width: 560px;
  font-family: var(--sans);
}

.contactField label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.contactField input,
.contactField select,
.contactField textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink-mute);
  border-radius: 2px;
  font: inherit;
  font-size: 16px;
}

.contactField textarea {
  min-height: 160px;
  resize: vertical;
}

.contactField input:focus-visible,
.contactField select:focus-visible,
.contactField textarea:focus-visible,
.contactForm .btn:focus-visible {
  outline: 3px solid var(--gualda);
  outline-offset: 2px;
}

.section .contactHint {
  margin: 6px 0 0;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: 13.5px;
}

.contactHoneypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contactTurnstile:empty {
  display: none;
}

.section .contactStatus {
  min-height: 1.4em;
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
}

.section .contactStatus.isError {
  color: var(--rojo);
}

.contactForm .btn {
  justify-self: start;
  cursor: pointer;
}

.contactForm .btn:disabled {
  cursor: progress;
  opacity: 0.6;
}

.section .contactPrivacy {
  margin-top: 28px;
}

/* The confirmation is focused by script so screen readers announce it; no ring needed. */
.contactPage .callout:focus {
  outline: none;
}