/**
 * Gravity Forms on retreat pages.
 *
 * Auto-enqueued: inc/enqueue.php globs sections/retreat/*.css for the
 * page-retreat template, so this file needs no enqueue change.
 *
 * GF renders with its Orbital theme, driven by --gf-* custom properties.
 * Setting those is why this file needs no !important: we are feeding GF's own
 * inputs rather than overruling its output.
 *
 * THE SUBMIT BUTTON IS NOT STYLED HERE. It is given the theme's own button
 * classes by inc/gravityforms-styling.php, so it inherits buttons.css --
 * including the uppercase, the 0.9px letter-spacing and the <=768px arm that
 * a hand-copied version kept missing. Change the button in buttons.css.
 *
 * Tokens: the theme's aliases (--radius-pill, --font-heading), never the raw
 * --wp--* presets, per theme-conventions.md.
 */

.retreat-page .gform_wrapper.gform-theme {
	/* Pill controls, off the theme's radius scale rather than a magic number. */
	--gf-ctrl-radius: var(--radius-pill);

	/* A 100px radius on a multi-line box crops its own first and last lines,
	   so the textarea takes the soft corner instead -- same family, right shape. */
	--gf-ctrl-textarea-radius: var(--radius-md);

	/* GF ships --gf-font-size-primary at 14px. iOS Safari zooms the viewport
	   whenever a focused field is under 16px, which is what made this form
	   awkward to fill in on a phone. */
	--gf-ctrl-font-size: 16px;

	/* A pill only reads as a pill with height behind it; GF's default is 38px. */
	--gf-ctrl-size: 52px;
	--gf-ctrl-padding-x: 24px;
}

/* Breathing room between the intro copy and the form. */
.retreat-page .gform_wrapper {
	margin-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

/* Textarea: the field a phone keyboard fights with.
   GF renders it with rows='10', which fills most of a phone screen and pushes
   the submit button below the fold. min-height cannot fix that -- it is only a
   floor -- so the height is set explicitly and the rows attribute overruled.
   resize:vertical keeps the drag handle useful without letting a sideways drag
   break the column. */
.retreat-page .gform_wrapper textarea {
	resize: vertical;
	block-size: 8.5rem;
	min-block-size: 5rem;
	max-inline-size: 100%;
	border-radius: var(--radius-md);
	padding: 16px 20px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.retreat-page .gform_wrapper textarea {
		block-size: 6.5rem;
	}
}