:root {
	--menu-space-1x: 36px;
	--menu-space-05x: 18px;
	--menu-space-2x: 72px;
	--menu-inactive-item-opacity: 0.6;
	--menu-navgation-sidebar-font-size: 14px;
	--menu-navigtion-sidebar-width: 240px;
	
	--theme-tasty-color-main: #cfae58;
	--theme-tasty-menu-color: #671D22;
}

.page-template-template-menus .bg_1 {
	background-size: cover;
	background-repeat: repeat-y;
}

/* Menu Structure */
#component_menu.component_menu {
	max-width: 100%;
}


#tasty-menu-container {
	
	position: relative;
	padding-left: var(--menu-navigtion-sidebar-width);
	
	#component_menu {
		padding: 0;
	}
		
	.dietary-filter-icon {
		display: inline-block;
		width: 27px;
		height: 27px;
		background-repeat: no-repeat;
		background-size: contain;
		
		&.icon-vegetarian {
			background-image: url(images/icons/vegan.svg);
		}
	
		&.icon-dairy-free {
			background-image: url(images/icons/dairy-free.svg);
		}
	
		&.icon-gluten-free {
			background-image: url(images/icons/gluten-free.svg);
		}
	
		&.icon-nut-free {
			background-image: url(images/icons/nut-free.svg);
		}
	}
	
}

#tasty-menu-container #text_block {
	padding-top: var(--menu-space-1x);
	padding-left: var(--menu-space-1x);
	padding-right: var(--menu-space-1x);
	padding-bottom: var(--menu-space-1x);
	
	#menu-location-select {
		text-align: right;
	}
	
	.partial_text_block {

		max-width: 90%;
			
		.partial_text_block__heading {
			
			h2.h1 {
				font-size: clamp(24px, 11px + 3.3333vw, 64px);
				padding-top: 16px;
				padding-bottom: 16px;
				line-height: 1;
			}
		}
	}
}

#tasty-menu-container .menu-navigation-sidebar{

	width: var(--menu-navigtion-sidebar-width);
	max-width: var(--menu-navigtion-sidebar-width);
	height: 100%;
	padding: 0;
	background-color: var(--theme-tasty-menu-color);
	font-size: var(--menu-navgation-sidebar-font-size);
	position: absolute;
	top: 0;
	left: 0;
	
	& .menu-navigation-sidebar-inner {
		width: var(--menu-navigtion-sidebar-width);
		padding: var(--menu-space-05x);
		
		.popup-menu {
			display: none;
		}
	}
	
	&.sticky {
		.menu-navigation-sidebar-inner {
			position: fixed;
			top: 162px;
		}
	}
	
	&.sticky.bottom {
		.menu-navigation-sidebar-inner {
		}
	}
	
	&.sticky.bottom.bottom-out {
		.menu-navigation-sidebar-inner {
			position: absolute;
			top: auto;
			bottom: 0;
		}
	}
}	
	
#tasty-menu-container .menu-navigation-sidebar {
	
	& .component_menu__dietary-filters {

		.dietary-filter-icons {
			display: flex;
			flex-direction: column;
			gap: 3px;
			padding: 12px 0;
			margin-bottom: 18px;

			.dietary-filter-wrap {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				gap: 9px;
				opacity: var(--menu-inactive-item-opacity);
				
				cursor: pointer;
				
				span {
					font-weight: 700!important;
				}
				
				&.on {
					opacity: 1;
				}
			}
		}
	}
}


#tasty-menu-container .menu-navigation-sidebar{
		
	& .main-category-wrapper {
		
		& li {
			opacity: 0.5;

			&.active {
				opacity: 1;
			}
			
			a {
				font-size: 14px;
			}
		}
	}
	
	& .sub-category-wrapper {
		margin-top: var(--menu-space-1x);
		
		a {
			font-size: var(	--menu-navgation-sidebar-font-size );
			line-height: 1.5;
		}
		
		& .sub-category-items {
			
			display: none;
			
			&.active {
				display: block;
			}
			
			.menu-section {
				padding-left: 12px;
				opacity: var(--menu-inactive-item-opacity);
				border-left: 2px solid transparent;
				

				&.active {
					opacity: 1;
					border-left: 2px solid #fff;
				}
			}
		}
	}
	
	& .sub-category-wrapper.dietary-filter-on {
		
		.menu-section.inactive {
			pointer-events: none;
			opacity: 0.35;
		}

		.menu-section:not(.inactive) {
			opacity: 0.7;
		}
		
		.menu-section.active {
			opacity: 1;
		}
		
	}
}


#tasty-menu-container ul.component_menu__menu {
	margin-top: 0;
	
	& .component_menu__sections {

		gap: 0!important;
		
		& .component_menu__section {
			
			padding: var(--menu-space-1x);
			
			& .dietary-filter-icon {
				width: 18px;
				height: 18px;
			}
			
			& .price {
				font-size: 1.4rem;
			}
			
			.component_menu__slider-container {
				
				.slick-slide {
					.heading, .subheading {
						color: #fff;
					}
				}
			}
			
			.component_menu__section__items {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
				
				ul.price {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					margin: 6px 0;
					
					li {
						color: var(--theme-tasty-color-main);
						padding: 0 9px;
						
						&:not(:last-child) {
							border-right: 2px solid var(--theme-tasty-color-main);
						}
					}
				}
			}
		}
	}
}


#tasty-menu-container ul.component_menu__menu:not(.filter_on) {
	
	& .component_menu__sections {
	
		& .component_menu__section {
						
			&:nth-child(odd) {
				background-color: #fff;
				
				h3 {
					color: var(--theme-tasty-menu-color);
					
					&:after {
						background: linear-gradient(90deg, var(--theme-tasty-menu-color), rgba(75, 28, 28, 0.752));
					}
				}
				
				h6, p {
					color: #000;
					
					&.price {
						color: var(--theme-tasty-menu-color);
					}
				}
				
				& .dietary-filter-icon {
					filter: invert(1);
				}
			}
		}
	}
}

#tasty-menu-container ul.component_menu__menu.filter_on {
	
	& .component_menu__sections {
	
		& .component_menu__section {
						
			&.filter_on.odd {
				background-color: #fff;
				
				h3 {
					color: var(--theme-tasty-menu-color);
					
					&:after {
						background: linear-gradient(90deg, var(--theme-tasty-menu-color), rgba(75, 28, 28, 0.752));
					}
				}
				
				h6, p {
					color: #000;
					
					&.price {
						color: var(--theme-tasty-menu-color);
					}
				}
				
				& .dietary-filter-icon {
					filter: invert(1);
				}
			}
		}
	}
}

@media only screen and (min-width: 1024px) {
	section.component_menu .partial_slider__slider__container {
		height: 300px;
		
		.column {
			height: 300px;
			
			.column__image {
				height: 100%;
			}
		}
	}
}


@media only screen and (max-width: 1024px) {

	#tasty-menu-container ul.component_menu__menu .component_menu__slider-container {
		
			
		& .partial_slider__slider {
			
			& .partial_slider__slider__container {
				
				height: 240px;

				& .slick-dots {
					top: 10px;
					right: 15px;
					bottom: auto;
					left: auto;
				}
				
				& .column__content {
					bottom: 54px;
				}
			}
		}
	}
}

#tasty-menu-container .mobile-menu-navigation-bar {
	display: none;
}

@media only screen and (max-width: 767px) {
	
	#tasty-menu-container {
		padding-left: 0;

		.menu_location_panel {
			
			.partial_text_block__container {
				padding: 0;
			}
		
			#menu-location-select {
				margin-bottom: 18px;
				
				select {
					width: 100%;
				}
			}
		}
	}
	
	#tasty-menu-container .menu-navigation-sidebar {
		display: none;
		
		&.popup {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 200;
			width: 100%;
			max-width: 100%;
			height: 100vh;
			
			.menu-navigation-sidebar-inner {
				width: 100%;
				height: 100%;
				padding: 0;
				
				.popup-menu {
					display: block;
				}
				
				.menu-title {
					padding: 18px;
					text-align: center;
					text-transform: uppercase;
					border-bottom: 1px solid #fff;
					position: relative;
					
					.close-popup {
						position: absolute;
						right: 18px;
						top: 18px;
						cursor: pointer;
						
						&:before {
							content: '';
							display: block;
							width: 24px;
							height: 24px;
							background-image: url(images/icons/close-white.svg);
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
				
				.component_menu__dietary-filters {
					display: none;
				}
				
				.component_menu__category-wrapper {
					padding: 0;
				}
			}
		}
	}

	#tasty-menu-container .mobile-menu-navigation-bar {
		display: block;
		position: relative;
		background: #fff;
		border-bottom: 1px solid var(--theme-tasty-menu-color);
		padding: 0px;
		display: flex;
		flex-direction: row;
		
		.full-menu-panel {
			width: calc( 100% - 48px );
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			.full-menu-button {	
				font-family: Montserrat,Sans-serif;
				font-size: 12px;
				font-weight: 600;
				color: #000;
			}
		}

		.dietary-filters {
			
			padding: 6px 0;
			cursor: pointer;
			
			.icon-wrapper {
				padding: 0 18px;
				border-left: 1px solid var(--theme-tasty-menu-color);
				
				.dietary-filters-icon {
					display: block;
					width: 36px;
					height: 36px;
					background-image: url(images/icons/dietary-filters.svg);
					background-size: contain;
					background-repeat: no-repeat;
				}				
			}

			.mobile-dietary-filters {
				display: none;
				
				.dietary-filter-wrap {

					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 9px;
					font-size: 12px;
					opacity: 0.5;
					
					.dietary-filter-icon {
						width: 10vw;
						max-width: 64px;
						height: auto;
						aspect-ratio: 1 / 1;
					}
				}

				.dietary-filter-wrap.on {
					opacity: 1;
				}
			}
		}
		
		.dietary-filters:hover {
			background-color: var(--theme-tasty-menu-color);
			
			.dietary-filters-icon {
				filter: brightness(100);
			}
			
			.mobile-dietary-filters {
				position: absolute;
				z-index: 20;
				right: 0;
				top: 48px;
				width: 100vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: var(--menu-space-05x);
				background-color: var(--theme-tasty-menu-color);
				padding: var(--menu-space-1x);
				
				.dietary-filter-icons {
					display: flex;
					flex-direction: row;
					gap: var(--menu-space-1x);
				}
			}
		}
	}
	
	#tasty-menu-container .mobile-menu-navigation-bar.sticky {
		position: fixed;
		top: 162px;
		z-index: 90;
		width: 100%;
	}
	
	#tasty-menu-container .menu-navigation-sidebar.popup {
		
		.component_menu__category-wrapper {
			height: calc( 100vh - 60px );
			position: relative;
			
			.category-wrapper {
				width: 100%;
				height: 100%;
				padding: var(--menu-space-1x);
				background-color: var(--theme-tasty-menu-color);
			}
			
			.main-category-wrapper {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 6vh;
				z-index: 2;
				transition: all 0.2s ease-in;
				
				h3.category-title {
					position: absolute;
					top: var(--menu-space-1x);
					text-transform: uppercase;
				}
				
				li.main-menu-category a {
					font-size: clamp(32px, -0.1304rem + 6.5217vw, 64px)
				}
			}
			
			.sub-category-wrapper {
				display: none;
				z-index: 1;
				position: absolute;
				top: 0;
				left: 0;
				margin-top: 0;
				
				.sub-category-title {
					text-transform: uppercase;
					margin-bottom: var(--menu-space-1x);
				}
				
				.sub-category-items {
					
					.menu-section {
						padding-left: 0;
						border: none;
						padding: 9px 0;
						border-bottom: 1px solid rgba(255, 255, 255, 0.5);

						a {
							font-size: clamp(16px, 0.7283rem + 1.087vw, 20px);
						}
					}
				}
			}
		}
		
		.component_menu__category-wrapper.main-selected {
			
			.main-category-wrapper {
				transform: translatex(-100%);
				transition: all 0.2s ease-in;
			}
			
			.sub-category-wrapper {
				display: block;
			}
		}
	}
}