/*
 * Nav Menu (tdek-nav-menu) — frame + states. Colors come from CSS variables set by Style tab controls on .tdek-nav
 * (--tdek-nav-color, --tdek-nav-sub-bg…); burger mode (@media per Elementor breakpoint) is generated by the control, see
 * Nav_Menu_Rules::burger_selectors(). `.tdek-nav button.…` selectors beat the theme's default button style (Hello reset).
 */
.tdek-nav {
	position: relative;
	display: flex;
	align-items: center;
}

.tdek-nav__menu,
.tdek-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tdek-nav__menu {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
}

.tdek-nav--vertical .tdek-nav__menu {
	flex-direction: column;
	align-items: stretch;
}

.tdek-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.tdek-nav__menu > .tdek-nav__item {
	flex-grow: var(--tdek-nav-item-grow, 0);
}

.tdek-nav__link {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: var(--tdek-nav-link-justify, flex-start);
	gap: .4em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s, background-color .2s;
}

.tdek-nav__menu > .tdek-nav__item > .tdek-nav__link {
	padding: 10px 14px;
	color: var(--tdek-nav-color, inherit);
}

.tdek-nav__menu > .tdek-nav__item > .tdek-nav__link:hover,
.tdek-nav__menu > .tdek-nav__item:focus-within > .tdek-nav__link {
	color: var(--tdek-nav-color-hover, var(--tdek-nav-color, inherit));
}

.tdek-nav__menu > .tdek-nav__item > .tdek-nav__link.is-active {
	color: var(--tdek-nav-color-active, var(--tdek-nav-color-hover, var(--tdek-nav-color, inherit)));
}

/* Item marker: underline / overline / background — shown on hover and on the current item */
.tdek-nav--pointer-underline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after,
.tdek-nav--pointer-overline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after,
.tdek-nav--pointer-background .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	background: var(--tdek-nav-pointer, currentColor);
	transition: opacity .2s;
}

.tdek-nav--pointer-underline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after {
	bottom: 0;
	height: var(--tdek-nav-pointer-width, 2px);
}

.tdek-nav--pointer-overline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after {
	top: 0;
	height: var(--tdek-nav-pointer-width, 2px);
}

.tdek-nav--pointer-background .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link::after {
	top: 0;
	bottom: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--tdek-nav-pointer, rgba(127, 127, 127, .14));
}

.tdek-nav__menu > .tdek-nav__item > .tdek-nav__link:hover::after,
.tdek-nav__menu > .tdek-nav__item > .tdek-nav__link.is-active::after {
	opacity: 1;
}

.tdek-nav--pointer-underline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link.is-active::after,
.tdek-nav--pointer-overline .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link.is-active::after {
	background: var(--tdek-nav-pointer-active, var(--tdek-nav-pointer, currentColor));
}

.tdek-nav--pointer-background .tdek-nav__menu > .tdek-nav__item > .tdek-nav__link.is-active::after {
	background: var(--tdek-nav-pointer-active, var(--tdek-nav-pointer, rgba(127, 127, 127, .14)));
}

/* Indicator icon inside links (desktop) */
.tdek-nav__indicator {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: var(--tdek-nav-indicator-size, 10px);
}

.tdek-nav__indicator svg {
	width: var(--tdek-nav-indicator-size, 10px);
	height: auto;
}

.tdek-nav__sub .tdek-nav__indicator {
	margin-left: auto;
	transform: rotate(-90deg);
}

/* Submenu (desktop): opens on hover / focus within / button; Esc adds .is-dismissed to close it even while hovered/focused */
.tdek-nav__sub {
	position: absolute;
	top: calc(100% + var(--tdek-nav-sub-offset, 0px));
	left: 0;
	z-index: 100;
	display: none;
	min-width: 220px;
	padding: 8px 0;
	background: var(--tdek-nav-sub-bg, #fff);
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .3);
}

.tdek-nav__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--tdek-nav-sub-offset, 0px);
}

.tdek-nav__sub .tdek-nav__sub,
.tdek-nav--vertical .tdek-nav__sub {
	top: 0;
	left: 100%;
}

.tdek-nav__sub .tdek-nav__sub::before,
.tdek-nav--vertical .tdek-nav__sub::before {
	content: none;
}

.tdek-nav__item:hover > .tdek-nav__sub,
.tdek-nav__item:focus-within > .tdek-nav__sub,
.tdek-nav__item.is-open > .tdek-nav__sub {
	display: block;
}

.tdek-nav__item.is-dismissed > .tdek-nav__sub {
	display: none;
}

.tdek-nav__sub .tdek-nav__link {
	padding: 10px 18px;
	color: var(--tdek-nav-sub-color, #1f2124);
	background: transparent;
}

.tdek-nav__sub .tdek-nav__link:hover,
.tdek-nav__sub .tdek-nav__item:focus-within > .tdek-nav__link {
	color: var(--tdek-nav-sub-color-hover, var(--tdek-nav-sub-color, #1f2124));
	background: var(--tdek-nav-sub-bg-hover, rgba(127, 127, 127, .08));
}

.tdek-nav__sub .tdek-nav__link.is-active {
	color: var(--tdek-nav-sub-color-active, var(--tdek-nav-color-active, var(--tdek-nav-sub-color, #1f2124)));
	background: var(--tdek-nav-sub-bg-active, transparent);
}

/*
 * Mega menu: the top-level item's Elementor template panel, opens like a submenu. JS sets left/width per width mode
 * (--container / --full: per container / viewport; --content / --custom: per CSS + alignment) and clamps it inside the viewport.
 * Burger mode: JS adds .is-stacked (burger button visible) → the panel sits inside the dropdown, toggled by a button like a submenu.
 */
.tdek-nav__mega {
	position: absolute;
	top: calc(100% + var(--tdek-nav-mega-offset, 0px));
	left: 0;
	z-index: 100;
	display: none;
	box-sizing: border-box;
	width: max-content;
	max-width: 100vw;
	color: var(--tdek-nav-sub-color, #1f2124);
	background: #fff;
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .3);
}

.tdek-nav__mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--tdek-nav-mega-offset, 0px);
}

.tdek-nav__mega--align-center {
	left: 50%;
	transform: translateX(-50%);
}

.tdek-nav__mega--align-right {
	left: auto;
	right: 0;
}

.tdek-nav--vertical .tdek-nav__mega {
	top: 0;
	left: 100%;
	right: auto;
	transform: none;
}

.tdek-nav--vertical .tdek-nav__mega::before {
	content: none;
}

.tdek-nav__item:hover > .tdek-nav__mega,
.tdek-nav__item:focus-within > .tdek-nav__mega,
.tdek-nav__item.is-open > .tdek-nav__mega {
	display: block;
}

.tdek-nav__item.is-dismissed > .tdek-nav__mega {
	display: none;
}

/* (0,5,0): beats the mega control `{{WRAPPER}} .tdek-nav__mega` (0,4,0, post CSS loaded later) — custom width does not overflow on mobile */
.tdek-nav .tdek-nav__menu > .tdek-nav__item > .tdek-nav__mega.is-stacked {
	position: static;
	display: none;
	flex-basis: 100%;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	transform: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.tdek-nav .tdek-nav__menu > .tdek-nav__item.is-open > .tdek-nav__mega.is-stacked {
	display: block;
}

.tdek-nav__mega.is-stacked::before {
	content: none;
}

/* Nav Menu (Kit) nested in a panel: the outer menu's burger CSS (descendant selectors, up to (0,6,0)) turns the nested menu into
   an absolute dropdown covering the items below → keep it in the flow (0,7,0). */
.tdek-nav .tdek-nav__menu > .tdek-nav__item > .tdek-nav__mega.is-stacked .tdek-nav .tdek-nav__menu {
	position: static;
	display: flex;
	max-height: none;
	overflow: visible;
	background: none;
	box-shadow: none;
}

/* Buttons: burger + submenu toggle (submenu buttons only show in burger mode) */
.tdek-nav button.tdek-nav__burger,
.tdek-nav button.tdek-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.tdek-nav button.tdek-nav__burger {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 6px;
	font-size: 22px;
	color: var(--tdek-nav-burger-color, inherit);
	background: var(--tdek-nav-burger-bg, transparent);
}

.tdek-nav.is-open button.tdek-nav__burger {
	color: var(--tdek-nav-burger-color-open, var(--tdek-nav-burger-color, inherit));
	background: var(--tdek-nav-burger-bg-open, var(--tdek-nav-burger-bg, transparent));
}

.tdek-nav__burger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tdek-nav__burger-icon svg {
	width: 1em;
	height: 1em;
}

.tdek-nav__burger-icon--close,
.tdek-nav.is-open .tdek-nav__burger-icon--open {
	display: none;
}

.tdek-nav.is-open .tdek-nav__burger-icon--close {
	display: inline-flex;
}

.tdek-nav button.tdek-nav__toggle {
	align-self: stretch;
	padding: 0 18px;
	font-size: var(--tdek-nav-indicator-size, 12px);
}

.tdek-nav__toggle svg {
	width: var(--tdek-nav-indicator-size, 12px);
	height: auto;
	transition: transform .2s;
}

.tdek-nav__toggle[aria-expanded="true"] svg,
.tdek-nav__toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.tdek-nav__link:focus-visible,
.tdek-nav button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.tdek-nav__notice {
	padding: 10px 14px;
	border: 1px dashed rgba(127, 127, 127, .5);
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.tdek-nav__link,
	.tdek-nav__link::after,
	.tdek-nav__toggle svg {
		transition: none;
	}
}