/**
 * Gravity Forms, restyled to the reference design.
 *
 * The rest of the site applies the design by putting the reference's own utility
 * classes on each Elementor element (see elementor-neutralize.css). Gravity Forms
 * prints its own markup, so there is nothing to put classes on — a field's cssClass
 * lands on the .gfield wrapper, never on the label or the input inside it. This file
 * is the other half of that approach: the same declarations, addressed to Gravity
 * Forms' structure instead.
 *
 * Values are transcribed from the reference's form markup, which uses:
 *
 *   label     text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500
 *   input     input-minimal mt-2                        (see app.css)
 *   textarea  mt-2 w-full resize-none rounded-xl border-2 border-slate-200 bg-white
 *             px-4 py-3 text-[0.9375rem] focus:border-primary focus:ring-4
 *   submit    rounded-xl bg-gradient-to-r from-primary to-secondary px-8 py-3.5
 *             text-sm font-bold text-white shadow-lg shadow-primary/25
 *
 * Scoped to .bff-form, which 07-forms.php sets as each form's cssClass — Gravity
 * Forms puts that on the <form> element itself.
 *
 * This file is unlayered and Gravity Forms' stylesheets are demoted into the
 * `gravityforms` cascade layer by functions.php, so every rule here wins regardless
 * of how specific Gravity Forms' own selector is. Without that demotion, matching
 * its markup property by property does not converge — the same problem Elementor
 * presented, and the same fix.
 */

/* Gravity Forms' wrapper carries margins of its own; the surrounding layout owns
   spacing here. Both forms on this site are ours, so this needs no narrower scope. */
.gform_wrapper {
	margin: 0;
}

.gform_wrapper form.bff-form {
	margin: 0;
}

/* space-y-6 in the reference. A grid rather than sibling margins so that a field
   hidden by conditional logic collapses its gap with it. */
.bff-form .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.bff-form .gfield {
	min-width: 0;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------------- labels */

.bff-form .gfield_label,
.bff-form legend.gfield_label {
	display: block;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 16.5px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-slate-500);
}

/* The reference writes the required marker into the label text as " *". */
.bff-form .gfield_required {
	margin-left: 0.25em;
	color: var(--color-slate-500);
	font-weight: 700;
}

.bff-form .gfield_required .gfield_required_text {
	font-style: normal;
}

.bff-form .gform_required_legend {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	color: var(--color-ink-muted);
}

.bff-form .gfield_description {
	margin-top: 0.5rem;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------- inputs */

.bff-form input[type="text"],
.bff-form input[type="email"],
.bff-form input[type="tel"],
.bff-form input[type="url"],
.bff-form input[type="number"],
.bff-form select {
	/* .input-minimal, plus the mt-2 that follows it in the reference. */
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.75rem;
	background: #ffffffeb;
	color: var(--color-ink);
	font: inherit;
	font-size: 0.9375rem;
	outline: none;
	transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

.bff-form input[type="text"]:focus,
.bff-form input[type="email"]:focus,
.bff-form input[type="tel"]:focus,
.bff-form input[type="url"]:focus,
.bff-form input[type="number"]:focus,
.bff-form select:focus {
	background: #fff;
	border-color: #2e3fab73;
	box-shadow: 0 0 0 4px #2e3fab1a;
}

.bff-form ::placeholder {
	color: var(--color-ink-muted);
}

.bff-form textarea {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--color-slate-200);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--color-slate-900);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 22.5px;
	/* The reference's textarea is rows="4"; Gravity Forms prints rows="10" and
	   exposes no control for it, so the height is set here instead:
	   4 x 22.5px of text + 24px padding + 4px border. */
	height: 118px;
	resize: none;
	outline: none;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.bff-form textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px #2e3fab26;
}

/* Gravity Forms sizes inputs with .small/.medium/.large; the reference is always
   full width. */
.bff-form .ginput_container {
	margin: 0;
	max-width: none;
}

/* ------------------------------------------------------------------ buttons */

.bff-form .gform_button,
.bff-form .gform_next_button,
.bff-form .gform_previous_button {
	appearance: none;
	border: 0;
	border-radius: 0.75rem;
	padding: 0.875rem 2rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	/* 20px, not 1: with padding of 14px this is what makes the reference's 48px
	   button height. */
	line-height: 20px;
	color: #fff;
	background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
	box-shadow: 0 10px 15px -3px #2e3fab40, 0 4px 6px -4px #2e3fab40;
	cursor: pointer;
	transition: filter 0.2s, opacity 0.2s;
}

.bff-form .gform_button:hover,
.bff-form .gform_next_button:hover {
	filter: brightness(1.05);
}

.bff-form .gform_button:disabled {
	opacity: 0.5;
}

/* "Back" is secondary; the reference has no equivalent, so it is given the outline
   treatment its buttons use elsewhere rather than a second gradient. */
.bff-form .gform_previous_button {
	background-image: none;
	background-color: #fff;
	color: var(--color-secondary);
	border: 2px solid var(--color-secondary);
	box-shadow: none;
}

.bff-form .gform_footer,
.bff-form .gform_page_footer {
	display: flex;
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
}

/* -------------------------------------------------------- donation amounts */

/* The reference renders the preset amounts as a button grid. Gravity Forms emits
   radios, so the input is taken out of flow and its label becomes the button. */
/* No margin-top: the reference's mt-10 above this grid is carried by the shortcode
   widget's own wrapper class, and setting it here as well doubled the gap. */
.bff-form-donate .bff-amount .gfield_radio {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.bff-form-donate .bff-amount .gfield_radio {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bff-form-donate .bff-amount .gchoice {
	display: block;
	margin: 0;
}

.bff-form-donate .bff-amount .gchoice input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bff-form-donate .bff-amount .gchoice label {
	display: block;
	margin: 0;
	padding: 1rem 0.75rem;
	border: 2px solid var(--color-slate-200);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--color-slate-800);
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.bff-form-donate .bff-amount .gchoice label:hover {
	border-color: #0ea5e966;
	background-color: #0ea5e90d;
}

.bff-form-donate .bff-amount .gchoice input[type="radio"]:checked + label {
	border-color: var(--color-secondary);
	background-color: #0ea5e914;
	color: var(--color-slate-900);
}

/* Keyboard focus has to be visible on the label, since the radio itself is hidden. */
.bff-form-donate .bff-amount .gchoice input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

/* The reference labels this grid only through the surrounding copy. */
.bff-form-donate .bff-amount .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Custom amount: a bordered row with a "$" prefix, matching the reference. */
.bff-form-donate .bff-amount-custom .ginput_container {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--color-slate-200);
	border-radius: 0.75rem;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.bff-form-donate .bff-amount-custom .ginput_container::before {
	content: "$";
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-slate-400);
}

.bff-form-donate .bff-amount-custom .ginput_container:focus-within {
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 4px #0ea5e933;
}

.bff-form-donate .bff-amount-custom input[type="number"] {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-slate-900);
	/* The reference uses a text input; the spinners would give it away. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.bff-form-donate .bff-amount-custom input[type="number"]:focus {
	box-shadow: none;
	border: 0;
	background: transparent;
}

.bff-form-donate .bff-amount-custom input[type="number"]::-webkit-outer-spin-button,
.bff-form-donate .bff-amount-custom input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.bff-form-donate .bff-amount-custom input[type="number"]::placeholder {
	color: var(--color-slate-300);
}

/* Both donation buttons run the full width of the panel. */
.bff-form-donate .gform_page_footer,
.bff-form-donate .gform_footer {
	margin-top: 2.5rem;
}

.bff-form-donate .gform_button,
.bff-form-donate .gform_next_button {
	flex: 1;
	padding-block: 1rem;
}

/* --------------------------------------------------- validation and status */

.bff-form .gfield_error input,
.bff-form .gfield_error textarea,
.bff-form .gfield_error select {
	border-color: var(--color-red-600);
}

.bff-form .validation_message,
.bff-form .gfield_validation_message {
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-red-600);
}

.gform_wrapper .gform_validation_errors {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-red-200);
	border-radius: 0.75rem;
	background: var(--color-red-50);
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-red-800);
}

.gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-emerald-200);
	border-radius: 0.75rem;
	background: var(--color-emerald-50);
	color: var(--color-emerald-900);
	font-size: 0.9375rem;
	line-height: 1.6;
}