.menu-bar {
	--blue: #7399C6;
	--black: #000;
	--skew: 30deg;
	/* --height: 3.75rem; */
	--height: 5.5rem;
	--height: 4.5rem;
	/* --skew-x: calc(tan(var(--skew)) * var(--height)); */
	height: var(--height);
	display: flex;
	justify-content: center;
	pointer-events: none;
	> * {
		pointer-events: all;
	}
	position: fixed;
	top: 0;

	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 1000;
	
	&.no-transition {
		.search-container {
			transition: none !important;
		}
	}

	.button-run-search {
		background: none;
	}

	.button-open-search {
		display: block;
		margin: auto;
		font-size: 2rem;
		color: inherit;
		transform-origin: center;
		transform: scaleX(-1);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.button-open-search:hover {
		transform: scaleX(-1) scale(1.15) rotate(-15deg);
		opacity: 0.8;
	}

	.button-open-search:active {
		transform: scaleX(-1) scale(0.9);
		transition-duration: 0.1s;
	}
	.button-run-search {
		position: absolute;
		top: 50%;
		right: 0.5rem;
		transform: translate(0, -50%);
		display: block;
		margin: auto;
		font-size: 1.25rem;
		color: var(--black);
	}
	
	@media (width >= 1266px) {
		.site-branding {
			background-color: var(--blue);
			display: flex;
			padding-inline: 4rem 2rem;
			padding-inline: 2rem;
			/* clip-path: polygon(
				0% 0%,
				100% 0%,
				100% 100%,
				var(--skew-x) 100%
			); */
			img {
				margin: auto;
				height: 1.625rem;
				width: auto;
			}
		}
	
		.site-search {
			background-color: var(--black);
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			/* gap: 1rem; */
			/* padding-right: calc(0.5rem + var(--skew-x)); */
			padding: 1rem 2rem;
			/* border-left: 2px solid white; */
			/* clip-path: polygon(
				0% 0%,
				100% 0%,
				calc(100% - var(--skew-x)) 100%,
				0% 100%
			); */
			
			.search-container {
				display: flex;
				height: 100%;
				width: 0;
				overflow: hidden;
				transition: width .3s ease;
			}

			&[aria-expanded="true"] {
				background-color: white;
				color: black;
				border: none;
				gap: 1rem;
				.search-container {
					width: 15rem;
				}
			}

			.search-inner {
				display: flex;
				width: 100%;
				height: 100%;
				position: relative;

				input[type="search"] {
					width: 100%;
					height: 100%;
					border: none;
					border-radius: 0;
					font-size: 1.125rem;
					padding: .5em 2.5rem .5em 1em;
				}
			}
		}
		
		nav.nav-menu {
			display: flex;
			background-color: var(--black);
			color: white;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				max-width: 100%;
				&, li {
					margin: 0;
					padding: 0;
					&::before, &::after {
						content: "";
						display: none;
					}
				}
			}

			ul.header-menu {
				/* --padding-inline: 1.618rem; */
				--padding-inline: 2rem;
				--padding-block: 1rem;
				display: flex;
				height: 100%;

				& > li {
					height: 100%;
					position: relative;
				}

				& > li > a {
					height: 100%;

					font-weight: var(--fw-bold);
					font-size: var(--fs-label-heading);
					line-height: var(--lh-heading);
					text-transform: var(--text-transform, uppercase);

					padding: var(--padding-block) var(--padding-inline);
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;					
					text-align: center;
					transition: background-color .3s ease;
					&:hover {
						background-color: #333;
						text-decoration: underline;
						text-underline-offset: 0.125em;
					}
				}
			}
		
			ul.sub-menu {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				width: max-content;
				max-width: 16rem;
				background-color: color-mix(in hsl, var(--black) 60%, transparent);
				text-transform: none;
				& > li > a {
					
					font-weight: var(--fw-semi-bold);
					font-size: var(--fs-label-heading);
					line-height: var(--lh-heading);
					display: flex;
					text-align: left;
					padding: var(--padding-block) var(--padding-inline);
					&:hover {
						text-decoration: underline;
						text-underline-offset: 0.125em;
					}
				}
			}

			ul.header-menu > li:hover ul.sub-menu {
				display: block;
			}

			a {
				color: inherit;
				text-decoration: none;
			}

		}
		
		.mobile-menu-button, .open-sub-menu, .close-sub-menu, ul.sub-menu li:has(>.open-sub-menu, >.close-sub-menu) {
			display: none;
		}
	}
	
	
	@media (width < 1266px) {
		--outline-color: #242424;
		--button-outline: 1px solid var(--outline-color);
		background-color: var(--black);
		color: white;
		width: 100%;
		justify-content: space-between;
		position: fixed;
		
		.site-branding {
			background-color: var(--blue);
			display: flex;
			padding-inline: 2rem;
			/* clip-path: polygon(
				0% 0%,
				calc(100% - var(--skew-x)) 0%,
				100% 100%,
				0% 100%
			); */
			img {
				margin: auto;
				height: 1.125rem;
				width: auto;
			}
		}
		
		.site-search {
			margin-left: auto;
			display: flex;
			align-items: center;
			padding-inline: 1rem;
			.search-container {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				background-color: var(--black);
				height: 0px;
				overflow: hidden;
				visibility: hidden;
			}
			&[aria-expanded="true"] {
				.search-container {
					height: 3rem;
					visibility: visible;
				}
			}
			
			.button-open-search {
				display: block;
				margin: auto;
				font-size: 1.25rem;
			}
			
			.button-run-search {
				position: absolute;
				top: 50%;
				right: 0.5rem;
				transform: translate(0, -50%);
				display: block;
				margin: auto;
				font-size: 1.25rem;
				color: var(--black);
			}

			.search-inner {
				display: flex;
				width: 100%;
				height: 100%;
				position: relative;

				input[type="search"] {
					width: 100%;
					height: 100%;
					padding: .5em 2.5rem .5em .5em;
					border: none;
					border-radius: 0;
					font-size: 1.125rem;
				}
			}
				
		}
		
		.mobile-menu-button {
			font-size: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-inline: 2rem;
			
			/* i {
				transform: skewX(calc(-1 * var(--skew)));
			} */
		}
		
		nav.nav-menu {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			height: auto;
			background-color: color-mix(in hsl, var(--black), white 10%);
			overflow: hidden;
			display: none;
			&.active {
				display: block;
			}
			
			ul {
				overflow: hidden auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				
				&::-webkit-scrollbar {
					display: none;
				}
			}
		}
		
		ul.sub-menu {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			background-color: color-mix(in hsl, var(--black), white 10%);
			transition: transform .3s ease;
			transform: translateX(100%);
			&.active {
				transform: translateX(0%);
			}
		}
		
		ul, li {
			list-style: none;
			margin: 0;
			padding: 0;
			position: static;
		}
		li {
			--li-padding-inline: 1rem;
			--li-padding-block: .75rem;
			display: flex;
			justify-content: space-between;
			> span, > a {
				display: flex;
				flex-grow: 1;
				padding: var(--li-padding-block) var(--li-padding-inline);
				cursor: pointer;
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
			&:not(:last-child) {
				border-bottom: var(--button-outline);
			}
		}
		
		.open-sub-menu, .close-sub-menu { 
			/* Sub menu right arrow */
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-left: var(--button-outline);
			padding: var(--li-padding-block) var(--li-padding-inline);
			cursor: pointer;
		}
		.close-sub-menu {
			width: 100%;
			justify-content: flex-start;
		}
	}
	

}

.clickable {
	cursor: pointer;
}

body:has(#wpadminbar) .menu-bar {
	top: 32px;
}