/* ==========================================================================
   Enquiry form (Contact page)

   The form is built in Forminator with its styling switched off ("none"), so
   everything it looks like is set here, in the site's own tokens. Loaded on
   pages carrying the enquiry block, and in the editor.

   Selectors are scoped under .enquiry: Forminator's markup is its own, and
   keeping these rules inside the section stops them reaching anything else.
   ========================================================================== */

/* --- Layout: form beside the contact cards ------------------------------- */
.contact-layout--form { display: grid; gap: var(--space-2xl); }

@media (min-width: 64rem) {
  .contact-layout--form {
    grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 1fr);
    align-items: start;
  }

  /* Beside the form the cards stack; the 2x2 needs the full width. */
  .contact-layout--form .contact-cards { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* The anchor lands below the sticky header, not under it. */
.enquiry {
  scroll-margin-top: calc(var(--header-h) + var(--space-m));
  text-align: left;
}

.enquiry__title { font-size: var(--step-3); margin-bottom: var(--space-2xs); }
.enquiry__intro { color: var(--text-muted); margin: 0 0 var(--space-l); }

/* --- Rows and columns ------------------------------------------------------ */
.enquiry .forminator-row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  margin: 0 0 var(--space-m);
}

@media (min-width: 40rem) {
  /* Bottom-aligned, so fields sharing a row line up when one label wraps. */
  .enquiry .forminator-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .enquiry .forminator-col-12 { grid-column: span 12; }
  .enquiry .forminator-col-8 { grid-column: span 8; }
  .enquiry .forminator-col-6 { grid-column: span 6; }
  .enquiry .forminator-col-4 { grid-column: span 4; }
  .enquiry .forminator-row-last .forminator-col { grid-column: span 12; }
}

.enquiry .forminator-row.forminator-hidden { display: none; }

/* Forminator's grid stylesheet gives each column a bottom margin on small
   screens, which doubled the space between paired fields once they stacked.
   The row's own gap does that job. The selector matches Forminator's own
   ([data-grid] included) plus .enquiry, since its stylesheet loads later and
   would win a tie. */
.enquiry .forminator-ui.forminator-custom-form[data-grid] .forminator-col:not(:last-child) { margin-bottom: 0; }

/* Same fight for the space between rows: Forminator sets 20px, or 30px on
   desktop. The theme's token spaces every field the same, stacked or not. */
.enquiry .forminator-ui.forminator-custom-form[data-grid] .forminator-row:not(.forminator-row-last) { margin-bottom: var(--space-m); }

/* --- Labels and inputs ----------------------------------------------------- */
.enquiry .forminator-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text);
}

.enquiry .forminator-required { color: inherit; margin-left: 0.1em; }

.enquiry .forminator-input,
.enquiry .forminator-textarea,
.enquiry select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--vgs-charcoal-50, var(--border));
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.enquiry .forminator-textarea { min-height: 9rem; resize: vertical; }

.enquiry select {
  appearance: none;
  padding-right: 2.5rem;
  /* Chevron in the charcoal, drawn inline so the select needs no extra file. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232e323b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.enquiry .forminator-input:hover,
.enquiry .forminator-textarea:hover,
.enquiry select:hover { border-color: var(--vgs-charcoal); }

.enquiry .forminator-input:focus-visible,
.enquiry .forminator-textarea:focus-visible,
.enquiry select:focus-visible {
  outline: none;
  border-color: var(--vgs-charcoal);
  box-shadow: 0 0 0 3px var(--vgs-silver);
}

.enquiry .forminator-description {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* --- The 24/7 note ---------------------------------------------------------- */
.enquiry .vgs-form-alert {
  max-width: none;
  margin: 0;
  padding: var(--space-s) var(--space-m);
  background: var(--surface-raised);
  border-left: 4px solid var(--vgs-charcoal);
  font-size: var(--step-0);
}

/* --- SMS consent: box beside its disclosure --------------------------------- */
.enquiry .forminator-field-consent .forminator-label {
  font-size: var(--step--2);
  color: var(--text-muted);
}

.enquiry .forminator-checkbox__wrapper {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
}

.enquiry .forminator-consent input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--vgs-charcoal);
  cursor: pointer;
}

/* Forminator's drawn box stands in for the input in its styled themes; with
   styling off the real checkbox shows, so the stand-in goes. */
.enquiry .forminator-checkbox-box { display: none; }

.enquiry .forminator-consent__label {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
}

.enquiry .forminator-consent__label a { color: var(--text); text-underline-offset: 0.2em; }

/* --- Uploads ---------------------------------------------------------------- */
.enquiry .forminator-multi-upload {
  padding: var(--space-m);
  background: var(--surface-raised);
  border: 1px dashed var(--vgs-charcoal-50, var(--border));
  border-radius: var(--radius);
}

.enquiry .forminator-input-file { font-size: var(--step--1); max-width: 100%; }

.enquiry .forminator-uploaded-files { margin: var(--space-2xs) 0 0; padding: 0; list-style: none; font-size: var(--step--1); }

/* --- Submit: the site's primary button -------------------------------------- */
.enquiry .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.enquiry .forminator-button-submit:hover { background: var(--vgs-black); transform: translateY(-2px); }
/* The site's own ring: charcoal against the snow ground. Silver read against the
   button but vanished against the page around it. */
.enquiry .forminator-button-submit:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.enquiry .forminator-button-submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* --- Validation and the response --------------------------------------------- */
.enquiry .forminator-error-message {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--error);
}

.enquiry .forminator-has_error .forminator-input,
.enquiry .forminator-has_error .forminator-textarea,
.enquiry .forminator-has_error select { border-color: var(--error); }

.enquiry .forminator-response-message:empty,
.enquiry .forminator-response-message[aria-hidden="true"] { display: none; }

.enquiry .forminator-response-message {
  margin-bottom: var(--space-m);
  padding: var(--space-m);
  border-left: 4px solid var(--vgs-charcoal);
  background: var(--surface-raised);
}

.enquiry .forminator-response-message.forminator-error { border-left-color: var(--error); }
.enquiry .forminator-response-message p { margin: 0; }
.enquiry .forminator-response-message p + p { margin-top: var(--space-2xs); }

/* The honeypot is labelled for screen readers to skip; keep it off-screen. */
.enquiry label.forminator-hidden { position: absolute; left: -9999px; }