/* Contact page (contact.html). Everything else comes from design-system.css. Mobile-first.
   Layout after Mobbin references (Maxima Therapy, Oevra, Savor, Fiasco): a short statement and the direct email on the left, the form on the
   right from 64em, stacked on phones. The form sits on the page with no panel; the fields keep their 2px control border. */

.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7) var(--space-8); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.contact__crumbs { margin-bottom: var(--space-5); }
.contact__title { margin-bottom: var(--space-4); }
.contact__lead { max-width: 30ch; margin-bottom: var(--space-6); color: var(--text); font: var(--fw-regular) var(--fs-600) / var(--lh-snug) var(--font-heading); }
.contact__subtitle { margin-bottom: var(--space-2); font-size: var(--fs-600); line-height: var(--lh-snug); }
.contact__email { margin-bottom: var(--space-4); font-size: var(--fs-500); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.contact__note { max-width: 40ch; margin: 0; color: var(--text-muted); }
@media (min-width: 40em) {
  .contact__lead { font-size: var(--fs-700); }
}
@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

/* The form: one column, labels above the fields, an error line under a field that needs fixing */
.contact-form { display: grid; gap: var(--space-5); max-width: 36rem; }
.contact-form[hidden] { display: none; }   /* js/contact.js hides the form after a valid send; display: grid above would otherwise win */
.contact-form__title { margin: 0; font-size: var(--fs-700); }
.contact-form__label { display: block; margin-bottom: var(--space-1); }
.contact-form__message { min-height: 9rem; resize: vertical; }
.contact-form__hint { margin: 0; color: var(--text-muted); font-size: var(--fs-300); }
.contact-form__submit { justify-self: start; }
.contact-form__success { padding: var(--space-5); background: var(--cream-deep); border-radius: var(--radius-l); }
.contact-form__success-title { margin-bottom: var(--space-2); font-size: var(--fs-600); }
.contact-form__success-text { margin: 0; }

/* Fluent Forms compatibility. The plugin prints its own markup, which can carry our class names only on the inputs (class "field"), so these rules are scoped
   under .contact and name the plugin's classes. This is a documented exception to the single-class rule, like the AAWP block in design-system.css. The plugin's
   own stylesheets are not loaded on this page (see functions.php). */
.contact .fluentform { max-width: 36rem; }
.contact .frm-fluent-form fieldset { display: grid; gap: var(--space-5); }
.contact .ff-el-input--label label { display: block; margin-bottom: var(--space-1); }
.contact .ff-el-is-required label::after { content: " *"; }
.contact .ff-el-form-control { display: block; width: 100%; }
.contact .ff-el-is-error .ff-el-form-control { border-color: var(--error); }
.contact .error { margin: var(--space-1) 0 0; color: var(--error); font-size: var(--fs-300); }
.contact .ff_submit_btn_wrapper { display: flex; justify-content: flex-start; }
.contact .ff-message-success { padding: var(--space-5); background: var(--cream-deep); border-radius: var(--radius-l); }
.contact .ff-message-success h2 { margin-bottom: var(--space-2); font-size: var(--fs-600); }
.contact .ff-message-success p { margin: 0; }
.contact [aria-invalid="true"] { border-color: var(--error); }   /* a field the validation rejected; the plugin sets this attribute */