/* ==========================================================================
   11 Plus Blocks, /contact-us/ only
   --------------------------------------------------------------------------
   The shared stylesheet has no form vocabulary, because until now the site had
   no form. Rather than edit a file three other pages are being written against
   at the same time, the four controls this page needs live here, prefixed with
   `contact-` so nothing can collide with a later, shared version.

   Every value is a token. There is no colour, radius or duration in this file
   that is not already in tokens.css, so light and dark both follow for free.
   When forms exist on more than one page, lift this wholesale into
   components.css and drop the prefix.
   ========================================================================== */

.contact-form {
  display: grid;
  gap: var(--space-m);
}

/* Name and email sit side by side once there is room for two comfortable
   fields. Below that they stack, because a 40-character input split in half is
   worse than two full-width ones. */
.contact-form__pair {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 34rem) {
  .contact-form__pair { grid-template-columns: 1fr 1fr; }
}

.contact-field {
  display: grid;
  gap: var(--space-3xs);
}

.contact-field__label {
  font-family: var(--font-label);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--deep);
  line-height: var(--leading-snug);
}

.contact-field__hint {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0;
}

/* The controls themselves.

   The field takes `--ground` while the card around it takes `--surface`, so it
   reads as a well sunk into the card. Painting it `--surface` too left the
   inputs invisible against their own card in dark, where the only thing
   separating them was a 14%-opacity hairline. */
.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  padding: 0.75em 0.95em;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-row);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.contact-input:hover,
.contact-select:hover,
.contact-textarea:hover { border-color: var(--lilac); }

/* No focus ring of its own: base.css already draws one purple ring for the
   whole site, and a second one inside it just looks like a mistake. */

.contact-textarea {
  min-height: 11rem;
  line-height: var(--leading-body);
  resize: vertical;
}

/* The select loses its native arrow so the two-line chevron from the FAQ
   accordion can be reused, and the control stops being the one thing on the
   page wearing the operating system's clothes. */
.contact-select-wrap { position: relative; }

.contact-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75em;
  cursor: pointer;
}

.contact-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1em;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--purple);
  border-bottom: 2.5px solid var(--purple);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

/* The honeypot. Off-screen rather than display:none, because a bot filling
   forms in reads the DOM and skips what is switched off. Hidden from assistive
   technology and from the tab order, so nobody who cannot see it can reach it
   either. */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}