/*
 * Responsive layer for plaintxtblog (2012 theme, no viewport/media queries).
 * Loaded AFTER wp_head() so it overrides the float layout that
 * plaintxtblog_wp_head() injects inline. Desktop is untouched.
 */

/* The theme frames the entire page in a 1px black box
   (style.css: body{border:1px solid #000}). It reads as browser chrome
   rather than design. The 20px margin/padding stay, so content keeps
   its breathing room. */
body { border: none; }

/* The theme's generated CSS draws a 5px grey rule down the right edge of
   each sidebar (body div.sidebar{border-right:5px solid #ddd}). It reads as
   a column divider that aligns with nothing. Same specificity, loaded later.
   Applies at all widths, not just mobile. */
body div.sidebar { border-right: none; border-left: none; }

/* Never let a wide image, embed or code block force sideways scrolling. */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
pre, table { max-width: 100%; overflow-x: auto; }

@media screen and (max-width: 900px) {

	/* Reclaim the frame: 1px border + 20px margin + 20px padding is
	   ~82px of a 390px screen. */
	body {
		border: none;
		margin: 0;
		padding: 16px;
		line-height: 165%;
		font-size: 15px;
		-webkit-text-size-adjust: 100%;
	}

	/* Unwind the three-column negative-margin float.
	   Same specificity as the generated rules, loaded later, so these win.
	   DOM order is content -> primary -> secondary, so unfloating
	   puts the essay first and navigation underneath. */
	body div#container,
	body.single div#container,
	body div#content,
	body.single div#content,
	body div#primary,
	body div#secondary {
		float: none;
		width: auto;
		margin: 0;
	}

	/* The generated CSS also gives the sidebars a 5px rule and right-aligned
	   text, both of which assume a narrow vertical rail. */
	body div.sidebar {
		width: auto;
		overflow: visible;
		border-right: none;
		border-left: none;
		padding-right: 0;
		padding-left: 0;
		text-align: left;
	}

	/* The theme predates border-box, so every width:100% with padding
	   overflows. Scope the fix to small screens only. */
	div#wrapper, div#container, div#content, div.sidebar,
	div.entry-meta, div.comments, div#footer, div.navigation { box-sizing: border-box; }

	/* Separate the navigation from the essay above it. */
	body div#primary { margin-top: 2.5em; border-top: 1px solid #ddd; padding-top: 1em; }
	body div#secondary { margin-top: 1.5em; }

	/* Sidebar headings read as section labels, not right-aligned scraps. */
	div.sidebar ul { margin: 0; padding: 0; }
	div.sidebar ul li { margin: 0 0 1.4em; text-align: left; }
	div.sidebar ul li h3 { font-size: 1em; text-align: left; margin: 0 0 0.4em; }

	/* Pages / Categories: flow as wrapped chips instead of a 120px column
	   that breaks "Campaign for Town Council" across three lines. */
	div.sidebar ul li#home-link,
	div.sidebar ul li.pagenav,
	div.sidebar ul li#categories { text-align: left; }
	div.sidebar ul li.pagenav ul,
	div.sidebar ul li#categories ul { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
	div.sidebar ul li.pagenav ul li,
	div.sidebar ul li#categories ul li { margin: 0; line-height: 200%; }

	/* Tag cloud and archives sit at the very bottom; keep them compact. */
	div.sidebar ul li#tag-cloud, div.sidebar ul li#tag_cloud { line-height: 190%; }
	div.sidebar ul li#archives ul { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; }
	div.sidebar ul li#archives ul li { margin: 0; }

	/* Comfortable tap targets without changing desktop link styling. */
	div.sidebar a { display: inline-block; padding: 2px 3px; }

	/* Search field was sized for a 120px rail. */
	div.sidebar ul li#search form#searchform div { display: flex; gap: 0.5em; }
	div.sidebar ul li#search input#s { flex: 1 1 auto; min-width: 0; padding: 0.5em; font-size: 16px; }
	div.sidebar ul li#search input#searchsubmit { padding: 0.5em 1em; font-size: 16px; }

	/* Headings: 2em site title overflows narrow screens. */
	div#header h1#blog-title { font-size: 1.5em; line-height: 130%; }
	div#header div#blog-description { font-size: 0.85em; line-height: 150%; }
	div#header { margin: 0 0 1.5em; }
	div#content .entry-title { font-size: 1.05em; line-height: 140%; padding: 0.3em 0.4em; }

	/* Title bar: on a narrow screen a floated title + right-aligned date
	   collide, so stack them. Applies to listings and single posts alike. */
	div.entry-header { text-align: left; padding: 5px 8px; }
	div.entry-header .entry-title { float: none; }
	div.entry-header abbr.published { display: block; margin-top: 0.15em; opacity: 0.75; }

	/* The byline block was a centred 70% island. */
	body.single div.entry-meta { width: auto; margin: 2em 0; }

	/* Long URLs in posts and comments must not widen the page. */
	div.entry-content, div.comments { overflow-wrap: break-word; word-wrap: break-word; }

	/* Comment avatars crowd the text at this width. */
	div.comments ol.commentlist li img.photo { margin: 0.2em 0 0.5em 0.6em; }

	div#footer { padding: 3em 0 0; font-size: 0.85em; line-height: 170%; }
}

/* Phones proper. */
@media screen and (max-width: 480px) {
	body { padding: 12px; }
	div#header h1#blog-title { font-size: 1.3em; }
	div.entry-content div.gallery dl { float: none; width: auto !important; }
}