/**
 * Mobile fixes — Root Worldwide, 2026-07-28
 *
 * Scoped to touch devices and small viewports so the desktop design is untouched.
 * Targets the three things an audit at 375x812 turned up; the site itself has no
 * horizontal overflow on any page, so this is about form usability, not layout.
 */

/* ------------------------------------------------------------------ *
 * 1. iOS Safari zooms the whole page when a focused text field renders
 *    below 16px. Every Formidable input on this site was 14px, so every
 *    tap on every form punched the page to ~114% and left the visitor
 *    pinching back out mid-form. 16px is the exact threshold.
 * ------------------------------------------------------------------ */
@media (max-width: 980px), (pointer: coarse) {

	.frm_forms input[type="text"],
	.frm_forms input[type="email"],
	.frm_forms input[type="tel"],
	.frm_forms input[type="url"],
	.frm_forms input[type="number"],
	.frm_forms input[type="password"],
	.frm_forms input[type="search"],
	.frm_forms input[type="date"],
	.frm_forms select,
	.frm_forms textarea,
	.frm_form_field input[type="text"],
	.frm_form_field input[type="email"],
	.frm_form_field select,
	.frm_form_field textarea {
		font-size: 16px !important;
		/* iOS also needs a real line-height or the taller text clips. */
		line-height: 1.4 !important;
	}

	/* Keep the field box in proportion with the larger text. */
	.frm_forms input[type="text"],
	.frm_forms input[type="email"],
	.frm_forms input[type="tel"],
	.frm_forms input[type="date"],
	.frm_forms select {
		min-height: 46px;
	}

	.frm_forms textarea {
		min-height: 110px;
	}

	/* ------------------------------------------------------------------ *
	 * 2. Radio and checkbox rows measured 17px tall on a 27px pitch. WCAG
	 *    2.2 AA (2.5.8) wants 24px minimum; Apple and Google both say 44px.
	 *    The questionnaires stack dozens of these, which is exactly where a
	 *    mis-tap is most likely and most annoying to undo.
	 * ------------------------------------------------------------------ */
	.frm_forms .frm_radio label,
	.frm_forms .frm_checkbox label,
	.frm_forms .frm_opt_container label {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 4px 0;
		line-height: 1.35;
		cursor: pointer;
	}

	.frm_forms .frm_radio input[type="radio"],
	.frm_forms .frm_checkbox input[type="checkbox"] {
		width: 22px;
		height: 22px;
		margin-right: 10px;
		flex: 0 0 auto;
	}

	/* Submit buttons already measure 57px — leave them alone, just make sure
	   they span the width so they are hard to miss. */
	.frm_forms .frm_submit input[type="submit"],
	.frm_forms .frm_submit button {
		min-height: 48px;
	}

	/* Formidable's inline validation text is easy to miss at small sizes. */
	.frm_forms .frm_error,
	.frm_forms .frm_error_style {
		font-size: 15px !important;
		line-height: 1.45;
	}
}

/* ------------------------------------------------------------------ *
 * 3. The accessibility toolbar (nav.pojo-a11y-toolbar-left) is fixed at
 *    z-index 999999. With the mobile menu open its button covered the
 *    first item, so "Home" rendered as "ome" and taps on the left of that
 *    row hit the toolbar instead of the link.
 *
 *    Raising the menu does not work: it lives inside #main-header, which
 *    is position:fixed with z-index 99999 and therefore opens its own
 *    stacking context — no descendant can climb above 99999 no matter
 *    what value it is given. So lower the toolbar instead. 99998 keeps it
 *    above ordinary page content but beneath the header and its menu.
 * ------------------------------------------------------------------ */
@media (max-width: 980px) {

	nav.pojo-a11y-toolbar-left,
	nav.pojo-a11y-toolbar-right,
	.pojo-a11y-toolbar {
		z-index: 99998 !important;
	}
}