/*
 * Terrell Builders — Atomic Alloy form styling
 * ============================================
 *
 * Makes an `alloy/form` block render like the Ninja Forms 2.9 contact form on
 * the old site (/contact-us/).
 *
 * Most of the appearance already comes from the theme, which styles
 * `input, select, textarea` (1px #eee border, 10px padding, #404040 text) and
 * `input[type="submit"]` (the grey gradient "Send" button). What Ninja Forms
 * added on top — and what this file reproduces — is the layout: labels above,
 * full-width fields, fixed-height textareas, and the red required asterisk.
 *
 * Each rule below is annotated with the Ninja Forms rule it replaces, from
 * wp-content/plugins/ninja-forms/css/ninja-forms-display.css on the live site.
 *
 * Enqueued by functions.php only on pages that actually contain the block.
 */


/* NF: `.ninja-forms-form-wrap *, *:after, *:before { box-sizing: border-box }`.
   Without this, width:100% plus the theme's 10px padding and 1px border would
   overflow the content column by 22px. */
.wp-block-alloy-form,
.wp-block-alloy-form *,
.wp-block-alloy-form *::before,
.wp-block-alloy-form *::after {
	box-sizing: border-box;
}


/* NF: `.label-above label { display: block; margin-bottom: 5px }`,
   `.text-wrap.label-above label { width: 100% }` and
   `.ninja-forms-form-wrap label { font-weight: bold }`. */
.wp-block-alloy-label {
	display: block;
	width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}


/* NF: `.text-wrap.label-above input`, `.textarea-wrap.label-above textarea` and
   `.list-dropdown-wrap.label-above select` are all `width: 100%`; the 20px gap
   below each field is NF's `.field-wrap { margin-bottom: 20px }`.

   Alloy renders bare inputs with no per-field wrapper, so the spacing goes on
   the fields themselves rather than on a wrapper. */
.wp-block-alloy-form .wp-block-alloy-field-text,
.wp-block-alloy-form .wp-block-alloy-field-email,
.wp-block-alloy-form .wp-block-alloy-field-textarea,
.wp-block-alloy-form select {
	width: 100%;
	margin-bottom: 20px;
}


/* NF: `.textarea-wrap textarea { height: 200px }` — both textareas on the old
   form are this height. */
.wp-block-alloy-form .wp-block-alloy-field-textarea {
	height: 200px;
}


/* NF: `.ninja-forms-req-symbol { color: #ff0000 }`, emitted as
   `<span class="ninja-forms-req-symbol"><strong>*</strong></span>`.

   The alloy/label block escapes its labelContent, so the asterisk can't be
   markup inside the label. Add the class `alloy-required` to the label block
   instead and it is appended here.

   `.alloy-req-symbol` is for the "Fields marked with an * are required" line,
   which sits in a normal paragraph above the form. */
.wp-block-alloy-label.alloy-required::after {
	content: " *";
	color: #ff0000;
	font-weight: bold;
}

.alloy-req-symbol {
	color: #ff0000;
	font-weight: bold;
}


/* The "Fields marked with an * are required" line. On the old form this was a
   div with no bottom margin, sitting directly above the first label; as a
   paragraph here it would otherwise pick up the theme's `p { margin-bottom:
   30px }` and open a 30px gap that the old form doesn't have. */
.alloy-required-note {
	margin-bottom: 0;
}


/* The Cloudflare Turnstile widget has no equivalent on the old form — it is
   part of how Alloy handles spam. Given the same breathing room as a field. */
.wp-block-alloy-form .cf-turnstile:not(:empty) {
	margin-bottom: 20px;
}


/* Alloy's honeypot. The plugin already hides it inline; repeated here so the
   field stays hidden if that inline style is ever dropped. */
.wp-block-alloy-form .k-captcha {
	display: none;
}