/* Good Girls target-theme mobile support. Loaded after the active MyBB theme. */

#logo img {
	display: block;
	width: min(100%, 305px);
	height: auto;
	max-height: none;
}

@media (min-width: 769px) {
	#logo {
		padding: 10px 0;
	}

	#logo .wrapper {
		display: flex;
		align-items: center;
		min-height: 0;
	}
}

@media (max-width: 768px) {
	#logo .wrapper {
		min-height: 0;
	}

	#logo img {
		width: min(100%, 273px);
		max-height: none;
	}
}

@media (max-width: 480px) {
	#logo img {
		width: min(100%, 273px);
		max-width: 100%;
	}

	#header ul.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 4px 12px;
	}

	#header ul.menu li,
	#header ul.menu li:last-child {
		width: auto;
		min-width: 0;
		flex: 0 0 auto;
		grid-column: auto;
	}

	#header ul.menu li,
	#header ul.menu li a {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	#header ul.menu li a {
		display: inline-block;
		min-height: 32px;
	}

	#panel .upper .wrapper {
		align-items: flex-start;
	}

	#panel .upper .wrapper > form {
		order: -1;
		flex: 0 0 100%;
		width: 100%;
		margin: 0 0 8px;
	}

	#panel .upper .wrapper > .welcome {
		flex: 0 0 100%;
	}

	#panel .upper .wrapper > form #search {
		width: 100%;
		box-sizing: border-box;
	}

	#panel .upper .wrapper > form #search input.textbox {
		flex: 1 1 auto;
		min-width: 0;
	}

	#panel .upper .wrapper > form #search input.button {
		flex: 0 0 auto;
	}
}


@media (max-width: 600px) {
	/* MyBB forumdisplay has seven cells; keep status, subject, and replies. */
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) {
		display: block;
		width: 100%;
		overflow: visible;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody {
		display: block;
		width: 100%;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.thead),
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tfoot) {
		display: block;
		width: 100%;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.thead) > td,
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tfoot) > td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tcat),
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) minmax(56px, max-content);
		width: 100%;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tcat) > td,
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td {
		display: block;
		box-sizing: border-box;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tcat) > td:first-child {
		grid-column: 1 / 3;
		text-align: left;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tcat) > td:nth-child(2) {
		grid-column: 3;
		text-align: right;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td.tcat) > td:nth-child(n + 3),
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td:nth-child(2),
	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td:nth-child(n + 5) {
		display: none;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td:nth-child(1) {
		grid-column: 1;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td:nth-child(3) {
		grid-column: 2;
		overflow-wrap: anywhere;
	}

	#content table.tborder:has(> tbody > tr > td[class*="forumdisplay_"]) > tbody > tr:has(> td[class*="forumdisplay_"]) > td:nth-child(4) {
		grid-column: 3;
		text-align: right;
	}
}