/* Contact page: a heading on the left, the form card on the right.
   Builds on css/home.css (colors, type, header, menu, chip buttons). */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  align-content: start; /* main stretches to the footer; don't spread that space between rows */
  padding-top: clamp(24px, 5vh, 56px);
}

.contact-head h1 {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96;
}

.contact-highlight {
  background: var(--volt);
  color: var(--volt-ink);
  padding: 0 0.12em;
  border-radius: 0.12em;
}

.contact-intro {
  margin: 0 0 24px;
  max-width: 26em;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink-soft);
}

.contact-direct { margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); overflow-wrap: anywhere; }
.contact-direct a, .form-status a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- The card ---------- */
.contact-card {
  padding: clamp(20px, 3vw, 32px);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.field label { font-weight: 700; font-size: 15px; }
.optional { font-weight: 500; color: var(--ink-soft); margin-left: 4px; }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  transition: box-shadow 0.12s ease;
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.field input:focus,
.field textarea:focus { box-shadow: 0 0 0 4px var(--volt); }
.field [aria-invalid="true"] { border-color: #C2410C; }

.field-error, .form-status { margin: 0; font-size: 14px; font-weight: 600; }
.field-error { color: #C2410C; }
:root[data-theme="dark"] .field-error,
:root[data-theme="dark"] .field [aria-invalid="true"] { color: #FDBA74; border-color: #FDBA74; }

/* Off-screen, not display:none, so simple bots still see it. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send-btn {
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  min-height: 52px;
  padding: 0 28px;
  color: var(--volt-ink);
  background: var(--volt);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.send-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.send-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.send-btn[disabled] { cursor: progress; opacity: 0.7; transform: none; box-shadow: 4px 4px 0 var(--ink); }

.form-status { margin-top: 16px; min-height: 1.4em; color: var(--ink-soft); }
.form-status.is-error { color: var(--ink); }

/* ---------- Sent ---------- */
.contact-sent { outline: none; }
.contact-sent h2 { margin: 0 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.contact-sent p { margin: 0 0 22px; color: var(--ink-soft); }
.contact-sent strong { color: var(--ink); overflow-wrap: anywhere; }
.sent-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--volt-ink);
  background: var(--volt);
  border: 2px solid var(--ink);
  border-radius: 16px;
}

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