/* turnstile-slot.css
 * ===========================================================================
 * KNOWN, INTENTIONAL VISUAL DIFFERENCE — READ BEFORE "FIXING" A DIFF FAILURE
 * ===========================================================================
 * dev currently ships WITHOUT Turnstile. The Cloudflare account is at its
 * 20-widget cap and all 20 belong to live clients, so there is no core-wm.com
 * sitekey yet; Turnstile is added before production cutover (Mike's call,
 * 2026-08-06).
 *
 * Until then this slot renders EMPTY where the source site shows a reCAPTCHA
 * checkbox. That is expected and is NOT a regression.
 *
 * The slot still reserves the source widget's exact 78px box, so:
 *   - page height is identical to source (verified 0px on every measured page)
 *   - the real widget drops in later with ZERO reflow
 *
 * Mask selector for the visual-diff config:
 *     .cf-turnstile
 * (empty slots also carry the attribute [data-turnstile-pending="1"], so
 *  .cf-turnstile[data-turnstile-pending] masks only the not-yet-live ones.)
 * ===========================================================================
 *
 * Reserves the captcha box the source site occupied.
 *
 * Lives in build/assets-overlay/ because public/ is wiped on every build.
 * Linked from every page carrying a form by build/forms/rewrite_forms.py.
 *
 * MEASURED, not guessed — build/forms/measure_forms.py against live
 * www.core-wm.com at 1920 / 1440 / 768 / 375:
 *
 *   the slot is 78px tall on EVERY form and EVERY viewport. The reCAPTCHA
 *   widget is a fixed 304x78 iframe inside a slot that stretches to the parent
 *   (229px sidebar newsletter, 362px landing pages, 635px contact page,
 *   1136px application forms). Only the height ever mattered.
 *
 * WHY display:block and not inline-block:
 *   On source, Google's script INJECTS a <div> into the placeholder <span> at
 *   runtime. A block box inside an inline splits the paragraph into anonymous
 *   blocks, and the <br> that follows then starts a fresh line box. Emulating
 *   the placeholder as inline-block loses that split and the page comes out
 *   22px short on every form whose captcha is followed by <br> (the sitewide
 *   newsletter 414 and the landing-page forms). display:block reproduces the
 *   source layout exactly.
 *
 *   Note this is CSS only: the element in our markup is a <span>, and it must
 *   stay a <span>, because a block-level START TAG in the static HTML would
 *   implicitly close CF7's <p> at parse time and re-parent the submit button.
 *
 * Turnstile's own widget is 65px, and with no sitekey it renders nothing at
 * all — so without this reservation the slot collapses and everything below
 * the form shifts up.
 */

.cf-turnstile {
  display: block;
  /* Turnstile's own rendered height. This is the floor for slots we ADD where
     the source had no captcha at all (Gravity Form 3) — reserving it now means
     the page does not move again when a real sitekey lands. */
  min-height: 65px;
}

/* Contact Form 7 slots REPLACE a reCAPTCHA, so they must match its 78px box
   exactly (measured on live source at 1920/1440/768/375). */
.wpcf7 .cf-turnstile {
  min-height: 78px;
}

/* Turnstile injects its iframe into the span at runtime, exactly as reCAPTCHA
   did. Keep it from adding a baseline gap. */
.cf-turnstile iframe {
  vertical-align: top;
}

/* Second and subsequent [recaptcha] tags in one form (CF7 3228 and 3296 have
   two). On source only the first rendered a widget; the rest were empty inline
   boxes that still occupied their line. Match that exactly — reserve nothing,
   but do not remove the element. */
.cf-turnstile-extra {
  display: inline;
}

/* Gravity Forms had no captcha element at all, so ours is inserted before the
   form footer rather than swapped in place. */
.cf-turnstile-wrap {
  display: block;
  margin: 0 0 16px;
}

/* Gravity Form 3 had NO captcha on source. Adding one necessarily makes that
   one page taller — see anomalies.md. Nothing to match, so no extra padding. */
.cf-turnstile-wrap .cf-turnstile {
  min-height: 65px;
}