/* ==========================================================================
   TECHIE ZEST — WPForms contact-form skin
   Makes the WPForms "modern markup" contact form visually identical to the
   theme's original hand-built enquiry form (see components.css: .field,
   .input, .select, .textarea, .chip-radio, .btn--primary). We ONLY restyle
   WPForms markup here — no page redesign. All values reuse the theme tokens
   defined in tokens.css so the form stays in lock-step with the design system.

   Scope: every rule is scoped to .wpforms-container so nothing leaks to the
   rest of the page (there is a single WPForms instance, on /contact/).
   Enqueued only on the contact page (see inc/enqueue.php), after WPForms'
   own stylesheet so these overrides win.
   ========================================================================== */

/* --- 1. Map WPForms modern-markup CSS variables to the theme tokens ------- */
.wpforms-container.wpforms-render-modern {
  --wpforms-field-border-color:      var(--line-strong);
  --wpforms-field-border-size:       1.5px;
  --wpforms-field-border-radius:     var(--radius);
  --wpforms-field-background-color:  var(--white);
  --wpforms-field-text-color:        var(--text);
  --wpforms-field-menu-color:        var(--white);
  --wpforms-field-size-input-height: 3.1rem;
  --wpforms-field-size-padding-h:    1em;
  --wpforms-field-size-font-size:    var(--step-0);
  --wpforms-label-color:             var(--navy-ink);
  --wpforms-label-sublabel-color:    var(--text-faint);
  --wpforms-label-error-color:       #C0392B;
  --wpforms-label-size-font-size:    var(--step--1);

  --wpforms-button-background-color: var(--emerald);
  --wpforms-button-background-color-alt: var(--emerald-deep);
  --wpforms-button-text-color:       var(--white);
  --wpforms-button-text-color-alt:   var(--white);
  --wpforms-button-border-color:     var(--emerald);
  --wpforms-button-border-style:     solid;
  --wpforms-button-border-size:      1.5px;
  --wpforms-button-border-radius:    var(--radius-pill);

  /* Neutralise WPForms' own container chrome — the form sits in the page grid. */
  --wpforms-container-padding: 0;
  --wpforms-container-border-width: 0;
}

/* Container: strip WPForms padding/border/background so it lays out like the
   original form column. */
.wpforms-container {
  margin: 0;
  font-family: var(--font-sans);
}

/* --- 2. Field spacing (matches the original --space-lg field flow) -------- */
.wpforms-container .wpforms-field {
  padding: 0;
  margin: 0 0 var(--space-lg);
  clear: both;
}
.wpforms-container .wpforms-field-container > .wpforms-field:last-of-type {
  margin-bottom: var(--space-md);
}

/* --- 3. Labels ------------------------------------------------------------ */
.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
  font-size: var(--step--1);
  font-weight: var(--weight-semi);
  color: var(--navy-ink);
  line-height: 1.3;
  margin: 0 0 var(--space-2xs);
  padding: 0;
}
.wpforms-container .wpforms-required-label { color: var(--emerald); }
.wpforms-container .wpforms-field-description {
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* --- 4. Text inputs, email, select, textarea ------------------------------ */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
  width: 100%;
  padding: 0.85em 1em;
  font-size: var(--step-0);
  font-family: var(--font-sans);
  line-height: 1.4;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  /* WPForms sets border-width via an #id-specificity CSS var; force the theme's
     1.5px hairline so the field weight matches the rest of the design. */
  border-width: 1.5px !important;
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wpforms-container textarea { resize: vertical; min-height: 8rem; }
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--text-faint); opacity: 1; }
.wpforms-container select:required:invalid { color: var(--text-faint); } /* placeholder option */

/* Focus: emerald border + soft ring (identical to .input:focus). */
.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
}

/* --- 5. Budget radios → segmented "chip" pills (matches .chip-radio) ------ */
/* NB: WPForms modern lays choices out as a CSS grid via an #id-specificity
   rule; the scoped !important below is the minimal way to restore the theme's
   horizontal wrapping "chip group" without matching a fragile generated id. */
.wpforms-container .wpforms-field-radio ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.wpforms-container .wpforms-field-radio li {
  position: relative;
  width: auto !important;
  margin: 0;
  padding: 0;
}
.wpforms-container .wpforms-field-radio li input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wpforms-container .wpforms-field-radio li label.wpforms-field-label-inline {
  display: inline-block;
  margin: 0;
  padding: 0.6em 1em;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--text-soft);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  cursor: pointer;
}
.wpforms-container .wpforms-field-radio li input[type="radio"]:checked + label.wpforms-field-label-inline {
  border-color: var(--emerald);
  color: var(--emerald-deep);
  background: color-mix(in srgb, var(--emerald) 6%, transparent);
}
.wpforms-container .wpforms-field-radio li input[type="radio"]:focus-visible + label.wpforms-field-label-inline {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.wpforms-container .wpforms-field-radio fieldset { border: 0; margin: 0; padding: 0; }

/* --- 6. Submit button → .btn.btn--primary.btn--lg ------------------------- */
.wpforms-container .wpforms-submit-container { margin-top: var(--space-md); padding: 0; }
.wpforms-container button.wpforms-submit,
.wpforms-container input.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 1em 1.9em;
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: var(--tracking-flat);
  color: var(--white);
  background: var(--emerald);
  border: 1.5px solid var(--emerald);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--emerald-deep) 75%, transparent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container input.wpforms-submit:hover {
  background: var(--emerald-deep);
  border-color: var(--emerald-deep);
  transform: translateY(-2px);
  box-shadow: 0 13px 24px -12px color-mix(in srgb, var(--emerald-deep) 86%, transparent);
}
.wpforms-container button.wpforms-submit:active,
.wpforms-container input.wpforms-submit:active { transform: translateY(0); }
.wpforms-container button.wpforms-submit[disabled],
.wpforms-container button.wpforms-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* --- 7. Validation / error states (matches .field[data-invalid] / #C0392B)
   WPForms sets field border colour via an #id-specificity rule, so the error
   border needs !important to win — same reason as the base border width. */
.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error,
.wpforms-container .wpforms-field.wpforms-has-error input:not([type="radio"]):not([type="checkbox"]),
.wpforms-container .wpforms-field.wpforms-has-error select,
.wpforms-container .wpforms-field.wpforms-has-error textarea {
  border-color: #C0392B !important;
}
/* Inline error messages — WPForms renders these as <label> or <em>.wpforms-error. */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-field-container em.wpforms-error,
.wpforms-container .wpforms-error-noscript {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  font-style: normal;
  color: #C0392B;
}

/* --- 8. Confirmation (success) message → matches .form-status success ----- */
.wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--emerald) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--emerald) 8%, var(--white));
  color: var(--emerald-deep);
  font-size: var(--step-0);
  line-height: 1.5;
}
.wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* --- 9. Layout note -------------------------------------------------------
   The original hand-built form paired some fields two-per-row on desktop.
   WPForms injects its anti-spam honeypot field at a RANDOM position in the
   field list on each render, so any source-order CSS-grid pairing would shift
   unpredictably. We therefore keep a single, full-width column here — a robust,
   accessible layout that fully preserves the design language (typography,
   inputs, chip radios, button, colours, spacing). If exact two-up pairing is
   required later, it should be done with WPForms' own field layout controls
   (which place fields in the DOM), not fragile CSS ordering. */