/* =========================================================
   Custom Divi mobile navigation
   ========================================================= */

#custom-mobile-nav {
	display: none;
}


/* Divi switches to mobile navigation around 980px */
@media (max-width: 980px) {

	/* Keep Divi's desktop nav out of the mobile layout */
	#top-menu-nav {
		display: none;
	}

	#custom-mobile-nav {
		display: block;
		position: relative;
		padding: 1em 0 1em 1em;
	}


	/* Hamburger button */
	.custom-mobile-menu-toggle {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;

		width: 44px;
		height: 44px;

		padding: 8px;
		margin: 0;

		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.custom-mobile-menu-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}


		.custom-mobile-menu-toggle__line {
			display: block;
			width: 26px;
			height: 2px;
			background: currentColor;

			transition:
				transform 0.2s ease,
				opacity 0.2s ease;
		}


	/* Turn hamburger into an X */
	.custom-mobile-menu-toggle[aria-expanded="true"]
	.custom-mobile-menu-toggle__line:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.custom-mobile-menu-toggle[aria-expanded="true"]
	.custom-mobile-menu-toggle__line:nth-child(2) {
		opacity: 0;
	}

	.custom-mobile-menu-toggle[aria-expanded="true"]
	.custom-mobile-menu-toggle__line:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}


	/* Menu panel */
	.custom-mobile-menu {
		position: absolute;
		z-index: 99999;

		top: 100%;
		left: var(--custom-mobile-menu-left, 0);

		width: 100vw;
		max-height: var(--custom-mobile-menu-max-height, none);
			overflow-y: auto;
			background: #fff;
			box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
			animation: custom-mobile-menu-enter 0.18s ease;
		}



	.custom-mobile-menu[hidden] {
		display: none;
	}


	/* Remove WordPress list defaults */
	.custom-mobile-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.custom-mobile-menu-items {
		display: grid;
		border-top: 1px solid #e3e3e3;
	}


	.custom-mobile-menu li {
		margin: 0;
		border-bottom: 1px solid #e3e3e3;
	}

	.custom-mobile-menu .menu-item-has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 56px;
		align-items: stretch;
	}


	.custom-mobile-menu a {
		display: flex;
		align-items: center;

		min-height: 52px;
		padding: 12px 20px;
		color: inherit;
		text-decoration: none;
	}

	.custom-mobile-menu .menu-item-has-children > a {
		grid-column: 1;
		padding-right: 20px;
	}

	.custom-mobile-menu a:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -4px;
	}

		.custom-mobile-submenu-toggle {
			position: relative;
			grid-column: 2;

		width: 56px;
		min-height: 52px;
		padding: 0;

		border: 0;
		border-left: 1px solid #e3e3e3;
			background: transparent;
			color: inherit;
			cursor: pointer;
			transition: background-color 0.18s ease;
		}

		.custom-mobile-submenu-toggle:hover {
			background: #f5f5f5;
		}

		.custom-mobile-submenu-toggle::before,
		.custom-mobile-submenu-toggle::after {
		position: absolute;
		top: 50%;
		left: 50%;

		width: 16px;
		height: 2px;

			background: currentColor;
			content: "";
			transform: translate(-50%, -50%);
			transition:
				opacity 0.18s ease,
				transform 0.18s ease;
		}

	.custom-mobile-submenu-toggle::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

		.custom-mobile-submenu-toggle[aria-expanded="true"]::after {
			display: none;
		}

		.custom-mobile-submenu-toggle--exclusive::before,
		.custom-mobile-submenu-toggle--exclusive::after {
			width: 10px;
			transform-origin: right center;
		}

		.custom-mobile-submenu-toggle--exclusive::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.custom-mobile-submenu-toggle--exclusive::after,
		.custom-mobile-submenu-toggle--exclusive[aria-expanded="true"]::after {
			display: block;
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		.custom-mobile-submenu-toggle:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: -4px;
		}


	/* Nested menus */
	.custom-mobile-menu .sub-menu[hidden] {
		display: none;
	}

		.custom-mobile-menu .sub-menu {
			display: grid;
			grid-column: 1 / -1;
			border-top: 1px solid #e3e3e3;
			background: #f7f7f7;
			animation: custom-mobile-submenu-enter 0.18s ease;
		}

	.custom-mobile-menu .sub-menu li {
		border-bottom: 1px solid #dddddd;
	}

	.custom-mobile-menu .sub-menu li:last-child {
		border-bottom: 0;
	}

	.custom-mobile-menu .sub-menu a {
		min-height: 48px;
		padding-left: 36px;
	}

	.custom-mobile-menu .sub-menu .sub-menu {
		background: #efefef;
	}

		.custom-mobile-menu .sub-menu .sub-menu a {
			padding-left: 52px;
		}

		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-items > li:not(.custom-mobile-menu-root-item):not(.custom-mobile-menu-root-ancestor),
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-ancestor > .sub-menu > li:not(.custom-mobile-menu-root-item):not(.custom-mobile-menu-root-ancestor) {
			display: none;
		}

		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-item > a,
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-item > .custom-mobile-submenu-toggle,
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-ancestor > a,
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-ancestor > .custom-mobile-submenu-toggle {
			display: none;
		}

		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-item,
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-ancestor {
			border-bottom: 0;
		}

		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-item > .sub-menu,
		.custom-mobile-menu.custom-mobile-menu--exclusive-root
		.custom-mobile-menu-root-ancestor > .sub-menu {
			border-top: 0;
			background: #fff;
		}

		.custom-mobile-menu-back-item {
			display: block;
		}

		.custom-mobile-menu-back {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			min-height: 52px;
			padding: 12px 20px 12px 56px;
			border: 0;
			background: transparent;
			color: inherit;
			cursor: pointer;
			font: inherit;
			text-align: left;
			transition: background-color 0.18s ease;
		}

		.custom-mobile-menu-back:hover {
			background: #f5f5f5;
		}

		.custom-mobile-menu-back::before,
		.custom-mobile-menu-back::after {
			position: absolute;
			top: 50%;
			left: 28px;
			width: 10px;
			height: 2px;
			background: currentColor;
			content: "";
			transform-origin: left center;
			transition: transform 0.18s ease;
		}

		.custom-mobile-menu-back::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.custom-mobile-menu-back::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		.custom-mobile-menu-back:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: -4px;
		}

		.custom-mobile-menu-back__label {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		@keyframes custom-mobile-menu-enter {
			from {
				opacity: 0;
				transform: translateY(-6px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes custom-mobile-submenu-enter {
			from {
				opacity: 0;
				transform: translateY(-4px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.custom-mobile-menu .current-menu-item a {
			font-weight: 900;
		}

	/* remove divi's excessive padding */
	.et_header_style_left #et-top-navigation nav > ul.custom-mobile-menu-items > li > a {
		padding-bottom: 10px;
	}

	/* give the search field in the mobile menu some padding */
	ul.custom-mobile-menu-items > .menusearchfelt {
		padding-left:10px;
		padding-right: 10px;
	}


	/* make header lin flex and wide */
	#main-header > .et_menu_container {
		display:flex;
		align-items: center;
		justify-content: end;
		width:90% !important;
	}

	/* remove divi padding on hamburger so it can center vertical */
	.et_header_style_left .et-fixed-header #et-top-navigation, .et_header_style_left #et-top-navigation {
		padding-top: 0px !important; 
	}

}