/* ------------------------------------------------------------------
   Site wrapper: banner, sticky menu, content column, sticky footer.
   Loaded after STstylesNEW.css (which still supplies the text styles
   and the editor preview), so these rules replace its old layout.
   ------------------------------------------------------------------ */
:root {
	--blue: #135cab;
	--blue-dark: #184678;
	--blue-deep: #0f3560;
	--sky: #aed4ff;
	--accent: #e8a33d;
	--max: 1060px;
}

/* page: footer sits at the bottom of the window on short pages, below the content on long ones */
body {
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #fff;
}
#content {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
}
#content-padd { padding: 36px 42px 44px; }
/* page titles: bold, in the wrapper's navy blue (same as the menu bar and footer) */
#content-padd h1 { color: var(--blue-dark); font-weight: 700; }

/* keep wide content (images, video, long links, big tables) from pushing the page sideways on phones */
#content-padd { overflow-wrap: break-word; overflow-x: auto; }
#content-padd img { max-width: 100%; height: auto; }
#content-padd iframe, #content-padd video { max-width: 100%; }
#content-padd table { max-width: 100%; }
@media only screen and (max-width: 599px) {
	#content-padd { padding: 24px 14px 30px; }
}

/* ---------- banner ---------- */
/* left band continues the image's solid blue edge, right band is dark slate */
.site-banner { background: linear-gradient(90deg, #135cab 50%, #212a37 50%); }
.site-banner a { display: block; max-width: var(--max); margin: 0 auto; }
.site-banner img { display: block; width: 100%; height: auto; }

/* ---------- menu (sticks to the top while scrolling) ---------- */
.site-nav {
	background: var(--blue-dark);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	font-family: Verdana, Tahoma, Arial, sans-serif;
	line-height: 1.35;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav .nav-toggle {
	display: none;
	width: 100%;
	padding: 14px 16px;
	background: none;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 17px;
	text-align: left;
	cursor: pointer;
}
.site-nav .menu { display: flex; flex-wrap: wrap; justify-content: center; }
.site-nav .menu > li { position: relative; }
.site-nav .menu a {
	display: block;
	padding: 13px 15px;
	color: #fff;
	text-decoration: none;
	font-size: 14.5px;
	white-space: nowrap;
}
.site-nav .menu > li > a:hover,
.site-nav .menu > li > a:focus,
.site-nav .menu > li:focus-within > a,
.site-nav .menu a.here { background: var(--blue-deep); }
.site-nav .menu .has-sub > a::after { content: " \25BE"; font-size: 11px; }
.site-nav .sub {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 220px;
	background: var(--blue-deep);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.site-nav .sub a { padding: 11px 16px; font-size: 14px; white-space: normal; }
.site-nav .sub a:hover,
.site-nav .sub a:focus { background: var(--blue); }
.site-nav .has-sub:hover > .sub,
.site-nav .has-sub:focus-within > .sub { display: block; }

@media (max-width: 860px) {
	.site-nav .nav-toggle { display: block; }
	.site-nav .menu { display: none; flex-direction: column; flex-wrap: nowrap; }
	.site-nav.open .menu {
		display: flex;
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
	}
	.site-nav .menu a { white-space: normal; padding: 13px 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
	/* submenus are collapsed until tapped; the arrow shows which state they are in */
	.site-nav .sub { position: static; display: none; box-shadow: none; background: var(--blue-deep); }
	.site-nav .has-sub:hover > .sub,
	.site-nav .has-sub:focus-within > .sub { display: none; }
	.site-nav .has-sub.open > .sub { display: block; }
	.site-nav .sub a { padding-left: 34px; }
	.site-nav .menu .has-sub > a { display: flex; justify-content: space-between; align-items: center; }
	.site-nav .menu .has-sub > a::after { content: "\25BE"; font-size: 20px; line-height: 1; }
	.site-nav .menu .has-sub.open > a::after { content: "\25B4"; }
}

/* ---------- footer ---------- */
.site-footer {
	flex-shrink: 0;
	background: var(--blue-dark);
	color: var(--sky);
	font-family: Verdana, Tahoma, Arial, sans-serif;
	text-align: left;
}
.site-footer .foot-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 28px;
	max-width: var(--max);
	margin: 0 auto;
	padding: 34px 16px 24px;
}
.site-footer h2 {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	color: #fff;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.site-footer p { margin: 0 0 8px; font-size: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.site-footer li { margin: 5px 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { text-decoration: underline; }
.site-footer a.cta {
	display: inline-block;
	margin: 6px 0;
	padding: 12px 24px;
	background: var(--accent);
	color: #1d1400;
	font-weight: bold;
	border-radius: 4px;
}
.site-footer a.cta:hover,
.site-footer a.cta:focus { background: #f2b955; text-decoration: none; }
.site-footer .social li { margin: 9px 0; }
.site-footer .social a { display: inline-flex; align-items: center; gap: 12px; }
.site-footer .ico { width: 26px; height: 22px; flex: none; fill: #fff; }
.site-footer .social a:hover .ico,
.site-footer .social a:focus .ico { fill: var(--accent); }
.site-footer .legal {
	background: var(--blue-deep);
	font-size: 12.5px;
	text-align: center;
	padding: 12px 16px;
	color: var(--sky);
}
@media (max-width: 860px) {
	.site-footer .foot-cols { grid-template-columns: 1fr; }
}