/*cheat sheet for color gradient:
ffffff ====== white
dfecf8
c0d9f1 ==
a0c7ea
81b4e3 ====
61a1dc
428ed5 ==
227bce
0067c6 ====== pantone 300c
0059ac
004c93 ==
00407b
003362 ====
00264a
001931 ==
000d19
000000 ====== black
*/

/*
NOTE TO SELF:
verify whether double-colon ::before and ::after work correctly on older browsers
verify image-rendering values
browser default font size of 16 is in units of px, which is approximately equal to 12pt
REMEMBER THAT YOUR DEFAULT FONT SIZE IS 14PX
*/



:root {
	--primary-dark: #001931; /*variables for colors: blue*/
	--primary-med: #0059ac; /*pantone 300c on primary-light doesn't reach wcag level aa so let's drop it one tick*/
	--primary-light: #c0d9f1;
	--primary-table: #dfecf8;
	--secondary-med: #ac0059; /*red*/
	--secondary-light: #f1c0d9;
	--tertiary-med: #5900ac; /*purple*/
}




/*must include to make header and footer render correctly!*/
iframe {
	width: 100%;
	border: none;
	object-fit: contain;
	display: block;
}

#iframe-header {
	height: calc(13.52em + 2px); /*precise value if <ul> doesn't overflow is 13.52em + 1px*/
}

#iframe-footer {
	height: calc(15em + 64px); /*precise value if <ul> doesn't overflow is 15em + 63px*/
}

/*general html elements*/
body {
	background-color: var(--primary-dark);
	line-height: 150%;
	padding: 0;
	margin: 0;
	font-family: verdana;
}

h1 {
	text-align: center;
	line-height: 150%;
	font-size: 3em;
	clear: both;
}

h2 {
	line-height: 150%;
	font-size: 2em;
	clear: both;
}

h3 {
	line-height: 150%;
	font-size: 1.5em;
	clear: both;
}

sup {
	font-size: 0.6em;
}

hr {
	border: none;
	border-bottom: 0.25em solid var(--primary-med);
	overflow: visible;
	text-align: center;
	height: 3em; /*doesn't need to rely on margins in the case of floated elements*/
	margin: 0 0 3em;
	clear: both;
}

a {
	text-decoration: none;
	color: var(--primary-med);
	&:link {
		text-decoration: none;
		color: var(--primary-med);
	}
	&:hover, &:active {
		text-decoration: underline;
		color: var(--secondary-med);
	}
	&:hover img {
		outline: 0.5rem solid var(--secondary-med);
	}
	&:visited {
		color: var(--tertiary-med);
	}
}



.pixel-art { /*nearest-neighbor upscaling*/
	image-rendering: -webkit-optimize-contrast; /*Safari (deprecated)*/
	image-rendering: pixelated; /*Chrome*/
	image-rendering: crisp-edges; /*Firefox*/
}





article {
	max-width: calc(100% - 12em);
	min-width: calc(50em - (100vw - 100%)); /*ensure page is never narrower than max width mobile layout + subtract scrollbar width automagically*/
	margin: auto; /*either i was a huge doofus to not do this in the first place or it didn't cooperate with the three-column layout*/
	nav {
		width: calc(40% - 1em);
		float: right;
	}
}

#tableofcontents {
	list-style: none;
	border-width: 0 0 0 0.25em;
	border-color: var(--primary-med);
	border-style: solid;
	padding-left: 1.25em;
	& li {
		text-indent: -0.75em;
		margin-left: 0.75em;
		&::before {
			content: "[ ";
		}
		&::after {
			content: " ]";
		}
	}
}
			
.container-summary { /*congratulations, it's the only div in the template!*/
	float: left;
	width: 60%;
}

.container-fullwidth { /*add this class after container-summary for pages without tables of contents*/
	float: none;
	width: 100%;
}

footer {
	width: 100%;
	position: relative;
	& section { /*using the #header style flipped vertically*/
		margin-bottom: 0;
		padding: 0.5em 1em 0; /*bottom padding relies on child elements*/
		border-width: 1px 1px 0;
		border-radius: 1.5em 1.5em 0 0; /*clockwise from top-left*/
		height: 100%;
		overflow-y: clip;
	}
	& h3 {
		font-size: 1em;
		text-align: center;
	}
	& hr {
		height: 0;
		margin: 0.5em 0;
	}
	& nav ul {	
		text-align: center;
		list-style-type: none;
		padding: 0;
		margin: 0;
		width: 100%;
		font-size: 0; /*WARNING: em is now 0 - must use rem*/
		& a {
			display: inline-block; /*link hitbox is entire <li> if inline*/
		}
		& li {
			list-style-type: none;
			display: inline-block;
			line-height: 100%;
			width: calc(88px + 2rem);
		}
		& img, & picture {
			width: 88px;
			height: 31px;
			display: block;
			margin: auto;
		}
	}
}

section {
	margin: 1em 0;
	padding: 0 1em; /*top and bottom padding rely on child elements*/
	background-color: var(--primary-light);
	border: 1px solid var(--primary-med);
	border-radius: 1.5em;
	position: relative;
	display: flow-root; /*keeps floating figures inside boundaries*/
}

header { /*properties mostly the same as for section*/
	margin-bottom: 1em;
	padding: 0.5em 1em 0; /*bottom padding relies on child elements*/
	background-color: var(--primary-light);
	border-color: var(--primary-med);
	border-style: solid;
	border-width: 0 1px 1px;
	border-radius: 0 0 1.5em 1.5em; /*clockwise from top-left*/
	& nav ul {
		text-align: center;
		list-style-type: none;
		padding: 0.5em 0;
		margin: 0;
		& li {
			display: inline-block;
			padding: 0.5em 0;
			&::before {
				content: "[ ";
			}
			&::after {
				content: " ]";
			}
			&:hover {
				text-decoration: underline;
			}
		}
	}
}




.tooltip { /*add this class to a span tag around some text*/
    position: relative;
    text-decoration: underline dotted 2px;
	cursor: help;
	& span { /*nest a second span inside - it doesn't need its own class*/
		width: max-content;
		overflow-wrap: break-word;
		max-width: 15em;
		top: 1.5em;
		left: 50%;
		transform: translateX(-50%); 
		padding: 0.5em;
		background-color: var(--secondary-light);
		border: 1px solid var(--secondary-med);
		border-radius: 0.75em;
		box-shadow: 0.25em 0.25em 0.5em var(--primary-dark);
		position: absolute;
		z-index: 255;
		display: none;
	}
	&:hover span {
		display: block;
	}
}



/*v2 makes extensive use of <figure> tag*/

figure {
	max-width: 28em; /*arbitrary - gallery images are 23em to <34.5em for comparison*/
	background-color: var(--primary-table);
	margin: 0.5em 2em 0.5em 0;
	height: auto;
	float: left;
	clear: both;
	border-width: 0 0.25em 0 0;
	border-color: var(--primary-med);
	border-style: solid;
	padding: 0 0.75em 0 0;
	&:nth-child(even) {
		float: right;
		margin: 0.5em 0 0.5em 2em;
		border-width: 0 0 0 0.25em;
		padding: 0 0 0 0.75em;
	}
	& figcaption { /*get rid of blue border and indent that shows up normally*/
		border-width: 0;
		padding-left: 0;
		margin-left: 0;
	}
	& img {
		max-width: 100%; /*remember, 100% of parent element's width*/
	}
}



:target { /*for internal #id anchors*/
	background-color: var(--secondary-light);
}

::target-text { /*for #:~:text=excerpt anchors*/
	background-color: var(--primary-table);
}

figcaption, .tooltip span, td::before { /*elements i expect to be narrow*/
	hyphens: auto;
}

blockquote, figcaption {
	border-width: 0 0 0 0.25em;
	border-color: var(--primary-med);
	border-style: solid;
	padding-left: 1.25em;
	margin-left: 0.25em;
}

blockquote, figcaption, code {
	background-color: var(--primary-table);
}



/*tables*/
td, th {
	padding: 0 0.5em;
}

tr {
	&:nth-child(2n+4) {
		background-color: var(--primary-table); /*apply to 2nd, 4th, etc. rows for zebra stripes*/
		& td {
			border-color: var(--primary-light);
			border-style: solid;
			border-width: 0 1px;
		}
	}
	&:nth-child(2n+3) td {
		border-color: var(--primary-table);
		border-style: solid;
		border-width: 0 1px;
	}
}

.table-header td {
	font-size: 1.5em;
	line-height: 200%;
	font-weight: bold;
	text-align: center;
	border-width: 0 0.5em 1px;
}

.table-header, .table-header td, th {
	color: var(--primary-table);
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
}

table {
	border-collapse: collapse;
	width: 100%
}



/*For photo galleries. Use with <ul>. First <li> can have <h#> header and fig caption if you want*/
.gallery {
	background-color: var(--primary-table);
	list-style: none;
	display: grid;
	grid-auto-flow: row;
	align-items: start;
	grid-gap: 0.5em;
	gap: 0.5em;
	padding-left: 0; /*<ul> has padding-left but not right set by default*/
	grid-template-columns: repeat(auto-fit, minmax(23em, 1fr)); /*23em allows two side-by-side at width when layout kicks over to desktop view*/
	clear: both;
	& img {
		max-width: 100%;
		margin-left: 0;
	}
	& figcaption {
		max-width: calc(100% - 1.5em); /*23em minus the padding and margin that the element normally has*/
		margin: 0 0 1em 0;
	}
	& li {
		padding: 0.5em;
		text-align: left;
	}
}



/*for narrower displays*/
@media only screen and (max-width: 50em) { /*50em = 800px @ default 16px font - WARNING: CSS variables can't be used for media queries so this value will also need to be updated in game-boy-camera-gallery-page.css and ...class.css separately*/

	#iframe-header {
		min-height: calc(16.52em + 2px); /*add 3em to allow title to shrink and wrap once*/
	}

	#iframe-footer {
		min-height: calc(18em + 126px); /*add 1.5em + 62px to allow each row of buttons and copyright notice to wrap once*/
	}

	article { /*remove side margins*/
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		nav {
			float: none;
			width: 100%;
			& ul {
				border-width: 0;
				padding-left: 0;
				& li { /*phone and tablet screens are small so increase the vertical spacing to make the small links easier to hit*/
					line-height: 250%;
				}
			}
		}
	}

	h1 {
		font-size: 2.5em;
	}

	hr {
		height: 2em; /*doesn't need to rely on margins in the case of floated elements*/
		margin: 0 0 2em;
	}

	.container-summary {
		float: none;
		width: 100%;
	}

	.container-fullwidth {
		& h2 {
			text-align: center;
		}
	}

	.gallery {
		grid-template-columns: repeat(auto-fit,  minmax(calc(50% - 1px - 1em), 1fr)); /*magic number: <section> tags have 1px border plus 1em margin on either side*/
		& li {
			padding: 0;
		}
	}

	figure, figure:nth-child(even) { /*figures now form a column down the right side of the page*/
		max-width: 40%;
		margin: 0.5em;
		border-width: 0 0 0 0.25em;
		padding: 0 0 0 0.75em;
		float: right;
		& img {
			max-height: 20em;
		}
	}

	th, td, tr { /*EXTREMELY IMPORTANT for responsive tables*/
		display: block;
	}

	th { /*shove table headers off page so they don't render but screen readers can see*/
		position: absolute;
		top: -12345px;
		left: -12345px;
	}

	td {
		font-size: 87.5%; /*14px = 10.5pt at browser default 16px*/
		position: relative;
		padding-left: max(8.5em, calc(0.5em + 25%)); /*padding must be at least 8em plus 0.25em to match td:before width and padding*/
		&::before {
			width: 25%;
			min-width: 8em;
			padding-left: 0.25em;
			height: 100%; /*fill vertical space with background color*/
			overflow-y: auto; /*adds scrollbar only if box overflows*/
			position: absolute; /*absolute positioning kicks it to the side*/
			top: 0; /*relative to parent element!*/
			left: 0;
			margin: 0 1em 0 0;
			white-space: pre-wrap;
			content: attr(data-label);
			color: var(--primary-table);
			background-color: var(--primary-dark);
			font-weight: bold;
		}
	}
	
	.table-wide-headers td { /*for tables with headers that are just a little too long*/
		padding-left: max(12.5em, calc(0.5em + 25%));&::before {
			min-width: 12em;
		}
	}

	tr {
		&:nth-child(2n+3) td, &:nth-child(2n+4) td {
			border-width: 0 0 1px 0;
		}
	}

	.table-header td {
		padding-left: 0;
		&::before { /*remember, the title is a <td> element*/
			display: none;
		}
	}
}

/*for the very smallest screens like old 320x480 phones. consider changing to 375px if it looks bad on the feebfone*/
@media only screen and (max-width: 359px) {
	h1 {
		font-size: 2em;
	}
	.gallery {
		grid-template-columns: repeat(auto-fit,  100%);
	}

	figure, figure:nth-child(even) {
		float: none;
		max-width: 100%;
		width: 100%;
		margin: 0;
		border-width: 0;
		padding: 0;
	}
}