/**
 * Onboard Express — client onboarding surface (Phase 5).
 *
 * Dark-mode treatment for the access-key gate and the Gravity Form, built to
 * feel full-screen and branded without Conversational Forms (which renders one
 * field per page and would turn every section explainer into its own step).
 *
 * Loaded ONLY on the onboarding page. No JS.
 *
 * Colour tokens are contrast-verified (WCAG relative luminance) against the
 * ground they sit on — see the plan §N9. Two results are counter-intuitive and
 * must not be "tidied":
 *   - Text on the accent is DARK (--vpo-on-accent). White on #4fabff is 2.44:1
 *     and fails; dark is 7.47:1.
 *   - The error colour is lightened (#ff8892, 7.76:1). The theme's #dc3545 is
 *     only 3.92:1 on this ground and fails AA.
 * Borders need to be lighter than instinct suggests: non-text UI needs >=3:1,
 * and #66779a is the first value that clears it against the field surface.
 *
 * NOTE ON THEME COLOURS: the form's own palette (input/label/button colours) is
 * NOT set here. Gravity Forms emits a per-form INLINE rule with an ID selector,
 * which a stylesheet cannot override. Those values are passed through
 * gravity_form()'s $style_settings argument instead — see
 * VendorPlus_Onboard_Access::form_style_settings(). This file owns layout,
 * ordering, the shell, and motion only.
 */

.vplus-onboard {
  --vpo-bg: #121826;
  --vpo-bg-deep: #0f1523;
  --vpo-surface: #1b2333;
  --vpo-surface-raised: #222c40;
  --vpo-border: #66779a;
  --vpo-text: #e8ecf4;
  --vpo-heading: #ffffff;
  --vpo-muted: #9aa7bd;
  --vpo-accent: #4fabff;
  --vpo-on-accent: #0f1523;
  --vpo-error: #ff8892;
  --vpo-success: #93c986;
  --vpo-brand: #1c3f85;

  --vpo-radius: 12px;
  --vpo-shell-max: 1080px;
  --vpo-gate-max: 32rem;
}

/* ---------------------------------------------------------------------------
   Full-screen shell
   --------------------------------------------------------------------------- */

.vplus-onboard {
  background: var(--vpo-bg);
  color: var(--vpo-text);
  /* Cover the viewport even when the form is short, so the dark treatment
	   never stops halfway down a pale theme background. */
  min-height: 100vh;
  margin: 0 calc(50% - 50vw);
  padding: 0 0 4rem;
  width: 100vw;
  font-family: var(--vplus-font-family-base, Roboto, Arial, sans-serif);
}

/* Flat brand band. Deliberately flat — no gradient, no image. */
.vplus-onboard__hero {
  background: var(--vpo-brand);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* The theme's Webtron mark is a transparent PNG with DARK artwork (measured
   average brightness 89/255) — it lives in a light footer. On the navy brand
   band it would be all but invisible, so it is inverted to white. */
.vplus-onboard__logo {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* Fallback text wordmark, if the brand filter returns text instead of an image. */
.vplus-onboard__wordmark {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Suppress the site header/footer on the onboarding page
   ---------------------------------------------------------------------------
   The theme renders these from get_header()/get_footer(), so they cannot be
   removed without a dedicated page template — and application behaviour belongs
   in a plugin, not the theme (THEME-CONTRACT.md). The plugin adds the
   `vplus-onboard-page` body class; this hides the chrome so the onboarding
   surface reads as a standalone, full-screen experience rather than a page
   inside the client's portal.

   The client has no account yet, so the portal nav would be dead links anyway.
   --------------------------------------------------------------------------- */

.vplus-onboard-page .header,
.vplus-onboard-page .footer {
  display: none !important;
}

/* The theme sets a light page background; the shell must own the whole canvas.
   Literal value, not var(--vpo-bg): that token is scoped to .vplus-onboard and
   does not resolve on <body> or the theme's own wrappers. */
.vplus-onboard-page,
.vplus-onboard-page #wrapper-index,
.vplus-onboard-page #content,
.vplus-onboard-page .site-main {
  background: #121826;
}

.vplus-onboard__inner {
  max-width: var(--vpo-shell-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------------------------
   Access-key gate
   --------------------------------------------------------------------------- */

.vplus-onboard-gate {
  max-width: var(--vpo-gate-max);
  margin: 3rem auto;
  padding: 2.25rem;
  background: var(--vpo-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--vpo-radius);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.vplus-onboard-gate h1 {
  color: var(--vpo-heading);
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  line-height: 1.25;
  text-wrap: balance;
}

.vplus-onboard-gate__lead {
  color: var(--vpo-muted);
  margin: 0 0 1.75rem;
}

.vplus-onboard-gate label {
  display: block;
  color: var(--vpo-text);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.vplus-onboard-gate__key {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--vpo-bg-deep);
  color: var(--vpo-text);
  border: 1px solid var(--vpo-border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.vplus-onboard-gate__key::placeholder {
  color: var(--vpo-muted);
  opacity: 0.5;
  letter-spacing: 0.1em;
}

.vplus-onboard-gate__key:focus-visible,
.vplus-onboard-gate button:focus-visible {
  outline: 2px solid var(--vpo-accent);
  outline-offset: 2px;
}

.vplus-onboard-gate__hint {
  color: var(--vpo-muted);
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}

.vplus-onboard-gate button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.8rem 1rem;
  /* Dark text on the accent — white fails contrast here. */
  background: var(--vpo-accent);
  color: var(--vpo-on-accent);
  border: 0;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.vplus-onboard-gate button:hover {
  filter: brightness(1.08);
}

.vplus-onboard-gate__error {
  background: rgba(255, 136, 146, 0.12);
  border: 1px solid var(--vpo-error);
  border-radius: 8px;
  color: var(--vpo-error);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.25rem;
}

.vplus-onboard-gate__help {
  color: var(--vpo-muted);
  font-size: 0.85rem;
  text-align: center;
  margin: 1.75rem 0 0;
}

/* ---------------------------------------------------------------------------
   The form
   --------------------------------------------------------------------------- */

.vplus-onboard-form {
  max-width: var(--vpo-shell-max);
  margin: 2.5rem auto 0;
}

/* FIELD ALIGNMENT — the core fix.
   GF renders .gfield_description ABOVE the input, so any field carrying a
   description pushes its own input down while its neighbours stay put; fields
   in one row end up on different baselines. .gfield is display:block, so
   `order` has no effect until it becomes a flex container.
   Measured: an Email/Phone pair 45px apart resolves to identical baselines. */
.vplus-onboard-form .gfield {
  display: flex;
  flex-direction: column;
}

.vplus-onboard-form .gfield > .gfield_label {
  order: 1;
}

.vplus-onboard-form .gfield > .ginput_container {
  order: 2;
}

.vplus-onboard-form .gfield > .gfield_description {
  order: 3;
  margin-top: 0.4rem;
}

/* Validation MUST sit after the description, or an error appears to belong to
   whatever follows it. */
.vplus-onboard-form .gfield > .gfield_validation_message {
  order: 4;
  margin-top: 0.4rem;
  background: rgba(255, 136, 146, 0.12);
  border: 1px solid var(--vpo-error);
  color: var(--vpo-error);
  border-radius: 6px;
}

/* Submission + Save & Continue confirmations. */
.vplus-onboard-form .gform_confirmation_message,
.vplus-onboard-form .form_saved_message {
  background: var(--vpo-surface);
  border: 1px solid var(--vpo-success);
  border-left-width: 4px;
  border-radius: var(--vpo-radius);
  color: var(--vpo-text);
  padding: 1.25rem 1.5rem;
}

/* Section headers — the page's structural rhythm. */
.vplus-onboard-form .gsection {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 0.6rem;
  margin-top: 1rem;
}

.vplus-onboard-form .gsection_title {
  color: var(--vpo-heading);
  font-size: 1.35rem;
  text-wrap: balance;
}

.vplus-onboard-form .gsection_description,
.vplus-onboard-form .gfield_description {
  color: var(--vpo-muted);
}

/* Repeater rows read as discrete cards rather than a run-on list. */
.vplus-onboard-form .gfield_repeater_item {
  background: var(--vpo-surface);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--vpo-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.vplus-onboard-form .gform-theme-button,
.vplus-onboard-form .gform_button,
.vplus-onboard-form .gform_next_button,
.vplus-onboard-form .gform_previous_button {
  border-radius: 8px;
}

/* Multi-page progress bar, restyled as a branded step indicator. */
.vplus-onboard-form .gf_progressbar_wrapper {
  margin-bottom: 2rem;
}

.vplus-onboard-form .gf_progressbar_title {
  color: var(--vpo-muted);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.vplus-onboard-form .gf_progressbar {
  background: var(--vpo-surface);
  border-radius: 999px;
  overflow: hidden;
}

.vplus-onboard-form .gf_progressbar_percentage {
  background: var(--vpo-accent);
  border-radius: 999px;
}

.vplus-onboard-form .gf_progressbar_percentage span {
  color: var(--vpo-on-accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

/* Tablet landscape */
@media (max-width: 1399px) {
  .vplus-onboard {
    --vpo-shell-max: 900px;
  }
}

/* Tablet portrait — full width with comfortable gutters; the 12-col grid keeps
   repeater cells side by side. */
@media (max-width: 1023px) {
  .vplus-onboard {
    --vpo-shell-max: 100%;
  }

  .vplus-onboard__inner {
    padding: 0 1.25rem;
  }
}

/* Mobile — single column. Collapse every grid span so repeater cells stack
   instead of squeezing into 6-column halves. */
@media (max-width: 767px) {
  .vplus-onboard__hero {
    padding: 1.75rem 1rem;
  }

  .vplus-onboard-gate {
    margin: 1.5rem auto;
    padding: 1.5rem;
  }

  .vplus-onboard-form .gfield {
    grid-column: 1 / -1 !important;
  }

  .vplus-onboard-form .gfield_repeater_item {
    padding: 1rem;
  }

  .vplus-onboard-gate__key {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
  }
}

/* ---------------------------------------------------------------------------
   Motion (CSS only)
   --------------------------------------------------------------------------- */

/*
 * Conditional logic toggles inline `display:none`, and `display` is not
 * animatable — a plain opacity transition never runs. `transition-behavior:
 * allow-discrete` plus `@starting-style` bridge exactly that case. Browsers
 * without support ignore both and show the field instantly, which is the
 * correct degradation.
 *
 * Enter-only by design: GF removes a repeater row from the DOM immediately, so
 * an exit animation is not reachable without JS, which is out of scope.
 */
@media (prefers-reduced-motion: no-preference) {
  .vplus-onboard-form .gfield,
  .vplus-onboard-form .gfield_repeater_item {
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      display 0.25s allow-discrete;
  }

  @starting-style {
    .vplus-onboard-form .gfield,
    .vplus-onboard-form .gfield_repeater_item {
      opacity: 0;
      transform: translateY(-0.25rem);
    }
  }

  .vplus-onboard-gate {
    animation: vplus-onboard-rise 0.35s ease both;
  }
}

@keyframes vplus-onboard-rise {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}