/*
	Global
	======
 */

:root {
	/* Unturned's in-game UI uses 10px for almost everything. (E.g., padding, spacing, radius, etc.) */
	--spacing: 0.75rem;

	--unturned-white: #f0f0f0;
	--unturned-secondary-white: #d0d0d0;
	--unturned-gray: #969696;
	--unturned-gold: #d2bf22;
}

* {
	box-sizing: content-box;
	padding: 0;
	margin: 0;
}

.unturned-gold {
	color: var(--unturned-gold);
}

.unturned-gold-italic {
	color: var(--unturned-gold);
	font-style: italic;
}

html {
	font-family: "Open Sans", Helvetica, sans-serif;
	background-image: url("background.jpg");
	background-attachment: fixed; /* Don't scroll. */
	background-position: center; /* Otherwise narrow window defaults to left side. */
	background-repeat: no-repeat;
	background-size: cover; /* No blank space. */
	font-size: 100%;
}
/*
	Open Sans is licensed Under the SIL Open Font License, Version 1.1:
	Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
	https://openfontlicense.org
 */
@font-face {
	font-family: "Open Sans";
	src: url("../OpenSans-VariableFont_wdth,wght.ttf");
	font-style: normal;
}
@font-face {
	font-family: "Open Sans";
	src: url("../OpenSans-Italic-VariableFont_wdth,wght.ttf");
	font-style: italic;
}
/*
	Montserrat is licensed Under the SIL Open Font License, Version 1.1: https://openfontlicense.org
	Copyright 2024 The Montserrat.Git Project Authors (https://github.com/JulietaUla/Montserrat.git)
 */
@font-face {
	font-family: "Montserrat";
	src: url("../Montserrat-VariableFont_wght.ttf");
	font-style: normal;
}
@font-face {
	font-family: "Montserrat";
	src: url("../Montserrat-Italic-VariableFont_wght.ttf");
	font-style: italic;
}

body {
	display: flex;
}

.main-column {
	display: flex;
	flex-direction: column;
	max-width: 60rem;
	gap: var(--spacing);
	padding: 0.25rem;
}

main {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
figcaption,
summary,
li {
	color: var(--unturned-white);
	text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 50%);
}

em {
	font-weight: bold;
}

p {
	color: var(--unturned-secondary-white);
	text-align: justify;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h1, h2 {
	text-align: center;
}

h1, h2, h3 {
	font-family: Montserrat, Helvetica, sans-serif;
}

.nav-button,
section {
	backdrop-filter: blur(0.2rem);
}

.toc-menu,
section {
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: var(--spacing);
	padding: var(--spacing);
}

section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

/* Slightly adjust inline link colors for dark backdrop. */
a:link {
	color: cornflowerblue;
	text-decoration-line: none;
}
a:visited {
	color: violet;
	text-decoration-line: none;
}
a:hover {
	color: lightblue;
	text-decoration-line: underline;
}
a:active {
	color: crimson;
	text-decoration-line: underline;
}
/* Undo link colors for game-style buttons because it doesn't look as nice there. */
a.game-button:link, a.game-button:visited, a.game-button:hover, a.game-button:active {
	color: var(--unturned-white);
	text-decoration-line: none;
}

.game-button {
	flex: 1; /* In nav links, nested flexboxes keep all buttons the same height. */
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.5);
	border-radius: var(--spacing);
	padding: var(--spacing);
	border-style: solid;
	border-width: 1px;
	border-color: transparent; /* Border is hidden by default and made visible by color overrides. This prevents visible border from affecting layout. */
	text-decoration-line: none; /* Remove hyperlink underline because button makes link functionality clear. */
}
.game-button:hover {
	border-color: var(--unturned-white);
}
.game-button:active {
	background-color: rgb(60 60 60 / 50%);
}

/* Append file folder emoji to links with download attribute. */
a[download]::after {
	content: "📁";
}

/* Remove drop shadow from selection. */
::selection {
	color: white; /* unturned-white doesn't look as nice here. */
	background-color: cornflowerblue;
	text-shadow: initial;
}

/* Chrome on Windows can't display flag emojis. */
.flag {
	display: inline;
	width: 1.5em;
	height: auto;
	/* Outline makes it more readable in light theme. */
	outline-color: black;
	outline-style: solid;
	outline-width: 0.05rem;
}

/*
	Header
	======
 */

header {
	display: flex;
	flex-direction: column;
	position: relative; /* Allows ToC button to use absolute position. */
}

h1 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 5rem;
}

/* Superscript R doesn't visually align with the top of the 'd' the way I want it to.
   Other workarounds like making it a flex item aren't any better. :( */
.registered-symbol {
	font-size: 25%;
	vertical-align: top;
}

header .unturned-gold-italic {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
	text-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 50%);

	margin-top: -0.8rem;
	margin-bottom: -0.4rem;
}

nav {
	margin-top: var(--spacing);
}

nav ul {
	list-style-type: none; /* Nav links are only a list for semantics. */
	display: flex;
	flex-wrap: wrap; /* Break links onto new line if there isn't enough space. */
	gap: var(--spacing);
}

nav li {
	flex: 1;
	text-align: center;
	display: flex;
}

.nav-button {
	gap: var(--spacing);
	text-align: start;
}

.toc-menu-container {
	position: fixed;
	right: 0;
	z-index: 10;
	margin: 0.25rem;

	display: flex;
	flex-direction: column;
	align-items: end;
}

/* The trick is clicking the input label also toggles the checkbox. */
#toc-checkbox {
	display: none;
}

.toc-menu-button {
	display: flex;
	cursor: pointer; /* Mouse cursor indicates it's clickable. */
	padding: 0.5rem;
}
#toc-checkbox:checked + .toc-menu-button {
	background-color: rgb(60 60 60 / 50%); /* Matches active button. */
}

.toc-icon {
	width: 1rem;
	height: 1rem;
	user-select: none; /* Prevent accidental selection when highlighting text. */
}

.toc-menu {
	display: none;
	margin-top: 0;
	background-color: rgb(0 0 0 / 75%);
}

.toc-menu ul {
	flex-direction: column;
}

/* Selects .toc-menu sibling of checked (opened) menu. */
#toc-checkbox:checked ~ .toc-menu {
	display: block;
}

/*
	Summary
	=======
 */

.summary-list {
	padding-left: 1.5em;
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

.summary-list em {
	font-style: normal;
	text-transform: uppercase;
}

.steam-button {
	gap: 0;
	padding: 0; /* Steam logo padding instead. */
}

.steam-button p {
	font-size: clamp(2rem, 4vw, 3rem); /* Auto-adjust font size to avoid wrapping. */
	font-weight: bold;
	color: var(--unturned-gold);
}

.steam-button span {
	font-weight: normal;
	color: var(--unturned-gray);
}

.steam-button img {
	height: 1em;
	width: auto;
	padding: 0.35em;
	padding-inline-start: 0.1em;
	vertical-align: middle;
}

/*
	Screenshots
	===========
 */

.screenshots-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: var(--spacing);
}

.screenshots-container > figure {
	padding: 0.5rem;
	background-color: black;
}

/* When screenshot thumbnail is hovered it becomes partially transparent, revealing white. */
.screenshot-button {
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
	margin-bottom: 0.5rem;
}

.screenshot-thumbnail {
	max-width: 100%; /* Prevent expanding on wider screens. */
	height: auto; /* Preserves aspect ratio when shrunk. */
}

/* When parent button is hovered, reveal white background. */
.screenshot-button:hover .screenshot-thumbnail {
	opacity: 80%;
}

.expand-screenshot-icon {
	position: absolute;
	width: 4rem;
	height: 4rem;
	display: none;
	user-select: none; /* Prevent accidental selection when highlighting text. */
}
.screenshot-button:hover .expand-screenshot-icon {
	display: block;
}

.caption-credit {
	color: var(--unturned-gray);
}

/*
	Videos
	======
 */

.videos-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: var(--spacing);
}

/* When video thumbnail is hovered it becomes partially transparent, revealing white. */
.video-background {
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-button {
	display: flex;
	flex-direction: column;
}

.video-button h3 {
	text-align: center;
	margin-bottom: 0.5rem;
}

.video-thumbnail {
	max-width: 100%;
	height: auto;
}

/* When parent button is hovered, reveal white background. */
.game-button:hover .video-thumbnail {
	opacity: 80%;
}

.video-play-icon {
	position: absolute;
	width: 4rem;
	height: 4rem;
	display: none;
	user-select: none; /* Prevent accidental selection when highlighting text. */
}
.game-button:hover .video-play-icon {
	display: block;
}

/*
	Social Media
	============
 */

.socials-container {
	list-style-type: none; /* Links are only a list for semantics. */
	display: grid;

	/* Links to external platforms should be equally sized. (no flex) */
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));

	gap: var(--spacing);
}

.social-button {
	justify-content: start;
	height: 3rem;
	gap: var(--spacing);
}

.social-button-label {
	display: flex;
	flex-direction: column;
}

/*
	FAQ
	===
 */

/* Replace with ::details-content when more widely available? */
.answer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);

	padding-left: var(--spacing);
	padding-top: var(--spacing);
}

summary {
	font-size: 1.25rem;
	font-weight: bold;
	cursor: pointer; /* Mouse cursor indicates it's clickable. */
}

summary:hover {
	text-decoration-line: underline;
}

/*
	Footer
	======
 */

footer {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: var(--spacing);
}
/* Legal text in footer. */
footer small {
	color: #ddd;
	text-shadow: 1px 1px 0 black, 0 0 0.4rem black;
}

.made-in-canada {
	font-weight: bold;
	top: 2rem;
	right: 0;
	font-size: 1.5rem;
	padding: 0 0.2em;
	background-color: black;
}

/*
	Border Zombies
	==============
 */

.zombie-margin {
	flex: 1 1 0;
	position: relative; /* Zombies positioned relative to total page height. */
}

.decorative-zombie {
	position: absolute;
	z-index: -10; /* Behind page content. */
	height: 80vmin; /* 80% of smaller of viewport width/height. */
	user-select: none; /* Prevent accidental selection when highlighting text. */
}

/* Hide zombies when there isn't much space beside main column. */
@media (max-width: 90rem) {
	.decorative-zombie {
		visibility: hidden;
	}
}

.zombie-l1 {
	left: 0;
	top: 5%;
}

.zombie-l2 {
	left: 0;
	top: 40%;
}

.zombie-l3 {
	left: 0;
	bottom: 5%;
}

.zombie-r1 {
	right: 0;
	top: 10%;
}

.zombie-r2 {
	right: 0;
	bottom: 25%;
}