/*
	Responsive layer for AutoFocus.

	The original theme (2010) is fixed-width 800px and ships no viewport meta,
	so phones render it at 980px and zoom out. This file is loaded after
	style.css and only overrides layout widths below 840px, leaving the
	desktop design exactly as it was.
*/

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }


/* ------------------------------------------------------------------
   Form controls.
   The original theme never styled inputs or buttons, so browsers drew
   their own chrome -- tiny bevelled submit buttons next to serif type.
   ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	font: inherit;
	font-size: 0.95em;
	color: #444;
	background: #fff;
	border: 1px solid #ccc;
	padding: 7px 9px;
	box-sizing: border-box;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: #888;
	outline: none;
}

input[type="submit"],
input[type="button"],
button {
	font: inherit;
	font-size: 0.9em;
	letter-spacing: 0.02em;
	color: #666;
	background: #fff;
	border: 1px solid #ccc;
	padding: 8px 20px;
	cursor: pointer;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: color .15s ease, border-color .15s ease;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	color: #222;
	border-color: #888;
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible {
	outline: 2px solid #888;
	outline-offset: 2px;
}

/* the sidebar search sits inline, so keep it compact */
#searchform input[type="text"] { padding: 6px 8px; }
#searchform input[type="submit"] { padding: 6px 14px; }


@media (max-width: 840px) {

	/* ---- shell ---- */
	#wrapper {
		width: auto !important;
		max-width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}

	/* ---- masthead + nav stack instead of sitting side by side ---- */
	#header {
		width: auto !important;
		float: none !important;
		height: auto !important;
		margin: 28px 0 0 !important;
	}

	#access {
		width: auto !important;
		float: none !important;
		height: auto !important;
		display: block !important;
		margin: 14px 0 26px !important;
	}

	#access #menu {
		display: block !important;
		font-size: 1em !important;
	}

	#access #menu ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#access #menu ul li { display: inline-block; margin: 0; }

	/* ---- main columns ---- */
	#container,
	#content,
	#primary,
	#secondary,
	#footer {
		width: auto !important;
		float: none !important;
	}

	/* ---- home mosaic collapses to one column ---- */
	.home .featured.post,
	.home .featured.post[class*="p"] {
		width: 100% !important;
		height: auto !important;
		float: none !important;
		display: block !important;
		border-left: 0 !important;
		margin: 0 0 6px !important;
	}

	.home .featured.post .post-content { width: auto !important; }
	.home .featured img { width: 100% !important; height: auto !important; }

	/* tiles are background images with an inline height:300px, so !important
	   is required to beat the inline style */
	.home .featured .attach-post-image {
		height: 68vw !important;
		max-height: 420px;
		background-size: cover !important;
		background-repeat: no-repeat !important;
	}

	/* ---- archives, categories, search ---- */
	.archive #container,
	.archive .post,
	.archive .preview,
	.archive .preview .post-content,
	.archive .preview .post-content-title,
	.archive .entry-meta,
	.search #container,
	.search .post,
	.search .preview {
		width: auto !important;
		float: none !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	/* ---- single posts and pages ---- */
	.single .post,
	.single .post .entry-content,
	.page .page,
	.page .page .entry-content,
	.post .entry-content,
	.entry-meta {
		width: auto !important;
		float: none !important;
	}

	/* ---- comments and forms ---- */
	#comments,
	#comments ol,
	#respond {
		width: auto !important;
		max-width: 100%;
	}

	#respond input[type="text"],
	#respond input[type="email"],
	#respond input[type="url"],
	#respond textarea,
	#searchform input[type="text"] {
		max-width: 100%;
		box-sizing: border-box;
	}

	#footer { padding-bottom: 28px; }
}


@media (max-width: 480px) {

	#header h1 { font-size: 1.5em; }

	.home .featured .attach-post-image { height: 76vw !important; }

	/* the big date overlay crowds narrow screens */
	.home .featured .entry-date.bigdate { font-size: 1.6em; }
}