/* Contact form styles (DRAFT, not live). At switch-on this file is served at /contact/form.css (see README).
   Uses the site's colour and font variables from styles.css. Only two new colours, for error messages:
   --error on --bg is 6.2:1 and on --error-bg is 5.9:1 (WCAG AA needs 4.5:1). */
:root {
  --error: #B42318;
  --error-bg: #FDF0EE;
}

.form-page { padding: 2.25rem 0 3.5rem; }
.form-page h1 { margin-bottom: 1rem; }
.form-lead { font-size: 1.12rem; color: var(--muted); max-width: 38rem; }

.notice { background: var(--bg-alt); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem 1.1rem; }

.quote-form { margin-top: 2rem; display: grid; gap: 2.25rem; }

/* Fieldsets (the radio questions) look like the other questions */
.quote-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quote-form legend { padding: 0; margin: 0; width: 100%; }

.q { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--charcoal); }
.q.sub { font-size: 1rem; }
.q .req, .q .opt { font-family: var(--font-body); font-weight: 400; font-size: .95rem; color: var(--muted); }
.hint { margin: .25rem 0 .7rem; font-size: .98rem; color: var(--muted); }

/* Text boxes: 48px tall or more, a clear border, 16px+ text (stops phones zooming in) */
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form textarea {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--muted);
  border-radius: .55rem;
}
.quote-form textarea { min-height: 9rem; resize: vertical; }
.quote-form input:focus-visible,
.quote-form textarea:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 3px var(--glow); border-color: var(--charcoal); }

/* Radio choices: the whole box is the tap target (at least 48px tall) */
.choices { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.choice {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.25rem;
  padding: .6rem 1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: .65rem;
  cursor: pointer;
  line-height: 1.35;
}
.choice:hover { border-color: var(--muted); }
.choice input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.choice span { color: var(--ink); }
.choice small { display: block; color: var(--muted); font-size: .92rem; }
.choice:has(input:checked) { border-color: var(--accent); background: #EAF4EE; }
.choice:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 3px var(--glow); }

.subfield { margin-top: 1.4rem; }

/* Errors: red text with an "Error:" word (so colour is never the only clue), red border on the box */
.error { margin: 0 0 .6rem; padding-left: 1.7rem; position: relative; color: var(--error); font-weight: 500; }
.error::before {
  content: "!";
  position: absolute; left: 0; top: .15rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--error); color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1.2rem; text-align: center;
}
.has-error input[type="text"], .has-error input[type="email"], .has-error textarea { border-color: var(--error); }
.has-error .choice { border-color: var(--error); }
.has-error .choice:has(input:checked) { border-color: var(--accent); }

.error-summary { margin: 1.5rem 0 0; padding: 1.1rem 1.25rem; background: var(--error-bg); border: 2px solid var(--error); border-radius: .75rem; }
.error-summary h2 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--error); }
.error-summary h2::after { display: none; }
.error-summary p { margin: 0 0 .5rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--error); font-weight: 500; }
/* the site header is sticky, so leave room under it when the page scrolls to an error */
.error-summary, .quote-form input, .quote-form textarea, .quote-form fieldset { scroll-margin-top: 6.5rem; }
.error-summary:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }

/* The spam trap: off-screen, not display:none (some bots skip hidden fields), never reachable by keyboard */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-submit .button { display: block; width: 100%; min-height: 3.5rem; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 1.1rem; }
.form-submit .button[disabled] { opacity: .75; cursor: default; }
.form-submit .small { margin: .9rem 0 0; }

/* Thank-you page */
.thanks h1 { margin-bottom: 1rem; }

@media (min-width: 40rem) {
  .choices { grid-template-columns: 1fr 1fr; }
  .choices-small { grid-template-columns: 1fr 1fr 1fr; }
  .form-submit .button { display: inline-block; width: auto; min-width: 16rem; }
}