/**
 * Gravity Forms styling for the ISA Center Directory form (Gravity Forms id 2).
 *
 * The form uses Gravity Forms' Orbital theme, which is built on the theme
 * framework's CSS custom properties. The type scale below sets those properties
 * rather than overriding rules: the framework derives labels, inputs,
 * descriptions and validation text from a handful of variables, so setting a
 * variable reaches every element that uses it and keeps working across plugin
 * updates. Overriding GF's own rules would mean chasing selectors wrapped in
 * long :where(:not(…)) chains on every release.
 *
 * Scoped to #gform_wrapper_2, the element that carries .gform-theme--framework.
 * Custom properties inherit, so declaring them there reaches the whole form and
 * leaves any other form on the site untouched.
 */

/* ── Type scale ──────────────────────────────────────────────────
 * Gravity Forms ships all three at 14px. The framework derives from them:
 *   primary   → inputs, selects, textareas, validation messages
 *   secondary → field labels and radio/checkbox choice labels
 *   tertiary  → field descriptions and sub-labels (address parts, etc.)
 * Line heights are unitless ratios in GF, so they scale along by themselves. */
#gform_wrapper_2 {

	* {
		font-size: 2.1rem !important;
	}
	h3 {
		font-size: 2.6rem !important;
	}

	@media screen and (max-width: 888px) {
		* {
			font-size: 1.8rem !important;
		}
		h3 {
			font-size: 2.2rem !important;
		}
	}

	--gf-font-size-primary: 18px;
	--gf-font-size-secondary: 18px;
	--gf-font-size-tertiary: 18px;

	/* Not derived from the scale above — Gravity Forms hardcodes these, so they
	   stay at 14px and 12px unless set here. */
	--gf-ctrl-btn-font-size-md: 18px;    /* submit button */
	--gf-ctrl-label-font-size-req: 16px; /* the "(Required)" marker */

	/* Date picker, used by field 84 ("Date of submission"). */
	--gf-ctrl-date-picker-cell-font-size: 16px;
	--gf-ctrl-date-picker-title-font-size: 16px;

	/* Field labels in bold. Set through the framework variable rather than an
	   !important override on .gform-field-label, which applied to every form on
	   the site rather than just this one. */
	--gf-ctrl-label-font-weight-primary: 700;

	/* Inputs are a fixed 38px tall (--gf-ctrl-size-md) and centre their text on
	   that height; 18px still sits comfortably. Uncomment for roomier fields. */
	/* --gf-ctrl-size: var(--gf-ctrl-size-lg); */
}

/* ── Horizontal radio choices ────────────────────────────────────
 * Gravity Forms' native "display in columns" option renders equal-width columns,
 * which leaves short options such as "Yes"/"No" in a needlessly wide cell. Instead
 * we lay the choices out with flexbox: each choice is only as wide as its own label
 * and they flow horizontally, wrapping to the next line when the row is full.
 *
 * Scoped to the radio container so the checkbox fields, which use
 * .gfield_checkbox, keep stacking.
 */
#gform_2 .gfield_radio {
	display: flex;
	/* GF's framework CSS sets this container to flex-direction: column, which is what
	   stacks the choices — override it to lay them out in a horizontal, wrapping row. */
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#gform_2 .gfield_radio .gchoice {
	/* Size to content: keeps "Yes"/"No" compact, lets longer options take what they need. */
	flex: 0 0 auto;
	margin: 0;
}