/* Enquiry form — §7.
 *
 * Reasons on the left, form on the right, telephone under the reasons. The
 * plugin brings its own stylesheet; what is here corrects it back into this
 * system rather than restyling it — square corners, the theme's focus ring,
 * the theme's navy button.
 */

.pl-formblock__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  .pl-formblock__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

.pl-formblock__label {
  margin-bottom: var(--sp-2);
}

.pl-formblock__title {
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 18ch;
  margin: 0 0 var(--sp-3);
}

.pl-formblock__text {
  max-width: 44ch;
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

.pl-formblock__contacts {
  border-top: var(--rule) solid var(--c-rule);
  padding-top: var(--sp-3);
  gap: var(--sp-2);
}

.pl-formblock__phone {
  font-size: var(--step-1);
}

/* Somebody on a phone who would rather ring than type has to be able to hit the
 * number. These were 21 to 26px — a link in a list inherits its line height and
 * nothing else, and the 44px minimum does not apply itself. */
.pl-formblock__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.pl-formblock__missing {
  border: var(--rule) solid var(--c-rule);
  padding: var(--sp-3);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* ------------------------------------------------- the plugin's markup  */
/* The form is registered with `form-style: none`, so Forminator's own
 * stylesheet never loads. That is deliberate — the page is already 2 KB over
 * the CSS budget with the plugin's scripts on it (C34) — but it means the
 * layout is ours to supply. Without it every field collapsed to 50px, because
 * Forminator drops all twelve fields into one flex row and its column widths
 * live in the stylesheet we declined.
 *
 * So: the row is a two-column grid and a field spans one column, or both when
 * the plugin marked it full width. Same proportions Forminator would have
 * given, in eleven lines rather than a stylesheet. */
.pl-formblock .forminator-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 40rem) {
  .pl-formblock .forminator-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* min-width:0 or a long placeholder pushes its column wider than its share and
 * the grid stops being two equal halves. */
.pl-formblock .forminator-col {
  min-width: 0;
}

.pl-formblock .forminator-col-12 {
  grid-column: 1 / -1;
}

.pl-formblock .forminator-input,
.pl-formblock .forminator-textarea,
.pl-formblock select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2);
}

.pl-formblock .forminator-label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Radios and the consent tick: the control and its words on one line, with a
 * target big enough to hit — 13px of checkbox is not a tap target. */
.pl-formblock .forminator-radio,
.pl-formblock .forminator-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 2.75rem;
  cursor: pointer;
}

.pl-formblock .forminator-field-radio [role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}

.pl-formblock .forminator-field-radio [role="radiogroup"] > .forminator-label {
  flex: 1 0 100%;
}

.pl-formblock input[type="radio"],
.pl-formblock input[type="checkbox"] {
  accent-color: var(--c-text);
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* The consent line is a sentence, not a label: it stays sentence case and keeps
 * its measure. */
.pl-formblock .forminator-field-consent .forminator-checkbox {
  align-items: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 52ch;
}

.pl-formblock .forminator-error-message {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-text);
}

/* Zero radius is immutable in this system and a form control is not an
 * exception — it is where a stray radius is most visible, eight times over. */
.pl-formblock .forminator-input,
.pl-formblock .forminator-textarea,
.pl-formblock select,
.pl-formblock .forminator-button {
  border-radius: var(--radius) !important;
  font-family: var(--font-text) !important;
  font-size: var(--step-0) !important;
}

.pl-formblock .forminator-input,
.pl-formblock .forminator-textarea,
.pl-formblock select {
  border: var(--rule) solid var(--c-text) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
}

/* The focus ring is navy, never amber — amber is a safety state and nothing
 * else, and a focus ring is the one control that must not look like a warning. */
.pl-formblock .forminator-input:focus,
.pl-formblock .forminator-textarea:focus,
.pl-formblock select:focus {
  outline: 2px solid var(--c-focus) !important;
  outline-offset: 1px;
}

/* What buttons.min.css was doing for us before it was dropped (inc/forms.php).
 * Three properties, eight kilobytes. */
.pl-formblock .forminator-button {
  appearance: none;
  border: 0;
  cursor: pointer;
}

.pl-formblock .forminator-button-submit {
  background: var(--c-btn-bg) !important;
  color: var(--c-btn-text) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  min-height: 2.75rem;
  font-weight: 600 !important;
}

.pl-formblock .forminator-button-submit:hover {
  background: var(--c-btn-bg-hover) !important;
}

.pl-formblock .forminator-label {
  color: var(--c-text) !important;
  font-family: var(--font-text) !important;
}

.pl-formblock__reply {
  margin-top: var(--sp-2);
  font-size: 0.75rem;
  line-height: 1.7;
  max-width: 34ch;
}

/* ------------------------------------------------- the hand-built form  */
/* No plugin markup here, so no !important and no overrides — the theme's own
 * controls, styled once. C34: this is what a multi-step form costs when it is
 * built out of page loads instead of a bundle. */
.pl-quote__fields {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 40rem) {
  .pl-quote__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-quote__field--wide {
    grid-column: 1 / -1;
  }
}

 /* Sentence case, not the site's uppercase section label. Fourteen
  * letter-spaced capitals down a form reads as shouting, and a label is the
  * quietest thing on a page — it names a box, it does not announce a section. */
.pl-quote__field label.label,
.pl-quote__field legend.label {
  display: block;
  margin-bottom: var(--sp-1);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
}

.pl-quote__field input[type="text"],
.pl-quote__field input[type="email"],
.pl-quote__field input[type="tel"],
.pl-quote__field input[type="number"],
.pl-quote__field select,
.pl-quote__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-2);
  font-family: var(--font-text);
  font-size: var(--step-0);
  color: var(--c-text);
  background: var(--c-surface);
  border: var(--rule) solid var(--c-text);
  border-radius: var(--radius);
}

.pl-quote__field input[type="number"] {
  font-family: var(--font-mono);
}

.pl-quote__field fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.pl-quote__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}

.pl-quote__choice,
.pl-quote__consent {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 2.75rem;
  cursor: pointer;
}

.pl-quote__consent {
  align-items: flex-start;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pl-quote input[type="radio"],
.pl-quote input[type="checkbox"] {
  accent-color: var(--c-text);
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.pl-quote__step,
.pl-quote__attached {
  font-size: 0.75rem;
  margin-bottom: var(--sp-3);
}

.pl-quote__attached {
  border: var(--rule) solid var(--c-rule);
  padding: var(--sp-2);
  line-height: 1.7;
}

.pl-quote__summary {
  border: var(--rule) solid var(--c-text);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.pl-quote__error {
  margin-top: var(--sp-1);
  font-size: 0.75rem;
}

.pl-quote__note {
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
}

.pl-quote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}

.pl-quote__reply {
  font-size: 0.75rem;
  max-width: 30ch;
  line-height: 1.7;
}

/* Off-screen rather than display:none — a bot reading the DOM fills what it
 * can see, and display:none is the first thing they learn to skip. */
.pl-quote__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pl-quote__thanks {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 22ch;
  margin: var(--sp-1) 0 var(--sp-2);
}

.pl-quote__ref {
  margin-top: var(--sp-3);
}

.pl-formblock__help {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--rule) solid var(--c-rule);
  font-size: 0.9375rem;
}

.pl-formblock__help a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}