/* ==========================================================================
   Forminator re-skin — makes the two Forminator-rendered forms (contact
   enquiry, insights subscribe) match the static theme's `.form` /
   `.subscribe__form` / `.field` / `.btn` / `.route-chip` look.

   Selectors below are copied verbatim from a real rendered form (via
   `wp eval 'echo do_shortcode("[forminator_form id=\"…\"]");'` against the
   forms this theme's `ayesha-core` plugin creates — see
   includes/class-forminator.php in the ayesha-core plugin), NOT guessed:

     <form class="form forminator-ui forminator-custom-form forminator-custom-form-{id} forminator_ajax" data-design="none" …>
       <div class="forminator-response-message forminator-error">…</div>
       <div class="forminator-row">
         <div class="forminator-field-radio forminator-col forminator-col-12">
           <div role="radiogroup" class="forminator-field">
             <span class="forminator-label">Nature of enquiry <span class="forminator-required">*</span></span>
             <label class="forminator-radio forminator-radio-inline">
               <input type="radio" name="name-1" value="arbitration" />
               <span class="forminator-radio-bullet"></span>
               <span class="forminator-radio-label">Arbitration</span>
             </label>
             …
           </div>
         </div>
       </div>
       <div class="forminator-row">
         <div class="forminator-field-text forminator-col forminator-col-6">
           <div class="forminator-field">
             <label class="forminator-label">Name <span class="forminator-required">*</span></label>
             <input class="forminator-input forminator-name--field" />
           </div>
         </div>
         <div class="forminator-field-email forminator-col forminator-col-6">…</div>
       </div>
       <div class="forminator-row"><div class="forminator-field-textarea …"><textarea class="forminator-textarea">…</div></div>
       <div class="forminator-row forminator-row-last">
         <div class="forminator-col"><div class="forminator-field">
           <button class="forminator-button forminator-button-submit">Send enquiry</button>
         </div></div>
       </div>
       <label class="forminator-hidden">…honeypot…</label>
     </form>

   Everything is scoped under `.forminator-custom-form` so this file can
   never leak into wp-admin (the block editor / Forminator's own builder
   markup does not carry that class in the front-end context this file is
   enqueued in).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base reset — 'form-style' is saved as 'none' on both forms (see
   class-forminator.php), so Forminator's own generated per-form CSS
   (`forminator-module-css-{id}`) is already near-empty; this just makes sure
   nothing from forminator-utilities.min.css (spacing/box utility classes)
   leaks an unwanted box model onto the wrapper.
   -------------------------------------------------------------------------- */
.forminator-custom-form {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
}

.forminator-custom-form .forminator-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 28px;
}

.forminator-custom-form .forminator-row.forminator-row-last {
  margin-bottom: 0;
}

.forminator-custom-form .forminator-col {
  flex: 1 1 0;
  min-width: 0;
}

/* Question label above the radio chips ("Nature of enquiry") — matches
   contact.html's <span class="eyebrow">Nature of enquiry</span>.
   The label is a flex sibling of the radio <label>s inside the same
   [role="radiogroup"] flex row below, so it needs flex-basis: 100% to
   force a line break — otherwise it sits inline before the first chip. */
.forminator-custom-form .forminator-field-radio > .forminator-field > .forminator-label {
  flex: 0 0 100%;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-red);
}

/* contact.html's static markup has no required-field asterisks — hide
   Forminator's to match it exactly. */
.forminator-custom-form .forminator-required {
  display: none;
}

/* --------------------------------------------------------------------------
   Radio "route chips" — mirrors .route-chips / .route-chip / .route-chip.is-active
   -------------------------------------------------------------------------- */
.forminator-custom-form [role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.forminator-custom-form .forminator-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid #D8CCB8;
  background: var(--as-white);
  color: var(--as-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.forminator-custom-form .forminator-radio:hover {
  border-color: var(--as-ink);
}

/* Forminator radios have no built-in ":checked" label state class, so we
   drive the "chip" active look off the input's own :checked pseudo-class. */
.forminator-custom-form .forminator-radio:has(input:checked) {
  background: var(--as-red);
  border-color: var(--as-red);
  color: var(--as-white);
}

/* Executive / Board & Governance use the green accent (FIELD-CONTRACT §8 /
   contact.html's `.route-chip--green`). No per-value class hook exists on
   Forminator's radio wrapper, so this targets the option value directly —
   the pragmatic attribute-selector fallback called out in the brief. */
.forminator-custom-form .forminator-radio:has(input[value="executive"]:checked),
.forminator-custom-form .forminator-radio:has(input[value="board"]:checked) {
  background: var(--as-green);
  border-color: var(--as-green);
}

.forminator-custom-form .forminator-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.forminator-custom-form .forminator-radio-bullet {
  display: none;
}

.forminator-custom-form .forminator-radio-label {
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Text / email / textarea — mirrors .field (underline style, no boxes)
   -------------------------------------------------------------------------- */
.forminator-custom-form .forminator-field-text .forminator-field,
.forminator-custom-form .forminator-field-email .forminator-field,
.forminator-custom-form .forminator-field-textarea .forminator-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forminator-custom-form .forminator-field-text .forminator-label,
.forminator-custom-form .forminator-field-email .forminator-label,
.forminator-custom-form .forminator-field-textarea .forminator-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-body);
}

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--as-ink);
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--as-ink);
  transition: border-color .2s;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
  border-bottom-color: var(--as-red);
}

.forminator-custom-form .forminator-textarea {
  resize: vertical;
  min-height: 140px;
}

/* --------------------------------------------------------------------------
   Submit button — mirrors .btn.btn--red.btn--wide, arrow reproduced via
   ::after since Forminator's submit button only takes plain text.
   -------------------------------------------------------------------------- */
.forminator-custom-form .forminator-button-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 21px 26px;
  border: 1px solid var(--as-red);
  background: var(--as-red);
  color: var(--as-white);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.forminator-custom-form .forminator-button-submit::after {
  content: "\2192";
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.forminator-custom-form .forminator-button-submit:hover {
  background: var(--as-red-dark);
  border-color: var(--as-red-dark);
}

/* --------------------------------------------------------------------------
   Response / status messages — mirrors .form__status
   -------------------------------------------------------------------------- */
.forminator-custom-form .forminator-response-message {
  margin: 20px 0 0;
  font-size: 15px;
  min-height: 1.6em;
  color: var(--as-green);
}

.forminator-custom-form .forminator-response-message.forminator-error {
  color: var(--as-red);
}

/* Forminator prints this message div above the first row (unlike
   contact.html's `.form__status`, which sits below the submit button);
   collapse it while empty so it doesn't add a phantom gap above the
   "Nature of enquiry" chips. */
.forminator-custom-form .forminator-response-message[aria-hidden="true"] {
  margin: 0;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Contact form (.form) specifics
   -------------------------------------------------------------------------- */
.forminator-custom-form.form .forminator-button-submit {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Subscribe form (.subscribe__form) — single underlined field + button,
   mirrors the static markup's flush-bottom-border row (insights.html).
   -------------------------------------------------------------------------- */
.forminator-custom-form.subscribe__form .forminator-row {
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--as-ink);
  align-items: center;
}

.forminator-custom-form.subscribe__form .forminator-field-email .forminator-field {
  gap: 0;
}

/* The static markup uses a screen-reader-only label + visible placeholder
   for this field; reproduce that here since the seeded field keeps a real
   (accessible) field_label. */
.forminator-custom-form.subscribe__form .forminator-field-email .forminator-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.forminator-custom-form.subscribe__form .forminator-input {
  padding: 18px 0;
  border-bottom: 0;
}

.forminator-custom-form.subscribe__form .forminator-row-last {
  border-bottom: 0;
}

.forminator-custom-form.subscribe__form .forminator-button-submit {
  gap: 14px;
  padding: 16px 20px;
}