/* MGH group site.
   Modern CSS (custom properties, grid, flexbox, :is/:has) rendering a deliberately
   1999-era look: fixed 764px shell, Verdana at 80%, periwinkle chrome, inset/outset
   borders. Layout tables and presentational attributes are gone; <table> is used only
   where the content is genuinely tabular. */

:root {
	--navy: #1B3162;
	--blue: #33559D;
	--blue-hover: #6688C4;
	--blue-current: #C6D2E8;
	--gold: #E8C86A;
	--panel: #EFF2F8;
	--rule: #808080;
	--shell: 764px;
	--sidebar: 150px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #000000;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: #003399; text-decoration: none; }
a:visited { color: #663399; }
a:hover { text-decoration: underline; }

:is(h1, h2, h3, h4) {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
}
h1 { font-size: 170%; color: var(--navy); }
h2 { font-size: 140%; color: var(--navy); }
h3 { font-size: 110%; color: #000000; }
h4 { font-size: 100%; color: #000000; }

code, pre, kbd, samp { font-family: "Courier New", Courier, monospace; }
pre {
	font-size: 95%;
	background-color: #EEEEEE;
	border: 1px solid #999999;
	padding: 6px;
	overflow-x: auto;
}

input,
select,
textarea,
button {
	font: inherit;
}

textarea {
	max-width: 100%;
}

/* ------------------------------------------------------------------ shell */

.shell {
	width: 100%;
	max-width: var(--shell);
	display: grid;
	gap: 2px;
}

.masthead {
	display: block;
	line-height: 0;
	background-color: #1B3162;
}
.masthead img {
	display: block;
	width: 100%;
	max-width: 764px;
	height: auto;
	image-rendering: auto;
}

.brand-banner {
	display: block;
	width: 100%;
	max-width: 605px;
	min-height: 86px;
	background-color: #08172F;
}
.brand-banner img {
	display: block;
	width: 100%;
	max-width: 605px;
	height: auto;
	image-rendering: auto;
}

/* ----------------------------------------------------------------- navbar */

.navbar ul,
.sidemenu {
	display: flex;
	margin: 0;
	padding: 1px;
	list-style: none;
	background-color: var(--blue);
	font-family: Arial, Helvetica, sans-serif;
}
.navbar ul { gap: 1px; }
.navbar li { flex: 1 1 auto; }
.navbar a { text-align: center; }

.sidemenu {
	flex-direction: column;
	gap: 2px;
	font-size: 100%;
}

:is(.navbar, .sidemenu) a {
	display: block;
	height: 100%;
	padding: 1px 3px;
	color: #FFFFFF;
	background-color: var(--blue);
	border: 2px solid var(--blue);
}
:is(.navbar, .sidemenu) a:hover {
	color: #000000;
	background-color: var(--blue-hover);
	border-style: outset;
	text-decoration: none;
}
:is(.navbar, .sidemenu) a[aria-current] {
	color: #000000;
	background-color: var(--blue-current);
	border-style: inset;
}

.sidemenu-heading {
	margin: 0;
	padding: 3px 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #FFFFFF;
	background-color: var(--navy);
	letter-spacing: 1px;
}

/* --------------------------------------------------- two-column page body */

.layout {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
	gap: 6px;
	align-items: start;
}
.layout > .content {
	min-width: 0;
	padding-inline: 2px;
}

.content > :first-child { margin-top: 4px; }
.content li + li { margin-top: 2px; }

/* ------------------------------------------------------ home page tabs
   Radio inputs drive the panels so the widget needs no JavaScript. The inputs
   are kept in the DOM (not display:none) so they stay keyboard reachable. */

.tabs {
	display: grid;
	grid-template-columns: var(--sidebar) minmax(0, 1fr);
}
.tab-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.tab-strip {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(to right, #FFFFFF 0%, #EDF1F8 45%, var(--blue-current) 100%);
}
.tab {
	display: grid;
	cursor: pointer;
	border-left: 2px solid #FFFFFF;
}
.tab img {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
}
.tab .on { visibility: hidden; }

.tab-panels {
	grid-column: 2;
	display: grid;
	padding-left: 5px;
	border: 2px solid #000000;
	border-left: 0;
}
.tab-panel {
	grid-area: 1 / 1;
	visibility: hidden;
	padding-top: 5px;
	font-size: 98%;
}
.tab-panel > :first-child { margin-top: 0; }

#tab-events:checked   ~ .tab-panels > #panel-events,
#tab-defence:checked  ~ .tab-panels > #panel-defence,
#tab-group:checked    ~ .tab-panels > #panel-group { visibility: visible; }

#tab-events:checked   ~ .tab-strip [for="tab-events"]  .on,
#tab-defence:checked  ~ .tab-strip [for="tab-defence"] .on,
#tab-group:checked    ~ .tab-strip [for="tab-group"]   .on { visibility: visible; }

#tab-events:checked   ~ .tab-strip [for="tab-events"]  .off,
#tab-defence:checked  ~ .tab-strip [for="tab-defence"] .off,
#tab-group:checked    ~ .tab-strip [for="tab-group"]   .off { visibility: hidden; }

#tab-events:focus-visible  ~ .tab-strip [for="tab-events"],
#tab-defence:focus-visible ~ .tab-strip [for="tab-defence"],
#tab-group:focus-visible   ~ .tab-strip [for="tab-group"] {
	outline: 2px dashed var(--gold);
	outline-offset: -5px;
}

/* ----------------------------------------------------------------- footer */

.footer {
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	gap: 4px;
	padding: 4px 0 6px;
	color: #FFFFFF;
	background-color: var(--blue);
	text-align: center;
	border-bottom: 2px solid;
	border-image: linear-gradient(to right, var(--navy), var(--blue-hover), var(--navy)) 1;
}
.footer a { color: #FFFFFF; }
.footer ul {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.disclaimer {
	max-width: var(--shell);
	padding-top: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	color: #ffffff;
}

/* -------------------------------------------------------------- fragments */

.strapline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	color: var(--navy);
	letter-spacing: 1px;
}

.banner { display: block; margin-bottom: 6px; }

.datatable {
	border-collapse: collapse;
	border: 1px solid var(--blue);
	font-size: 95%;
}
.datatable :is(th, td) {
	padding: 2px 6px;
	vertical-align: top;
	text-align: left;
}
.datatable thead th {
	color: #FFFFFF;
	background-color: var(--blue);
	font-family: Arial, Helvetica, sans-serif;
}
.datatable tbody tr:nth-child(odd) :is(th, td) { background-color: var(--panel); }
.datatable tbody th { font-weight: bold; }

.notice {
	border: 2px ridge var(--blue);
	background-color: var(--panel);
	padding: 6px;
	font-size: 95%;
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }

.classification {
	font-family: "Courier New", Courier, monospace;
	font-size: 90%;
	font-weight: bold;
	color: #990000;
	letter-spacing: 1px;
}

.thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
	margin: 8px 0;
}
.thumbs figure { margin: 0; }
.thumbs figcaption { font-size: 90%; padding-top: 2px; }

.figure-right {
	float: right;
	margin: 0 0 6px 10px;
	max-width: 240px;
}
.figure-right figcaption { font-size: 90%; padding-top: 2px; }

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.colophon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 80%;
}

.testimonial {
	font-size: 120%;
	font-style: oblique;
	font-weight: normal;
}
.testimonial + footer { padding-top: 4px; }

.smaller { font-size: 80%; }
.nobr { white-space: nowrap; }
.green { color: #009900; }
.red { color: #CC0000; }

/* ------------------------------------------------------------ small print */

@media (max-width: 640px) {
	body {
		font-size: 95%;
	}

	.shell {
		max-width: 100%;
	}

	:is(.layout, .tabs) {
		grid-template-columns: 1fr;
	}

	.layout > .sidebar,
	.tab-strip {
		margin-bottom: 6px;
	}

	.tab-strip {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tab {
		flex: 1 1 33.333%;
		min-width: 0;
		border-left: 0;
	}

	.tab-panels {
		grid-column: 1;
		padding-left: 0;
		border-left: 2px solid #000000;
	}

	.navbar ul,
	.footer ul {
		flex-wrap: wrap;
	}

	.navbar li {
		flex: 1 1 50%;
	}

	.navbar a {
		padding-block: 3px;
	}

	.datatable {
		display: table;
		width: 100%;
		font-size: 85%;
		table-layout: fixed;
	}

	.datatable :is(th, td) {
		padding: 2px 4px;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.nobr {
		white-space: normal;
	}
	.thumbs {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}


	.badges {
		justify-content: center;
	}

	.colophon {
		align-items: flex-start;
	}

	fieldset {
		min-width: 0;
	}

	input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
	select,
	textarea {
		width: 100%;
		max-width: 100%;
	}
}