/*
 * Styles for the contact form plug-in (its markup is in index.html, between
 * the contact-form:start and contact-form:end markers).
 *
 * This file is only copied into dist/ when site.config.json has
 * "contactForm": true — see build.sh. If you disable the plug-in, this
 * stylesheet is simply left out, so no unused CSS ships either.
 *
 * Every value here comes from the base stylesheet's tokens. The plug-in is
 * removable, but it is not a separate design: a form that arrives in its own
 * palette is the drift the token system exists to prevent.
 */

/* The form is a dark card on the page's white half — the same near-black the
   nav bar wears, which is the tone the hero artwork's dark shapes render at.
   That ties the two ends of the page together: the reader meets that black at
   the top and lands on it again at the point of getting in touch.

   Slightly rounded rather than blob-shaped on purpose. Everything else on this
   page that carries the brand is an irregular blob; a form is a place to type,
   and the shape should stay out of the way of the fields. */
.contact-form-section {
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: rgb(var(--color-ground));
  color: var(--color-paper);
}

.contact-form-section h2 {
  margin: 0 0 1.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-paper);
}

.form-field {
  margin-bottom: 1.1rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(var(--color-paper-rgb) / 0.72);
}

/* Fields are a shade lighter than the card rather than white boxes cut into
   it: on a dark card, white inputs read as holes and pull the eye away from
   the labels. The border does the work of saying "you can type here". */
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-paper);
  background: rgb(var(--color-paper-rgb) / 0.06);
  border: 1px solid rgb(var(--color-paper-rgb) / 0.18);
  border-radius: 0.5rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgb(var(--color-paper-rgb) / 0.4);
}

/* Focus lands on the brand violet rather than the browser's default ring. The
   ring is kept as well as the colour change: colour alone is not a focus
   indicator for anyone who cannot distinguish it. */
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--brand-violet);
  outline-offset: 2px;
  border-color: var(--brand-violet);
  background: rgb(var(--color-paper-rgb) / 0.1);
}

/* The send button is the page's blob button in miniature — same gradient, same
   habit of never sitting quite still — so the form ends on the same note the
   hero's calls to action begin on. */
.contact-form-section button[type="submit"] {
  position: relative;
  isolation: isolate;
  margin-top: 0.4rem;
  padding: 0.75rem 2rem;
  border: 0;
  background: none;
  cursor: pointer;

  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-paper);
}

.contact-form-section button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%;
  background: var(--brand-blend);
  transition: border-radius 0.6s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.contact-form-section button[type="submit"]:hover::before,
.contact-form-section button[type="submit"]:focus-visible::before {
  animation: blob-morph 9s ease-in-out infinite;
}

.contact-form-section button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 3px;
}

.contact-form-section button[type="submit"][disabled] {
  cursor: progress;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-section button[type="submit"]:hover::before,
  .contact-form-section button[type="submit"]:focus-visible::before {
    animation: none;
  }
}

/* Visually hide the honeypot field without using display:none — some bots
   skip fields hidden that way, but still catch position-based hiding less
   reliably than they catch obviously-fake fields, so this pattern is a
   reasonable low-effort deterrent alongside server-side validation. */
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
}

.contact-form-status {
  margin: 0.9rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgb(var(--color-paper-rgb) / 0.8);
}

/* Cloudflare Turnstile widget — only present when captcha.enabled is true
   in site.config.json (see assemble-index.js). Turnstile sizes its own
   iframe; this just gives it consistent spacing in the form layout. */
.cf-turnstile {
  margin: 1rem 0;
}

@media (min-width: 48em) {
  .contact-form-section {
    padding: 2.5rem 2.25rem;
  }
}

/* Sits between the last field and the button, where someone reads it before
   they send rather than after. Quiet, but not hidden: it is the only place on
   the page where what happens to their details is stated. */
.contact-form-consent {
  margin: 0 0 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgb(var(--color-paper-rgb) / 0.65);
}

.contact-form-consent a {
  color: var(--color-paper);
  text-underline-offset: 2px;
}