/*
 * Church DM form renderer styles.
 *
 * Variables map to the same theme tokens the branding pipeline emits.
 * The same stylesheet is shipped TWO ways:
 *   1. Inlined into a Shadow Root by CDM2_Shadow_Isolation::emit_host()
 *      (default). Theme CSS can't reach in, so this file is the only
 *      thing styling controls. The `:host { ... }` block below sets up
 *      a normal block-level container for the form.
 *   2. As a regular WP-enqueued stylesheet, when the
 *      `cdm2_use_shadow_dom` filter is set to false. In that mode
 *      `.cdm2-form-wrap` is the top-level container; the `:host` rule
 *      is just inert because there's no shadow root to apply it to.
 */

/* Host element in shadow mode. Forces a sane baseline: themes can't
   reach inside the shadow root, but the HOST itself is still light DOM
   and might inherit funky display values from ancestor rules. */
:host {
  display: block;
  font-family: inherit;
  color: inherit;
}

.cdm2-form-wrap {
  --cdm-form-bg: var(--cdm-surface, #fff);
  --cdm-form-fg: var(--cdm-primary, #111);
  --cdm-form-muted: var(--cdm-tertiary, #6b7280);
  --cdm-form-border: var(--cdm-border, #d1d5db);
  --cdm-form-accent: var(--cdm-accent, #2563eb);
  --cdm-form-error: var(--cdm-error, #dc2626);

  background: var(--cdm-form-bg);
  color: var(--cdm-form-fg);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid var(--cdm-form-border);
  max-width: 640px;
}

.cdm2-form__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.cdm2-form__description {
  margin: 0 0 20px;
  color: var(--cdm-form-muted);
}

.cdm2-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cdm2-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cdm2-form__label {
  font-weight: 600;
  font-size: 0.95rem;
}

.cdm2-form__required {
  color: var(--cdm-form-error);
  margin-left: 2px;
}

.cdm2-form__input,
.cdm2-form__select,
.cdm2-form__textarea {
  font: inherit;
  color: inherit;
  background: var(--cdm-form-bg);
  border: 1px solid var(--cdm-form-border);
  border-radius: 6px;
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
}

.cdm2-form__textarea {
  min-height: 96px;
  resize: vertical;
}

.cdm2-form__input:focus,
.cdm2-form__select:focus,
.cdm2-form__textarea:focus {
  outline: 2px solid var(--cdm-form-accent);
  outline-offset: 0;
  border-color: var(--cdm-form-accent);
}

.cdm2-form__name-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cdm2-form__radio-group,
.cdm2-form__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cdm2-form__radio,
.cdm2-form__checkbox,
.cdm2-form__boolean {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cdm2-form__error {
  font-size: 0.85rem;
  color: var(--cdm-form-error);
  min-height: 0;
}

.cdm2-form__error:empty {
  display: none;
}

.cdm2-form__field--error .cdm2-form__input,
.cdm2-form__field--error .cdm2-form__select,
.cdm2-form__field--error .cdm2-form__textarea {
  border-color: var(--cdm-form-error);
}

.cdm2-form__hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.cdm2-form__actions {
  margin-top: 20px;
}

.cdm2-form__submit {
  background: var(--cdm-form-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cdm2-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cdm2-form__messages {
  margin-top: 12px;
  font-size: 0.95rem;
}

.cdm2-form__messages--success {
  color: var(--cdm-success, #16a34a);
}

.cdm2-form__messages--error {
  color: var(--cdm-form-error);
}

.cdm2-form--submitted .cdm2-form__fields,
.cdm2-form--submitted .cdm2-form__actions {
  display: none;
}

/* Lifecycle gate placeholder (opens_at / closes_at). */
.cdm2-form__gate-message {
  margin: 0;
  color: var(--cdm-form-muted);
  font-size: 1rem;
}

/* Post-submit success block. Rendered hidden up front by the server
 * and revealed by form-renderer.js when no redirect_url is set. */
.cdm2-form-success {
  margin: 0;
}

.cdm2-form-success__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--cdm-form-fg);
}

.cdm2-form-success__body {
  margin: 0;
  color: var(--cdm-form-muted);
  font-size: 1rem;
}

.cdm2-form-success__body p {
  margin: 0 0 8px;
}

.cdm2-form-success__body p:last-child {
  margin-bottom: 0;
}

.cdm2-form-success__body a {
  color: var(--cdm-form-accent);
}

/* ---- Light-DOM Turnstile mount host ---------------------------------
 *
 * Cloudflare Turnstile's widget iframe doesn't render reliably inside
 * a Shadow Root (the iframe relies on `postMessage` against the top
 * document and on visible layout, neither of which is dependable across
 * the shadow boundary). So the per-form `.cf-turnstile` element is
 * emitted as a light-DOM sibling of the shadow host and the renderer
 * JS bridges the issued token back into the in-shadow hidden input.
 *
 * This stylesheet is also inlined into the shadow root by
 * CDM2_Shadow_Isolation, but these `.cdm2-turnstile-host` rules only
 * match light-DOM elements -- no shadow-root element ever carries the
 * class -- so the duplication is inert.
 */

/* Both shortcode and bubble forms render their form inside a shadow
 * root, so the Turnstile widget MUST live in light DOM (Cloudflare's
 * iframe doesn't render reliably inside a shadow root). The host
 * stays parked off-screen by default; `form-renderer.js` writes
 * `left`, `top`, `width`, `height` inline once `startAnchorSync()`
 * measures the in-shadow `.cdm2-form__turnstile-anchor` (on mount,
 * window resize, ResizeObserver, and scroll inside the form's
 * scroll container). Keeping the host above the page in z-index
 * ensures it sits over the shadow root visually. */
.cdm2-turnstile-host {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: 2147483001;
  margin: 0;
  max-width: none;
  min-height: 0;
  display: block;
  pointer-events: auto;
}

/* In-form anchor element. Reserves LAYOUT space so the Submit button
 * (and any other content after the Turnstile placement) sits below
 * the widget rather than competing with it. The light-DOM widget is
 * JS-synchronized to this anchor's bounding rect on mount + resize +
 * scroll, so the widget visually behaves like a native form field
 * even though Cloudflare's iframe lives outside the shadow root.
 * 300x65 matches Turnstile's "normal" widget; we let it grow on
 * narrow viewports because Cloudflare auto-fits inside the parent. */
.cdm2-form__turnstile-anchor {
  display: block;
  min-height: 65px;
  margin: 12px 0;
  width: 100%;
  max-width: 300px;
}

/* Bubble variant additionally toggles visibility with the panel
 * state so an empty host doesn't paint anywhere before the panel
 * opens (`data-state` is set by the bubble runtime in form-bubble.js
 * on every open/close transition). */
.cdm2-turnstile-host--bubble {
  display: none;
}

.cdm2-turnstile-host--bubble[data-state="open"] {
  display: block;
}

/* Once the form transitions to its submitted state (success block
 * is revealed, form is `[hidden]`), the light-DOM host has no
 * matching anchor in the visible DOM anymore. `form-renderer.js`
 * sets this attribute in `handleResponse()`; the rule pulls the
 * widget off-screen so it can't float over the success message. */
.cdm2-turnstile-host[data-cdm-form-submitted="1"] {
  display: none;
}