/* ================================================================
   ACENNAN — forms.css
   Shared accessible-form machinery: error summary, per-field errors,
   hints, the placeholder status message, the honeypot, and a real
   focus indicator. Extends main.css and pages.css, which already
   style .form-row, .field-label, .field-input and .form-submit-btn.

   Reuses existing brand tokens only. No new colours, and no change
   to main.css or pages.css.

   Currently loaded by: public/book.html
   public/contact.html carries an identical inline copy inside its
   <main> block. That block is closed by the /book build instruction
   §1 and by verification check 15, so it could not be switched over
   in this build. Migrating it is a one-line head change plus
   deleting the inline blocks — see the build report.
   ================================================================ */

/* ── Fieldset and legend ── */
/* .contact-fieldset is /contact's existing class name. Its markup is frozen by
   the consolidation build §2.1, so the shared rule carries both selectors
   rather than the page being renamed to match. Declarations are identical. */
.form-fieldset,
.contact-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.form-legend {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--forest);
  padding: 0;
  margin-bottom: 24px;
}

/* ── Error summary at the top of the form ── */
.form-error-summary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--oxblood);
  background: rgba(122, 46, 46, 0.07);
  border: 2px solid var(--oxblood);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 26px;
  line-height: 1.55;
}
.form-error-summary__heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--oxblood);
  margin: 0 0 10px;
  max-width: none;
}
.form-error-summary ul { list-style: none; margin: 0; padding: 0; }
.form-error-summary a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 5px 0;
  color: var(--oxblood);
  text-decoration: underline;
}

/* ── Per-field error: icon and text, never a coloured border on its own ── */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--oxblood);
  line-height: 1.5;
  margin-bottom: 7px;
}
.field-error svg { flex: none; margin-top: 2px; }

.field-input[aria-invalid="true"] { border-width: 2px; border-color: var(--oxblood); }

/* ── Hint line under a field ── */
.field-hint {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--charcoal);
  line-height: 1.5;
  margin-top: 8px;
}

.field-textarea { min-height: 170px; resize: vertical; line-height: 1.5; }

/* ── Placeholder message shown in place of submission — W-48 ── */
.form-status {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--forest);
  background: rgba(31, 58, 46, 0.07);
  border: 2px solid var(--forest);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 20px;
  line-height: 1.55;
}
.form-status a { color: var(--forest); text-decoration: underline; }

/* ── Honeypot ──
   Moved off-screen with CSS so that bots still see a real, focusable text
   input. Not a hidden input type, and not switched off with a display
   property, both of which some bots skip. */
.contact-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Visible focus indicator ──
   pages.css switches the browser indicator off on .field-input and replaces it
   with a border-colour change only, which is a colour-only signal. This
   restores a real indicator: forest on cream measures 10.86:1, well above the
   3:1 minimum. */
.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page select:focus-visible,
.contact-page textarea:focus-visible,
.contact-page [tabindex]:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}