/*
 * Contact page — the form and nothing else.
 *
 * Loaded after base.css and privacy.css. The contact page reuses the privacy
 * page's quiet single-column layout, so this file only has to dress the form.
 * There were no input, textarea, label, fieldset or button styles anywhere in
 * public/styles/ before this, which is why everything here is new rather than
 * borrowed.
 *
 * DESIGN_RULES.md constraints this file honours:
 *   - squared, no soft corners; the design has no border-radius to speak of
 *   - the submit button is bright orange with ink text, never burnt or deep
 *   - visible focus everywhere (base.css supplies the outline)
 *   - WCAG AA, including the 3:1 the field borders need as non-text contrast
 */

.contact-form {
  margin-top: 2.5rem;
}

/* ---- One field ------------------------------------------------------ */

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  border: 0;
  padding: 0;
}

.contact-form__field > label,
.contact-form__topics > legend {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  padding: 0;
}

.contact-form__hint {
  font-size: 0.88rem;
  color: #4a4550;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  font: inherit;
  width: 100%;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--white);
  /* 4.28:1 against the page. WCAG wants 3:1 on the boundary of a control, and
     a field the eye cannot find is a field nobody fills in. */
  border: 2px solid #6b7889;
  border-radius: 0;
}

.contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--navy);
}

/* :user-invalid, not :invalid. Every field on this form is required, so
   :invalid would paint the whole form red before the visitor has typed a
   character. :user-invalid waits until they have actually tried. Browsers
   without it simply show no colour, which is the safe way to fail. */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: var(--deep-orange);
}

/* ---- The topic radios ----------------------------------------------- */

/* Left as a plain block. A <legend> inside a flex or grid fieldset is a
   rendering corner that browsers have disagreed about for years, and there is
   nothing to gain here by standing on it. */
.contact-form__topics {
  display: block;
  margin: 0 0 1.6rem;
  border: 0;
  padding: 0;
}

.contact-form__topics > legend {
  margin-bottom: 0.4rem;
}

.contact-form__topic {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.98rem;
  color: #2e2933;
  cursor: pointer;
}

.contact-form__topic input {
  /* Bigger than the browser default, which is a small target on a phone. */
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--blue);
  flex: none;
}

/* ---- Submit ---------------------------------------------------------- */

/* The site's .button lives in site.css, which this page deliberately does not
   load: that file is the homepage layout and would be dead weight here. The
   rules are copied rather than shared so the page stays cheap. If the button
   style changes there, change it here too. */
.contact-form__actions {
  margin: 2rem 0 0;
}

.contact-form button[type="submit"] {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 0;
}

.contact-form button[type="submit"]:hover {
  background: #e88a12;
}

/* ---- The honeypot ---------------------------------------------------- */

/* Out of sight, out of the tab order, and aria-hidden in the markup, so no
   visitor can reach it by any route. A bot filling in every field it finds
   trips it, and src/index.js drops the submission. */
.contact-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Around the form -------------------------------------------------- */

.contact__book {
  margin-bottom: 0.5rem;
}

/* Unhidden by src/index.js when a submission is rejected. The [hidden] rule is
   spelled out because a display property elsewhere would otherwise win and the
   page would show an error to everyone who ever loads it. */
.contact__error {
  display: block;
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--deep-orange);
  background: #fdf0e6;
  color: var(--ink);
}

.contact__error[hidden] {
  display: none;
}

.contact__privacy {
  margin-top: 2rem;
  font-size: 0.9rem;
}

.contact__email {
  font-size: 0.9rem;
}