/* =========================================================
   START: LAKESHORE MOBILE MENU DESIGN
   Site-specific presentation loaded after the reusable menu.css baseline.
   ========================================================= */

@media (max-width: 991.98px) {
	.header-area .main-header-area .main-menu[data-mobile-menu-panel] {
		padding: 14px 20px 20px;
		background: linear-gradient(
			180deg,
			rgba(59, 30, 54, 0.99) 0%,
			rgba(42, 19, 39, 0.995) 100%
		);
		border-top: 1px solid rgba(215, 151, 92, 0.24);
		box-shadow: 0 18px 38px rgba(15, 5, 14, 0.34);
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	}

	.header-area .main-header-area .main-menu[data-mobile-menu-panel].is-open {
		opacity: 1;
		transform: translateY(0);
	}

	.header-area .main-header-area .main-menu[data-mobile-menu-panel] > nav {
		width: min(100%, 680px);
		margin: 0 auto;
	}

	#primary-menu {
		border: 1px solid rgba(215, 151, 92, 0.18);
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.028),
			rgba(255, 255, 255, 0.012)
		);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
	}

	.header-area .main-header-area .main-menu #primary-menu > li + li {
		border-top: 1px solid rgba(215, 151, 92, 0.13);
	}

	.header-area .main-header-area .main-menu #primary-menu > li > a,
	.header-area .main-header-area .main-menu #primary-menu > li > span {
		margin: 0;
		padding: 15px 56px 15px 18px;
		color: #e7aa6d;
		font-family: 'Aclonica', sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.35;
		text-align: left;
		text-decoration: none;
		transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease, box-shadow 160ms ease;
	}

	.header-area .main-header-area .main-menu #primary-menu > li:not(.menu-item-has-children) > a {
		padding-right: 18px;
	}

	.header-area .main-header-area .main-menu #primary-menu > li > a:hover,
	.header-area .main-header-area .main-menu #primary-menu > li > a:focus-visible,
	.header-area .main-header-area .main-menu #primary-menu > li.current-menu-item > a,
	.header-area .main-header-area .main-menu #primary-menu > li.current-menu-ancestor > a {
		padding-left: 24px;
		background: linear-gradient(90deg, rgba(215, 151, 92, 0.14), rgba(215, 151, 92, 0.045));
		box-shadow: inset 3px 0 0 #d7975c;
		color: #f4bb7b;
	}

	.header-area .main-header-area .main-menu #primary-menu > li.current-menu-item > a,
	.header-area .main-header-area .main-menu #primary-menu > li.current-menu-ancestor > a {
		text-shadow: 0 0 14px rgba(240, 162, 75, 0.18);
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu {
		display: block;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transform: translateY(-4px);
		transition: max-height 240ms ease, opacity 180ms ease, transform 180ms ease;
		background: linear-gradient(180deg, rgba(12, 4, 11, 0.17), rgba(12, 4, 11, 0.28));
		border-top: 1px solid rgba(215, 151, 92, 0.12);
	}

	.header-area .main-header-area .main-menu #primary-menu .menu-item-open > .sub-menu {
		max-height: 900px;
		opacity: 1;
		transform: translateY(0);
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.055);
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu a,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu span {
		margin: 0;
		padding: 12px 56px 12px 34px;
		color: rgba(255, 255, 255, 0.88);
		font-family: 'Comfortaa', sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.45;
		text-transform: none;
		text-decoration: none;
		transition: background-color 160ms ease, color 160ms ease, padding-left 160ms ease;
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu li:not(.menu-item-has-children) > a {
		padding-right: 18px;
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu a:hover,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu a:focus-visible,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu .current-menu-item > a {
		padding-left: 41px;
		background: linear-gradient(90deg, rgba(215, 151, 92, 0.1), transparent 72%);
		box-shadow: inset 2px 0 0 rgba(215, 151, 92, 0.72);
		color: #f3c08d;
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu .sub-menu {
		margin-left: 20px;
		background: rgba(0, 0, 0, 0.14);
		border-left: 1px solid rgba(215, 151, 92, 0.38);
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu .sub-menu a,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu .sub-menu span {
		padding-left: 32px;
		font-size: 13px;
		font-weight: 500;
	}

	.header-area .main-header-area .main-menu #primary-menu .sub-menu .sub-menu a:hover,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu .sub-menu a:focus-visible {
		padding-left: 37px;
	}

	#primary-menu .submenu-toggle {
		height: 100%;
		min-height: 50px;
		width: 50px;
		border-left: 1px solid rgba(215, 151, 92, 0.15);
		color: #e7aa6d;
		transition: background-color 160ms ease, color 160ms ease;
	}

	#primary-menu .sub-menu .submenu-toggle {
		min-height: 45px;
		color: rgba(255, 255, 255, 0.72);
	}

	#primary-menu .submenu-toggle:hover,
	#primary-menu .submenu-toggle:focus-visible,
	#primary-menu .submenu-toggle[aria-expanded="true"] {
		background: rgba(215, 151, 92, 0.085);
		box-shadow: inset 0 0 0 1px rgba(215, 151, 92, 0.08);
		color: #f4bb7b;
	}

	#primary-menu .submenu-toggle::before {
		height: 8px;
		width: 8px;
		transition: transform 160ms ease;
	}
}

@media (max-width: 575px) {
	.header-area .main-header-area .main-menu[data-mobile-menu-panel] {
		padding: 10px 12px 16px;
	}

	.header-area .main-header-area .main-menu #primary-menu > li > a,
	.header-area .main-header-area .main-menu #primary-menu > li > span {
		padding-top: 14px;
		padding-bottom: 14px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-area .main-header-area .main-menu[data-mobile-menu-panel],
	#primary-menu .submenu-toggle::before,
	.header-area .main-header-area .main-menu #primary-menu .sub-menu {
		transition: none;
	}
}

/* =========================================================
   END: LAKESHORE MOBILE MENU DESIGN
   ========================================================= */
