/* WPForms → YFC design.

   WPForms is VARIABLE-DRIVEN: its own rules like
     div.wpforms-container-full button[type=submit] { background-color: var(--wpforms-button-background-color) }
   sit at (0,2,2) in a stylesheet that loads AFTER ours, so fighting them with
   selectors is a losing game. Set its variables instead — that is the supported
   customization path and it wins everywhere without specificity escalation.
*/

div.wpforms-container-full,
.wpforms-container {
	--wpforms-field-border-radius: 4px;
	--wpforms-field-background-color: var(--white);
	--wpforms-field-border-color: var(--gray-border);
	--wpforms-field-text-color: var(--black);
	--wpforms-label-color: #555;
	--wpforms-label-sublabel-color: var(--gray-mid);
	--wpforms-label-error-color: var(--red);
	--wpforms-button-background-color: var(--red);
	--wpforms-button-text-color: var(--white);
	--wpforms-button-border-radius: 2px;
	--wpforms-field-size-font-size: .95rem;
	--wpforms-button-size-font-size: .9rem;
}

/* the inline signup cards sit on dark, so flip the field tokens there.
   --wpforms-button-size-margin-top is the one that breaks the inline row: the
   submit container stretches to the input's height INCLUDING its 10px margin,
   leaving the button 57px against a 67px field. Zero it and the button fills. */
.newsletter div.wpforms-container-full,
.newsletter .wpforms-container,
.signup-card div.wpforms-container-full,
.signup-card .wpforms-container {
	--wpforms-button-size-margin-top: 0;
	--wpforms-field-background-color: rgba(255,255,255,.05);
	--wpforms-field-border-color: rgba(255,255,255,.2);
	--wpforms-field-text-color: var(--white);
	--wpforms-field-border-radius: 0;
	--wpforms-button-border-radius: 0;
}

/* ---------- generic: contact / e-transfer / prayer, inside .form-card ---------- */
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-field { padding: 0 0 16px; }
.wpforms-container .wpforms-field-label {
	font-family: var(--font-ui);
	font-size: .78rem; font-weight: 600; letter-spacing: .5px;
	text-transform: uppercase; color: #555; margin: 0 0 8px;
}
.wpforms-container .wpforms-required-label { color: var(--red); border: 0; }
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
	width: 100%; padding: 14px 16px;
	border: 1px solid var(--gray-border); border-radius: 4px;
	font-family: var(--font-ui); font-size: .95rem;
	background: var(--white); color: var(--black); box-shadow: none;
}
.wpforms-container textarea { resize: vertical; min-height: 120px; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus { outline: none; border-color: var(--red); }
.wpforms-container .wpforms-field-description { font-size: .8rem; color: var(--gray-mid); }

/* first/last name side by side, like .form-row */
.wpforms-container .wpforms-field-name .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpforms-container .wpforms-field-name .wpforms-field-row-block { width: auto; margin: 0; }

/* submit → .btn.btn-primary */
.wpforms-container .wpforms-submit-container { padding: 6px 0 0; }
.wpforms-container button.wpforms-submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; padding: 16px 34px;
	background: var(--red); color: var(--white);
	border: 2px solid transparent; border-radius: 2px;
	font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
	letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
	transition: background .3s, transform .3s var(--ease);
}
.wpforms-container button.wpforms-submit:hover { background: var(--red-dark); }

/* ---------- inline signup cards on dark: .newsletter (.nl-form) and
             .signup-card (.signup-form on /pray/) ----------

   Measured against the static: input and button are BOTH 66.9px and share a top
   edge, because .nl-form is a flex row and the button stretches to the input.

   WPForms fights this in three specific places, all found via el.matches():
     div.wpforms-container-full input      -> height: var(--wpforms-field-size-input-height)
     div.wpforms-container-full input[...] -> line-height: 100%   (kills the 66.9 -> gives 56)
     .wpforms-container .wpforms-field     -> padding: 15px 0
   The last one TIES our old (0,2,0) selector and wpforms-full.min.css loads
   after us, so the tie went to WPForms. Hence the extra div./container-full
   qualifiers below - they buy specificity, they are not decoration. */

.newsletter .wpforms-container,
.signup-card .wpforms-container { min-width: 380px; margin: 0 auto; }

.newsletter .wpforms-form,
.signup-card .wpforms-form { display: flex; align-items: stretch; gap: 0; }

.newsletter .wpforms-field-container,
.signup-card .wpforms-field-container { flex: 1; min-width: 0; display: flex; }

/* beat .wpforms-container .wpforms-field {padding:15px 0} on specificity, not order */
.newsletter div.wpforms-container .wpforms-field,
.signup-card div.wpforms-container .wpforms-field { padding: 0; width: 100%; }

/* label is visually hidden, not removed - the design uses a placeholder instead */
.newsletter .wpforms-field-label, .newsletter .wpforms-required-label,
.signup-card .wpforms-field-label, .signup-card .wpforms-required-label {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* height:auto + line-height:normal reproduce the static's 66.9px from padding alone */
.newsletter div.wpforms-container-full input[type=email],
.signup-card div.wpforms-container-full input[type=email] {
	width: 100%; height: auto; line-height: normal;
	padding: 16px 18px; border-radius: 0;
	border: 1px solid rgba(255,255,255,.2); border-right: none;
	background: rgba(255,255,255,.05); color: var(--white);
	font-family: var(--font-ui); font-size: .92rem;
}
.newsletter div.wpforms-container-full input[type=email]::placeholder,
.signup-card div.wpforms-container-full input[type=email]::placeholder { color: #999; }

.newsletter .wpforms-submit-container,
.signup-card .wpforms-submit-container { padding: 0; display: flex; }

.newsletter div.wpforms-container-full button.wpforms-submit,
.signup-card div.wpforms-container-full button.wpforms-submit {
	width: auto; height: auto; align-self: stretch;
	border-radius: 0; border: none;
	padding: 0 28px; font-family: var(--font-ui); font-weight: 700;
	font-size: .8rem; letter-spacing: 1.2px; text-transform: uppercase;
	background: var(--red); color: var(--white);
}
.newsletter div.wpforms-container-full button.wpforms-submit:hover,
.signup-card div.wpforms-container-full button.wpforms-submit:hover { background: var(--red-dark); }

@media (max-width: 760px) {
	.newsletter .wpforms-container,
	.signup-card .wpforms-container { min-width: 0; }
	.newsletter .wpforms-form,
	.signup-card .wpforms-form { flex-direction: column; gap: 12px; }
	.newsletter div.wpforms-container-full input[type=email],
	.signup-card div.wpforms-container-full input[type=email] { border-right: 1px solid rgba(255,255,255,.2); }
	.newsletter div.wpforms-container-full button.wpforms-submit,
	.signup-card div.wpforms-container-full button.wpforms-submit { width: 100%; padding: 16px 0; }
}

/* ---------------------------------------------------------------------------
   WPForms PRO REGRESSION, 2026-08-25: the inline signup rows broke again.

   forms.css above says "WPForms is variable-driven, set its variables". That was
   true under Lite. **Pro breaks that rule**: with modern markup
   (`wpforms-render-modern`) it prints a PER-FORM INLINE BLOCK keyed on an ID -

       #wpforms-179 { --wpforms-button-size-margin-top: 10px; ... }

   An ID is (1,0,0), so it outranks ANY class-based override of that variable no
   matter how many classes are stacked. Our `--wpforms-button-size-margin-top:0`
   on `.newsletter div.wpforms-container-full` was simply losing, which put the
   10px margin back on the submit container: container 57px against a 67px field,
   button stretched to 57px, misaligned by exactly 10px. Same symptom as before,
   completely different cause.

   Fix: stop fighting for the VARIABLE and zero the PROPERTY it feeds. WPForms'
   own rule is `div.wpforms-container-full .wpforms-form .wpforms-submit-container
   { margin-top: var(--wpforms-button-size-margin-top) }`, so a longer class chain
   beats it on specificity and the variable's value stops mattering - an inline ID
   block cannot reach it.
   --------------------------------------------------------------------------- */
.newsletter div.wpforms-container-full .wpforms-form .wpforms-submit-container,
.signup-card div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	margin-top: 0;
	margin-bottom: 0;
}

/* Pro also injects a reCAPTCHA container as a sibling INSIDE the flex row. It
   measures 0 wide today so it is visually harmless, but pin it so it can never
   claim space if a badge is ever rendered there. */
.newsletter .wpforms-recaptcha-container,
.signup-card .wpforms-recaptcha-container { flex: 0 0 0; }

/* ---------------------------------------------------------------------------
   /pray/ signup row was 123px LEFT of the card's centre.
   WPForms sets `div.wpforms-container-full:not(:empty){margin:24px auto}`, so the
   auto margins are there - but the container is not block-level in its Elementor
   wrapper, so `auto` resolves to 0 and nothing centres. Chasing the margin is the
   wrong fix.
   Mirror what the static actually does instead: the static caps the ROW
   (.signup-form{max-width:460px;margin:0 auto}) rather than the container. Let the
   container span the card and centre the form inside it.
   Scoped to .signup-card only - the homepage .newsletter row is already centred
   and must not be disturbed.
   --------------------------------------------------------------------------- */
.signup-card div.wpforms-container-full{width:100%;max-width:none;}
.signup-card div.wpforms-container-full .wpforms-form{
	max-width:460px;margin-left:auto;margin-right:auto;}