/*
 * KSL Off-Canvas Navigation
 * Closed by default; opens only when body has .ksl-menu-open
 */

/* =========================================================
   OFF-CANVAS PANEL: CLOSED STATE
   ========================================================= */

html body .ksl-offcanvas {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	z-index: 999999 !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;

	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow-x: hidden !important;
	overflow-y: auto !important;

	background: #ffffff !important;

	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transform: translate3d(-101%, 0, 0) !important;

	transition:
		transform 160ms ease,
		opacity 120ms ease,
		visibility 0s linear 160ms !important;
}

/* =========================================================
   OFF-CANVAS PANEL: OPEN STATE
   ========================================================= */

html body.ksl-menu-open .ksl-offcanvas {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: translate3d(0, 0, 0) !important;
	transition-delay: 0s !important;
}

html body.ksl-menu-open {
	overflow: hidden !important;
}

/* =========================================================
   PANEL HEADER
   ========================================================= */

html body .ksl-offcanvas-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;
	min-height: 68px !important;

	margin: 0 !important;
	padding: 12px 16px !important;

	flex: 0 0 auto !important;

	border-bottom: 1px solid #dddddd;
	background: #ffffff !important;
}

/* =========================================================
   PANEL TITLE
   ========================================================= */

html body .ksl-offcanvas-title {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 1 auto !important;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

html body .ksl-offcanvas-close {
	position: relative !important;

	display: block !important;
	flex: 0 0 44px !important;

	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #111111 !important;
	background: transparent !important;

	overflow: visible !important;
	cursor: pointer !important;
	z-index: 10 !important;
}

html body .ksl-offcanvas-close::before,
html body .ksl-offcanvas-close::after {
	content: "" !important;

	position: absolute !important;
	top: 50% !important;
	left: 50% !important;

	display: block !important;

	width: 26px !important;
	height: 3px !important;

	background: #111111 !important;
	border-radius: 2px !important;

	transform-origin: center !important;
}

html body .ksl-offcanvas-close::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .ksl-offcanvas-close::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* =========================================================
   NAVIGATION CONTAINERS
   ========================================================= */

html body .ksl-offcanvas-nav,
html body .ksl-offcanvas-menu {
	position: static !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Hide Elementor's internal hamburger and duplicate dropdown.
 * Our header hamburger controls the full panel.
 */
html body .ksl-offcanvas-menu .elementor-menu-toggle,
html body .ksl-offcanvas-menu > .elementor-nav-menu--dropdown {
	display: none !important;
}

/* Force the main vertical menu to be visible inside the panel. */
html body .ksl-offcanvas-menu .elementor-nav-menu--main {
	position: static !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: visible !important;
}

/* =========================================================
   TOP-LEVEL MENU
   ========================================================= */

html body .ksl-offcanvas-menu .elementor-nav-menu--main > ul {
	position: static !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 10px 18px 30px !important;
}

html body .ksl-offcanvas-menu .elementor-nav-menu--main > ul > li {
	position: static !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border-bottom: 1px solid #dddddd;
}

html body .ksl-offcanvas-menu .elementor-nav-menu--main > ul > li > a {
	position: relative !important;

	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 54px !important;

	margin: 0 !important;
	padding: 12px 4px !important;

	white-space: normal !important;
}

/* =========================================================
   SUBMENU ARROWS
   ========================================================= */

html body .ksl-offcanvas-menu .sub-arrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 44px !important;

	width: 44px !important;
	height: 44px !important;

	margin: 0 0 0 auto !important;
	padding: 0 !important;

	cursor: pointer !important;
	transition: transform 180ms ease;
}

html body .ksl-offcanvas-menu .menu-item.is-open > a .sub-arrow {
	transform: rotate(180deg) !important;
}

/* =========================================================
   SUBMENUS
   ========================================================= */

html body .ksl-offcanvas-menu .sub-menu {
	position: static !important;

	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	inset: auto !important;

	display: none !important;
	float: none !important;
	transform: none !important;

	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 0 10px 16px !important;

	background: transparent !important;
	box-shadow: none !important;

	overflow: visible !important;
}

html body .ksl-offcanvas-menu .menu-item.is-open > .sub-menu {
	display: block !important;
}

html body .ksl-offcanvas-menu .sub-menu li {
	position: static !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}

html body .ksl-offcanvas-menu .sub-menu a,
html body .ksl-offcanvas-menu .elementor-sub-item {
	position: static !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 10px 8px !important;

	white-space: normal !important;
	line-height: 1.35 !important;
}

/* =========================================================
   CTA AREA
   ========================================================= */

html body .ksl-offcanvas-cta {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin-top: auto !important;
	padding: 16px !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {
	html body .ksl-offcanvas {
		display: none !important;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html body .ksl-offcanvas,
	html body .ksl-offcanvas-menu .sub-arrow {
		transition: none !important;
	}
}
/* Make the entire parent menu row clearly expandable */
html body .ksl-offcanvas-menu .menu-item-has-children > a {
	cursor: pointer !important;
}

/* Ensure open submenus display beneath their parent */
html body .ksl-offcanvas-menu .menu-item-has-children.is-open > .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Keep closed submenus fully hidden */
html body .ksl-offcanvas-menu .menu-item-has-children:not(.is-open) > .sub-menu {
	display: none !important;
}
/* Large, separate touch target for submenu expansion */
html body .ksl-offcanvas-menu .sub-arrow {
	position: relative !important;
	z-index: 20 !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 52px !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;

	margin: -4px -4px -4px auto !important;

	cursor: pointer !important;
	touch-action: manipulation !important;
	-webkit-tap-highlight-color: transparent;
}

html body .ksl-offcanvas-menu .sub-arrow svg {
	width: 14px !important;
	height: 14px !important;
	pointer-events: none !important;
}