/*--------------------------------------------------------------
	Asteroid — Responsive layer
	Mobile-first. Core layout is already fluid via flexbox +
	CSS custom properties in style.css. This file stacks the
	sidebar, adapts the nav, and tunes typography for small
	screens.
--------------------------------------------------------------*/

/* Base (mobile) — #nav drops to a toggled column by default. */
#nav .drop-toggle { display: block; }
#nav.drop .menu { display: none; }
#nav.dropped { background-color: #1A1A1A; }
#nav.dropped .menu {
	display: block;
	background-color: #1E1E1E;
	margin: 0 16px 16px;
}
#nav.dropped .sub-menu,
#nav.dropped .children {
	display: block;
	position: relative;
	top: 0; left: 0;
	width: 100%;
	box-shadow: none;
	border: none;
	background: transparent;
}
#nav.dropped .menu a { text-align: left; }

#nav .menu { flex-direction: column; align-items: stretch; }
#nav .menu > li,
#nav .menu > ul > li { border-bottom: 1px solid #111; }

#nav .menu-item-search { padding: 6px 12px; }
#nav .menu-item-search .search-form { width: 100%; }

/* Stack mode — drop-down toggle off, each parent toggles children on tap */
#nav.stack .drop-toggle { display: none; }
#nav.stack .menu { display: flex; }
#nav.stack .sub-menu,
#nav.stack .children { display: none; }
#nav.stack .menu-item-has-children.toggle-on > .sub-menu,
#nav.stack .menu-item-has-children.toggle-on > .children { display: block; position: relative; width: 100%; }

/* Stack sidebar below content on narrow screens. */
#main { flex-direction: column; }
#content, #sidebar { flex: 1 1 100%; max-width: 100%; }

/*--------------------------------------------------------------
	≥ 768px (small tablet and up) — show menu inline
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	#nav .drop-toggle { display: none; }
	#nav.drop .menu { display: flex; }
	#nav .menu {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	#nav .menu > li,
	#nav .menu > ul > li {
		border-bottom: none;
		border-right: 1px solid rgba(255,255,255,.08);
	}
	#nav .sub-menu,
	#nav .children {
		position: absolute;
		top: 100%;
		left: 0;
		width: 220px;
		display: none;
		background: #1E1E1E;
		border: 1px solid #000;
		box-shadow: 0 4px 12px rgba(0,0,0,.4);
	}
	#nav .sub-menu .sub-menu,
	#nav .children .children { top: 0; left: 100%; }
	#nav li:hover > ul,
	#nav li:focus-within > ul { display: block; }

	#nav .menu-item-search { margin-left: auto; padding: 0; }
	#nav .menu-item-search .search-form { width: auto; }
}

/*--------------------------------------------------------------
	≥ 1024px (small desktops and up) — two-column layout
--------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
	#main {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	#content {
		flex: 1 1 var(--ast-content);
		min-width: 0;
	}
	#sidebar {
		flex: 0 0 var(--ast-sidebar);
	}

	.rtl #main { flex-direction: row-reverse; }
}

/*--------------------------------------------------------------
	≥ 1200px — respect container max-width, nothing more to do.
	The CSS custom property var(--ast-container-max) enforces it.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
	Small-phone tweaks
--------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	.blog-view .entry-content { text-align: left; }
	.blog-view .entry-thumbnail {
		display: block;
		float: none;
		margin: 0 auto 10px;
	}
	.blog-view .entry-date {
		float: none;
		margin-left: 0;
	}
	#footer-bottom { justify-content: flex-start; }
	.alignleft, .alignright {
		float: none;
		display: block;
		margin: .5em auto;
		max-width: 100%;
	}
}