@charset "utf-8";

/* HEADER
============================== */
header{
	position: fixed;
	top: 0;
	width: 100vw;
	padding: calc(var(--mxs)*1.5) var(--ms);
	display: grid;
	grid-template-columns: 1fr max-content;
	grid-auto-rows: min-content;
	grid-gap: var(--mxs);
	z-index: 9;
}
@media (min-width: 1025px){
	header{
		transition: background-color .3s ease;
	}
	header.active,
	.desktop header:hover{
		background-color: var(--cw);
	}
	header:not(.overlap){
		background-color: var(--cw);
	}
	header:not(.overlap) + main{
		margin-top: calc(var(--h) - var(--hs));
	}
}
@media (max-width: 1024px){
	header{
		position: sticky;
		position: -webkit-sticky;
		background-color: var(--cw);
	}
}

/*Logo*/
#logo-wrapper{
	display: flex;
	z-index: 2;
}
#logo{
	height: calc(var(--lh)*2em);
	fill: #ca4b6b;
}
@media (max-width: 1024px){
	#logo{
		height: calc(var(--burgerh)*2);
		min-height: calc(var(--burgerMinh)*2);
	}
}

/*Menu trigger*/
#menu-trigger{
	position: relative;
	width: var(--burgerw);
	min-width: var(--burgerMinw);
	height: var(--burgerh);
	min-height: var(--burgerMinh);
	align-self: center;
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
	cursor: pointer;
	z-index: 3;
}
#menu-trigger span{
	position: absolute;
	left: 0;
	width: inherit;
	min-width: inherit;
	height: 1px;
	background-color: black;
	transform: rotate(0deg);
}
#menu-trigger span:first-child{
	top: 0;
	transition: top .3s .3s ease, transform .3s ease;
}
.desktop #menu-trigger:not(:hover) span:first-child{
	transition: top .3s .3s ease, transform .3s ease, background-color .3s ease;
}
#menu-trigger span:last-child{
	bottom: 0;
	transition: bottom .3s .3s ease, transform .3s ease;
}
.desktop #menu-trigger:not(:hover) span:last-child{
	transition: bottom .3s .3s ease, transform .3s ease, background-color .3s ease;
}
#menu-trigger.open span{
	transition-delay: 0s, .3s;
}
#menu-trigger.open span:first-child{
	top: 50%;
	transform: rotate(45deg);
}
#menu-trigger.open span:last-child{
	bottom: 50%;
	transform: rotate(-45deg);
}
.desktop #menu-trigger:hover span{
	background-color: var(--chover);
}
@media (min-width: 1025px){
	#menu-trigger{
		display: none;
	}
}

/*Menu*/
menu{
	top: 0;
	left: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-gap: var(--ms);
	font-family: 'MessinaSans Light', Helvetica, Arial, sans-serif;
	line-height: .9;
	z-index: 2;
}
.menu-link{
	width: fit-content;
	width: -moz-fit-content;
	height: fit-content;
	height: -moz-fit-content;
	cursor: pointer;
}
.link-active,
menu .active,
.desktop .menu-link:hover{
	color: var(--chover);
}
.menu-section{
	position: relative;
	height: fit-content;
	height: -moz-fit-content;
}
.submenu-trigger{
	-webkit-user-select: none;
		-moz-user-select: none;
		 -ms-user-select: none;
			  user-select: none;
}
.submenu-collapsed wrap{
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: min-content;
}
@media (min-width: 1025px){
	menu{
		padding-top: .9em;
		display: grid !important;
		letter-spacing: .06em;
	}
	.submenu-collapsed{
		/* position: absolute; */
		width: 1px;
	}
	.submenu-collapsed wrap{
		padding-top: calc(var(--lh)*1em);
		line-height: var(--lh);
		white-space: nowrap;
	}
	.menu-link-child{
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .3s ease, transform .3s ease;
	}
	.desktop .menu-link-child:not(:hover){
		transition: opacity .3s ease, transform .3s ease, color .3s ease;
	}
	.menu-link-child.visible{
		transform: translateY(0);
		opacity: 1;
	}
}
@media (max-width: 1024px){
	menu{
		position: fixed;
		width: 100vw;
		height: 100%;
		grid-auto-flow: row;
		grid-auto-rows: min-content;
		grid-auto-columns: 1fr;
		grid-gap: 0;
		padding: var(--ms);
		background-color: #ffde41;
	}
	menu .menu-link{
		padding-bottom: .5rem;
		display: block;
		font-size: var(--fs-title);
		line-height: var(--lh-title);
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .3s ease, transform .3s ease;
	}
	.desktop menu .menu-link:not(:hover){
		transition: opacity .3s ease, transform .3s ease, color .3s ease;
	}
	menu > .menu-link:last-child{
		padding-bottom: 0;
	}
	menu .menu-link.visible{
		transform: translateY(0);
		opacity: 1;
	}
	menu strong{
		font-family: 'MessinaSans', Helvetica, Arial, sans-serif;
	}
	/* .submenu-collapsed{
		height: fit-content !important;
		height: -moz-fit-content !important;
	} */
	.submenu-collapsed .menu-link{
		padding-left: var(--mm);
	}
}
/* @media (max-width: 414px){
	menu .menu-link{
		font-size: var(--fs-headline);
		line-height: var(--lh-headline);
	}
} */

/* VARS
============================== */
:root{
	--burgerw: 5vw;
	--burgerh: 2vw;
	--burgerMinw: 36px;
	--burgerMinh: 14px;
}
@media (max-width: 414px){
	:root{
		--burgerw: var(--burgerMinw);
		--burgerh: var(--burgerMinh);
	}
}
@media (max-width: 375px){
	:root{
		--burgerw: 32px;
		--burgerh: 12px;
	}
}