@layer components {
	.main-navigation {
		position: relative;
		z-index: 50;
		flex: 1 1 auto;
	}
	.main-navigation .menu-main-menu-container {
		display: flex;
		justify-content: flex-start;
	}

	.main-navigation ul.nav-menu {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		list-style: none;
	}
	.main-navigation ul.nav-menu li.menu-item {
		position: relative;
	}

	.main-navigation ul.nav-menu li.menu-item > a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-body-size);
		font-weight: var(--fw-medium);
		line-height: var(--text-body-lh);
		transition:
			background-color .2s ease,
			color .2s ease,
			transform .15s ease;
	}

	.main-navigation ul.nav-menu li.menu-item > a:hover,
	.main-navigation ul.nav-menu li.menu-item > a:focus {
		transform: translateY(-1px);
	}

	.main-navigation ul.nav-menu li.menu-item > a::before {
		content: var(--icon-menu);
		display: inline-block;
	}

	.main-navigation ul.nav-menu > li.menu-item:first-child > a::before {
		content: none;
	}

	.main-navigation ul.nav-menu li.menu-item-has-children > ul.sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-width: 12rem;
		margin: 0;
		list-style: none;
		box-shadow: 0 8px 20px rgba(0,0,0,.12);
		display: none;
		z-index: 100;
		text-align: left;
	}

	.main-navigation ul.sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.main-navigation ul.nav-menu li.menu-item-has-children:hover > ul.sub-menu,
	.main-navigation ul.nav-menu li.menu-item-has-children:focus-within > ul.sub-menu {
		display: block;
	}

	.main-navigation ul.sub-menu li.menu-item > a {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		width: 100%;
		justify-content: flex-start;
		text-align: left;
		padding: var(--space-xs) var(--space-md);
		text-decoration: none;
		white-space: nowrap;
		transition: background-color .2s ease, color .2s ease;
	}

	.main-navigation ul.sub-menu li.menu-item > a::before {
		content: var(--icon-sub-menu);
	}

	.main-navigation ul.nav-menu > li:last-child > ul.sub-menu {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	.main-navigation li::before {
		content: none;
	}

	.menu-toggle {
		display: none;
		background: none;
		cursor: pointer;
		font-size: var(--font-size-lg);
		z-index: 100;
	}

	.navigation {
		display: flex;
		width: 100%;
		margin-top: var(--space-md);
	}

	.navigation .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		padding: var(--space-xxs) var(--space-sm);
	}

	.navigation .page-numbers.next,
	.navigation .page-numbers.prev {
		font-weight: var(--fw-medium);
	}
	.menu-close {
		display: none;
	}

	.main-navigation.toggled .menu-close {
		display: block;
	}
	@media (max-width: 768px) {
		.menu-close {
			display: none !important;
		}

		.main-navigation.toggled .menu-close {
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
			line-height: 1;
		}
		.menu-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: none;
			cursor: pointer;
			z-index: 100;
		}

		.main-navigation {
			position: relative;
		}

		.main-navigation ul.nav-menu {
			position: fixed;
			inset-block-start: 100px;
			inset-inline-start: 0;
			width: 100%;
			height: calc(100vh - 100px);
			transform: translateX(-100%);
			transition: transform .3s ease;
			overflow-y: auto;
			z-index: 600;
		}

		.main-navigation.toggled ul.nav-menu {
			transform: translateX(0);
		}
		.main-navigation ul.nav-menu li{
			width:100%;
		}
		.main-navigation ul.nav-menu,
		.main-navigation ul.sub-menu {
			list-style: none;
			margin: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		.main-navigation li.menu-item {
			width: 100%;
			position: relative;
		}

		.main-navigation li > a {
			display: flex;
			align-items: center;
			width: 100%;
			text-decoration: none;
			position: relative;
			justify-content: flex-start;
		}

		.main-navigation li.menu-item-has-children > a::after {
			content: "▸";
			position: absolute;
			inset-inline-end: 1rem;
			transition: transform .2s ease;
		}

		.main-navigation li.menu-item.focus > a::after {
			transform: rotate(90deg);
		}

		.main-navigation ul.sub-menu {
			display: none;
			position: static;
			width: 100%;
		}

		.main-navigation li.current-menu-item > a {
			font-weight: 600;
		}

		.main-navigation ul li.menu-item.focus > ul.sub-menu {
			display: block;
		}

	}
}