/**
 * HeaderFooterFlow for Elementor — Nav Menu widget.
 *
 * Layout only. Every colour, size and spacing value is left to the widget's
 * Style tab so nothing here has to be overridden.
 */

.hfflow-nav .hfflow-menu,
.hfflow-nav .hfflow-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hfflow-nav .hfflow-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hfflow-nav .hfflow-menu li {
	position: relative;
}

.hfflow-nav .hfflow-menu a {
	display: block;
	text-decoration: none;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Vertical layout. */
.hfflow-menu-layout-vertical .hfflow-menu {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* Sub-menus. */
.hfflow-nav .hfflow-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 200px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.hfflow-nav .hfflow-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.hfflow-nav .hfflow-menu li:hover > .sub-menu,
.hfflow-nav .hfflow-menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

/* In a vertical menu the sub-menu stacks underneath instead of flying out. */
.hfflow-menu-layout-vertical .hfflow-menu .sub-menu,
.hfflow-menu-layout-vertical .hfflow-menu .sub-menu .sub-menu {
	position: static;
	min-width: 0;
	visibility: visible;
	opacity: 1;
	padding-left: 15px;
}

/* Menu items that open a sub-menu. */
.hfflow-nav .hfflow-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hfflow-nav .hfflow-menu .menu-item-has-children > a::after {
	content: "";
	display: none;
	width: 0.4em;
	height: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
	flex: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.hfflow-nav .hfflow-menu a,
	.hfflow-nav .hfflow-menu .sub-menu {
		transition: none;
	}
}