/*
   Responsive overrides for the Energetic theme (the /brainteasers/ WordPress blog).

   This file is a *supplement* to the site-wide /css/responsive.css, which
   header.php loads first. The theme carries its own copy of the shared page
   shell in style.css (#main, #header-inner .menu, #footer), so the site file
   already covers the parts the blog has in common with the static pages:
   the fluid #main, the wrapping nav tabs, img { max-width:100% }, table
   linearisation and the auto-height footer. Everything below is what only
   exists in this theme - the 939px #wrap, the 500px content / 420px sidebar
   columns, and the background slices cut to those exact widths.

   Same 999px breakpoint as the site file for the shell, so the two switch
   over together.
*/

@media (max-width: 999px) {

	/* single.php opens its own #wrap and header.php opens another; both are
	   this fixed 939px, which is wider than the shrunk #main it sits in. */
	#wrap {
		width: auto;
		max-width: 100%;
	}

	/* 950px, i.e. wider than the 939px shell it is centred in */
	#footer_ {
		width: auto;
	}

	/* This header writes its columns banner-first (col-2 is float:right, so
	   source order is the reverse of visual order) - the static pages' shared
	   inc/header-inner.php writes logo-first. Once the site file unfloats them
	   the theme would be the one page on the site that stacks the puzzles
	   banner above the logo, so restore the site-wide order. Flex rather than
	   swapping the markup: col-1 is a plain full-width block, so moving it
	   ahead of col-2 in the HTML would push the float onto its own line and
	   break the desktop header. */
	#wrap > .container {
		display: flex;
		flex-direction: column;
	}
	#wrap > .container .col-1 {
		order: 1;
	}
	#wrap > .container .col-2 {
		order: 2;
	}

	/* all three are fixed heights sized for a single row of floated children -
	   the category/comment line, the prev/next links and the sidebar tabs all
	   wrap to two rows on a phone and would otherwise spill out of their
	   background. overflow:hidden keeps the floats contained now that the
	   height no longer does it. */
	.entry_footer,
	#footer_link,
	#sidebartabs {
		height: auto;
		overflow: hidden;
	}

	/* 20px of side margin each way is a big bite out of a 320px viewport */
	#comment_box {
		margin: 5px 10px 0 10px;
	}

	/* the site file linearises every table inside #main (display:block) because
	   the static pages use tables for layout and their question images force a
	   wide minimum width. The calendar widget is a *real* data table - stacked,
	   its 42 day cells become 42 lines - so put it back. Specificity (0,2,1)
	   beats the site file's "#main td" (0,1,1); the text-align needs !important
	   because that rule sets left alignment with one. */
	#main #wp-calendar {
		display: table;
	}
	#main #wp-calendar thead {
		display: table-header-group;
	}
	#main #wp-calendar tbody {
		display: table-row-group;
	}
	#main #wp-calendar tr {
		display: table-row;
	}
	#main #wp-calendar td,
	#main #wp-calendar th {
		display: table-cell;
		text-align: center !important;
	}
}

/*
   Column stacking gets its own, slightly narrower breakpoint: #content (500px)
   + #sidebar (420px) still fit side by side in the 999px-wide fluid shell, and
   they read far better that way, so only give up the two-column layout once
   they genuinely stop fitting (920px of columns + #main's 20px padding).
*/
@media (max-width: 960px) {

	#content {
		float: none;
		width: auto;
	}

	#sidebar {
		float: none;
		width: auto;
	}

	/* the two 200px widget columns inside the (now full-width) sidebar */
	#sidebar_left,
	#sidebar_right {
		float: none;
		width: auto;
	}

	/* The post card is drawn with three image slices cut to #content's exact
	   500px: entry-top/entry-bottom (500x20 rounded caps) and entry-bg
	   (500x20, repeat-y) for the body. They are anchored "center", so at any
	   other column width the sides are either cropped off or leave a gap where
	   the card edge should be - the card visibly loses its borders. Drop the
	   slices and draw the same card in CSS instead; the caps then have nothing
	   left to contribute. Mirrors the site file's treatment of .line1-.line5. */
	.entry_body_top,
	.entry_body_bottom {
		display: none;
	}
	.entry_body {
		background-image: none;
		background-color: #ffffff;
		border: 1px solid #d4eef9;
		border-radius: 6px;
		padding: 12px 16px;
		margin: 0 0 10px 0;
	}

	/* same problem in the sidebar, cut to #sidebar_left's 200px: side-top
	   (200x33) under the heading, side-bg (200x20, repeat-y) behind the list
	   and side-bottom (200x20) as the foot. */
	#sidebar h2 {
		background-image: none;
		background-color: #44ade2;
		padding: 8px;
		border-radius: 6px 6px 0 0;
	}
	.side_box {
		background-image: none;
		background-color: #ffffff;
		border: 1px solid #d4eef9;
		border-top: 0;
	}
	.side_bottom {
		display: none;
	}
	#sidebar ul {
		margin-bottom: 10px;
	}
}

@media (max-width: 600px) {

	/* images floated out of post content (WordPress's align* classes, and the
	   theme's own prev/next post links) leave a column of two or three words
	   beside them at this width. Full width, in flow, reads better. */
	#content .alignleft,
	#content .alignright,
	#content .postalignleft,
	#content .postalignright,
	#comment_box .avatar {
		float: none;
		display: block;
		margin: 0 0 10px 0;
	}

	/* 30px margin + 40px indent for the quote mark is over a fifth of the
	   screen before any text starts */
	.entry_body blockquote {
		margin: 5px 0;
		padding-left: 30px;
	}

	/* threaded replies indent 20px per level and hit an unreadable width
	   after two or three */
	.children {
		margin: 10px 0 10px 8px;
	}
}