/*
 * contact-form.css — the contact form's own rules (DECISIONS D-15). Not from
 * live: live's form was commented out and had no styling beyond the template's
 * tables.css / forms.css, which still apply. Imported by ContactForm.astro, so
 * it ships only on /contact.html. Every class is fus- prefixed; nothing here
 * targets the template's own selectors except inside `.fus-contact`.
 */

/* Reserve Turnstile's 300x65 "normal" widget (and its 150x140 "compact" one
   where the column is narrower than 300px — the script picks the size). */
.fus-turnstile {
  min-height: 65px;
  margin: 10px 0 0;
}

/* Clipped to nothing in place — takes no space, never seen, never tabbed to.
   Not `left:-9999px`: an off-screen box is a horizontal-overflow source on
   phones (scripts/check-responsive.mjs measures every box). */
.fus-honeypot,
.fus-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Contact Form 7's own response-panel rules and state colours (its default
   stylesheet; this site has no theme override to take colours from). Hidden
   until there is an outcome to show; "Sending…" is status, not an outcome. */
.fus-response {
  margin: 2em 0.5em 1em;
  padding: 0.2em 1em;
  border: 2px solid #00a0d2;
  font-size: 16px;
  line-height: 22px;
}
form.fus-contact[data-status="init"] .fus-response,
form.fus-contact[data-status="submitting"] .fus-response {
  display: none;
}
form.fus-contact[data-status="sent"] .fus-response { border-color: #46b450; }
form.fus-contact[data-status="failed"] .fus-response { border-color: #dc3232; }
form.fus-contact[data-status="invalid"] .fus-response,
form.fus-contact[data-status="unaccepted"] .fus-response { border-color: #ffb900; }

/* Below the desktop frame (DECISIONS D-14): the size="50" inputs and
   cols="40" textarea are wider than a phone's column. A percentage width
   cannot cap them inside an auto-layout table (the cell sizes to its content),
   and `table-layout: fixed` splits the cells in half (the heading row's
   colspan="2" defines two equal columns) — so on narrow screens the table is
   laid out as plain blocks, keeping its own border, and the controls fill it. */
@media (max-width: 959px) {
  .fus-contact table,
  .fus-contact tbody,
  .fus-contact tr,
  .fus-contact td {
    display: block;
    width: auto;
  }
  /* tables.css borders each cell's sides; as blocks they would double the
     table's own border. */
  .fus-contact td {
    border-left: 0;
    border-right: 0;
  }
  .fus-contact input[type="text"],
  .fus-contact input[type="email"],
  .fus-contact textarea {
    width: 100%;
    box-sizing: border-box;
  }
}
/* The cell drops under the normal widget's 300px below a 384px viewport
   (16px gutters + 20px #intro padding + 1px border + 5px cell padding a side),
   which is where the script switches to the 150x140 compact widget. */
@media (max-width: 383px) {
  .fus-turnstile { min-height: 140px; }
}