/* ==========================================================================
   Jah-Home.css — responsive layout for the JAH-RasTafarI.com home page.
   Pairs with the responsive banner (Jah-Main.css). Mobile-first: everything
   stacks in one column and widens to multi-column on larger screens.
   ========================================================================== */

.homeWrap {
	max-width: 1000px;
	margin: 0 auto;
	/* Top padding clears the absolutely-positioned banner (three stacked 30px
	   buttons ≈ 90px) so the page content isn't hidden underneath it. */
	padding: 100px 12px 12px;
	box-sizing: border-box;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* --- Site conversion notice --- */
.homeNotice {
	max-width: 640px;
	margin: 0 auto 22px;
	font-size: 14px;
	line-height: 1.5;
	font-weight: bold;
	color: #003300;
}
.homeNotice p { margin: 10px 0; }
.homeNotice a { color: #9D0000; text-decoration: underline; }
.homeNotice a:hover { color: #c00; }
.homeNoticeSign {
	font-weight: bold;
	font-style: italic;
	color: #9D0000;
}

/* --- Top action buttons (Forum + Reasoning/Sign-up) --- */
.homeActions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 16px 0;
}
.homeActions a {
	flex: 0 1 250px;
	max-width: 250px;
}
.homeActions a img {
	width: 100%;
	height: auto;
	border: 0;
}

.signInHint {
	max-width: 620px;
	margin: 4px auto 20px;
	color: #003300;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
}

/* --- Jah Children Shop --- */
.shopRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 20px 0;
}
.shopRow img { max-width: 150px; height: auto; border: 0; }
.shopRow .shopText { font-size: 16px; font-weight: bold; }

/* --- Column bands: 3-across on desktop, stack on mobile --- */
.homeBand {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	margin: 24px 0;
}
.homeBand .col {
	flex: 1 1 280px;
	max-width: 340px;
}

/* Fluid imagery — direct images in a column (flag, portraits, train, shop
   reasoning). The legacy sliced home-nav table is nested deeper, so it keeps
   its exact pixel sizes and is unaffected by these rules. */
.homeBand .col > img,
.homeBand .col > a > img {
	max-width: 100%;
	height: auto;
	border: 0;
}

.homeScripture {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.45;
	max-width: 300px;
	margin: 12px auto;
}
.homeScripture.large { font-size: 15px; }

/* --- Legacy Fireworks-sliced nav: keep its exact pixel layout; just center
   it and let it scroll horizontally on very narrow phones rather than break. */
.homeNav {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
}
/* The legacy nav is a Fireworks-sliced image table. Make its images block-level
   so the spacer GIFs render at their exact pixel height instead of inheriting
   the cell line-height (which adds extra vertical gaps between the buttons). */
.homeNav img { display: block; }

hr.homeRule {
	border: 0;
	border-top: 1px solid #9D0000;
	max-width: 280px;
	margin: 14px auto;
}