/* contact.css — the contact form card (about/contact only). Ported from fab's
   contact.astro. Posts to Formspree, so it works on a static build (no server
   needed). Live char-counter wired up in contact.html. */
.contact-card { margin-top:1.5rem; padding:2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:1rem; box-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.contact-card h2 { margin-top:0; }
.contact-form { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:1.5rem; }
.form-field { display:flex; flex-direction:column; }
.form-field--full { grid-column:1 / -1; }
.contact-form label { font-size:.875rem; font-weight:600; color:var(--fg); margin-bottom:.5rem; }
.form-label-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.form-label-row label { margin-bottom:0; }
.form-hint { font-size:.75rem; color:var(--muted); }
.form-hint--warn { color:#ea580c; }
.form-hint--danger { color:#dc2626; }
.form-char-row { margin-top:.25rem; }
.contact-form input, .contact-form textarea { width:100%; box-sizing:border-box; border-radius:.5rem;
  border:1px solid var(--line); background:var(--surface); padding:.75rem 1rem; color:var(--fg); font:inherit;
  outline:none; transition:border-color .2s, box-shadow .2s; }
.contact-form input:hover, .contact-form textarea:hover { border-color:var(--muted); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-soft); }
.contact-form textarea { resize:none; }
.form-submit-row { display:flex; justify-content:flex-end; }
.contact-form button[type="submit"] { width:100%; border:0; border-radius:.5rem; cursor:pointer;
  background:linear-gradient(to right,#059669,#047857); padding:.75rem 2rem; font-size:1rem; font-weight:600;
  color:#fff; box-shadow:0 4px 6px -1px rgb(0 0 0 / .1); transition:transform .2s, opacity .2s; }
.contact-form button[type="submit"]:hover { opacity:.9; transform:scale(1.02); }
.contact-form button[type="submit"]:active { transform:scale(1); }
html.dark .contact-card { background:var(--surface-2); }
html.dark .contact-form button[type="submit"] { background:linear-gradient(to right,#047857,#065f46); }
@media (min-width:640px) {
  .contact-card { padding:3rem; }
  .contact-form { grid-template-columns:1fr 1fr; column-gap:2rem; }
  .contact-form button[type="submit"] { width:auto; }
}