/*
 * contact.css: the feedback form, contact.php?g=T. Version 1 (2026-11-05).
 * Loads after atx-ui.css. The page sits inside legacy chrome (the Atx header
 * when logged in, the about.activtrax.com header when not), so these rules
 * are scoped to .contact-page and only use --atx- tokens.
 */

.contact-page {
  max-width: 44rem;
  font-family: var(--atx-font-sans);
  font-size: var(--atx-text-md);
  line-height: var(--atx-leading-normal);
  color: var(--atx-color-text);
  text-align: left;
  white-space: normal;
}

/* atx-ui gives rows and fields a display value, which beats the browser's
   own [hidden] rule. */
.contact-page [hidden] { display: none !important; }

.contact-title {
  margin: 0 0 var(--atx-space-4);
  font-family: var(--atx-font-sans);
  font-size: var(--atx-text-2xl);
  font-weight: var(--atx-weight-semibold);
  line-height: var(--atx-leading-tight);
  color: var(--atx-color-text);
}

.contact-faq {
  margin: var(--atx-space-2) 0 0;
  padding-left: var(--atx-space-5);
}
.contact-faq li {
  margin: 0 0 var(--atx-space-2);
  color: var(--atx-color-text);
  white-space: normal;
}
.contact-faq li:last-child { margin-bottom: 0; }
.contact-page a { color: var(--atx-color-link); }

.contact-note { margin: 0 0 var(--atx-space-4); }

/* Legacy page CSS styles labels and controls by element; keep the atx-ui
   look on this form. */
.contact-page .atx-label { display: block; margin: 0; font-family: var(--atx-font-sans); }
.contact-page .atx-input,
.contact-page .atx-select,
.contact-page .atx-textarea {
  box-sizing: border-box;
  max-width: none;
  margin: 0;
}

/* The reCAPTCHA box is a fixed 304px wide; let it shrink on narrow phones. */
.contact-captcha { min-height: 78px; }
@media (max-width: 359.98px) {
  .contact-captcha .g-recaptcha { transform: scale(0.9); transform-origin: 0 0; }
}