/* Menu triggers
======================================== */
@media (min-width: 601px){
	#menu-trigger{
		display: none;
	}
}
@media (max-width: 600px){
	#menu-trigger{
		--w: 20px;
		position: fixed;
		top: var(--page-top);
		right: var(--page-sides);
		width: var(--w);
		height: var(--height-txt);
		display: grid;
		grid-auto-rows: 1fr;
		align-items: center;
		cursor: pointer;
		z-index: 11;
	}
	#menu-trigger span{
		width: var(--w);
		height: 1px;
		background-color: var(--color-txt);
	}
	#menu-trigger.active span{
		position: absolute;
		top: 50%;
		left: 50%;
	}
	#menu-trigger.active span:first-child{
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
			-moz-transform: translate(-50%, -50%) rotate(45deg);
			 -ms-transform: translate(-50%, -50%) rotate(45deg);
				  transform: translate(-50%, -50%) rotate(45deg);
	}
	#menu-trigger.active span:last-child{
		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
			-moz-transform: translate(-50%, -50%) rotate(-45deg);
			 -ms-transform: translate(-50%, -50%) rotate(-45deg);
				  transform: translate(-50%, -50%) rotate(-45deg);
	}
	.desktop #menu-trigger:hover span{
		background-color: var(--color-txt--highlight);
	}
	.mobile #menu-trigger::after{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: calc(var(--w) + var(--page-sides)*2);
		height: calc(var(--page-top) + var(--height-txt) + var(--rows-gap));
		-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			 -ms-transform: translate(-50%, -50%);
				  transform: translate(-50%, -50%);
		z-index: 2;
	}
}

/* Menu
======================================== */
menu .link-active,
.desktop menu a:hover,
.mobile menu a:active{
	color: var(--color-txt--highlight);
}
@media (min-width: 601px){
	#menu-mobile{
		display: none !important;
	}
}
@media (max-width: 600px){
	#menu-mobile{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		padding: var(--page-top) var(--page-sides) var(--page-bottom);
		display: grid;
		grid-auto-rows: min-content;
		row-gap: var(--rows-gap-s);
		font-size: 28px;
		line-height: 1;
		-webkit-user-select: none;
			-moz-user-select: none;
			 -ms-user-select: none;
				  user-select: none;
		background-color: var(--color-bg);
		z-index: 10;
	}
}