.siteHeader
{
	display: grid;
	grid-template-columns: var(--wp--custom--h-inset) [centre-start] auto [phone] 1fr [search-start] auto [search-end] auto [centre-end] var(--wp--custom--h-inset);
	align-items: center;
	gap: 10px;

	position: sticky;
	top: 0px;
	background: var(--wp--preset--color--white);
	z-index: 100;

	box-shadow: 0 0 5px #0003;
}

@media(min-width: 601px)
{
	.siteHeader
	{
		top: calc(-50px + var(--wp-admin--admin-bar--height, 0px));
	}
}

.siteHeader::before
{
	content: "";
	background: var(--wp--preset--color--blue);
	grid-column: 1/-1;
	grid-row: 1;
	align-self: stretch;
}

.siteHeader::after
{
	content: "";
	grid-column-start: phone;
}

.logo
{
	grid-column-start: centre-start;
	grid-row: 2;
	grid-column-end: search-start;
	padding: 15px 0;
	margin-right: 20px;
}

.siteHeader a.phone
{
	grid-column-start: centre-start;
	grid-column-end: phone;
	grid-row: 1;
	color: var(--wp--preset--color--white);
	padding: 10px 0;
	font-size: var(--wp--preset--font-size--small);
}

#showSearch
{
	grid-area: search;
	grid-row: 2;
}

.siteHeader .emergency
{
	grid-column-start: phone;
	grid-row: 1;
	color: var(--wp--preset--color--white);
	padding-left: 12px;
	grid-column-end: centre-end;
	font-size: var(--wp--preset--font-size--small);
	justify-self: end;
}

#showMenu
{
	grid-column-start: search-end;
	grid-row: 2;
	background: none;
	border: none;
	padding: 0;
	margin-left: 12px;
}

#showMenu > img
{
	display: block;
}

#mobileMenu[open]
{
	width: 100vw;
	height: 100vh;

	width: 100dvw;
	height: 100dvh;

	max-width: unset;
	max-height: unset;

	inset-inline: 0;
	margin:0;

	border: 0;
	padding: 0;
	display: grid;
	grid-template-areas: "top top close" "menu soc soc" "buttons buttons buttons";
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr auto auto;
	gap: 30px 5px;
}

#mobileMenu::before
{
	content: "";
	background: var(--wp--preset--color--blue);
	grid-row: 1;
	grid-column: 1/-1;
}

#topMenu
{
	grid-area: top;
	color: #fff;
	padding-block: 10px;
	display: flex;
	align-self: center
}

#topMenu .menu
{
	background: #fff;
	display: inline-flex;
	gap: 1px;
}

#topMenu .menu-item
{
	background: var(--wp--preset--color--blue);
	padding: 0 20px;
}

#topMenu a
{
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	display: block;
}

#closeMenu
{
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	grid-area: close;
	width: 2.5em;
}

#mainMenu
{
	grid-area: menu;
	padding-left: 20px;
	font-size: 25px;
	line-height: 2;
}

#mainMenu .menu-item
{
	display: grid;
	grid-template-columns: auto 1fr;
	justify-content: start;
	grid-auto-flow: dense;
	align-items: center;
}

#mainMenu .sub-menu
{
	grid-column: span 2;
}

#mainMenu .menu-item:not(.open) > .sub-menu
{
	display: none;
}

#mainMenu a
{
	color: var(--wp--preset--color--blue);
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
}

#mainMenu .menu-item-has-children::after
{
	content: "";
	display: inline-block;
	width: 18px;
	height: 10px;
	background: url(/wp-content/themes/eghs2024/images/menu-chevron.svg) center no-repeat;
	filter: url(#blue-matrix);
	margin-left: .5em;
}

#mainMenu .current-menu-item > a,
#mainMenu .current-menu-ancestor > a
{
	color: var(--wp--preset--color--green);
}

#mainMenu .menu-item-has-children.current-menu-item::after,
#mainMenu .menu-item-has-children.current-menu-ancestor::after
{
	filter: url(#green-matrix);
}

#mainMenu .sub-menu a
{
	font-weight: lighter;
}

#mobileMenu .social
{
	grid-area: soc;
	background: #0002;
	border-radius: 20px 0 0 20px;
	display: grid;
	padding: 20px;
	align-self: start;
	gap: 10px;
}

#mobileMenu .social .socialLink
{
	background: radial-gradient(var(--wp--preset--color--blue) calc(100% - 10px), #0000 calc(100% - 10px));
	border-radius: 50%;
}

.siteHeader .buttons
{
	grid-area: buttons;
	display: flex;
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	display: grid;
	gap: 20px;
	padding: 20px;
}

#searchOverlay::backdrop
{
	background: #ffffffe5;
}

#searchOverlay
{
	border: 0;
	background: none;
	overflow: visible;
	width: 500px;
}

#searchOverlay form
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}



#searchOverlay input
{
	background: transparent;
	border: 1px solid #373F73;
	border-width: 0 0 1px 0;
	display: inline-block;
	vertical-align: center;
	max-width: 100%;
	border-radius: 0;
}

#closeSearch
{
	background: none;
	border: none;
	width: 45px;
	height: 45px;
	position: absolute;
	top: -1.5em;
	right: 0;
	padding: 0;
	cursor: pointer;
	background: #fff;
	border-radius: 50%;
}

@media(min-width: 600px)
{
	#searchOverlay form
	{
		grid-template-columns: 1fr auto;
	}
	#closeSearch
	{
		right: -1.5em;
	}
}

@media (min-width: 540px)
{
	.siteHeader .buttons
	{
		grid-template-columns: 1fr 1fr 1fr;
	}

	.siteHeader .emergency,
	.siteHeader a.phone,
	#topMenu a
	{
		font-size: inherit;
	}
}

@media (max-width: 1319px),
(hover: none)
{
	.siteHeader .notOnMobile
	{
		display: none;
	}
}

@media (hover: hover)
{
	#mobileMenu .socialLink:hover svg path
	{
		fill: var(--wp--preset--color--green)
	}

	#mainMenu a:hover
	{
		color: var(--wp--preset--color--green);
	}

	#mainMenu a:hover::after
	{
		filter: url(#green-matrix);
	}

	.siteHeader .buttons .button:hover
	{
		color: #FFF;
	}

	#closeSearch
	{
		transition: background-color linear 0.3s;
	}
	#closeSearch:not(:hover)
	{
		background: #fff8;
	}
}

/**
If this query changes then the query in header.php will also have to change
*/
@media (hover: hover) and (min-width: 1560px)
{
	.siteHeader .mobileOnly
	{
		display: none !important;
	}

	#mobileMenu
	{
		display: contents;
	}

	.siteHeader
	{
		grid-template-columns: var(--wp--custom--h-inset) auto auto auto 1fr auto auto var(--wp--custom--h-inset);
		grid-template-areas: "l phone emerg emerg top buttons buttons r" "l logo logo menu menu menu search r";
		gap: 25px 10px;
		top: calc(-92px + var(--wp-admin--admin-bar--height, 0px));
	}

	.siteHeader::after
	{
		content: none;
	}

	#topMenu
	{
		font-size: var(--wp--preset--font-size--smaller);
		justify-content: end;
		text-align: center;
	}

	#topMenu .menu-item
	{
		display: flex;
		align-items: center;
	}

	.logo
	{
		grid-area: logo;
		padding: 0 0 20px;
	}

	.siteHeader a.phone
	{
		grid-area: phone;
	}

	.siteHeader .emergency
	{
		grid-area: emerg;
		border-left: 1px solid;
	}

	.siteHeader .buttons
	{
		grid-template-columns: 1fr 1fr;
		padding-inline: 0;
	}

	#mainMenu
	{
		padding-left: 0;
		align-self: end;
		justify-self: end;
		padding-right: 60px;
		font-size: inherit;
		line-height: inherit;
	}

	#mainMenu .menu
	{
		display: flex;
		gap: 20px;
	}

	#mainMenu .menu-item
	{
		position: relative;
		padding-bottom: 20px;
	}

	#mainMenu .sub-menu
	{
		display: none;
	}

	#mainMenu li.menu-item:hover > .sub-menu
	{
		display: grid;
		background: var(--wp--preset--color--green);
		position: absolute;
		top: 100%;
		left: 0;

		width: 370px;
		padding: 20px;
	}

	#mainMenu .current-menu-item > a,
	#mainMenu .current-menu-ancestor > a
	{
		color: var(--wp--preset--color--blue);
	}

	#mainMenu .menu-item-has-children.current-menu-item::after,
	#mainMenu .menu-item-has-children.current-menu-ancestor::after
	{
		filter: url(#blue-matrix);
	}

	#mainMenu .current-menu-item::before,
	#mainMenu .current-menu-ancestor::before
	{
		content: "";
		position: absolute;
		bottom: 0;
		height: 5px;
		width: 100%;
		background: var(--wp--preset--color--green);
		left: 0;
	}

	#mainMenu .sub-menu .menu-item
	{
		padding: 0;
	}

	#mainMenu .sub-menu a
	{
		color: var(--wp--preset--color--white);
	}

	#mainMenu .sub-menu a:hover
	{
		color: var(--wp--preset--color--blue);
	}

	#mainMenu a
	{
		font-weight: 400;
	}

	#showSearch
	{
		align-self: end;
		padding-bottom: 15px;
	}

	#mainMenu .current-menu-item > a,
	#mainMenu .current-menu-ancestor > a
	{
		font-weight: 700;
	}
}