/*
 * goprb site: responsive layer.
 *
 * The pages are built on one outer table (marked with class "goprb-main"):
 *   row 1 - header: logo | title | picture
 *   row 2 - content: left column | problem + player | right column
 *   row 3 - footer
 *
 * On narrow screens the table is turned into a single column and reordered so
 * that the problem and its player come first, the navigation right below it,
 * and the side-column content after that.
 *
 * Loaded by every page together with Add/enc.css.
 */

/* ---------- all screen sizes ---------- */

img {
	max-width: 100%;
	height: auto;
}

/* the feedback form declares fixed pixel widths (480px inputs) in enc.css */
input,
textarea,
select {
	max-width: 100%;
	box-sizing: border-box;
}

.go-problem {
	max-width: 520px;
	margin: 0 auto;
}

/* Feedback form honeypot: people never see it, scripted submitters fill it in
   and get rejected by Add/msender.php. Kept off-screen rather than
   display:none, which simple bots know to skip. */
.goprb-trap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.goprb-form img#goprb-captcha {
	border: 1px solid #cfc9bb;
	border-radius: 3px;
	margin: 6px 0;
	max-width: 100%;
	height: auto;
}

.goprb-form .button {
	font: inherit;
	padding: 8px 14px;
	margin: 4px 0 8px;
	cursor: pointer;
}

/* ---------- language switcher ----------
   A gap after the "Language:" label, and a dropdown about 25% taller than the
   browser default. The gap is put on the LABEL, not the select: on narrow
   screens the block below forces the select to width:100% !important, and a
   left margin on it would push a full-width control past the edge - whereas the
   label there simply sits on its own line above the select, so trailing margin
   is harmless. */
.goprb-lang label {
	margin-right: 0.5em;
}

#goprb-lang-select {
	/* about 25% over the browser default (~1.38em of this font -> 1.73em) */
	height: 1.73em;
	vertical-align: middle;
}

/* ---------- side columns of equal width ----------
   In the markup the side columns have no width of their own: only the header
   row carries width="250", and the content rows carry nothing. So the browser
   hands out the leftover space by content demand - the right column asks for
   more (section navigation), the left one gives way, and below ~1400px the two
   end up visibly different: 138px against 243px on a 1024px screen.

   Fixed layout makes the split declared instead of guessed, so both sides get
   the same share on every page and at every width. The middle column is left
   auto on purpose: it takes whatever remains, which keeps the board as large
   as the screen allows - at 1024px it comes out wider than before.

   Deliberately NOT wrapped in a min-width query. The narrow-screen block below
   overrides all of this with !important, and a pair of queries that meet at
   1000/1001 leaves a gap: a viewport of 1000.5px (fractional widths appear at
   browser zoom and with overlay scrollbars) matches neither, and the table
   fell back to guessing again. */

table.goprb-main {
	table-layout: fixed;
}

table.goprb-main > tbody > tr > td:first-child,
table.goprb-main > tbody > tr > td:last-child {
	width: 22%;
	/* fixed layout does not grow a cell for long words, so let them break */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* beats the width="700"/"500" attributes of the markup */
table.goprb-main > tbody > tr > td:nth-child(2) {
	width: auto;
}

/* ---------- narrow screens ----------\n   Breakpoint 1000px: below it the three-column table squeezes the board\n   under ~250px (a 768px tablet gave 213px), which is too small to solve on. */

@media (max-width: 1000px) {

	body {
		margin: 0;
		-webkit-text-size-adjust: 100%;
	}

	table.goprb-main {
		width: 100% !important;
		height: auto !important;
		border-spacing: 0 !important;
		table-layout: auto !important;
	}

	table.goprb-main > tbody > tr {
		display: flex;
		flex-direction: column;
	}

	table.goprb-main > tbody > tr > td {
		display: block;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		padding: 12px !important;
		box-sizing: border-box;
	}

	/* content row: problem + player first, side columns after it */
	table.goprb-main > tbody > tr:nth-child(2) > td:nth-child(2) {
		order: -1;
		padding-bottom: 0 !important;
	}

	/* header: keep the title on top, shrink the logo, drop the decorative image */
	table.goprb-main > tbody > tr:first-child > td:nth-child(2) {
		order: -1;
		padding-bottom: 0 !important;
	}

	table.goprb-main > tbody > tr:first-child > td:first-child img {
		width: 180px !important;
	}

	table.goprb-main > tbody > tr:first-child > td:nth-child(3) {
		display: none !important;
	}

	table.goprb-main h1 {
		font-size: 20px;
		line-height: 1.25;
		margin: 0;
	}

	/* separate the stacked blocks visually */
	table.goprb-main > tbody > tr:nth-child(2) > td + td {
		border-top: 1px solid #e0e0e0;
	}

	/* the navigation block of the left column sits directly under the player */
	table.goprb-main > tbody > tr:nth-child(2) > td:first-child center {
		font-size: 16px;
		line-height: 1.7;
	}

	/* nested tables (news, ad blocks injected by the PHP includes) must not
	   force the page wider than the screen */
	table.goprb-main td table {
		width: 100% !important;
		max-width: 100% !important;
	}

	table.goprb-main td table td {
		width: auto !important;
		white-space: normal !important;
	}

	/* long unbreakable strings (URLs, nobr links) */
	table.goprb-main td {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* form fields size themselves from cols/size attributes, which would hold
	   the layout open; make them follow the container instead */
	input[type="text"],
	input[type="email"],
	textarea,
	select {
		width: 100% !important;
	}

	/* Language switcher stacks here: the select is forced to width:100% above and
	   drops onto its own line under the label. Add 15px of room above the whole
	   block, put a 10px gap between label and select, and enlarge both the label
	   and the select by 15% for easier reading/tapping. */
	.goprb-lang {
		margin-top: 15px;
	}

	.goprb-lang label {
		font-size: 115%;
	}

	#goprb-lang-select {
		margin-top: 10px;
		font-size: 115%;
	}

	/* the paragraph indent of enc.css would push a full-width field off-screen */
	form,
	form p {
		text-indent: 0 !important;
	}

	/* comfortable touch targets on the feedback form */
	.goprb-form input[type="submit"],
	.goprb-form button {
		min-height: 44px;
		padding: 12px 18px;
	}

	.goprb-form input[type="text"],
	.goprb-form input[type="email"],
	.goprb-form textarea {
		font-size: 16px;   /* below 16px iOS zooms the page on focus */
	}

	table.goprb-main nobr {
		white-space: normal;
	}

	/* the player itself */
	.go-problem {
		max-width: 100%;
	}

	/* tsumego.css is linked after this file, so match its specificity */
	.wgo-tsumego .wgo-tsumego-comment {
		font-size: 16px;
	}

	.wgo-tsumego .wgo-tsumego-btn {
		font-size: 16px;
		padding: 12px 8px;
		min-height: 44px;   /* comfortable touch target */
	}

	.wgo-tsumego .wgo-tsumego-control {
		margin-top: 14px;
	}

	/* readable body text on a phone */
	table.goprb-main .maintext,
	table.goprb-main .maintexth1,
	table.goprb-main p,
	table.goprb-main li {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* very small phones */
@media (max-width: 380px) {

	table.goprb-main > tbody > tr > td {
		padding: 8px !important;
	}

	table.goprb-main h1 {
		font-size: 18px;
	}
}