/* The contact form. Shell, type and colour come from site.css and tokens.css;
   this file is only the parts a form needs and the marketing pages don't. */

/* A subpage doesn't need the full-height wordmark the landing page opens with. */
header { padding: var(--space-xl) 0 0; }
.mark { font-size: clamp(26px, 6vw, 34px); }

h1.page {
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--space-xl) 0 0;
  text-transform: none;
  color: var(--text);
}

form { margin-top: var(--space-lg); max-width: 46ch; }

.field { margin-top: var(--space-lg); }

label {
  display: block;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: 0.1px;
  color: var(--text-2);
  margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body-size);
  padding: 0 var(--space-md);
  height: var(--size-field-height);
}
textarea {
  padding: var(--space-md);
  height: auto;
  min-height: 168px;
  resize: vertical;
  line-height: 1.55;
}

input:focus, textarea:focus { outline: none; border-color: var(--primary); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

.field-error {
  margin: var(--space-sm) 0 0;
  font-size: var(--type-caption-size);
  color: var(--danger);
  min-height: 16px;
}

button {
  font: inherit;
  font-size: var(--type-body-size);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid transparent;
  background: var(--primary);
  color: var(--color-on-primary);
  height: var(--size-button-height);
  padding: 0 var(--space-lg);
  min-width: 140px;
  margin-top: var(--space-xl);
  transition: background var(--motion-fast) var(--motion-easing);
}
button:hover:not(:disabled) { background: var(--color-primary-pressed); }
button:disabled { opacity: var(--opacity-disabled); cursor: default; }

/* The honeypot. Positioned off-screen rather than display:none — a bot that
   reads styles skips a hidden input, one that doesn't will fill this in. It is
   out of tab order and hidden from assistive tech, so no person ever meets it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.result {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--border);
  background: var(--surface);
  font-size: var(--type-body-size);
  max-width: 46ch;
}
.result.ok { border-color: var(--success); color: var(--success); }
.result.bad { border-color: var(--danger); color: var(--danger); }
.result[hidden] { display: none; }