/* ==========================================================================
   Webicious: Free website check (Fluent Forms)
   Maps Design System v1 tokens onto Fluent Forms markup.
   Scope: Elementor container with class .wb-free-check (hero card / check page)
   and the closing-CTA pre-fill form (.wb-cta-prefill).
   Location: /wp-content/themes/<child-theme>/assets/css/wb-free-check.css
   ========================================================================== */

/* ---------- Card ---------- */
.wb-free-check {
  background: var(--wb-white);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-raised);
  padding: clamp(24px, 4vw, 40px);
}

/* ---------- Step split (Fluent Forms free has no Form Step field) ---------- */
/* JS toggles this class on each step's field blocks. */
.wb-free-check .wb-step-hidden { display: none !important; }

/* Pre-hide step 2 before the JS runs, so the hero doesn't flash both steps (CLS).
   Only applies when <html> has .wb-js (set in <head>, with a 4s failsafe that
   removes it if the script never loads, falling back to a one-page form). */
.wb-js .wb-free-check:not(.wb-steps-ready) .ff-el-group:has(#wb-check-step2-heading),
.wb-js .wb-free-check:not(.wb-steps-ready) .ff-el-group:has(#wb-check-step2-heading) ~ *:not(input):not(legend),
.wb-js .wb-free-check:not(.wb-steps-ready) .ff_submit_btn_wrapper {
  display: none;
}

.wb-free-check .wb-step-nav { margin-top: var(--wb-space-2); }

/* ---------- Step headings and summary ---------- */
.wb-free-check .wb-check-heading {
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: var(--wb-fs-h3);
  line-height: 1.35;
  color: var(--wb-navy-900);
  margin: 0 0 var(--wb-space-4);
}
/* Programmatic focus on headings shouldn't draw a ring; keyboard focus still does. */
.wb-free-check .wb-check-heading:focus:not(:focus-visible) { outline: none; }

.wb-free-check .wb-check-summary {
  background: var(--wb-mist);
  border-radius: var(--wb-radius-sm);
  padding: var(--wb-space-3) var(--wb-space-4);
  margin: 0 0 var(--wb-space-5);
  font-size: var(--wb-fs-small);
  color: var(--wb-slate-700);
  overflow-wrap: anywhere;          /* long URLs must not break 320px reflow */
}

/* ---------- Labels, help, microcopy ---------- */
.wb-free-check .ff-el-group { margin-bottom: var(--wb-space-5); }

.wb-free-check .ff-el-input--label label {
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--wb-navy-900);
}

.wb-free-check .ff-el-help-message,
.wb-free-check .wb-check-microcopy {
  font-size: var(--wb-fs-small);
  color: var(--wb-slate-500);
  margin-top: var(--wb-space-2);
}
.wb-free-check .wb-check-microcopy a { color: var(--wb-teal-700); }

/* ---------- Fields: 52px, 2px border, radius 8, 17px ---------- */
.wb-free-check .ff-el-form-control {
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--wb-field-border);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-white);
  font-family: var(--wb-font-body);
  font-size: 1.0625rem;
  color: var(--wb-navy-900);
  transition: border-color var(--wb-ease), box-shadow var(--wb-ease);
}
.wb-free-check textarea.ff-el-form-control {
  min-height: 128px;
  padding: 12px 16px;
}
.wb-free-check .ff-el-form-control:focus {
  border-color: var(--wb-teal-700);
  box-shadow: 0 0 0 4px var(--wb-teal-100);
  outline: 2px solid transparent;   /* stays visible in Windows forced-colours mode */
}

/* ---------- Errors ---------- */
.wb-free-check .ff-el-is-error .ff-el-form-control { border-color: var(--wb-error); }
.wb-free-check .ff-el-is-error .text-danger {
  color: var(--wb-error);
  font-size: var(--wb-fs-small);
  margin-top: var(--wb-space-2);
}

/* ---------- Buttons ---------- */
.wb-free-check .wb-step-next,
.wb-free-check .ff-btn-submit {
  width: 100%;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-teal-700);
  color: var(--wb-white);
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: background-color var(--wb-ease);
}
.wb-free-check .wb-step-next:hover,
.wb-free-check .ff-btn-submit:hover { background: var(--wb-teal-800); }

/* "Back" sits under the submit button as a quiet text link, still a 44px target */
.wb-free-check .wb-step-back {
  display: block;
  margin: var(--wb-space-2) auto 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wb-teal-700);
  font-family: var(--wb-font-body);
  font-size: var(--wb-fs-small);
  text-decoration: underline;
}

.wb-free-check .ff-btn:focus-visible,
.wb-free-check .wb-step-next:focus-visible,
.wb-free-check .wb-step-back:focus-visible {
  outline: 3px solid var(--wb-navy-900);
  outline-offset: 3px;
}

/* ---------- Success message (replaces the form in the card) ---------- */
.wb-free-check .ff-message-success {
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--wb-slate-700);
}
.wb-free-check .ff-message-success h3 {
  font-family: var(--wb-font-display);
  font-size: var(--wb-fs-h3);
  color: var(--wb-navy-900);
  margin: 0 0 var(--wb-space-3);
}
.wb-free-check .ff-message-success:focus:not(:focus-visible) { outline: none; }

/* ---------- Closing CTA pre-fill (Teal Glow, dark) ---------- */
.wb-cta-prefill label {
  display: block;
  font-family: var(--wb-font-display);
  font-weight: 600;
  color: var(--wb-white);
  margin-bottom: var(--wb-space-2);
}
.wb-cta-prefill .wb-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3);
}
.wb-cta-prefill input {
  flex: 1 1 240px;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--wb-white);
  border-radius: var(--wb-radius-sm);
  font: 1.0625rem var(--wb-font-body);
}
.wb-cta-prefill input:focus-visible {
  outline: 3px solid var(--wb-white);
  outline-offset: 3px;
}
/* Marigold accent: dark backgrounds only, per colour rules */
.wb-cta-prefill button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-marigold-400);
  color: var(--wb-navy-900);
  font-family: var(--wb-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  transition: background-color var(--wb-ease);
}
.wb-cta-prefill button:hover { background: var(--wb-marigold-500); }
.wb-cta-prefill button:focus-visible {
  outline: 3px solid var(--wb-white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wb-free-check *,
  .wb-cta-prefill * { transition: none !important; }
}