/* ==========================================================================
   The contact page.

   Everything except the form comes from base.css and therapy.css: the hero,
   the two column split, the dark row of details. The form is the only thing on
   the site that needed new CSS, so this file is only the form.

   No colour, size, radius or duration is written by hand: every value is a
   --rw-* token.
   ========================================================================== */

/* The lead paragraph above the form is a plain .lead, which only picks up a
   bottom margin inside .tsplit__copy, so the form carries the gap itself. */
.cform { display: grid; gap: var(--rw-s-5); margin-top: var(--rw-s-7); }

/* Two short fields sit side by side once there is room for both to stay
   comfortably wider than their placeholder text. */
@media (min-width: 40rem) {
  .cform__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rw-s-5);
  }
}

.cform__field { display: grid; gap: var(--rw-s-2); }

.cform__label {
  font-family: var(--rw-font-mono);
  font-size: var(--rw-fs-mono);
  font-weight: var(--rw-w-semi);
  letter-spacing: var(--rw-ls-mono);
  text-transform: uppercase;
  color: var(--rw-text-accent);
}

/* The optional marker is the quiet half of the label, so it drops the accent
   and the emphasis rather than adding a second colour. */
.cform__opt {
  color: var(--rw-text-muted);
  font-weight: var(--rw-w-regular);
  text-transform: none;
  letter-spacing: var(--rw-ls-normal);
}

.cform__input,
.cform__select,
.cform__textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--rw-s-3) var(--rw-s-4);
  font-family: var(--rw-font-sans);
  font-size: var(--rw-fs-base);
  line-height: var(--rw-lh-normal);
  color: var(--rw-text);
  background: var(--rw-white);
  border: var(--rw-border-w) solid var(--rw-border);
  border-radius: var(--rw-r-md);
  transition: border-color var(--rw-dur-fast) var(--rw-ease);
}

.cform__textarea { min-height: 9rem; resize: vertical; }

/* A native select keeps the platform's own dropdown, which is the one thing on
   a form a phone renders better than we would. Only the shell is styled. */
.cform__select { appearance: none; padding-right: var(--rw-s-7); }

.cform__selectwrap { position: relative; }

.cform__selectwrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--rw-s-4);
  width: 0.5rem;
  height: 0.5rem;
  border-right: var(--rw-rule-w) solid var(--rw-navy);
  border-bottom: var(--rw-rule-w) solid var(--rw-navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.cform__input:focus-visible,
.cform__select:focus-visible,
.cform__textarea:focus-visible {
  outline: var(--rw-focus);
  outline-offset: 2px;
  border-color: var(--rw-navy);
}

.cform__note {
  color: var(--rw-text-muted);
  font-size: var(--rw-fs-sm);
}

/* The honeypot is a real field that a person never sees and a bot fills in.
   Hidden with clip rather than display:none, because some bots skip anything
   that is display:none and the field then catches nothing. */
.cform__pot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- the map --- */

.cmap { display: block; position: relative; border-radius: var(--rw-r-lg); overflow: hidden; }
.cmap img { display: block; width: 100%; height: auto; }

.cmap__cta {
  position: absolute;
  right: var(--rw-s-4);
  bottom: var(--rw-s-4);
  padding: var(--rw-s-2) var(--rw-s-4);
  background: var(--rw-cream);
  color: var(--rw-navy);
  border-radius: var(--rw-r-pill);
  box-shadow: var(--rw-shadow-sm);
}

.cmap__note { margin-top: var(--rw-s-3); color: var(--rw-text-muted); }