/*
 * site-form.css -- this site's own contact form, for every class its markup
 * emits.
 *
 * MOVED HERE, UNCHANGED, when this site took ws-template 3.2 (run
 * ws006-forward-on). Until then these rules were this site's
 * assets/css/ws-form.css. Template 3.2 ships its own ws-form.css (the
 * honeypot rule, .sr-only and the form-post.php redisplay page's .ws-form
 * classes), copied byte-identical, and says a scraped site styles its own
 * form classes in its own stylesheet. Every rule below is the old file's,
 * byte for byte; only this comment is new. contact.php links this file
 * right after ws-form.css, so the rules cascade exactly as before: the two
 * files share only .hp-field and .sr-only, with identical declarations.
 *
 * WHY THIS FILE EXISTS. The scraped theme stylesheets carry no rules for
 * the tcom-form__* classes (tcom-components.css has only __success and
 * __error-message), so on staging 00002 every label, input, select and
 * textarea rendered as a browser default -- and the honeypot, which had no
 * rule anywhere, showed "Do not fill this in" with a text box. A visitor
 * who filled it was thanked and never delivered.
 *
 * WHERE THE LOOK COMES FROM. Production's /contact.html is the same scrape
 * and carries no form rules either, so the original form's own CSS is not
 * recoverable. What the scrape DOES carry is the site's design system, and
 * everything below is built from it: the :root tokens and the .tcom-btn
 * shape in tcom-master-styles.css (4px radius, 48px min height, Montserrat
 * on controls), and the error colours of .tcom-form__error-message in
 * tcom-components.css. No new colour is introduced.
 *
 * Loaded by contact.php in all three of its states (form, errors, call-us)
 * with a root-absolute href, so it resolves from any URL that renders it.
 */

/* -- The honeypot -------------------------------------------------------
 * Hidden by THIS rule, by selector, and by nothing else: not an inline
 * style, not the hidden attribute. The field must stay in the form and
 * submit with it -- a bot fills it and is caught; a person never sees it.
 * Copied verbatim from ws-template assets/css/structure.css: off-screen,
 * not display:none, because some bots skip display:none inputs. The
 * markup (includes/form.php) adds aria-hidden and tabindex="-1" so a
 * screen-reader or keyboard user never meets it either. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Emitted by the template's own redisplay markup (form-post.php). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- The form ----------------------------------------------------------- */
.tcom-form {
  position: relative;
  max-width: 100%;
}

.tcom-form--full {
  width: 100%;
}

.tcom-form__group {
  margin-bottom: 1.5rem;
}

/* The scrape left a <br> between every label and its control, and inside
 * the submit button; with block labels they only add empty lines. */
.tcom-form__group > br,
.tcom-form .tcom-btn br {
  display: none;
}

.tcom-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tcom-deep-blue);
}

/* #C53030, the scrape's error red: 5.47:1 on white. The brand orange is
 * 2.84:1, too faint for a marker that carries meaning. */
.tcom-form__label--required::after {
  content: " *";
  color: #C53030;
}

.tcom-form__input,
.tcom-form__select,
.tcom-form__textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: max(16px, 1rem); /* 16px stops iOS Safari zooming on focus */
  line-height: 1.5;
  color: var(--tcom-deep-blue);
  background: #fff;
  /* A field's edge is a UI boundary: WCAG 1.4.11 wants 3:1 against the
   * white page. --tcom-neutral-gray is 7.53:1. */
  border: 1px solid var(--tcom-neutral-gray);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tcom-form__textarea {
  min-height: 150px;
  resize: vertical;
}

/* 0.85 of --tcom-neutral-gray renders #656F7F: 5.08:1, readable, and
 * still lighter than typed text so it does not look like an answer. */
.tcom-form__input::placeholder,
.tcom-form__textarea::placeholder {
  color: var(--tcom-neutral-gray);
  opacity: 0.85;
}

/* The focus ring is a real OUTLINE, never removed: it survives Windows
 * High Contrast / forced-colors, where box-shadow is dropped. Deep blue
 * is 12.14:1 on white. */
.tcom-form__input:focus,
.tcom-form__select:focus,
.tcom-form__textarea:focus {
  outline: 2px solid var(--tcom-deep-blue);
  outline-offset: 2px;
  border-color: var(--tcom-trust-teal);
}

.tcom-form__input[aria-invalid="true"],
.tcom-form__select[aria-invalid="true"],
.tcom-form__textarea[aria-invalid="true"] {
  border-color: #C53030;
}

.tcom-form__help {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--tcom-neutral-gray);
}

/* The per-field message on a redisplay. Colour from the scrape's own
 * .tcom-form__error-message. */
.tcom-form__error {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #C53030;
}

/* The summary box above a redisplayed form reuses the scrape's rule
 * (.tcom-form__error-message, tcom-components.css); only its contents
 * need spacing. */
.tcom-form__error-message h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: inherit;
}

.tcom-form__error-message p {
  margin: 0;
}

/* The submit button. .tcom-btn and --primary come from the theme;
 * --lg has no rule anywhere in the scrape. */
.tcom-btn--lg {
  padding: 16px 40px;
  font-size: 1.125rem;
}

/* The First/Last name row is an inline two-column grid in the scraped
 * markup; on a phone two 48px-high columns are too narrow to type in. */
@media (max-width: 600px) {
  .tcom-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}