/**
 * Theme Name: LAB Verduyn Theme
 Template: nieuwontwerp-core-theme
 Description: LAB Verduyn Theme based on Nieuw Ontwerp Core
 Version: 0.1
 Author: Jeroen van der Wiel @ Nieuw Ontwerp
 */

body,html
{
	font-family: "Stack Sans Text", sans-serif;
	font-optical-sizing: auto;
	line-height: 1.34em;
	font-weight: 300;
	font-style: normal;
}

h1,h2,h3,h4,h5,h6
{
	font-weight: 700;
	line-height: 1.2em;
}

h1.headline
{
	text-transform: uppercase;
}

.laslijn
{
	display: inline-block;
}

nav.desktop-nav,
nav.mobile-nav
{
	position: fixed;
	top: 2em;
	left: 2em;
	right: 2em;
	z-index: 20;
}

nav.desktop-nav
{
	display: flex;
	align-items: center;
	gap: 2em;

	svg
	{
		fill: var(--splash-color-1);
		height: 7.5rem;
	}

	div.menu
	{
		border-radius: 2em;
		padding: 0 2em;
		background: rgba(255,255,255,.25);
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(.5em);
		margin-left: auto;
	}

	ul.menu
	{
		list-style-type: none;
		padding-inline-start: 0px;
		display: flex;
		gap: 2em;

		> li
		{
			padding: 1em 0;
			position: relative;

			> a
			{
				color: var(--splash-color-1);
			}

			> ul.sub-menu
			{
				list-style-type: none;
				padding-inline-start: 0px;
				top: 0px;
				right: 0px;
				transform: translate(40%, 2.5em);
				overflow: hidden;
				position: absolute;
				display: grid;
				grid-template-columns: 1fr;
				grid-gap: 1em;
				max-height: 0px;
				padding: 0 4em;
				background: var(--splash-color-1);
				border-radius: 1em;
				transition: all 250ms ease-in-out;

				> li
				{
					font-weight: 700;
					font-size: .9em;

					a
					{
						position: relative;
						color: white;
					}

					a:after
					{
						content: '';
						position: absolute;
						left: 0px;
						height: 100%;
						border-bottom: 3px solid var(--splash-color-2);
						width: 0%;
						transition: all 250ms ease-in-out;
					}

					a:hover:after
					{
						width: 80%;
					}
				}
			}
		}

		a
		{
			text-decoration: none;
		}

		> li.menu-item-has-children:hover > ul.sub-menu
		{
			max-height: 9999px;
			padding: 2em 4em;
		}
	}

}

nav.mobile-nav,
aside.fullscreen-menu
{
	display: none;
}

aside#language-popup_wrapper
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: rgba(15,15,15,.75);
	z-index: -9001;
	opacity: 0;
	visibility: hidden;
	transition: all 125ms ease-in-out;
	padding: 2rem;

	main#language-popup_inner
	{
		box-sizing: border-box;
		padding: 1.25rem;
		position: relative;
		background: white;
		border-radius: calc(var(--border-radius) / 2) 0px calc(var(--border-radius) / 2) 0px;

		section
		{
			box-sizing: border-box;
			width: clamp(20px, calc(90svw - 4rem), 60rem);
			height: 100%;
			max-height: 90svh;
			padding: 1.25rem;
			overflow-y: auto;
			overflow-x: unset;

			ul
			{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-gap: 1rem;
				list-style-type: none;
				padding-inline-start: 0px;

				li
				{
					cursor: pointer;
					padding: .5rem 1rem;
					border: 1px solid rgba(173,178,183,.25);
					border-radius: .125rem;

					a
					{
						color: black;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						height: 100%;
						width: 100%;
						text-decoration: none;

						*
						{
							margin-block-start: 0px;
							margin-block-end: 0px;
						}

						h4
						{
							display: flex;
							gap: .25rem;
							align-items: center;
						}
					}
				}

				li.current-lang
				{
					border-color: black;
				}

				li:hover
					{

						background: var(--fpp-kleur);

						a
						{
							color: white;
						}
				}
			}

			ul.recommended-regions
			{
				margin-bottom: 2rem;
			}
		}

		div#language-popup_close
		{
			background: black;
			position: absolute;
			top: 0px;
			right: 0px;
			padding: .75rem;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			span
			{
				color: white;
			}
		}

		div#language-popup_close:hover
		{
			background: var(--fpp-kleur);
		}
	}
}

aside#language-popup_wrapper.active
{
	visibility: visible;
	opacity: 1;
	z-index: 9001;
}

@media ( width < 1100px )
{
	aside#language-popup_wrapper
	{
		main#language-popup_inner
		{
			section
			{
				ul
				{
					grid-template-columns: 1fr 1fr 1fr 1fr;
				}
			}
		}
	}
}

@media ( width < 700px )
{
	aside#language-popup_wrapper
	{
		main#language-popup_inner
		{
			section
			{

				h2
				{
					width: 100%;
				}

				ul
				{
					grid-template-columns: 1fr 1fr;
				}
			}
		}
	}
}

@media ( width < 500px )
{
	aside#language-popup_wrapper
	{
		main#language-popup_inner
		{
			section
			{
				ul
				{
					grid-template-columns: 1fr;
				}
			}
		}
	}
}

footer
{
	position: relative;
	clip-path: polygon(0 0, 5% 15%, 95% 15%, 100% 30%, 100% 100%, 0 100%);
	background: var(--splash-color-1);
	padding: 15dvh clamp(2em, 10dvw,20em) 5dvh clamp(2em, 10dvw, 20em);

	section.main-footer
	{
		display: grid;
		grid-template-columns: 1fr 2fr 2fr;
		grid-gap: 5dvw;
		padding: 0 0 2em 0;

		svg
		{
			fill: white;
		}
		
		h3
		{
			font-size: var(--h4-size);
			color: white;
			text-transform: uppercase;
		}

		ul
		{
			list-style-type: none;
			padding-inline-start: 0px;

			li
			{
				font-weight: 700;
				font-size: .9em;

				a
				{
					position: relative;
					text-decoration: none;
					color: white;
				}

				a:after
					{
						content: '';
						position: absolute;
						left: 0px;
						height: 100%;
						border-bottom: 2px solid var(--splash-color-2);
						width: 0%;
						transition: all 250ms ease-in-out;
				}

				a:hover:after
					{
						width: 80%;
				}
			}
		}

		div.contact-nav
		{
			p
			{
				color: rgba(255,255,255,.67);

				a
				{
					display: inline-block;
					position: relative;
					text-decoration: none;
					color: white;
				}

				a:after
				{
						content: '';
						position: absolute;
						left: 0px;
						height: 100%;
						border-bottom: 2px solid var(--splash-color-2);
						width: 0%;
						transition: all 250ms ease-in-out;
				}

				a:hover:after
				{
						width: 80%;
				}
			}
		}
	}

	section.colophon
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2em 0 0 0;
		border-top: 1px solid rgba(255,255,255,.5);

		ul
		{
			display: flex;
			padding-inline-start: 0px;
			list-style-type: none;

			li
			{
				color: rgba(255,255,255,.8);
				font-size: .75em;
				margin-right: .5em;
				padding-right: .5em;
				border-right: 1px solid rgba(255,255,255,.67);

				a
				{
					color: rgba(255,255,255,.8);
					text-decoration: none;
				}

				a:hover
				{
					color: rgba(255,255,255,1);
				}
			}

			li:last-child
			{
				border-right: none;
			}
		}
		
		svg
		{
			fill: rgba(255,255,255,.8);
			height: 3rem;
		}
		
		a:hover svg
		{
			fill: rgba(255,255,255,1);
		}
	}
}