/* Prevent fixed navbar from covering up deep-linked anchors. */
:target
{
		/* Safari < 14.5 needs this non-standard property */
		scroll-snap-margin-top: 4em;
		scroll-margin-top: 4em;
}

.navbar-top
{
		z-index: 101010;
		position: fixed;
		width: 100%;
		max-width: 100vw;
		top: 0;
		right: 0;
		left: 0;
		transition-property: background-color;
		transition-timing-function: ease-in-out;
		transition-duration: 250ms;
		background-color: transparent;
}

body.reduce-motion .navbar-top,
body.reduce-motion .navbar-top:after
{
		transition-property: none;
}

@media screen and (prefers-reduced-motion)
{
		.navbar-top
		{
				transition-property: none;
		}
}

#navbar
{
		background-color: var(--page-bg);
		color: var(--text);
		border-bottom: 0.2rem solid transparent;
}

#navbar.scrolled
{
		border-bottom: 0.2rem solid var(--text);
}

.navbar-top ul
{
		list-style: none;
		display: grid;
		grid-template-columns: auto 1fr auto auto auto auto auto;
		grid-gap: 0;
		margin: 0 auto;
		padding: 0.25em;
		position: relative;
		max-width: 130rem;
		font-size: 0.85em;
}

.navbar-top ul
{
		grid-template-columns: auto 1fr auto;
}

.navbar-top li
{
		margin: 0;
		padding: 0.15em 0.5em 0.25em 0.5em;
		position: relative;
		font-weight: 700;
		letter-spacing: -0.0075em;
		border-radius: 1em;
		color: var(--text);
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 0.2em;
		align-items: center;
		justify-items: start;
}

.navbar-top li a
{
		text-decoration: none;
}

.navbar-top li a::after
{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
}

.navbar-top li::before
{
		content: '';
		display: inline-block;
		top: 0;
		left: 0;
		width: 1em;
		height: 1em;
		-webkit-mask-size: contain;
		-webkit-mask-position: 0% 50%;
		-webkit-mask-repeat: no-repeat;
		background-color: var(--text);
}

/* Hamburger Menu Active */

input#whopper
{
		margin: 0;
		padding: 0;
		border: 0;

		position: relative;
		display: block;
		visibility: visible;

		font: inherit;
		font-weight: 700;
		color: var(--text);

		align-items: center;
		justify-items: start;
		grid-column: 6;
		grid-row: 1;

		width: 2em;
		height: 2em;
		cursor: pointer;
		z-index: 111111;
		pointer-events: all;
		-webkit-appearance: none;
		appearance: none;
}

input#whopper::before
{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-mask-size: contain;
		-webkit-mask-position: 0% 50%;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-image: url("../images/menu.svg");
		background-color: var(--text);
		background-size: contain;
}

label.whopper
{
		display: none;
}

div.whopper
{
		--page-bg: var(--psd-lightest-gray);
		--text: var(--screen-black);

		display: grid;
		position: absolute;
		grid-gap: 0.5em;
		margin-top: -0.5em;
		top: 0;
		right: -100vw;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		padding: .9em 2.5em 0.5em 0.5em;
		background: var(--page-bg);
		color: var(--text);
		border-radius: 0 0 0 0.25em;
		border: 0.2rem solid var(--text);
		border-top: 0;
		border-right: 0;

		transition-duration: 150ms;
		transition-timing-function: ease-in-out;
		transition-property: right;
		pointer-events: none;
}

input#whopper:checked + div.whopper
{
		right: 0;
		pointer-events: all;
}

input#whopper:checked::before
{
		background: var(--purple);
}

input#whopper:checked + div.whopper > li:hover
{
		color: var(--purple);
}

input#whopper:checked + div.whopper > li:hover::before
{
		background-color: var(--purple);
}

li#nav-buy
{
		grid-row: 1;
		grid-column: 2 / span 4;
		align-self: center;
		justify-self: end;
}

li#nav-games,
li#nav-dev,
li#nav-help,
li#nav-account
{
		grid-column: 1;
}

li#nav-news
{
		grid-row: 1;
}

li#nav-games
{
		grid-row: 2;
}

li#nav-dev
{
		grid-row: 3;
}

li#nav-help
{
		grid-row: 4;
}

li#nav-account
{
		grid-row: 5;
}

@media (min-width: 670px)
{

		/* Hamburger Menu Hidden */
		div.whopper,
		input#whopper:checked + div.whopper
		{
				font-size: 1em;
				display: contents;
				--page-bg: inherit;
				--text: inherit;
				pointer-events: all;
		}

		input#whopper
		{
				pointer-events: none;
				visibility: hidden;
		}

		li#nav-games,
		li#nav-news,
		li#nav-dev,
		li#nav-help,
		li#nav-account,
		li#nav-buy
		{
				grid-row: 1;
		}

		li#nav-news
		{
				grid-column: 3;
		}

		li#nav-games
		{
				grid-column: 4;
		}

		li#nav-dev
		{
				grid-column: 5;
		}

		li#nav-help
		{
				grid-column: 6;
		}

		li#nav-account
		{
				grid-column: 7;
		}

		li#nav-buy
		{
				grid-column: 8;
		}
}

li#nav-home
{
		grid-row: 1;
		grid-column: 1;
		top: 0.125em;
}

li#nav-home::before
{
		-webkit-mask-image: url("../images/playdate-logo.svg");
}

li#nav-games::before
{
		-webkit-mask-image: url("../images/toolbar-icon-games.svg");
}

li#nav-news::before
{
		-webkit-mask-image: url("../images/toolbar-icon-news.svg");
}

li#nav-dev::before
{
		-webkit-mask-image: url("../images/toolbar-icon-dev.svg");
}

li#nav-help::before
{
		-webkit-mask-image: url("../images/toolbar-icon-help.svg");
}

li#nav-account::before
{
		-webkit-mask-image: url("../images/toolbar-icon-account.svg");
}

li#nav-buy::before
{
		-webkit-mask-image: url("../images/toolbar-icon-shop.svg");
}

li#nav-home
{
		position: relative;
		color: transparent;
}

li#nav-home::before
{
		position: absolute;
		width: 100%;
		height: 100%;
}

li#nav-buy
{
		color: var(--white);
		background-color: var(--purple);
}

li#nav-buy::before
{
		background-color: var(--white);
}

.navbar-top[data-color="purple"] li#nav-buy
{
		background: var(--white);
		color: var(--purple);
}

.navbar-top[data-color="purple"] li#nav-buy::before
{
		background-color: var(--purple);
}

#navbar
{
		font-size: 1.8em;
}

body
{
		padding-top: calc(1.8em * 2.125);
}

/* Sitemap */

footer #sitemap
{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-around;

		margin-top: 2em;

		font-size: 1.5em;
}

footer #sitemap ul
{
		text-align: left;
		margin-bottom: .5em;
}
footer #sitemap ul li
{
		margin-bottom: 1em;
}

footer #sitemap a
{
		display: inline-block;
		text-decoration: none;
}
footer #sitemap a:hover
{
		color: var(--link);
}

.subtleFooter ul.panic,
.subtleFooter #sitemap
{
		margin-left: 0;
		text-align: left;
}

.subtleFooter #sitemap
{
		max-width: 60rem;
}


@media screen and (min-width: 670px)
{
		#navbar
		{
				font-size: 1.2em;
		}

		body
		{
				padding-top: calc(1.2em * 2.125);
		}

		footer #sitemap
		{
				grid-template-columns: auto auto auto auto;
				margin-top: 1.5em;

				font-size: 1em;
		}

		footer #sitemap ul li
		{
				margin-bottom: .5em;
		}

}

/* Stop scaling */
@media screen and (min-width: 1100px)
{
		#navbar
		{
				font-size: 1em;
		}

		body
		{
				padding-top: calc(1em * 2.125);
		}
}