/* Layout + responsive customizations */
/* ===== Standalone customizations: sidebar & footer removed, responsive layout ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Fluid, centered container (was a fixed 950px) */
.container { width: auto !important; max-width: 950px; margin: 0 auto; padding-left: 15px; padding-right: 15px; }

/* Sidebar gone: drop the vertical divider shadow and let the reading pane fill the width */
body#home #content .container { background: none !important; }
#main-area {
	float: none;
	width: auto;
	overflow: hidden;      /* forms a block that fills the space beside the floated tab list */
	margin-left: 234px;    /* 205px tab column + gutter */
	margin-top: 30px;
}
#main-area .tab-content { width: auto; max-width: 660px; padding-right: 0; }
img#logo { max-width: 100%; }

/* ---- Tablet / small desktop ---- */
@media (max-width: 900px) {
	#header, #header .container { height: auto; }
	#header .container { padding-top: 20px; padding-bottom: 30px; overflow: hidden; }
	#headshot { display: none; }                 /* portrait would overlap the text once the header narrows */
	#description { float: none; width: auto; padding-top: 16px; }
}

/* ---- Mobile: stack the tab list above the reading pane ---- */
@media (max-width: 760px) {
	#side-tabs {
		float: none;
		width: auto;
		background: none;                        /* remove the right-edge divider shadow */
		margin-top: 10px;
		padding-bottom: 20px;
	}
	#side-tabs ul { margin-left: 0; }
	#main-area { margin-left: 0; margin-top: 10px; }
	#main-area .tab-content { max-width: 100%; }
	img#logo { margin-top: 20px; }
	#description p { font-size: 16px; }
	#main-area .addthis_toolbox { display: none; }
}

@media (max-width: 480px) {
	.container { padding-left: 12px; padding-right: 12px; }
	#main-area .tab-content h2.title { font-size: 18px; }
	#description p { font-size: 15px; line-height: 22px; }
}

/* ===== Mobile: replace the desktop tab/pane with an in-place accordion ===== */
#mobile-nav { display: none; }

@media (max-width: 760px) {
	/* Hide the desktop belt-tab navigation and its separate reading pane */
	#side-tabs, #main-area { display: none !important; }
	body#home #content .container { background: none !important; }

	#mobile-nav { display: block; padding: 6px 0 34px; }
	/* Flat, shadow-free text in the mobile accordion */
	#mobile-nav, #mobile-nav * { text-shadow: none !important; }

	.mnav-section {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase;
		color: #3f5560;
		margin: 22px 0 6px; padding: 0 2px;
	}
	.mnav-section:first-child { margin-top: 6px; }

	.mnav-item { border-top: 1px solid rgba(255,255,255,.5); }
	.mnav-item:last-child { border-bottom: 1px solid rgba(0,0,0,.14); }

	.mnav-header {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: 100%; margin: 0; text-align: left; cursor: pointer;
		background: none; border: 0; border-bottom: 1px solid rgba(0,0,0,.14);
		padding: 15px 2px; -webkit-appearance: none; appearance: none;
		font-family: inherit; font-size: 19px; font-weight: bold; line-height: 1.3;
		color: #202d37;
	}
	.mnav-item:last-child .mnav-header { border-bottom: 0; }
	.mnav-header:hover { color: #000; }
	.mnav-item.open > .mnav-header { color: #000; border-bottom-color: transparent; }

	/* +/- indicator */
	.mnav-ic { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
	.mnav-ic::before, .mnav-ic::after { content: ""; position: absolute; background: #55666e; border-radius: 1px; }
	.mnav-ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
	.mnav-ic::after  { top: 0; left: 7px; width: 2px; height: 16px; transition: transform .18s ease; }
	.mnav-item.open .mnav-ic::after { transform: scaleY(0); }

	.mnav-panel { display: none; padding: 4px 2px 20px; }
	.mnav-item.open > .mnav-panel { display: block; }

	/* Content styling inside a panel (the desktop rules were scoped to #main-area) */
	.mnav-panel p { font-size: 15px; line-height: 24px; margin: 0 0 16px; color: #1c2831; }
	.mnav-panel em { color: #33454e; }
	.mnav-panel a { color: #000; text-decoration: underline; text-shadow: none; }
	.mnav-panel blockquote { background: url("../img/blockquote.png"); background-repeat: no-repeat; background-position: 0 4px;
		border: 0; margin: 0 0 16px; padding: 8px 0 4px 55px; font-size: 15px; line-height: 22px;
		color: #202d37; font-style: italic; }
	.mnav-panel blockquote p { font-size: 15px; color: #202d37; margin-bottom: 0; }
	.mnav-panel sup { line-height: 0; }
	.mnav-panel .button { margin: 4px 0 2px; }
	.mnav-panel .button a {
		display: inline-block; border-radius: 5px; color: #fff; text-decoration: none;
		padding: 8px 14px; text-shadow: none; font-weight: bold;
		background: #6F797F; background: linear-gradient(to bottom, #6F797F 1%, #5E6A71 100%);
	}
	.mnav-panel .button a:hover { box-shadow: 0 0 3px #fff; }
}

/* misc in-page overrides */
#side-tabs #scriptures{ background:none; }
		#side-tabs #scriptures li{ clear:left; }
		
		#more_left{ font-size:13px !important; }
		#more_left a{ color:#000; text-shadow:none; }