/**
 * TODO: refactor naming and split into components.
 */

.yk-page-hero .relevanssi-live-search-results {
	top: initial !important; /* Force override inline style */
}

.yk-header__primary {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;

	@media (max-width: 1054px) {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1400;
	}

	@media (min-width: 1055px) {
		background: #ffffff;
	}
}

.yk-header__logo {
    display: flex;
	align-items: end;
	order: 1;
	flex: 1;
	padding-top: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--80);
	background-color: var(--wp--preset--color--accent-1);

	a {
		display: inline-block;
		background-size: 75%;
		background-repeat: no-repeat;
		background-position: center left;
		background-image: url(/wp-content/themes/youke/assets/images/youke-logo-white.svg);

		img {
			visibility: hidden;
		}
	}
}

@media screen and (min-width: 1055px) {
	.yk-header__logo {
		background-color: white;

		a img {
			visibility: visible;
		}
	}
}

/* Contact */
.yk-header__contact {
	display: flex;
	order: 3;
	align-items: center;
	padding-top: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--accent-1);
	
/* 	@media (min-width: 768px) and (max-width: 1050px) { padding-right: var(--wp--preset--spacing--80); } */
}

.yk-header__contact {
	span {
		.show-desktop {
			display: none;
			@media (min-width: 1055px) { display: inline-block; }
		}
	}
}

@media screen and (min-width: 1055px) {
	.yk-header__contact { background-color: white; }
}

/* Call */
.yk-header__call {
	display: none;
	order: 4;
	justify-content: center;
	flex-direction: column;
	padding-top: var(--wp--preset--spacing--20);
	padding-right: 1rem;
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--small);
	
	@media screen and (min-width: 1055px) { display: flex; }

	a {
		font-weight: bold;
		text-decoration: none;

		&:hover {
			color: var(--wp--preset--color--contrast);
			text-decoration: underline;
		}
	}
}


@media screen and (min-width: 1170px) {
	.yk-header__call {
		padding-right: 0rem;
	}
}

.yk-header__person {
	display: none;
	order: 5;

	img {
		aspect-ratio: 1/1;
		object-fit: cover;
		object-position: bottom;
		max-width: 10rem;
		max-height: 10rem;
		margin-bottom: -2.65em;
	}
}

@media screen and (min-width: 1170px) {
	.yk-header__person {
		display: block;
		img { transition: all .2s ease; }
	}
}

/* Hamburger menu */
.yk-header__hamburger {
	display: flex;
	order: 5;
	align-items: center;
	padding-top: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--accent-1);
}

@media screen and (min-width: 1054px) {
	.yk-header__hamburger { display: none; }
}

.menu-toggle {
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
	background-color: var(--wp--preset--color--accent-1);

	&[aria-expanded="true"] {
		.menu-toggle__icon { background-image: url(/wp-content/themes/youke/assets/images/icon-close.svg); }
	}
}

.menu-toggle__icon {
	display: block;
	width: 2rem;
	height: 2rem;
	background-size: contain;
	background-image: url(/wp-content/themes/youke/assets/images/icon-hamburger.svg);
}

.menu-toggle__icon_close { background-image: url(/wp-content/themes/youke/assets/images/icon-close.svg); }

.menu-toggle__text { display: none; }

/* Search */
.yk-header__search {
	display: none;
	flex: 1 1 100%;
	order: 5;
	align-items: center;
	justify-content: center;
	padding-top: var(--wp--preset--spacing--20);
	padding-right: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--80);
	background-color: white;

	&.is-visible { display: flex; }

	@media (min-width: 1055px) and (max-width: 1120px) { padding-right: 0; }
	@media (min-width: 1055px) { flex: 1 0 auto; }

	form {
		display: flex;
		width: 100%;
		background-color: var(--wp--preset--color--accent-15) !important;

		@media (max-width: 1054px) { padding: calc(var(--wp--preset--spacing--20)/2) var(--wp--preset--spacing--20); }
	}

	label { flex: 1; }

	input[type="search"] {
		width: 100%;
		padding: 0.5em 1em;
		font-family: inherit;
		font-weight: inherit;
		font-size: var(--wp--preset--font-size--small);
		border: none;
		border-radius: 0!important;
		background-color: transparent;
	}

	input[type="submit"] {
		padding: 0.5em 1em;
		font-family: var(--wp--preset--font-family--geoslb-712-md-bt);
		font-weight: inherit;
		font-size: var(--wp--preset--font-size--small);
		border: none;
		color: white;
		border-radius: 0!important;
		background-color: var(--wp--preset--color--accent-3);
		cursor: pointer;
		transition: all .3s ease-in-out;

		&:hover {
			background-color: var(--wp--preset--color--accent-1);
			background-position: center right .5em;
		}
	}
}

@media screen and (min-width: 1055px) {
	.yk-header__search {
		display: flex;
		order: 2;
	}
}

.yk-header__secondary {
	display: none;

	@media (max-width: 1054px) {
		&.is-visible {
			display: block;
			height: 100vh;
			position: fixed;
			width: 100%;
			top: 134px;
			background: white;
			z-index: 1337;
			padding-top: 16px;
		}
	}
}

@media screen and (min-width: 1055px) {
	.yk-header__secondary {
		display: block;
		
		padding-bottom: var(--wp--preset--spacing--20);
		background: #ffffff;
	}
}

/* Primary nav */
.yk-header__primary-nav {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--80);
	column-gap: 0px ;
    justify-content: space-between !important;

	@media (max-width: 1054px) {
		max-height: calc(100vh - 230px);
		overflow: hidden;
		overflow-y: scroll;
	}
	
	@media (min-width: 1055px) and (max-width: 1190px) {
		display: flex;
		flex-wrap: wrap;
		
		.yk-header__primary-menu-2 { margin-left: 0;}
	}	
	
	.yk-header__primary-menu-2 {column-gap: 0px; }
}

.yk-header__primary-menu {
	display: flex;
	flex-direction: column;
	column-gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;

	>li {
		padding: var(--wp--preset--spacing--20);

		@media screen and (min-width: 1055px) {
			padding: calc(var(--wp--preset--spacing--20)/2) var(--wp--preset--spacing--20);
		}

		@media (max-width: 1054px) {
			&.state-submenu-active {
				.sub-menu { display: block; }
				&:after { transform: rotate(-90deg); }
			}
		}

		&.current-menu-item,
		&.current-menu-ancestor {
			@media (min-width: 1055px) { background: var(--wp--preset--color--accent-3); }
		}

		>a {
			font-family: var(--wp--preset--font-family--geoslb-712-md-bt);
			font-style: normal;
			text-decoration: none;
			
			&:hover { text-decoration: underline; }
		}
	}
}

/* Secondary menu */
.yk-header__primary-menu-2 {
	display: flex;
	flex-direction: column;
	column-gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;

	>li {
		padding: var(--wp--preset--spacing--20) 8px;

		@media screen and (min-width: 1055px) { padding: calc(var(--wp--preset--spacing--20)/2) var(--wp--preset--spacing--20); }

		&.current-menu-item {
			@media (min-width: 1055px) { background: var(--wp--preset--color--accent-3); }
		}

		>a {
			font-family: var(--wp--preset--font-family--open-sans);
			font-style: normal;
			font-size: smaller;
			text-decoration: none;
			font-size: 70%;
			
			&:hover { text-decoration: underline; }
		}
	}
}

@media screen and (min-width: 1055px) {
	.yk-header__primary-nav { display: flex; }

	.yk-header__primary-menu { flex-direction: row; }

	.yk-header__primary-menu-2 {
		margin-right: 0;
		margin-left: auto;
		flex-direction: row;
		margin-right: 0em;
	}

	.yk-header__primary-nav {
		color: white;
		background-color: var(--wp--preset--color--accent-1);
	}

	.sub-menu { display: none; }
}

@media screen and (min-width: 1170px) {
	.yk-header__primary-menu-2 {
		margin-right: 4em;
	}
}

.sub-menu {
	display: none;
	list-style-type: none;

	@media (max-width: 1054px) {
		padding-left: var(--wp--preset--spacing--20);

		li {
			a {
				display: block;
				text-decoration: none;
				font-family: var(--wp--preset--font-family--open-sans);
				padding: var(--wp--preset--spacing--20);
			}
		}
	}
}



/* Secondary nav */
.yk-header__secondary-nav {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--80);
	font-family: var(--wp--preset--font-family--geoslb-712-md-bt);
	font-style: normal;
	
	@media screen and (min-width: 1055px) { display: block; }
}

.yk-header__secondary-menu {
	/* Hide secondary menu on mobile */
	display: none;
	flex-direction: row;
	justify-content: center;
	column-gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		&.active a { text-decoration: underline; }

		&:not(:last-child) {
			a { margin-right: var(--wp--preset--spacing--20) }
		}

		a {
			font-family: var(--wp--preset--font-family--geoslb-712-md-bt);
			text-decoration: none;
			
			&:hover { text-decoration: underline; }
		}
	}

}

@media screen and (min-width: 1055px) {
	.yk-header__secondary-menu { display: flex; }
}


header {
	@media (min-width: 1055px) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		width: 100%;
		z-index: 1999;
		transition: all .2s ease;


		&.is-sticky {
			top: -87px !important;
			@media (min-width: 1170px) { top: -116px!important; }

			.yk-header__person img { opacity: 0; }
			
			.yk-header__secondary-nav { padding-bottom: var(--wp--preset--spacing--20); }
		}

		.yk-header__tertiary {
			background: #ffffff;
			position: relative;
			margin-top: clamp(-16px, -5.2174px - 0.8696vw, -8px);
		}
	}
}

header .menu-item-has-children {
	@media (max-width: 1054px) 
	{
		position: relative;
	
		&:after {
			content: url(/wp-content/themes/youke/assets/images/icon-chevron-right.svg);
			display: inline-block;
			position: absolute;
			transform: rotate(90deg);
			top: 1px; 
			right: 0;
			transition: all .2s ease;
		}
	}
}