/* 06-contact-form.css — the home contact section: intro, mail link and the form
   (fields, select, required/optional marks, job notice, submit, status, privacy
   note, overseas-transfer consent), then the 800px stack of .contact-wrap. Its
   @container shell copy is in 13. */

/* ── Contact form ───────────────────────────────────────── */
.contact-intro-title {
  font-family: var(--display);
  font-size: var(--text-title);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.contact-intro { display: flex; flex-direction: column; gap: var(--item-space); }
.contact-mail-link {
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--ink-soft);
  text-decoration: none;
  width: fit-content;
  transition: color 200ms;
}
.contact-mail-link:hover { color: var(--ink); opacity: 1; }

.contact-form { display: flex; flex-direction: column; gap: var(--item-space); color-scheme: dark; }
.contact-form-fields { display: flex; flex-direction: column; gap: var(--item-space); }

/* select — same hairline field as the inputs, with our own arrow so the
   native control does not bring its own chrome onto the dark page */
.contact-form-select-wrap { position: relative; display: block; }
.contact-form-select-wrap select { appearance: none; padding-right: var(--sp-6); cursor: pointer; }
.contact-form-select-wrap::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.contact-form-optional { color: var(--muted); letter-spacing: 0.04em; }
/* Required marker. Only the asterisk is coloured — tinting the whole label
   would make four of the eight rows shout, which is the opposite of the point:
   the eye should catch the marks, not the words. aria-hidden in the markup,
   since the inputs already carry `required` for assistive tech. */
.contact-form-required { color: var(--required); }

/* the answer job applicants came for, in place of the fields */
.contact-form-job-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--item-space);
  border: 1px solid var(--rule);
  padding: var(--block-space);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink-soft);
}
.contact-form-row { display: flex; flex-direction: column; gap: var(--tight-space); }
.contact-form-label {
  font-family: var(--sans);
  font-size: var(--text-label);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.contact-form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--muted-dark);   /* the field's only edge: 3:1, not a --rule hairline */
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  padding: var(--sp-1) 0 var(--sp-2);
  outline: none;
  width: 100%;
  transition: border-color 200ms;
  -webkit-appearance: none;
}
.contact-form-control:focus { border-bottom-color: var(--accent); }
.contact-form-control::placeholder { color: var(--muted); }
.contact-form-control--textarea {
  resize: none;
  min-height: 4.5rem;
  line-height: 1.5;
}
.contact-form-actions {
  display: flex;
  align-items: center;
  gap: var(--block-space);
  margin-top: var(--tight-space);
  flex-wrap: wrap;
}
.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  letter-spacing: 0.06em;
  padding: var(--button-padding);
  cursor: pointer;
  transition: border-color 220ms, color 220ms;
}
.contact-form-submit:hover { border-color: var(--accent); color: var(--accent); }
.contact-form-submit:disabled { opacity: 0.45; cursor: default; }
.contact-form-submit-arrow { transition: transform 220ms; }
.contact-form-submit:hover .contact-form-submit-arrow { transform: translateX(4px); }
.contact-form-status {
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  min-height: 1.2em;
  color: var(--accent);
}
.contact-form-privacy {
  flex-basis: 100%;
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--muted);
}
.contact-form-privacy a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
/* overseas-transfer consent, shown for "Something else" enquiries only */
.contact-form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: start;
  font-family: var(--sans);
  font-size: var(--text-label);
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.contact-form-consent input { margin-top: 0.2em; accent-color: var(--ink); }
.contact-form-status.is-error { color: #FF5F57; }

@media (max-width: 800px) {
  .contact-wrap { grid-template-columns: 1fr; }
}
/* iOS Safari zooms the page into any field set under 16px when it takes focus.
   Keyed to the device — phone widths, and touch screens held sideways — so no
   @container mirror in 13. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .contact-form-control { font-size: 1rem; }
}