/* ==========================================================================
   Site-wide styles: reset, layout scaffold, navigation
   ========================================================================== */

:root {
	--color-page-bg: #2f2f2f;
	--color-surface: #ffffff;
	--color-sidebar-bg: #f5f5f5;
	--color-text: #222222;
	--color-heading: #0a4d78;
	--color-link: #0d85cc;
	--color-link-hover: #073c5c;
	--color-nav-bg: #4d6d8f;
	--color-nav-text: #ffffff;
	--color-nav-border: rgba(255, 255, 255, 0.25);
	--color-nav-hover-bg: #ffffff;
	--color-nav-hover-text: #073c5c;
	--color-border: #e2e2e2;
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--content-max-width: 980px;
	--sidebar-width: 235px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--color-page-bg);
	font-family: var(--font-sans);
	color: var(--color-text);
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-link);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration: underline;
}

h1, h2, h3, h4 {
	color: var(--color-heading);
	line-height: 1.25;
}

/* Page wrapper: fluid up to the historical 980px design width */
.site-wrap {
	max-width: var(--content-max-width);
	margin: 0 auto;
	background-color: var(--color-surface);
}

/* Banner */
.site-banner img {
	width: 100%;
	height: auto;
}

/* Top navigation: kept on one line; scrolls horizontally if it ever
   doesn't fit rather than wrapping or clipping. */
.site-nav {
	background-color: var(--color-nav-bg);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: max-content;
	min-width: 100%;
	justify-content: center;
}
.site-nav li {
	margin: 0;
	border-right: 1px solid var(--color-nav-border);
}
.site-nav li:last-child {
	border-right: none;
}
.site-nav a {
	display: block;
	padding: 0.6em 0.65em;
	font-weight: bold;
	font-size: 0.92em;
	color: var(--color-nav-text);
}
.site-nav a:hover,
.site-nav a:focus {
	background-color: var(--color-nav-hover-bg);
	color: var(--color-nav-hover-text);
	text-decoration: none;
}
.site-nav a.is-current {
	background-color: rgba(255, 255, 255, 0.15);
}

/* Body layout: sidebar + main content, stacking on narrow screens */
.site-body {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
}

.site-sidebar {
	background-color: var(--color-sidebar-bg);
	padding: 1.25em;
}

.site-main {
	padding: 1.5em;
	min-width: 0; /* keep wide tables/pre from blowing out the grid track */
}

@media (max-width: 768px) {
	.site-body {
		grid-template-columns: 1fr;
	}
	.site-sidebar {
		order: 2;
	}
	.site-main {
		order: 1;
	}
	.site-nav ul {
		justify-content: flex-start;
	}
	.site-nav a {
		padding: 0.55em 0.55em;
		font-size: 0.88em;
	}
}

/* Responsive media embeds */
video {
	max-width: 100%;
	height: auto;
	background-color: #000;
}