/* Navigation Menu widget. Controls set the --archt-* variables on the widget wrapper. */

.archt-nav-menu__align-center .archt-menu,
.archt-nav-menu__align-justify .archt-menu {
	--archt-justify: center;
}

.archt-nav-menu__align-right .archt-menu {
	--archt-justify: flex-end;
}

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

.archt-menu__item {
	--archt-px: var(--archt-item-px, 15px);
	--archt-py: var(--archt-item-py, 15px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: var(--archt-justify, flex-start);
}

.archt-menu__sub .archt-menu__item {
	--archt-px: var(--archt-sub-px, 15px);
	--archt-py: var(--archt-sub-py, 15px);
}

.archt-menu .archt-menu__link {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: var(--archt-py) var(--archt-px);
	text-decoration: none;
	box-shadow: none;
}

.archt-menu__link:has(+ .archt-menu__toggle) {
	padding-inline-end: 0;
}

/* Reset theme button styles, hover and focus included. */
.archt-menu .archt-menu__toggle,
.archt-menu .archt-menu__toggle:hover,
.archt-menu .archt-menu__toggle:focus {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	align-self: stretch;
	width: auto;
	min-height: 0;
	margin: 0;
	margin-inline: var(--archt-icon-gap, 5px) 0;
	padding: 0;
	padding-inline: 0 var(--archt-px);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.archt-menu .archt-menu__toggle:focus:not(:focus-visible) {
	outline: 0;
}

.archt-menu__toggle svg {
	transition: transform 0.2s ease;
}

.archt-submenu-icon-left .archt-menu .archt-menu__toggle {
	order: -1;
	margin-inline: 0 var(--archt-icon-gap, 5px);
	padding-inline: var(--archt-px) 0;
}

.archt-submenu-icon-left .archt-menu__link:has(+ .archt-menu__toggle) {
	padding-inline: 0 var(--archt-px);
}

/* Expanded: an open submenu sits inside its item: the link and toggle carry the item background, so the gap is padding. */
.archt-menu[data-layout="expanded"] .archt-menu__toggle,
.archt-menu[data-layout="expanded"] .archt-menu__toggle:hover,
.archt-menu[data-layout="expanded"] .archt-menu__toggle:focus {
	margin-inline: 0;
	padding-inline: var(--archt-icon-gap, 5px) var(--archt-px);
}

.archt-submenu-icon-left .archt-menu[data-layout="expanded"] .archt-menu__toggle {
	margin-inline: 0;
	padding-inline: var(--archt-px) var(--archt-icon-gap, 5px);
}

/* Horizontal and Vertical: dropdowns open on hover where the device can hover, and on click. */
.archt-menu[data-layout="horizontal"] .archt-menu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--archt-justify, flex-start);
	column-gap: var(--archt-gap, 0px);
	row-gap: var(--archt-row-gap, 0px);
}

.archt-nav-menu__align-justify .archt-menu[data-layout="horizontal"] .archt-menu__list > li {
	flex-grow: 1;
}

.archt-menu:not([data-layout="expanded"]) .archt-menu__sub {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 9999;
	width: var(--archt-sub-width, 220px);
	display: none;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
	transition: opacity 0.3s, transform 0.3s, display 0.3s;
	transition-behavior: allow-discrete;
}

.archt-menu:not([data-layout="expanded"]) .archt-menu__sub .archt-menu__item {
	justify-content: flex-start;
}

.archt-menu:not([data-layout="expanded"]) .archt-menu__list > li > .archt-menu__sub {
	margin-top: var(--archt-sub-offset, 0px);
}

/* Keeps the hover alive across the Top Distance gap. */
.archt-menu:not([data-layout="expanded"]) .archt-menu__list > li > .archt-menu__sub::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--archt-sub-offset, 0px);
}

.archt-menu[data-layout="horizontal"] .archt-menu__sub .archt-menu__sub {
	top: 0;
	inset-inline-start: 100%;
}

.archt-menu[data-layout="horizontal"] .archt-menu__list > li > .archt-menu__sub.is-flipped {
	inset-inline: auto 0;
}

.archt-menu[data-layout="horizontal"] .archt-menu__sub .archt-menu__sub.is-flipped {
	inset-inline: auto 100%;
}

.archt-submenu-animation-slide_up .archt-menu[data-layout="horizontal"] .archt-menu__sub {
	transform: translateY(20%);
}

.archt-submenu-animation-slide_down .archt-menu[data-layout="horizontal"] .archt-menu__sub {
	transform: translateY(-20%);
}

.archt-menu:not([data-layout="expanded"]) .is-open > .archt-menu__sub {
	display: block;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

@media (hover: hover) {
	.archt-menu:not([data-layout="expanded"]) .archt-has-submenu:hover > .archt-menu__sub {
		display: block;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

/* Closed dropdowns are not rendered, so they add no scroll space; these are the states they fade in from. */
@starting-style {
	.archt-menu:not([data-layout="expanded"]) .is-open > .archt-menu__sub,
	.archt-menu:not([data-layout="expanded"]) .archt-has-submenu:hover > .archt-menu__sub {
		opacity: 0;
	}

	.archt-submenu-animation-slide_up .archt-menu[data-layout="horizontal"] .is-open > .archt-menu__sub,
	.archt-submenu-animation-slide_up .archt-menu[data-layout="horizontal"] .archt-has-submenu:hover > .archt-menu__sub {
		transform: translateY(20%);
	}

	.archt-submenu-animation-slide_down .archt-menu[data-layout="horizontal"] .is-open > .archt-menu__sub,
	.archt-submenu-animation-slide_down .archt-menu[data-layout="horizontal"] .archt-has-submenu:hover > .archt-menu__sub {
		transform: translateY(-20%);
	}
}

/* Vertical: the dropdown overlays the items below, at the width of its item. */
.archt-menu[data-layout="vertical"] .archt-menu__sub,
.archt-menu[data-layout="vertical"] .archt-menu__sub .archt-menu__sub {
	top: 100%;
	inset-inline-start: 0;
	width: 100%;
	box-shadow: none;
}

.archt-menu:not([data-layout="horizontal"]) .archt-menu__list {
	display: flex;
	flex-direction: column;
	row-gap: var(--archt-gap, 0px);
}

.archt-nav-menu__align-justify .archt-menu:not([data-layout="horizontal"]) .archt-menu__link {
	flex-grow: 1;
}

/* Expanded: submenus open in the flow, on click only. The grid keeps the arrow beside the label, the submenu spans below;
   a flexible column takes the free space, so an open submenu never widens the label column. */
.archt-menu[data-layout="expanded"] .archt-menu__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	justify-items: start;
}

.archt-nav-menu__align-right .archt-menu[data-layout="expanded"] .archt-menu__item,
.archt-submenu-icon-right.archt-nav-menu__align-justify .archt-menu[data-layout="expanded"] .archt-menu__item {
	grid-template-columns: 1fr auto;
}

.archt-submenu-icon-right.archt-nav-menu__align-right .archt-menu[data-layout="expanded"] .archt-menu__link,
.archt-submenu-icon-left.archt-nav-menu__align-right .archt-menu[data-layout="expanded"] .archt-menu__toggle {
	justify-self: end;
}

.archt-submenu-icon-right.archt-nav-menu__align-justify .archt-menu[data-layout="expanded"] .archt-menu__link,
.archt-submenu-icon-left.archt-nav-menu__align-justify .archt-menu[data-layout="expanded"] .archt-menu__link {
	justify-self: stretch;
}

.archt-nav-menu__align-center .archt-menu[data-layout="expanded"] .archt-menu__item {
	grid-template-columns: 1fr auto auto 1fr;
}

.archt-nav-menu__align-center .archt-menu[data-layout="expanded"] .archt-menu__link,
.archt-submenu-icon-left.archt-nav-menu__align-center .archt-menu[data-layout="expanded"] .archt-menu__toggle {
	grid-column: 2;
}

.archt-nav-menu__align-center .archt-menu[data-layout="expanded"] .archt-menu__toggle,
.archt-submenu-icon-left.archt-nav-menu__align-center .archt-menu[data-layout="expanded"] .archt-menu__link {
	grid-column: 3;
}

/* Items without an arrow span the row, aligned as set. */
.archt-menu[data-layout="expanded"] .archt-menu__item:not(:has(> .archt-menu__toggle)) > .archt-menu__link,
.archt-menu[data-layout="expanded"][data-submenus="open"] .archt-menu__item > .archt-menu__link {
	grid-column: 1 / -1;
	justify-self: var(--archt-justify, start);
}

.archt-menu[data-layout="expanded"] .archt-menu__sub {
	display: none;
	grid-column: 1 / -1;
	justify-self: stretch;
}

.archt-menu[data-layout="expanded"] .archt-menu__sub .archt-menu__sub {
	padding-inline-start: 20px;
}

.archt-menu[data-layout="expanded"] .is-open > .archt-menu__sub,
.archt-menu[data-layout="expanded"][data-submenus="open"] .archt-menu__sub {
	display: block;
}

.archt-menu[data-layout="expanded"] .is-open > .archt-menu__toggle svg {
	transform: rotate(180deg);
}

.archt-menu[data-submenus="open"] .archt-menu__list .archt-menu__toggle {
	display: none;
}

.archt-menu[data-submenus="open"] .archt-menu__link:has(+ .archt-menu__toggle) {
	padding-inline: var(--archt-px);
}

/* Hover effects: ::before is the top line, ::after the bottom line or the second frame corner. */
.archt-menu[data-pointer] .archt-menu__list > li::before,
.archt-menu[data-pointer] .archt-menu__list > li::after {
	content: '';
	position: absolute;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
}

.archt-menu[data-pointer] .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu[data-pointer] .archt-menu__list > li:is(:hover, :focus-within)::after,
.archt-menu[data-pointer] .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::before,
.archt-menu[data-pointer] .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::after {
	opacity: 1;
}

.archt-menu[data-animation="none"] .archt-menu__list > li::before,
.archt-menu[data-animation="none"] .archt-menu__list > li::after {
	transition: none;
}

/* Lines. */
.archt-menu:is([data-pointer="underline"], [data-pointer="overline"], [data-pointer="double-line"]) .archt-menu__list > li::before,
.archt-menu:is([data-pointer="underline"], [data-pointer="overline"], [data-pointer="double-line"]) .archt-menu__list > li::after {
	inset-inline-start: 0;
	width: 100%;
	height: 3px;
	background-color: var(--archt-pointer-color, #55595c);
}

.archt-menu .archt-menu__list > li::before {
	top: 0;
}

.archt-menu .archt-menu__list > li::after {
	bottom: 0;
}

.archt-menu[data-pointer="underline"] .archt-menu__list > li::before,
.archt-menu[data-pointer="overline"] .archt-menu__list > li::after,
.archt-menu[data-pointer="framed"]:not([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li::after {
	display: none;
}

/* Resting states of the line animations, the shown state resets them. */
.archt-menu[data-animation="slide"] .archt-menu__list > li::before {
	inset-inline-start: -20px;
	width: 10px;
}

.archt-menu[data-animation="slide"] .archt-menu__list > li::after {
	inset-inline-start: calc(100% + 20px);
	width: 10px;
}

.archt-menu[data-animation="grow"]:not([data-pointer="framed"]) .archt-menu__list > li::before,
.archt-menu[data-animation="grow"]:not([data-pointer="framed"]) .archt-menu__list > li::after {
	transform: scaleX(0);
}

.archt-menu[data-animation="drop-in"] .archt-menu__list > li::before {
	top: -10px;
}

.archt-menu[data-animation="drop-in"] .archt-menu__list > li::after {
	bottom: -10px;
}

.archt-menu[data-animation="drop-out"] .archt-menu__list > li::before {
	top: 10px;
}

.archt-menu[data-animation="drop-out"] .archt-menu__list > li::after {
	bottom: 10px;
}

.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(:hover, :focus-within)::after,
.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::before,
.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::after {
	inset-inline-start: 0;
	width: 100%;
	transform: none;
}

.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::before {
	top: 0;
}

.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(:hover, :focus-within)::after,
.archt-menu:not([data-pointer="framed"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::after {
	bottom: 0;
}

/* Frame. */
.archt-menu[data-pointer="framed"] .archt-menu__list > li::before,
.archt-menu[data-pointer="framed"] .archt-menu__list > li::after {
	inset: 0;
	border: 3px solid var(--archt-pointer-color, #55595c);
}

.archt-menu[data-pointer="framed"][data-animation="grow"] .archt-menu__list > li::before {
	transform: scale(0.75);
	transition: opacity 0.2s, transform 0.4s;
}

.archt-menu[data-pointer="framed"][data-animation="shrink"] .archt-menu__list > li::before {
	transform: scale(1.25);
	transition: opacity 0.2s, transform 0.4s;
}

.archt-menu[data-pointer="framed"] .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu[data-pointer="framed"] .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::before {
	transform: none;
}

/* Draw and Corners: two corner pieces that grow to the full frame. */
.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li::before,
.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li::after {
	width: 3px;
	height: 3px;
}

.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li::after {
	inset: auto 0 0 auto;
}

.archt-menu[data-pointer="framed"][data-animation="draw"] .archt-menu__list > li::before {
	inset: auto auto 0 0;
	border-width: 0 0 3px 3px;
	transition: width 0.1s 0.2s, height 0.1s 0.3s, opacity 0.12s 0.22s;
}

.archt-menu[data-pointer="framed"][data-animation="draw"] .archt-menu__list > li::after {
	inset: 0 0 auto auto;
	border-width: 3px 3px 0 0;
	transition: width 0.1s, height 0.1s 0.1s, opacity 0.02s 0.18s;
}

.archt-menu[data-pointer="framed"][data-animation="corners"] .archt-menu__list > li::before {
	border-width: 3px 0 0 3px;
}

.archt-menu[data-pointer="framed"][data-animation="corners"] .archt-menu__list > li::after {
	border-width: 0 3px 3px 0;
}

.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li:is(:hover, :focus-within)::after,
.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::before,
.archt-menu[data-pointer="framed"]:is([data-animation="draw"], [data-animation="corners"]) .archt-menu__list > li:is(.current-menu-item, .current-menu-ancestor)::after {
	width: 100%;
	height: 100%;
}

.archt-menu[data-pointer="framed"][data-animation="draw"] .archt-menu__list > li:is(:hover, :focus-within)::before {
	transition: opacity 0.02s, height 0.1s, width 0.1s 0.1s;
}

.archt-menu[data-pointer="framed"][data-animation="draw"] .archt-menu__list > li:is(:hover, :focus-within)::after {
	transition: opacity 0.02s 0.2s, height 0.1s 0.2s, width 0.1s 0.3s;
}

.archt-menu[data-pointer="framed"][data-animation="corners"] .archt-menu__list > li:is(:hover, :focus-within)::before,
.archt-menu[data-pointer="framed"][data-animation="corners"] .archt-menu__list > li:is(:hover, :focus-within)::after {
	transition: opacity 0.002s, width 0.4s, height 0.4s;
}

.elementor-editor-active .archt-condition-yes {
	outline: 1px dashed #D97706 !important;
	outline-offset: -1px;
}