/*list of variables for colors used throughout stylesheet*/

:root {
	--text: #333333; /*dark gray - all normal text on the page*/

	--background-body: #006699; /*blue - "pillarboxing" to left and right of text*/
	--background-header: #800101; /*dark red - around banner*/
	--background-menu: #eeeeee; /*light gray*/
	--background-menu-hover: #3333cc; /*blue*/
	--background-main: #ffffff; /*white - background color for text*/
	--background-footer: #c0b290; /*beige - for webmaster email*/
	--background-highlight: #ffff66; /*yellow - for highlighting link targets*/

	--border-menu: #cccccc; /*light gray - goes around drop-down submenus*/
	--border-main-outer: #333333; /*dark gray - outer border around main text*/
	--border-main-inner: #cccc99; /*beige - inner border around main text*/

	--link-normal: #800101; /*dark red - links that have not been clicked*/
	--link-active: #0000ff; /*blue - links that are being clicked*/
	--link-visited: #800101; /*dark red - links that were previously clicked*/
	--link-menu-text: #333333; /*dark gray - for the menu button links specifically*/
	--link-menu-text-active: #ffffff; /*white*/
}



/*general elements*/

body {
	background-color: var(--background-body);
	padding: 0;
	margin: 0;
	line-height: 1.5em;
	color: var(--text);
}

h1 {
	text-align: center;
	margin-block: 0.67em; /*accounting for standard change in 2025*/
	font-size: 2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

img {
	width: 70%;
	border: 2px solid var(--border-main-inner);
	margin-left: 15%;
}

a, a:link {
	color: var(--link-normal);
	text-decoration: none;
}

a:hover {
	color: var(--link-active);
	text-decoration: underline;
}

a:visited {
	color: var(--link-visited);
	text-decoration: none;
}

a:active {
	color: var(--link-active);
}

table {
	margin: auto;
}

table, th, td {
	border: 1px solid var(--border-main-outer);
	border-collapse: collapse;
}

th, td {
	padding: 0.25em;
}

th {
	color: var(--link-menu-text-active); /*using colors to match the navigation buttons*/
	background-color: var(--background-menu-hover);
}

tr:nth-child(2n) td { /*only apply to even-number rows for zebra striping*/
	background-color: var(--border-menu);
}

tr:nth-child(2n+1) td { /*odd*/
	background-color: var(--background-menu);
}

::target-text, :target { /*highlight target of #:~:text=excerpt links and internal #id anchors*/
	background-color: var(--background-highlight);
}



/*header banner*/

header {
	background-color: var(--background-header);
}

header hr {
	border: none;
	text-align: center;
	height: 113px; /*magic number given image height*/
	padding: 0;
	margin: 0;
	background: var(--background-header) url('banner.jpg') no-repeat center; /*color, image url, repeat image?, image alignment*/
}



/*site navigation buttons*/

nav ul {
	background-color: var(--background-menu);
	list-style-type: none;
	padding: 0;
	text-align: center;
	width: 100%;
}

nav li {
	border: 1px solid var(--border-menu);
	font-size: 0.9rem; /*shrinks menu text to avoid line wrapping, using rem rather than em to undo hack later*/
}

nav a, nav a:link, nav a:visited, .menulabel {
	color: var(--link-menu-text);
	display: block;
	padding: 0.5em 0;
}

.menulabel {
	cursor: pointer; /*pretend it's a link*/
}

nav a:hover, nav a:active {
	color: var(--link-menu-text-active);
	text-decoration: underline;
}

nav li:hover {
	background-color: var(--background-menu-hover);
}

#menumain {
	width: 100%;
	margin: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 0; /*hack to eliminate linebreaks rendering as whitespace - cannot use em to set child element's font*/
}

#menumain > li { /*angled bracket ensures that only the <li> children one level deep are selected. otherwise all <li> descendants are selected without angled bracket. */
	display: inline-block;
	position: relative;
	width: calc(16.66% - 2px); /*explanation: we have six buttons so we want one-sixth of the width rounded down, and then we subtract 2px for the left and right borders*/
}

.menulabel:after {
	content: " \2b9f"; /*hex code for down arrowhead character*/
}

.menucheck {
	display: none;
}

.menusub ul {
	background-color: var(--background-menu);
	display: none;
	z-index: 10;
}

@media (hover: hover) { /*preempts some edge cases with mobile browsers trying to implement :hover pseudoclass*/
	.menusub:hover label {
		color: var(--link-menu-text-active);
	}

	.menusub:hover ul {
		display: block;
		position: absolute;
	}
}

@media (hover: none) { /*if no hover then assume touchscreen*/
	.menucheck:checked ~ ul { /*tapping label checks box which then displays <ul> placed immediately after*/
		display: block;
		position: absolute;
	}

	.menusub:has(.menucheck:checked) .menulabel {
		background-color: var(--background-menu-hover);
		color: var(--link-menu-text-active);
	}
}



/*main text of page*/

section {
	background-color: var(--background-main);
	padding: 1em;
	border: 1px solid var(--border-main-outer);
	box-shadow: inset 0 0 0 0.25em var(--background-main),
				inset 0 0 0 calc(0.25em + 1px) var(--border-main-inner); /*cool hack for second inner border*/
}

article {
	width: 70%;
	margin-left: 15%;
}



/*footer text and banner*/

footer {
	background-color: var(--background-footer);
	text-align: center;
	font-weight: bold;
}

footer hr {
	border: none;
	height: 24px;
	margin: 0;
	background: var(--background-body) url('anchline.png') repeat-X; /*color, image url, repeat image?*/
}



/*media queries for mobile layouts*/

@media (max-width: 958px) { /*magic number: width of header banner image file*/
	article {
		width: 670px; /*70% of cutoff*/
		margin-left: calc(50% - 335px);
	}

	header hr {
		background-size: 100%; /*shrink background as page gets narrow*/
	}
}

@media (max-width: 700px) { /*magic number: fixed width of article at cutoff point plus a fudge factor for scrollbar*/
	img {
		max-width: 100%;
	}

	article {
		width: 100%;
		margin-left: 0;
	}

	#menumain > li { /*angled bracket ensures that only the <li> children one level deep are selected. otherwise all <li> descendants are selected without angled bracket. */
		display: block;
		width: calc(100% - 2px); /*borders add 2px of width so subtract them from element*/
	}
}