/*
 * contact.css: the home page's contact section and form.
 * Tokens come from base.css. Load after home.css: .contact overrides the
 * bottom padding of .section.
 */

.contact { padding-bottom: var(--contact-pad-bottom); }
.contact .section-label { margin-bottom: var(--space-6); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }

.contact h2 { margin: 0; font: 700 var(--fs-section-title)/var(--lh-heading) var(--font-sans); }

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* links as wide as their text, not the column */
  gap: var(--space-3_5);
  margin-top: var(--space-9);
  font: 400 var(--fs-ui) var(--font-mono);
}

/* ── Form ───────────────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font: 500 var(--fs-caption) var(--font-mono);
  color: var(--mut);
}

.contact-form input,
.contact-form textarea {
  font: 400 var(--fs-input) var(--font-sans);
  background: var(--card);
  color: var(--fg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--radius-md);
  padding: var(--space-3_5) var(--space-4);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline-offset: var(--hairline); }

.contact-form ::placeholder { color: var(--placeholder); opacity: 1; }

.contact-form fieldset { border: 0; padding: 0; margin: 0; }

.contact-form legend {
  font: 500 var(--fs-caption) var(--font-mono);
  color: var(--mut);
  padding: 0;
  margin-bottom: var(--space-2);
}

/* ── Reason chips: real radio buttons, visually replaced by the span ── */
.reason-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.chip input {
  position: absolute;
  width: 1px; height: 1px;        /* literal: visually-hidden idiom */
  margin: -1px;                   /* literal: visually-hidden idiom */
  overflow: hidden;
  clip-path: inset(50%);
}

.chip span {
  display: inline-block;
  cursor: pointer;
  font: 500 var(--fs-caption) var(--font-mono);
  color: var(--mut);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3_5);
}
.chip span:hover { border-color: var(--acc); color: var(--acc); }
.chip input:checked + span { border-color: var(--acc); color: var(--acc); }
.chip input:focus-visible + span { outline: var(--focus-width) solid var(--acc); outline-offset: var(--focus-offset); }

/* Honeypot: hidden from humans, tempting for bots */
.hp {
  position: absolute;
  width: 1px; height: 1px;        /* literal: visually-hidden idiom */
  margin: -1px;                   /* literal: visually-hidden idiom */
  overflow: hidden;
  clip-path: inset(50%);
}

.contact-form button {
  cursor: pointer;
  font: 700 var(--fs-ui) var(--font-mono);
  background: var(--acc);
  color: var(--accfg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.contact-form button:hover { opacity: var(--hover-dim-filled); }
.contact-form button:focus-visible { outline-color: var(--fg); }
.contact-form button:disabled { opacity: 0.5; cursor: default; }

.form-status { margin: 0; font: 400 var(--fs-label) var(--font-mono); color: var(--mut); min-height: 1.2em; }
.form-status.ok { color: var(--acc); }

.form-note { margin: 0; font: 400 var(--fs-micro) var(--font-mono); color: var(--mut); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}