/**
 * RFJ mobile form-control standard.
 *
 * Keep actual text-entry controls at 16 CSS px or above on mobile. iOS Safari
 * zooms the page when a focused input/textarea uses a smaller font size.
 * Small labels, hints, badges and helper text are intentionally unaffected.
 *
 * This is a global safety net for legacy and page-specific form styles. Keep
 * component styles readable too; do not rely on this override as an excuse to
 * introduce undersized controls in new work.
 */
:root {
	--rfj-mobile-form-input-font-size: 16px;
}

@media screen and (max-width: 767px), screen and (any-pointer: coarse) {
	html body :is(
		input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]),
		textarea,
		select,
		[contenteditable]:not([contenteditable="false"]),
		[role="textbox"],
		[role="searchbox"],
		.select2-selection__rendered
	) {
		font-size: var(--rfj-mobile-form-input-font-size, 16px) !important;
		font-family: inherit;
	}

	html body :is(
		input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]):not([type="range"]),
		textarea
	)::placeholder {
		font-size: inherit !important;
	}
}