/* ============================================================
   SGA Tech LLC — custom overrides
   Loaded AFTER main.css. Restores section spacing/backgrounds that
   the stock template applied by ID (#features / #content); our
   sections use semantic IDs (#services / #approach / #jnode), so they
   need their own rules. Establishes a light/dark band rhythm so each
   section boundary reads as a clear contrast edge.
   ============================================================ */

/* Wordmark sits next to the vermillion bracket mark. The mobile title
   bar clones #logo's HTML, so the same pairing has to work there too. */
#logo {
	display: flex;
	align-items: center;
	gap: 0.38em;
}

#logo .logo-mark,
#titleBar .title .logo-mark {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

#titleBar .title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.38em;
}

/* Consistent vertical rhythm across the main content bands */
#services,
#approach {
	padding: 64px 0;
}

/* --- Services: dark band (mirrors the template's #features intent) --- */
#services {
	background: #353d40 url("images/bg02.jpg");
	border-top: solid 1px #2b3235;
	border-bottom: solid 1px #21272a;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
	color: #a0a8ab;
}

	#services h2 {
		font-size: 1.25em;
		color: #fff;
		margin: 0 0 0.4em 0;
	}

	#services a { color: #e0e8eb; }
	#services strong { color: #fff; }

	/* All four card images (photos + jNode lockup) are natively 2:1, so a
	   plain width:100% keeps every card the same height. Avoid aspect-ratio +
	   object-fit on <img>: iOS Safari collapses replaced elements styled that
	   way, which hid the photos on mobile. */
	#services .bordered-feature-image img {
		display: block;
		width: 100%;
		height: auto;
	}

/* --- Approach: light band with white cards (mirrors #content intent) --- */
#approach {
	background: #f7f7f7 url("images/bg04.png");
	border-top: solid 1px #fff;
}

	#approach section {
		background: #fff;
		padding: 40px 30px 45px 30px;
		box-shadow: 2px 2px 2px 1px rgba(128, 128, 128, 0.1);
		margin: 0 0 25px 0;
	}

	#approach h2 {
		font-size: 1.8em;
		color: #373f42;
		margin: 0 0 0.25em 0;
	}

	#approach h3 {
		color: #96a9b5;
		font-size: 1.25em;
	}

	#approach a { color: #ed391b; }
	#approach header { margin: 0 0 2em 0; }
	#approach .check-list li { border-bottom: solid 1px #e2e6e8; }

/* --- jNode: dark spotlight band ---
   Sits between two light bands (Approach above, Footer below) so the
   whole section is framed by contrast on both edges. Copy is centered
   and width-constrained for readability. */
#jnode {
	background: #2b3236 url("images/bg02.jpg");
	border-top: solid 1px #21272a;
	border-bottom: solid 1px #21272a;
	color: #c3ccd0;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.6);
	padding: 76px 0;
}

	#jnode section {
		max-width: 52em;
		margin: 0 auto;
		text-align: center;
	}

	#jnode header { margin: 0 0 1.25em 0; }

	/* Square mark. Size the anchor by width only and let the image set its
	   own height (height:auto), so iOS Safari can't blow it up to natural size. */
	#jnode .jnode-mark {
		display: block;
		width: 88px;
		max-width: 40%;
		margin: 0 auto 1.15em;
		text-decoration: none;
		outline: 0;
	}

	#jnode .jnode-mark img {
		display: block;
		width: 100%;
		height: auto;
	}

	#jnode h2 {
		font-size: 2em;
		color: #fff;
		margin: 0 0 0.35em 0;
	}

	#jnode h3 {
		color: #9fb0bb;
		font-size: 1.2em;
		font-weight: 300;
	}

	#jnode strong { color: #fff; }
	#jnode a { color: #ff6a52; }                 /* lighter accent for dark bg */
	#jnode p + p { margin-top: 1em; }
	#jnode .button-large { margin-top: 1.75em; }
	#jnode a.button-large { color: #fff; }       /* keep the CTA legible */

/* --- Mobile: tighten band padding. The template's mobile rules target
   #features/#content by ID, which our renamed sections don't match, so
   set our own. --- */
@media screen and (max-width: 736px) {
	#services,
	#approach,
	#jnode {
		padding: 40px 0;
	}

	#jnode h2 { font-size: 1.6em; }
}