/* contact.css: page-scoped styles for /contact (jaschahal.ca).
   Layout and the two cards only. Colours, type, buttons, fields and alerts
   all come from /styles.css and are never redefined here. The form markup
   follows the forms.js contract (.form__fields, .form__field, .form__status)
   layered on the stylesheet's .form and .field classes, so both files' rules
   apply without either being edited. Mobile first; two columns from 900px,
   the same breakpoint the rest of the site uses. */

/* ============ The two-column layout ============ */
.contact-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
  margin-bottom: clamp(52px, 8vw, 96px);
}
@media (min-width: 900px) {
  /* Form wider than the card: it is the thing people came to do. */
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 56px); }
  /* Keep the card in view while a long message is being typed. */
  .contact-card { position: sticky; top: calc(var(--bar-h) + 24px); }
}

/* ============ The form card ============ */
.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(22px, 3.5vw, 40px);
}
.contact-form-card h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 6px; }
.contact-form-card__intro { font-size: 14px; margin-bottom: 22px; }
.contact-form-card__intro .req { color: var(--danger); }

/* forms.js hides .form__fields once sent and renders into .form__status. */
.form__fields { display: grid; gap: 18px; }
/* The phone field carries a hint and the topic select beside it does not; without
   this the grid stretches the select to the taller cell's height. */
.contact-form-card .form__row { align-items: start; }
.form__status:empty { display: none; }
/* forms.js moves focus here so the result is announced; the alert's coloured
   border is the visible cue, a second ring around it would only add noise. */
.form__status:focus { outline: none; }
.form__status .alert { padding: 18px 20px; }
.alert__body { margin: 0; }
.alert__action { margin: 14px 0 0; }

/* forms.js marks a missing or bad required field on its wrapper and sets
   aria-invalid on the control (styles.css colours the border). The per-field
   message below the control is shown from that same class, so the visitor
   sees what to do beside the field, not only in the summary alert. Both
   rules carry !important because the stylesheet's [hidden] does too. */
.form__field--invalid .field__label { color: var(--danger); }
.form__field--invalid .field__error[hidden] { display: block !important; }

/* Turnstile's container: no gap on the page until the widget renders in it. */
.cf-turnstile:empty { display: none; }
.cf-turnstile { min-height: 65px; }

.form.is-sending .btn { cursor: progress; }
.form__actions { margin-top: 4px; }
.form__actions .form__note { flex: 1 1 240px; }

/* ============ The direct-contact card (navy, like the footer) ============ */
.contact-card {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: clamp(22px, 3.5vw, 36px);
}
.contact-card__title { color: #fff; font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 18px; }
.contact-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin: 18px 0 8px;
}
.contact-card__title + .contact-card__label { margin-top: 0; }
.contact-card .contact-list { margin: 0; }
.contact-card .contact-list a { color: #fff; font-size: 17px; overflow-wrap: anywhere; }
.contact-card .contact-list a:hover { color: var(--gold-soft); }
.contact-card .contact-list svg { color: var(--gold-soft); }
.contact-card .social-links a { background: rgba(255, 255, 255, 0.1); color: #fff; }
.contact-card .social-links a:hover,
.contact-card .social-links a:focus-visible { background: var(--sky); color: var(--navy); }
.contact-card__handle { font-size: 14px; margin: 10px 0 0; }
.contact-card__handle a { color: #fff; }
.contact-card__handle a:hover { color: var(--gold-soft); }
.contact-card__area {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.contact-card__area p { margin-bottom: 0.8em; }
.contact-card strong { color: #fff; }
/* The global focus ring is --sky-hover, which is too close to navy to see here. */
.contact-card :focus-visible { outline-color: var(--sky); }

/* ============ Print ============ */
@media print {
  .contact-card { background: none; color: #000; box-shadow: none; border: 1px solid #000; position: static; }
  .contact-card__title, .contact-card__label, .contact-card strong, .contact-card a,
  .contact-card .contact-list a, .contact-card__handle a { color: #000; }
  .contact-form-card { box-shadow: none; }
  .cf-turnstile, .form__actions { display: none; }
}