/* ==========================================================================
   WPForms theme skin
   Restyles WPForms output (e.g. [wpforms id="115"]) to the LJB design system.

   How this wins the cascade
   -------------------------
   WPForms "modern markup" renders everything through its own --wpforms-*
   custom properties, and each form prints an INLINE <style> (#wpforms-NNN)
   setting those variables from the form builder. That inline block is
   ID-scoped and loads after our stylesheet, so a normal class-scoped remap
   can't beat it. But the inline values are NOT !important — so an !important
   custom-property override wins regardless of specificity or source order.
   We therefore re-point WPForms' variables at theme tokens with !important and
   let WPForms' own rules do the rendering. A short second block handles the
   few things variables don't cover (display font on the button, the focus
   ring, hover colour, confirmation message).

   Everything is scoped to .wpforms-container(-full) so nothing leaks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Re-point WPForms variables at theme tokens (!important to beat inline)
   -------------------------------------------------------------------------- */
.wpforms-container-full,
.wpforms-container {
  /* Outer container: form lives inside the theme .card, so stay transparent */
  --wpforms-background-color: transparent !important;
  --wpforms-container-padding: 0 !important;
  --wpforms-container-border-width: 0 !important;
  --wpforms-container-border-radius: 0 !important;
  --wpforms-container-shadow-size-box-shadow: none !important;

  /* Fields */
  --wpforms-field-background-color: var(--color-surface) !important;
  --wpforms-field-border-color: var(--color-border) !important;
  --wpforms-field-border-style: solid !important;
  --wpforms-field-border-size: 1.5px !important;
  --wpforms-field-border-radius: var(--radius-sm) !important;
  --wpforms-field-text-color: var(--color-heading) !important;
  --wpforms-field-menu-color: var(--color-surface) !important;
  --wpforms-field-size-font-size: var(--step-0) !important;
  --wpforms-field-size-input-height: 3rem !important;
  --wpforms-field-size-padding-h: 0.9em !important;
  --wpforms-field-size-input-spacing: var(--space-m) !important;
  --wpforms-field-size-sublabel-spacing: var(--space-3xs) !important;

  /* Labels */
  --wpforms-label-color: var(--color-heading) !important;
  --wpforms-label-sublabel-color: var(--color-muted) !important;
  --wpforms-label-error-color: #a93224 !important;
  --wpforms-label-size-font-size: var(--step--1) !important;
  --wpforms-label-size-line-height: 1.3 !important;
  --wpforms-label-size-sublabel-font-size: var(--step--1) !important;

  /* Submit button -> theme accent pill */
  --wpforms-button-background-color: var(--color-accent) !important;
  --wpforms-button-background-color-alt: var(--color-accent) !important;
  --wpforms-button-text-color: var(--color-on-accent) !important;
  --wpforms-button-text-color-alt: var(--color-on-accent) !important;
  --wpforms-button-border-color: transparent !important;
  --wpforms-button-border-style: solid !important;
  --wpforms-button-border-size: 1px !important;
  --wpforms-button-border-radius: var(--radius-pill) !important;
  --wpforms-button-size-font-size: var(--step-0) !important;
  --wpforms-button-size-height: 3rem !important;
  --wpforms-button-size-padding-h: 1.4em !important;
  --wpforms-button-size-margin-top: var(--space-m) !important;
}

/* --------------------------------------------------------------------------
   2. Property overrides for what variables don't reach
   Specificity matches WPForms' own selectors (div.wpforms-container-full ...)
   so these land reliably.
   -------------------------------------------------------------------------- */

/* Label weight: WPForms labels are light; the theme uses 600 */
div.wpforms-container-full .wpforms-field-label {
  font-weight: 600;
}

/* Required asterisk: theme uses navy, not WPForms red */
div.wpforms-container-full .wpforms-required-label {
  color: var(--color-accent-press);
}

/* Field focus: swap WPForms' border-only focus for the theme ring */
div.wpforms-container-full .wpforms-form .wpforms-field input:focus,
div.wpforms-container-full .wpforms-form .wpforms-field textarea:focus,
div.wpforms-container-full .wpforms-form .wpforms-field select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: var(--ring-accent) !important;
  outline: none !important;
}

/* Submit button: theme display font + hover/active behaviour.
   WPForms' hover darkens with a black gradient overlay — replace with the
   accent-hover / accent-press tokens and the subtle lift used site-wide. */
div.wpforms-container-full input[type="submit"],
div.wpforms-container-full button[type="submit"],
div.wpforms-container-full .wpforms-page-button {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}
div.wpforms-container-full input[type="submit"]:hover,
div.wpforms-container-full button[type="submit"]:hover,
div.wpforms-container-full .wpforms-page-button:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
div.wpforms-container-full input[type="submit"]:active,
div.wpforms-container-full button[type="submit"]:active,
div.wpforms-container-full .wpforms-page-button:active {
  background: var(--color-accent-press) !important;
  transform: translateY(0);
}

/* Checkboxes & radios tint to accent */
div.wpforms-container-full input[type="checkbox"],
div.wpforms-container-full input[type="radio"] {
  accent-color: var(--color-accent);
}

/* Confirmation (success) message -> mirror the theme .form-status--ok */
div.wpforms-container-full .wpforms-confirmation-container-full,
.wpforms-confirmation-container-full {
  padding: var(--space-s) var(--space-m);
  border: 1px solid color-mix(in srgb, var(--ljb-teal-500) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ljb-teal-500) 10%, var(--color-surface));
  color: var(--ljb-teal-500);
  margin: 0;
}
.wpforms-confirmation-container-full p { margin: 0; color: inherit; }