/* EA Template Kit - Main Menu widget: desktop layout, submenus, sticky and transparent states.
 *
 * The collapsed (menu button) layouts live in menu-collapsed.css, which the plugin prints once per Elementor
 * breakpoint. Every value is a custom property: widget style controls set --eatk-mn-*, otherwise the kit's
 * global colors (--e-global-color-eatk*) and responsive tokens (--eatk-*) apply.
 *
 * Browser support: Safari / iOS 14.1+ (flex gap, logical properties), Chrome, Edge, Firefox. Hover menus
 * only open on devices that can hover; touch screens use the submenu buttons.
 */

.eatk-menu {
	--_color-base: var(--eatk-mn-color, var(--e-global-color-eatkink, #22182b));
	--_color: var(--_color-base);
	--_hover: var(--eatk-mn-hover, var(--e-global-color-eatkbrand, #3d2b4f));
	--_active: var(--eatk-mn-active, var(--_hover));
	--_pointer: var(--eatk-mn-pointer, var(--e-global-color-eatkaccent, #a8782a));
	--_bar-bg: var(--eatk-mn-bar-bg, transparent);
	--_solid-bg: var(--e-global-color-eatkwhite, #fff);
	--_h: var(--eatk-mn-h, 72px);
	--_bar-pad: var(--eatk-mn-bar-pad, 0px);
	--_bar-gap: var(--eatk-mn-bar-gap, var(--eatk-gap-md, 24px));
	--_logo: var(--eatk-mn-logo, 160px);
	--_gap: var(--eatk-mn-gap, 4px);
	--_item-x: var(--eatk-mn-item-x, 14px);
	--_item-y: var(--eatk-mn-item-y, 10px);
	--_sub-bg: var(--eatk-mn-sub-bg, var(--e-global-color-eatkwhite, #fff));
	--_sub-color: var(--eatk-mn-sub-color, var(--e-global-color-eatkink, #22182b));
	--_sub-hover-bg: var(--eatk-mn-sub-hover-bg, var(--e-global-color-eatksurface, #f6efe2));
	--_sub-hover: var(--eatk-mn-sub-hover, var(--e-global-color-eatkbrand, #3d2b4f));
	--_sub-w: var(--eatk-mn-sub-w, 240px);
	--_sub-radius: var(--eatk-mn-sub-radius, var(--eatk-radius-sm, 8px));
	--_line: var(--e-global-color-eatkline, #e5d8bf);
	--_toggle: var(--eatk-mn-toggle, var(--_color));
	--_toggle-bg: var(--eatk-mn-toggle-bg, transparent);
	--_toggle-size: var(--eatk-mn-toggle-size, 44px);
	--_cta-bg: var(--eatk-mn-cta-bg, var(--e-global-color-eatkbrand, #3d2b4f));
	--_cta-color: var(--eatk-mn-cta-color, #fff);
	--_cta-radius: var(--eatk-mn-cta-radius, 999px);
	--_ease: cubic-bezier(.2, .7, .2, 1);

	position: relative;
	color: var(--_color);
	font-size: var(--eatk-fs-body, 16px);
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
}

.eatk-menu--dark {
	--_color-base: var(--eatk-mn-color, var(--e-global-color-eatkmuted, #d9cde2));
	--_hover: var(--eatk-mn-hover, var(--e-global-color-eatkwhite, #fff));
	--_pointer: var(--eatk-mn-pointer, var(--e-global-color-eatkaccent, #c9a15a));
	--_solid-bg: var(--e-global-color-eatkdark, #231a2c);
	--_line: rgba(255, 255, 255, .16);
}

/* Transparent header: light items until the page scrolls. */
.eatk-menu--overlay:not(.is-scrolled) {
	--_color: var(--eatk-mn-over-color, #fff);
	--_hover: var(--eatk-mn-over-color, #fff);
	--_active: var(--eatk-mn-over-color, #fff);
	--_toggle: var(--eatk-mn-over-color, #fff);
	--_bar-bg: transparent;
}

.eatk-menu.is-stuck {
	--_color: var(--eatk-mn-stuck-color, var(--_color-base));
}

.eatk-menu.is-stuck.eatk-menu--shrink {
	--_h: var(--eatk-mn-h-shrink, 56px);
}

/* Theme Builder header from the kit (Pro sticky + transparent overlay classes). */
.eatk-header-overlay:not(.elementor-sticky--effects) .eatk-menu {
	--_color: #fff;
	--_hover: #fff;
	--_active: #fff;
	--_toggle: #fff;
}

.eatk-menu *,
.eatk-menu *::before,
.eatk-menu *::after {
	box-sizing: border-box;
}

.eatk-menu .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.eatk-menu button,
.eatk-menu button:hover,
.eatk-menu button:focus,
.eatk-menu button:active {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	/* Never "transition: all" (themes): it would animate visibility and block focus while a panel opens. */
	transition: background-color .2s, color .2s;
}

.eatk-menu :is(a, button):focus-visible {
	outline: 2px solid var(--_pointer);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ Bar */

.eatk-menu__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--_bar-gap);
	min-height: var(--_h);
	padding: var(--_bar-pad);
	background: var(--_bar-bg);
	border-bottom: 1px solid var(--eatk-mn-bar-border, transparent);
	transition: min-height .25s var(--_ease), background-color .25s;
}

.eatk-menu__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--_color);
	text-decoration: none;
}

.eatk-menu__logo {
	display: block;
	width: var(--_logo);
	max-width: 100%;
	height: auto;
	transition: width .25s var(--_ease);
}

.eatk-menu.is-stuck.eatk-menu--shrink .eatk-menu__logo {
	width: calc(var(--_logo) * .8);
}

.eatk-menu__site-title {
	font-size: var(--eatk-fs-h4, 20px);
	font-weight: 700;
	white-space: nowrap;
}

.eatk-menu__nav {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

.eatk-menu--align-start .eatk-menu__nav { justify-content: flex-start; }
.eatk-menu--align-center .eatk-menu__nav { justify-content: center; }
.eatk-menu--align-justify .eatk-menu__list { flex: 1 1 auto; justify-content: space-between; }

.eatk-menu__panel-head,
.eatk-menu__panel-foot,
.eatk-menu__toggle,
.eatk-menu__backdrop {
	display: none;
}

/* Stacked: logo centered on its own row, menu (and button) centered below. */
.eatk-menu--layout-stacked .eatk-menu__bar {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 6px;
	padding-block: 12px;
}

.eatk-menu--layout-stacked .eatk-menu__bar > .eatk-menu__brand {
	flex-basis: 100%;
	justify-content: center;
}

.eatk-menu--layout-stacked .eatk-menu__nav {
	flex: 0 1 auto;
	justify-content: center;
}

/* ------------------------------------------------------------------ Top-level items */

.eatk-menu__list,
.eatk-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eatk-menu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--_gap);
}

.eatk-menu__list li {
	position: relative;
	margin: 0;
	padding: 0;
}

.eatk-menu__list > li {
	display: flex;
	align-items: center;
}

.eatk-menu__list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--_color);
	text-decoration: none;
	transition: color .2s, background-color .2s;
}

.eatk-menu__list > li > a {
	position: relative;
	min-height: 44px;
	padding: var(--_item-y) var(--_item-x);
	font-weight: 500;
	white-space: nowrap;
}

.eatk-menu__label {
	position: relative;
}

.eatk-menu__desc {
	display: block;
	margin-top: 2px;
	font-size: .8em;
	font-weight: 400;
	opacity: .75;
	white-space: normal;
}

.eatk-menu__list > li > a:hover,
.eatk-menu__list > li:focus-within > a {
	color: var(--_hover);
}

.eatk-menu__list > li.current-menu-item > a,
.eatk-menu__list > li.current-menu-ancestor > a,
.eatk-menu__list > li.current_page_item > a {
	color: var(--_active);
}

/* Pointers. */
.eatk-menu--pointer-underline .eatk-menu__list > li > a > .eatk-menu__label::after,
.eatk-menu--pointer-overline .eatk-menu__list > li > a > .eatk-menu__label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--_pointer);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s var(--_ease);
}

.eatk-menu--pointer-underline .eatk-menu__list > li > a > .eatk-menu__label::after { bottom: -6px; }
.eatk-menu--pointer-overline .eatk-menu__list > li > a > .eatk-menu__label::after { top: -6px; }

.eatk-menu--pointer-underline .eatk-menu__list > li > a:hover > .eatk-menu__label::after,
.eatk-menu--pointer-overline .eatk-menu__list > li > a:hover > .eatk-menu__label::after,
.eatk-menu--pointer-underline .eatk-menu__list > li:is(.current-menu-item, .current-menu-ancestor) > a > .eatk-menu__label::after,
.eatk-menu--pointer-overline .eatk-menu__list > li:is(.current-menu-item, .current-menu-ancestor) > a > .eatk-menu__label::after {
	transform: scaleX(1);
}

.eatk-menu--pointer-background .eatk-menu__list > li > a {
	border-radius: 999px;
}

.eatk-menu--pointer-background .eatk-menu__list > li > a:hover,
.eatk-menu--pointer-background .eatk-menu__list > li:is(.current-menu-item, .current-menu-ancestor) > a {
	background: rgba(127, 127, 127, .14); /* Safari < 16.2 has no color-mix(). */
	background: color-mix(in srgb, var(--_pointer) 16%, transparent);
}

/* Button-style item: add the CSS class "eatk-button" to a menu item. */
.eatk-menu__list > li.eatk-button > a {
	margin-inline-start: 6px;
	border-radius: var(--_cta-radius);
	background: var(--_cta-bg);
	color: var(--_cta-color);
}

.eatk-menu__list > li.eatk-button > a > .eatk-menu__label::after {
	display: none;
}

/* ------------------------------------------------------------------ Submenu buttons */

.eatk-menu .eatk-menu__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 44px;
	margin-inline-start: calc(var(--_item-x) * -.6);
	color: inherit;
	border-radius: 6px;
}

.eatk-menu__chevron {
	position: relative;
	display: block;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s var(--_ease);
}

.eatk-menu li.is-open > .eatk-menu__sub-toggle .eatk-menu__chevron {
	transform: translateY(2px) rotate(225deg);
}

.eatk-menu--icon-plus .eatk-menu__chevron {
	width: 12px;
	height: 12px;
	border: 0;
	transform: none;
}

.eatk-menu--icon-plus .eatk-menu__chevron::before,
.eatk-menu--icon-plus .eatk-menu__chevron::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 12px;
	height: 2px;
	background: currentColor;
	transition: transform .2s var(--_ease);
}

.eatk-menu--icon-plus .eatk-menu__chevron::after {
	transform: rotate(90deg);
}

.eatk-menu--icon-plus li.is-open > .eatk-menu__sub-toggle .eatk-menu__chevron {
	transform: none;
}

.eatk-menu--icon-plus li.is-open > .eatk-menu__sub-toggle .eatk-menu__chevron::after {
	transform: rotate(0deg);
}

/* ------------------------------------------------------------------ Desktop submenus */

.eatk-menu__sub {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 100;
	min-width: var(--_sub-w);
	padding: 8px;
	background: var(--_sub-bg);
	border-radius: var(--_sub-radius);
	box-shadow: 0 18px 40px -18px rgba(20, 10, 30, .35), 0 0 0 1px rgba(20, 10, 30, .06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	/* Closing waits a moment, so diagonal mouse movements do not close the menu. */
	transition: opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .3s;
}

.eatk-menu__sub li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.eatk-menu__sub a {
	flex: 1 1 auto;
	min-height: 40px;
	padding: 9px 12px;
	border-radius: calc(var(--_sub-radius) * .6);
	color: var(--_sub-color);
	font-size: .95em;
}

.eatk-menu__sub a:hover,
.eatk-menu__sub li:focus-within > a,
.eatk-menu__sub li.current-menu-item > a {
	background: var(--_sub-hover-bg);
	color: var(--_sub-hover);
}

.eatk-menu__sub .eatk-menu__sub-toggle {
	position: absolute;
	inset-inline-end: 4px;
	top: 2px;
	height: 36px;
	color: var(--_sub-color);
}

.eatk-menu__sub .eatk-menu__sub-toggle .eatk-menu__chevron {
	transform: rotate(-45deg);
}

[dir="rtl"] .eatk-menu__sub .eatk-menu__sub-toggle .eatk-menu__chevron {
	transform: rotate(135deg);
}

.eatk-menu__sub li.menu-item-has-children > a {
	padding-inline-end: 36px;
}

/* Deeper levels open to the side. */
.eatk-menu__sub .eatk-menu__sub {
	top: -8px;
	inset-inline-start: 100%;
	margin-inline-start: 6px;
}

/* Open states: click / keyboard (all devices), hover (devices that can hover). */
.eatk-menu li.is-open > .eatk-menu__sub,
.eatk-menu--sub-hover li:focus-within:not(.is-dismissed) > .eatk-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
	.eatk-menu--sub-hover li:hover:not(.is-dismissed) > .eatk-menu__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}

/* Edge detection (set by the script when a submenu would leave the viewport). */
.eatk-menu__list > li.is-flipped > .eatk-menu__sub {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.eatk-menu__sub li.is-flipped > .eatk-menu__sub {
	inset-inline-start: auto;
	inset-inline-end: 100%;
	margin-inline-start: 0;
	margin-inline-end: 6px;
}

/* Mega menu: add the CSS class "eatk-mega" to a top-level menu item. Its children become columns. */
.eatk-menu__list > li.eatk-mega {
	position: static;
}

.eatk-menu__list > li.eatk-mega > .eatk-menu__sub {
	inset-inline: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px 24px;
	padding: 20px 24px;
}

.eatk-menu__list > li.eatk-mega > .eatk-menu__sub > li {
	display: block;
}

.eatk-menu__list > li.eatk-mega > .eatk-menu__sub > li > a {
	font-weight: 600;
}

.eatk-menu__list > li.eatk-mega > .eatk-menu__sub > li > .eatk-menu__sub-toggle {
	display: none;
}

.eatk-menu__list > li.eatk-mega .eatk-menu__sub .eatk-menu__sub {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 8px;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transform: none;
}

/* ------------------------------------------------------------------ Call to action */

.eatk-menu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 22px;
	border: 2px solid var(--_cta-bg);
	border-radius: var(--_cta-radius);
	background: var(--_cta-bg);
	color: var(--_cta-color);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .2s, transform .2s;
}

.eatk-menu__cta:hover {
	filter: brightness(1.08);
	color: var(--_cta-color);
}

.eatk-menu__cta--outline {
	background: transparent;
	color: var(--_cta-bg);
}

.eatk-menu--overlay:not(.is-scrolled) .eatk-menu__bar > .eatk-menu__cta--outline {
	border-color: currentColor;
	color: var(--_color);
}

/* ------------------------------------------------------------------ Vertical (sidebar) layout */

.eatk-menu--layout-vertical .eatk-menu__bar {
	flex-direction: column;
	align-items: stretch;
}

.eatk-menu--layout-vertical .eatk-menu__nav {
	justify-content: flex-start;
}

.eatk-menu--layout-vertical .eatk-menu__list {
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.eatk-menu--layout-vertical .eatk-menu__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.eatk-menu--layout-vertical .eatk-menu__list a {
	flex: 1 1 auto;
}

.eatk-menu--layout-vertical .eatk-menu__list .eatk-menu__sub {
	position: static;
	display: none;
	flex-basis: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 0 6px;
	padding-inline-start: 14px;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transform: none;
}

.eatk-menu--layout-vertical .eatk-menu__list li.is-open > .eatk-menu__sub {
	display: block;
}

.eatk-menu--layout-vertical .eatk-menu__sub .eatk-menu__sub-toggle {
	position: static;
}

.eatk-menu--layout-vertical .eatk-menu__sub .eatk-menu__sub-toggle .eatk-menu__chevron {
	transform: translateY(-2px) rotate(45deg);
}

/* ------------------------------------------------------------------ Sticky / transparent targets (set by the script) */

.eatk-mn-spacer {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.eatk-mn-target.eatk-mn-overlay {
	position: absolute !important;
	top: var(--eatk-mn-abs-top, 0px);
	left: 0;
	right: 0;
	z-index: 999;
	width: 100% !important;
	max-width: 100% !important;
	background-color: transparent !important;
	background-image: none !important;
}

.eatk-mn-target.eatk-mn-stuck {
	position: fixed !important;
	top: var(--eatk-mn-top, 0px) !important;
	left: 0;
	right: 0;
	z-index: 999;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 0 !important;
	transition: transform .3s var(--eatk-ease, ease), box-shadow .3s;
	will-change: transform;
}

.eatk-mn-target.eatk-mn-stuck.eatk-mn-has-bg {
	background-color: var(--eatk-mn-target-bg) !important;
}

.eatk-mn-target.eatk-mn-stuck.eatk-mn-has-shadow {
	box-shadow: 0 10px 30px -16px rgba(20, 10, 30, .38);
}

.eatk-mn-target.eatk-mn-stuck.eatk-mn-hidden {
	transform: translateY(calc(-100% - var(--eatk-mn-top, 0px) - 4px));
	box-shadow: none;
}

/* ------------------------------------------------------------------ Motion & print */

@media (prefers-reduced-motion: reduce) {
	.eatk-menu *,
	.eatk-menu *::before,
	.eatk-menu *::after,
	.eatk-menu-portal *,
	.eatk-mn-target.eatk-mn-stuck {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

@media print {
	.eatk-menu__toggle,
	.eatk-menu__sub,
	.eatk-menu__sub-toggle {
		display: none !important;
	}

	.eatk-mn-target.eatk-mn-stuck {
		position: static !important;
	}
}