/*
 * PPSSPP forum: phone layout for the MyBB 1.8 Default theme.
 * Linked from the set-1 "headerinclude" template (with a ?v=N cache buster; bump N after editing,
 * Cloudflare caches this file). Only applies to narrow screens; desktop is unchanged.
 * Master copy: /home/hrydg/server/forum-theme/ppsspp-mobile.css on ZEN.
 */
@media screen and (max-width: 768px) {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* The Default theme forces a 970-990px wide page. */
	#container,
	.wrapper {
		min-width: 0;
		width: auto;
	}
	.wrapper {
		margin: 0 8px;
	}

	/* Header: smaller logo, ad on its own line, top links wrap under it. */
	#logo {
		padding: 6px 0;
	}
	#logo .wrapper > a img {
		max-height: 48px;
		width: auto;
	}
	#logo .wrapper > div {
		display: block !important;
		margin: 6px 0 0 !important;
		max-width: 100%;
		overflow: hidden;
	}
	#logo ul.top_links {
		float: none;
		text-align: left;
		margin: 6px 0 0;
		padding: 0;
		font-weight: normal;
	}
	#logo ul.top_links li {
		display: inline-block;
		margin: 0 12px 4px 0;
	}
	#search {
		display: none;
	}
	#panel .upper,
	#panel .lower {
		padding: 6px 0;
	}
	#panel .upper ul,
	#panel .lower ul {
		float: none;
		padding: 0;
		margin: 0;
	}
	#panel .upper li,
	#panel .lower li {
		display: inline-block;
		margin: 2px 10px 2px 0;
	}
	#panel .upper .welcome {
		display: block;
		float: none;
	}

	#content {
		padding: 8px 0;
	}
	.navigation {
		font-size: 12px;
	}

	/* Tables: stack rows and cells as blocks so nothing is wider than the screen. */
	#content table.tborder,
	#content table.tborder > thead,
	#content table.tborder > tbody,
	#content table.tborder tr {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	#content table.tborder td,
	#content table.tborder th {
		display: block;
		width: auto !important;
		box-sizing: border-box;
		text-align: left !important;
		white-space: normal !important;
	}
	/* Column headings ("Threads", "Posts", "Replies", ...) mean nothing once stacked. */
	#content table.tborder td.tcat:not(:first-child) {
		display: none;
	}

	/* Forum lists (index, sub-forums): keep the forum name and description. Hide the read/unread icon
	   and the Threads / Posts / Last Post cells. */
	#content table.tborder td[width="1"],
	#content table.tborder td[style*="nowrap"] {
		display: none !important;
	}

	/* Thread lists (forumdisplay, search results, announcements): title, author and date only. */
	#content tr.inline_row > td:not(:nth-child(3)),
	#content table.tborder td[width="2%"],
	#content table.tborder td.forumdisplay_announcement[align="center"] {
		display: none !important;
	}

	/* Posts: compact author bar, fit content to the screen. */
	.post .post_author {
		padding: 6px;
	}
	.post .post_author div.author_avatar img {
		width: 40px;
		height: auto;
		max-height: 40px;
	}
	.post .post_author div.author_statistics {
		display: none;
	}
	.post .post_head {
		padding: 6px 4px;
	}
	.post_body {
		padding: 8px 4px;
		overflow-wrap: anywhere;
	}
	.post_body img,
	.post_body iframe,
	.post_body video,
	.post_body embed,
	.post_body object {
		max-width: 100% !important;
		height: auto;
	}
	.post_body iframe {
		aspect-ratio: 16 / 9;
		height: auto !important;
	}
	.post_body blockquote,
	.post_body .codeblock {
		margin-left: 0;
		margin-right: 0;
	}
	.post_body .codeblock code,
	.post_body pre {
		overflow-x: auto;
		max-width: 100%;
		display: block;
	}
	.post .post_controls {
		padding: 6px 4px;
	}
	.post .post_controls .postbit_buttons > a:link,
	.post .post_controls .postbit_buttons > a:visited {
		margin: 2px 4px 2px 0;
	}
	.signature {
		display: none;
	}

	/* Forms and the editor. */
	textarea,
	input.textbox,
	select {
		max-width: 100%;
		box-sizing: border-box;
	}
	#quick_reply_form textarea,
	.sceditor-container,
	.sceditor-container iframe,
	.sceditor-container textarea {
		width: 100% !important;
	}
	.sceditor-toolbar {
		height: auto !important;
	}

	/* Two-column layouts (User CP, Mod CP): stack the menu above the content. */
	td[width="180"][valign="top"],
	td.usercp_nav_cell {
		display: block;
		width: auto;
	}

	.pagination a,
	.pagination .pagination_current {
		display: inline-block;
		margin-bottom: 4px;
	}
	.float_right,
	.float_left {
		max-width: 100%;
	}
	#footer ul.menu li {
		display: inline-block;
		margin: 0 10px 4px 0;
	}
	#debug {
		float: none;
	}
}