/*
 * ws-form.css -- the form's own stylesheet, and the one place the
 * honeypot is guaranteed to be hidden.
 *
 * WHY IT EXISTS. On the takecareofmy canary (2026-09-24) the contact
 * page rendered ws_form_traps() but no stylesheet it loaded defined
 * .hp-field: a scraped site never loads this template's structure.css.
 * "Do not fill this in" showed with a text box, and a visitor who filled
 * it was classified as a bot, thanked, and never delivered. The generic
 * redisplay page in form-post.php had the same hole: it loads no
 * stylesheet at all.
 *
 * SO: every page that renders ws_form_traps() links THIS FILE (or any
 * stylesheet whose .hp-field rule hides it). validate.php check
 * `honeypot-unstyled` FAILs a page that does not.
 *
 * GENERALISED FROM THE CANARY'S assets/css/ws-form.css: no site's tokens
 * or colours. Colours come from this template's tokens.css names, each
 * with a neutral fallback that is used wherever tokens.css is not loaded
 * (the redisplay page, a scraped site). Every fallback is contrast-checked
 * on white: text 14.76:1, border and muted 7.53:1, focus 6.70:1, error
 * 6.47:1 (5.91:1 on its tinted box).
 *
 * A SCRAPED SITE KEEPS ITS OWN FORM MARKUP. Take this file for the
 * honeypot rule and the redisplay page; style the site's own scraped form
 * classes in the site's own stylesheet (the canary mapped its tcom-form__*
 * classes that way). Do not rename a live form's classes to match this.
 */

/* -- The honeypot -------------------------------------------------------
 * Hidden by THIS rule, by selector -- 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. Off-screen rather than
 * 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. Identical to the
 * rule in structure.css, on purpose: a page that loads either is safe. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Emitted by the redisplay markup for "(required)". */
.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 template's form markup (form-post.php redisplay) ---------------- */
.ws-form {
  position: relative;
  max-width: 40rem;
}

.ws-form__summary {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  color: var(--color-error, #B91C1C);
  background: var(--color-error-bg, #FEF2F2);
  border: 1px solid var(--color-error, #B91C1C);
  border-radius: var(--radius, 4px);
}

.ws-form__field {
  margin: 0 0 1.25rem;
}

/* The markup keeps a <br> after each label and before each message, so
 * it still reads correctly with no stylesheet at all; with one, the block
 * layout makes them redundant. */
.ws-form__field > br {
  display: none;
}

.ws-form__label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--color-text, #1F2933);
}

.ws-form__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: max(16px, 1rem); /* 16px stops iOS Safari zooming on focus */
  line-height: 1.5;
  color: var(--color-text, #1F2933);
  background: #fff;
  /* A field's edge is a UI boundary (WCAG 1.4.11): at least 3:1. */
  border: 1px solid var(--color-border, #4A5568);
  border-radius: var(--radius, 4px);
}

textarea.ws-form__input {
  min-height: 150px;
  resize: vertical;
}

/* A real outline, never removed: it survives forced-colors mode, where a
 * box-shadow ring is dropped. */
.ws-form__input:focus {
  outline: 2px solid var(--color-focus, #1D4ED8);
  outline-offset: 2px;
}

.ws-form__input[aria-invalid="true"] {
  border-color: var(--color-error, #B91C1C);
}

.ws-form__error {
  display: block;
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--color-error, #B91C1C);
}

.ws-form__submit {
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}