/* BEGIN RESET / DEFAULTS */

:root {
	--default-link-color: hsl(32, 100%, 35%);
	--border-color:       hsl(40,  20%, 50%);
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:inherit;
	font-style:inherit;
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
	background-repeat:no-repeat;
}

.narrow {width:1%;}
.wide {width:100%;}
.nowrap {white-space:nowrap;}
.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}
.inline {display:inline;}
.block {display:block;}
.inline-block {display:inline-block;}
.float-right {float:right;}
.relative {position:relative;}
strong {font-weight:bold;}
em {font-style:italic;}

h1,h2,h3,h4,h5,h6,p,ol,ul,table,figure {
	margin-bottom: 1rem;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
	color: hsl(40, 50%, 30%);
}
h1 {font-size: 2rem;}
h2, aside h2, aside.executive-summary h2, blockquote h2 {
	font-size: 1.4rem;
}
h2 {
	margin-top: 2.8rem;
}
h3 {font-size: 1.1rem; margin-top: 2.2rem;}
p {
	line-height:1.8rem;
}
hr {
	height:0;
	border: none;
	height:1px;
	background-color: var(--border-color);
	margin:2rem 0;
}
a {
	color: var(--default-link-color);
}

pre,code,.code {
	font-family: Consolas, monospace;
}

button.theme,
a.theme-button {
	background-color: hsl(32, 100%, 42%);
	text-decoration:none;
	font-weight:bold;
	display:inline-block;
	border:none;
	padding:0.6rem 1.5rem 0.5rem;
	border-radius:0.3rem;
	&:focus {outline:2px solid hsl(32, 20%, 80%);}
	color:#fff;
	text-shadow: 1px 1px 4px hsl(32, 70%, 25%);
}

/* END RESET / DEFAULTS */



@media screen and (max-width: 699.99px) {
	body {
		font-size: 1rem;
		font-family: sans-serif;
		margin:4vh 5vw 0;
		background-color: hsl(40, 15%, 50%);
		background-image:
			url(/img/cerastes-750w.webp),
			url(/img/bottom-background.webp),
			url(/img/background.webp);
		background-size: 100% auto, 100% auto, 100% auto;
		background-position:
			center calc(100% + 18vw - 10vh),
			center bottom,
			center top;
		background-attachment: fixed, fixed, fixed;
	}
}
@media screen and (min-width: 700px) {
	body {
		font-size: 1rem;
		font-family: sans-serif;
		margin:4vh 5vw 0;
		background-color: hsl(40, 15%, 50%);
		background-image:
			url(/img/cerastes-1500w.webp),
			url(/img/bottom-background.webp),
			url(/img/background.webp);
		background-size: 100% auto, 100% auto, 100% auto;
		background-position:
			center calc(100% + 18vw - 10vh),
			center bottom,
			center top;
		background-attachment: fixed, fixed, fixed;
	}
}




/* BEGIN HEADER */

header {
	display:grid;
	grid-template-columns: 40% 1fr;
	grid-column-gap: 2rem;
	div.logo-container {
		#logo {
			display:block;
			width:100%;
			aspect-ratio:2/1;
			background-image:url(/img/tvi-logo.webp);
			background-size:contain;
		}
		#tagline {
			display:none;
			aspect-ratio:5/1;
			background-image:url(/img/tagline.webp);
			background-size:contain;
		}
	}
	#menu-toggler {
		display:none;
	}
	nav.main-nav {
		position:relative;
		ul {
			position:absolute;
			bottom:0; right:0;
			white-space:nowrap;
			li {
				display:inline-block;
				margin-left:0.5rem;
				a.theme-button {
					padding:0.5rem 1rem 0.4rem;
				}
			}
		}
	}
	div.locale-selection {
		display:none; /* hide until other languages are ready */
		position:absolute;
		top:3vh;
		right:5vw;
		text-align:right;
		button.locale-selection {
			display:inline-block;
			margin:0;padding:0;border:0;outline:0;
			width:calc(2rem + 1.5vw);
			aspect-ratio: 2/1;
			background-color:transparent;
			background-image:url(/img/locale-selection.png);
			background-size:contain;
			cursor:pointer;
		}
		button.locale-selection:hover {
			filter: grayscale(100%);
			filter: brightness(100.0);
		}
		div.dropdown-anchor {
			position:absolute;
			bottom:0;
			right:0;
			ul {
				position:absolute;top:0px;right:0;
				margin:0;padding:0.5rem 0;
				background-color:#eeedea;
				text-align:left;
				&.hidden {display:none;}
				li {
					margin:0;
					padding:0 2ch;
					list-style-type:none;
					white-space:nowrap;
					font-family:"Noto Sans Semi-condensed Medium";
					font-weight:normal;
					font-size:1rem;
					height:2rem;
					line-height:2rem;
					color:#a69085;
					&:hover {color:#000;background-color:#f1f1f0;}
					img {
						display:inline-block;
						height:1rem;
						width:1.4rem;
						margin-right:0.7ch;
						position:relative;top:0.1rem;
					}
					a {
						text-decoration:none;
						color:inherit;
						letter-spacing:1px;
						&:hover {color:#000;}
					}
				}
			}
		}
	}

}



/* BEGIN MAIN BODY CONTENT */
main {
	margin: 3rem 0 1rem;
	padding: 5vh;
	border-radius:0.5rem;
	background-image: url(/img/text-bg.webp);
	background-repeat:repeat;

	div.content-head {
		padding-bottom:0.3rem;
		border-bottom:1px solid var(--border-color);
		margin-bottom:1.5rem;
	}
	div.content-foot {
		padding-top:0.3rem;
		border-top:1px solid var(--border-color);
		margin-top:1.5rem;
	}
	div.content-head,
	div.content-foot {
		padding-left:0.2rem;
		padding-right:0.2rem;
		color: hsl(40, 20%, 50%);
		a.edit {
			float:right;
		}
		dl {
			display:inline-block;
			dt {display:inline;}
			dd {display:inline;}
		}
	}

	ul,ol {
		margin-top:0.7rem;
		margin-left:1.5rem;
		li {margin-bottom:0.7rem;}
	}

}

article {
	blockquote,
	aside.executive-summary {
		padding: 1.5rem 1.5rem 1rem;
		border-radius:0.5rem;
		background-color: hsl(40, 10%, 90%);
		margin-bottom: 2rem;
	}
	blockquote {
		margin-top: 2rem;
		line-height: 1.8rem;
		font-style: italic;
	}
	aside > * {
		margin-top: 0;
		margin-bottom: 1rem;
	}
	figure {
		margin: 2rem 5%;
		img {
			display:block;
			width:90%;
			height:auto;
			margin:0 auto;
		}
		figcaption {
			color:hsl(40, 50%, 35%);
			margin:0.5rem 5% 0;
			/* font-style:italic; */
		}
	}
}
/* END MAIN BODY CONTENT */



@media screen and (max-width: 700px) {
	header.interior-page {
		grid-template-columns: 60% 1fr;
		#menu-toggler {
			display:block;
			width:2.5rem;
			height:2.0rem;
			position:absolute;
			top:2rem;
			right:0;
			border:none;
			background-color:transparent;
			background-image:url(/img/menu-toggler.png);
			background-size:contain;
		}
		nav.main-nav {
			ul {
				display:none;
				position:absolute;
				top:1.5rem;right:0;
				li {
					display:block;
					padding:0.25rem 0.5rem;
					margin:0;
					background-color: hsl(40, 50%, 25%);
					&:first-child {padding-top:0.5rem;border-radius:0.5rem 0.5rem 0 0;}
					&:last-child {padding-bottom:0.5rem;border-radius: 0 0 0.5rem 0.5rem;}
					a {
						display:block;
					}
				}
			}
		}
	}
	main {
		margin:2rem 0;
		padding: 1.5rem 4vw;
	}
	footer {
		display:none;
	}
}

/* END HEADER */



/* BEGIN FOOTER */

footer {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	color: hsl(32, 10%, 70%);
	font-size: 0.9rem;
	padding:0.5rem;
	text-align:center;
	background-color: hsl(35, 10%, 35%);
	a {
		margin-left:1rem;
		color: hsl(32, 10%, 70%);
	}
}

/* BEGIN FOOTER */



/* BEGIN OVERLAYS */

#overlay-darkener {
	display:none;
	position:fixed;
	box-sizing:border-box;
	top:0;left:0;right:0;bottom:0;
	height:100%;width:100%;
	background-color:#000;
	opacity:0.60;
	z-index:10000;
}

#overlay-outer-container {
	display:none;
	position:fixed;
	box-sizing:border-box;
	left:10%;
	top:10%;
	width:80%;
	height:80%;
	margin:auto;
	z-index:10100;
	border:0px solid #000;
	border-radius:5px;
	background-color:#fff;
	box-shadow:0px 0px 40px #333;
}

#overlay-inner-container {
	position:absolute;
	box-sizing:border-box;
	left:0;top:0;right:0;bottom:0;
	width:100%;height:100%;
	margin:0;
	padding:2rem;
	z-index:10100;
}

#x-out {
	display:block;
	position:absolute;
	margin:0;padding:0;
	top:0px;right:5px;
	font-size:1rem;
	z-index:10200;
	cursor:pointer;
	color:#999;
	text-decoration:none;
}

#x-out:hover {
	color:#000;
}

/* END OVERLAYS */