/* Our own small-screen layer, loaded after the MyBB stylesheets and colour
   schemes, which stay unmodified (see NOTICE.md). MyBB 1.8's master style is
   desktop only: #container and .wrapper have min-widths of 990px and 970px.
   The templates mark
   secondary table columns .mobile-hide, compact replacements .mobile-only and
   label/field tables .mobile-stack. */

.mobile-only { display: none; }
img, video { max-width: 100%; height: auto; }
.post_body { overflow-wrap: anywhere; }
.post_body pre, .post_body code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 16px stops iOS and iPadOS zooming into a field on focus. */
@media (max-width: 1024px), (pointer: coarse) {
	input.textbox, textarea, select { font-size: 16px; }
}

/* Below MyBB's design width, let the page shrink with the screen. */
@media (max-width: 1000px) {
	#container { min-width: 0; }
	.wrapper { width: auto; min-width: 0; padding: 0 12px; }
}

@media (max-width: 768px) {
	.mobile-hide { display: none !important; }
	.mobile-only { display: block; }
	span.mobile-only { display: inline; }

	#content { padding: 12px 0; }

	/* Header: name, then links that wrap, then a full-width search. */
	#logo .forum_name { display: block; font-size: 21px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
	#logo ul.top_links { margin: 8px 0 0; padding: 0; text-align: left; }
	#header ul.menu li { display: inline-block; margin: 2px 12px 4px 0; }
	#header ul.menu li a { line-height: 20px; }
	#search { float: none; display: flex; gap: 6px; margin: 0 0 8px; }
	#search input { margin: 0; }
	#search input.textbox { flex: 1; min-width: 0; }
	#panel .upper .welcome { display: block; }
	#panel .upper a.login { margin-left: 6px; }

	input.textbox, textarea, select { max-width: 100%; box-sizing: border-box; }
	input.button, button { font-size: 15px; padding: 7px 14px; }

	/* Label/field tables become one column. */
	table.mobile-stack, table.mobile-stack tbody, table.mobile-stack tr, table.mobile-stack td { display: block; width: auto !important; }
	table.mobile-stack td.trow1 + td, table.mobile-stack td.trow2 + td { padding-top: 0; }
	table.mobile-stack input.textbox, table.mobile-stack textarea { width: 100% !important; }

	/* Thread posts: stats under the name instead of squeezed to the right. */
	.post .post_author div.author_statistics { float: none; clear: left; padding: 4px 0 0; }
	.post .post_author div.author_avatar img { width: 40px; height: 40px; }

	.pagination { line-height: 2.2; }
	.pagination a, .pagination .pagination_current { display: inline-block; }

	#footer ul.menu li { display: inline-block; margin: 3px 10px 3px 0; }
	#footer .lower #current_time { float: none; display: block; margin-bottom: 4px; }
}