/* ==========================================================================
   MBH — contact.css
   Simple two-column: enquiry form beside office and contact detail.
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 76px);
}

@media (min-width: 940px) { .contact { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.field { display: grid; gap: 8px; margin-bottom: 20px; }

.field label {
  color: var(--green-900);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--green-900);
  transition: border-color 0.4s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--accent); }

.field textarea { min-height: 140px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- AJAX forms
   Shared by the enquiry and Academy forms (assets/js/forms.js). */
.form { margin-top: 34px; }

.field__error { color: #b42318; font-size: 0.8125rem; font-weight: 500; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #b42318; }

/* Security question reads as a sentence, not caps */
.field label[data-captcha-question] { font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.5; }
.field--captcha input { max-width: 200px; }

/* Honeypot, kept off screen rather than display:none so bots still fill it */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  margin-top: 34px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bone);
  color: var(--green-900);
}

.form-notice strong { display: block; font-weight: 600; }
.form-notice p { margin: 8px 0 22px; color: var(--muted); }
.form-notice--error { border-left-color: #b42318; }
.form-notice--error + .form { margin-top: 24px; }
.form-notice[hidden] { display: none; }

.form button[disabled] { opacity: 0.6; cursor: progress; }

.offices { display: grid; gap: 0; border-top: 1px solid var(--line); }

.office { padding: 24px 0; border-bottom: 1px solid var(--line); }

.office__label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.office__name { color: var(--green-900); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.office__text { font-size: var(--fs-small); }

.contact__direct { margin-top: 30px; display: grid; gap: 10px; }
.contact__direct a { color: var(--green-900); font-size: var(--fs-body); font-weight: 500; }
.contact__direct a:hover { color: var(--accent); }