/*
File:			responsive.css
Description:	Mobile / responsive layer for Thesis 1.8.5

This file is loaded AFTER layout.css (see custom_functions.php), so everything
here overrides the theme's generated styles. Nothing in the core theme is
modified, and saving Design Options — which regenerates layout.css — cannot
wipe any of this out.

Breakpoints:
	990px  Laptop / small desktop  -> fluid container, 2 columns, sidebars stack
	820px  Tablet (iPad Air)       -> same, tighter spacing
	767px  Mobile landscape        -> ONE column, image + sidebars hidden, slide-in menu
	479px  Mobile portrait         -> tighter type + spacing
	375px  Small mobile            -> tightest

--------------------------------------------------------------------------- */


/*---:[ TUNING — the tablet 2-column split lives here ]:---

	Change these two numbers (they must total 100%) to adjust how much room the
	content column vs. the stacked sidebar column gets between 991px and 768px.
	Nothing else needs to change.                                            */

:root {
	--thesis-content-width: 72%;
	--thesis-sidebar-width: 28%;
}


/*---:[ always on ]:---

	Fluid media everywhere, so nothing can force a horizontal scrollbar.      */

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

img { height: auto; }

pre,
table { max-width: 100%; overflow: auto; }

/* Off-canvas menu chrome is hidden until the ≤767px block switches it on. */
.thesis-mobile-toggle,
.thesis-mobile-nav,
.thesis-mobile-overlay { display: none; }


/*==============================================================
  990px — Laptop / small desktop
  Container goes fluid. Three columns become two: content beside
  a single sidebar column, with the sidebar contents stacked
  image -> sidebar_2 -> sidebar_1.
  ==============================================================*/

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

	/* Fluid shell.
	   !important is used on the structural widths throughout this file: they
	   have to beat ID-level rules in the generated layout.css (equal
	   specificity, so otherwise it comes down to load order) and anything a
	   plugin injects later. */
	html,
	body { max-width: 100% !important; overflow-x: hidden; }

	#container {
		width: auto !important;
		max-width: 100% !important;
	}

	#page { padding: 1.5em; }

	/* Kill the fixed-position vertical dotted divider (it was painted at a
	   hardcoded 51.3em, which is meaningless once the layout is fluid). */
	#content_box { background-image: none; }

	/* Two columns */
	#content { width: var(--thesis-content-width) !important; }

	/* Neutralise the 3-column-inverted wrapper if that layout is ever used */
	#column_wrap { float: none !important; width: auto !important; }

	/* Stack the sidebar column: image on top, then sidebar_2, then sidebar_1 */
	#sidebars {
		width: var(--thesis-sidebar-width) !important;
		display: flex !important;
		flex-direction: column;
	}
	#multimedia_box { order: 1; }
	#sidebar_2 { order: 2; }
	#sidebar_1 { order: 3; }

	#sidebar_1,
	#sidebar_2 {
		width: 100% !important;
		float: none !important;
		clear: both;
		border-right-width: 0;	/* the dotted divider between the two sidebars */
	}

	/* The multimedia box image fills the column at its new width.
	   width:auto + max-width lets a portrait image shrink to fit the narrower
	   column without being stretched, and centres it in the space. */
	#multimedia_box {
		padding: 0 0 1.1em 0;
		text-align: center;
	}

	#multimedia_box img,
	#image_box img {
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		display: inline-block;
	}

	/* Banner scales instead of cropping (native size 949 x 193).
	   height MUST be overridden — layout.css pins #header to a fixed 19.3em,
	   and with a scaled background that leaves a tall band of empty space under
	   the image. !important because the generated rule is equal specificity and
	   is re-written every time Design Options are saved. */
	#header {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 949 / 193;
		background-size: 100% auto !important;
		background-position: center top !important;
	}

	/* Fluid teasers */
	.teasers_box { width: auto; }
	.teaser { width: 47%; }

	/* Nav wrapping.
	   Floats wrap raggedly and leave uneven gaps once items run onto several
	   rows, so at tablet width the menu becomes a flex row that wraps evenly.
	   Tighter tracking and padding also fit noticeably more per row — which
	   matters here because some menu items are very long. */
	.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.menu li {
		float: none;
		position: relative;
	}

	.menu a {
		letter-spacing: 1px;
		padding-right: 0.8em;
		padding-left: 0.8em;
	}

	.menu .rss { float: none; margin-left: auto; }
}


/*==============================================================
  820px — Tablet (iPad Air)
  Same two-column structure, tightened spacing.
  ==============================================================*/

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

	#page { padding: 1em; }

	.post_box,
	.teasers_box { margin: 0 1.1em; }

	#archive_intro,
	.prev_next { padding-right: 1.1em; padding-left: 1.1em; }

	.sidebar ul.sidebar_list { padding-right: 0.8em; padding-left: 0.8em; }
	#sidebar_2 ul.sidebar_list { padding-right: 0.8em; }
}


/*==============================================================
  767px — Mobile landscape
  ONE column. The image and both sidebars come out, and the
  slide-in menu takes over navigation.
  ==============================================================*/

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

	/* Single column */
	#content {
		width: 100% !important;
		float: none !important;
	}

	/* The phone header image is applied to #header itself by
	   thesis_mobile_header_css() in custom_functions.php — set it under
	   Thesis > Mobile Header Image in the dashboard. */

	/* Image + sidebars removed.
	   -- To keep the sidebars stacked BELOW the content on mobile instead of
	      removing them, delete this rule and use the commented block after it. */
	#sidebars { display: none !important; }

	/*
	#sidebars {
		display: flex;
		width: 100%;
		float: none;
		clear: both;
		padding-top: 1.5em;
	}
	#multimedia_box { display: none; }
	*/

	/* The hover-based desktop dropdown is useless on touch — the slide-in
	   menu replaces it. */
	#page > .menu,
	.menu { display: none; }

	.post_box,
	.teasers_box { margin: 0 0.5em; }

	.teaser {
		width: 100%;
		float: none;
	}

	#footer { text-align: center; }

	/* ---- Off-canvas menu ---- */

	.thesis-mobile-toggle {
		display: flex;
		align-items: center;
		gap: 0.8em;
		position: relative;
		z-index: 60;
		margin: 0 0 1em 0;
		padding: 0.9em 1.2em;
		font-size: 1.4em;
		font-family: inherit;
		line-height: 1;
		color: #111;
		background: #f0f0eb;
		border: 1px solid #ddd;
		border-radius: 3px;
		cursor: pointer;
	}

	.thesis-mobile-toggle .thesis-bars {
		display: inline-block;
		width: 1.4em;
		height: 1em;
		position: relative;
	}

	.thesis-mobile-toggle .thesis-bars span {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #111;
		border-radius: 2px;
	}

	.thesis-mobile-toggle .thesis-bars span:nth-child(1) { top: 0; }
	.thesis-mobile-toggle .thesis-bars span:nth-child(2) { top: 50%; margin-top: -1px; }
	.thesis-mobile-toggle .thesis-bars span:nth-child(3) { bottom: 0; }

	.thesis-mobile-overlay {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.thesis-mobile-nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 82%;
		max-width: 320px;
		height: 100%;
		padding: 1.5em 1.5em 3em 1.5em;
		background: #fff;
		border-right: 1px solid #ddd;
		box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
	}

	.thesis-nav-open .thesis-mobile-nav { transform: translateX(0); }

	.thesis-nav-open .thesis-mobile-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* Stop the page scrolling behind the open panel */
	body.thesis-nav-open { overflow: hidden; }

	.thesis-mobile-close {
		position: absolute;
		top: 0.4em;
		right: 0.6em;
		padding: 0.2em 0.4em;
		font-size: 2.6em;
		line-height: 1;
		color: #777;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.thesis-mobile-close:hover { color: #111; }

	.thesis-mobile-nav .thesis-mobile-heading {
		margin: 0 0 0.8em 0;
		font-size: 1.3em;
		font-variant: small-caps;
		letter-spacing: 2px;
		color: #555;
	}

	.thesis-mobile-menu,
	.thesis-mobile-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.thesis-mobile-menu li { border-bottom: 1px solid #eee; }

	.thesis-mobile-menu li:last-child { border-bottom: 0; }

	.thesis-mobile-menu a {
		display: block;
		padding: 0.85em 0;
		font-size: 1.5em;
		line-height: 1.3;
		color: #2361a1;
	}

	.thesis-mobile-menu a:hover,
	.thesis-mobile-menu .current_page_item > a,
	.thesis-mobile-menu .current-menu-item > a { color: #111; }

	/* ---- Sub-menus (collapsible) ----

	   Parent items with children get an expand button injected by
	   responsive.js. Children stay collapsed until tapped, so a deep page tree
	   doesn't turn the panel into an endless scroll. If JavaScript fails, the
	   .thesis-has-children class is never added and every level simply shows
	   expanded — degraded, but still fully usable. */

	.thesis-mobile-menu li { position: relative; }

	.thesis-mobile-menu .thesis-has-children > ul { display: none; }
	.thesis-mobile-menu .thesis-has-children.thesis-open > ul { display: block; }

	/* Leave room for the expand button so long titles don't run under it */
	.thesis-mobile-menu .thesis-has-children > a { padding-right: 3em; }

	.thesis-mobile-submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 3em;
		height: 3.1em;
		padding: 0;
		font-size: 1.4em;
		line-height: 1;
		color: #777;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.thesis-mobile-submenu-toggle::before {
		content: "+";
		font-size: 1.2em;
	}

	.thesis-open > .thesis-mobile-submenu-toggle::before { content: "\2013"; }

	.thesis-mobile-menu ul {
		padding-left: 1em;
		border-top: 1px solid #eee;
	}

	.thesis-mobile-menu ul a { font-size: 1.35em; color: #555; }
}


/*==============================================================
  479px — Mobile portrait
  ==============================================================*/

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

	#page { padding: 0.8em; }

	.post_box,
	.teasers_box { margin: 0 0.2em; }

	#archive_intro,
	.prev_next { padding-right: 0.5em; padding-left: 0.5em; }

	.headline_area h1,
	.headline_area h2,
	#archive_intro h1 { font-size: 2.4em; line-height: 1.2em; }

	/* Comment form fields shouldn't overflow their container */
	#commentform input,
	#commentform textarea { max-width: 100%; }

	.thesis-mobile-nav { width: 88%; }
}


/*==============================================================
  375px — Small mobile
  ==============================================================*/

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

	#page { padding: 0.6em; }

	.headline_area h1,
	.headline_area h2,
	#archive_intro h1 { font-size: 2.1em; }

	.thesis-mobile-toggle { font-size: 1.3em; padding: 0.8em 1em; }

	.thesis-mobile-menu a { font-size: 1.4em; }
}