/**
 * Shared mobile typography — readable without looking “zoomed”
 * Phones + tablets only. Desktop unchanged.
 *
 * Note: low-DPI phones (e.g. Galaxy A21 720p) make large CSS fonts look
 * much bigger than high-DPI phones (e.g. A16 / modern iPhones). Sizes
 * below are a middle ground that works across both.
 *
 * Imported by: registration-mobile.css, login-flow-mobile.css,
 * panel-mobile.css, home-mobile.css (also linked directly on some views)
 */

/* Tablets + phones */
@media screen and (max-width: 1024px) {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}

	p,
	li,
	td,
	th,
	label,
	.form-group label,
	.terms p,
	.terms li,
	.login-box p,
	.welcome-panel p,
	.begin-reg-box p,
	.lp-upload-panel p,
	#site-content p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}

	/* Test/quiz taking UI — keep compact; panel-mobile owns these sizes */
	#site-content .test-block,
	#site-content .test-block p,
	#site-content .test-block label,
	#site-content .test-block span,
	#site-content .test-block strong,
	#site-content .test-block .test-question,
	#site-content .test-block .test-options,
	#site-content .test-block .ajax_options,
	#site-content .test-block .radio label,
	#site-content .test_container_bla .test-block,
	#site-content .test_container_bla .hide_after_click p,
	#site-content .test_container_bla .hide_after_click div,
	#site-content .test_container_bla .show_test_block > p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	#site-content .test_container_bla .hide_after_click h1 {
		font-size: 17px !important;
		line-height: 1.3 !important;
	}

	#site-content .test-block .btn,
	#site-content .test-block button,
	#site-content .test-block a.btn,
	#site-content .test_container_bla .hide_after_click .btn,
	#site-content .test_container_bla .hide_after_click a.btn {
		font-size: 14px !important;
		line-height: 1.35 !important;
	}

	/* h1–h4; h5/h6 stay smaller */
	h1,
	h2,
	h3,
	h4,
	.page-h1,
	.register-header,
	.welcome-panel h1,
	.welcome-panel h2,
	.welcome-panel h3,
	.welcome-panel h4,
	#site-content .terms h1,
	#site-content .terms h2,
	#site-content .terms h3,
	#site-content .terms h4,
	.login-box h1,
	.login-box h2,
	.login-box h3,
	.login-box h4,
	.lp-upload-panel h1,
	.lp-upload-panel h2,
	.lp-upload-panel h3,
	.lp-upload-panel h4,
	#site-content h1,
	#site-content h2,
	#site-content h3,
	#site-content h4,
	body#login-body h1,
	body#login-body h2,
	body#login-body h3,
	body#login-body h4 {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}

	h5,
	h6 {
		font-size: 15px !important;
		line-height: 1.4 !important;
	}

	.form-control,
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type="tel"],
	input[type="search"],
	input[type="date"],
	input[type="url"],
	select,
	textarea,
	.login-box .form-control,
	.login-box input:not([type="radio"]):not([type="checkbox"]),
	.begin-reg-box .form-control,
	.begin-reg-box input:not([type="radio"]):not([type="checkbox"]),
	#site-content input.form-control,
	#site-content select.form-control,
	#site-content textarea.form-control {
		font-size: 16px !important; /* avoids iOS zoom + readable */
		line-height: 1.35 !important;
		height: auto !important;
		min-height: 48px !important;
		padding: 12px 14px !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	/* Never stretch quiz/test radio controls to full width */
	input[type="radio"],
	input[type="checkbox"],
	.test-block input[type="radio"],
	.test-block input[type="checkbox"] {
		width: auto !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
	}

	input.form-control,
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type="tel"] {
		white-space: nowrap !important;
	}

	.form-control::placeholder,
	input::placeholder,
	textarea::placeholder {
		font-size: 15px !important;
		line-height: 1.35 !important;
		opacity: 1;
	}

	.form-control::-webkit-input-placeholder,
	input::-webkit-input-placeholder {
		font-size: 15px !important;
		line-height: 1.35 !important;
	}

	select.form-control,
	select {
		min-height: 48px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		padding-right: 28px !important;
	}

	textarea.form-control,
	textarea {
		min-height: 100px !important;
		white-space: pre-wrap;
	}

	.btn,
	button,
	input[type="submit"],
	a.btn {
		font-size: 16px !important;
		line-height: 1.4 !important;
		min-height: 48px !important;
		height: auto !important;
		padding: 10px 14px !important;
		box-sizing: border-box !important;
	}

	.btn-lg {
		font-size: 17px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	table {
		font-size: 14px !important;
	}

	#side-menu li,
	#mobile-main-navigation li,
	#mobile-main-navigation li a {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}

	.home-grids .home-grid h6 {
		font-size: 15px !important;
	}

	.breadcrumb,
	.breadcrumb li,
	.breadcrumb li a {
		font-size: 13px !important;
	}

	#site-footer,
	#site-footer p,
	#site-footer a {
		font-size: 13px !important;
	}
}

/* Phones — keep compact so A21 / iPhone don’t look zoomed */
@media screen and (max-width: 428px) {
	body {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}

	p,
	li,
	label,
	.form-group label,
	.terms p,
	.terms li,
	.login-box p,
	.welcome-panel p,
	.begin-reg-box p,
	.lp-upload-panel p,
	#site-content p {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}

	#site-content .test-block,
	#site-content .test-block p,
	#site-content .test-block label,
	#site-content .test-block span,
	#site-content .test-block strong,
	#site-content .test-block .test-question,
	#site-content .test-block .test-options,
	#site-content .test-block .ajax_options,
	#site-content .test-block .radio label,
	#site-content .test_container_bla .hide_after_click p,
	#site-content .test_container_bla .hide_after_click div,
	#site-content .test_container_bla .show_test_block > p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	#site-content .test_container_bla .hide_after_click h1 {
		font-size: 17px !important;
	}

	#site-content .test-block .btn,
	#site-content .test-block button,
	#site-content .test-block a.btn,
	#site-content .test_container_bla .hide_after_click .btn,
	#site-content .test_container_bla .hide_after_click a.btn {
		font-size: 14px !important;
	}

	h1,
	h2,
	h3,
	h4,
	.page-h1,
	.register-header,
	.welcome-panel h3,
	.welcome-panel h4,
	.login-box h4,
	.lp-upload-panel h4,
	#site-content h1,
	#site-content h2,
	#site-content h3,
	#site-content h4 {
		font-size: 18px !important;
	}

	.email-already-registered h4 {
		font-size: 18px !important;
		line-height: 1.4 !important;
	}

	.form-control,
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type="tel"],
	input[type="search"],
	input[type="date"],
	select,
	textarea,
	.login-box .form-control,
	.login-box input:not([type="radio"]):not([type="checkbox"]),
	.begin-reg-box .form-control {
		font-size: 16px !important;
		min-height: 46px !important;
		padding: 10px 12px !important;
	}

	.btn,
	button,
	input[type="submit"],
	a.btn {
		font-size: 16px !important;
		min-height: 46px !important;
	}

	.btn-lg {
		font-size: 16px !important;
	}

	table {
		font-size: 14px !important;
	}

	.register-top-title {
		font-size: 16px !important;
	}
}

/* Larger phones / small tablets — a bit more room */
@media screen and (min-width: 429px) and (max-width: 767px) {
	body,
	p,
	li,
	label,
	.login-box p,
	#site-content p {
		font-size: 17px !important;
	}

	h1,
	h2,
	h3,
	h4,
	.page-h1,
	.register-header,
	#site-content h1,
	#site-content h2,
	#site-content h3,
	#site-content h4 {
		font-size: 22px !important;
	}

	/* Don’t let the 17/22px bump hit test/quiz screens */
	#site-content .test-block,
	#site-content .test-block p,
	#site-content .test-block label,
	#site-content .test-block span,
	#site-content .test-block strong,
	#site-content .test-block .test-question,
	#site-content .test-block .test-options,
	#site-content .test-block .ajax_options,
	#site-content .test-block .radio label,
	#site-content .test_container_bla .hide_after_click p,
	#site-content .test_container_bla .hide_after_click div,
	#site-content .test_container_bla .show_test_block > p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	#site-content .test_container_bla .hide_after_click h1 {
		font-size: 17px !important;
	}

	#site-content .test-block .btn,
	#site-content .test-block button,
	#site-content .test-block a.btn,
	#site-content .test_container_bla .hide_after_click .btn,
	#site-content .test_container_bla .hide_after_click a.btn {
		font-size: 14px !important;
	}
}