/**
 * ML Side navigation – widget styles.
 *
 * No media queries: every responsive value comes from Elementor's own
 * responsive controls, which write CSS custom properties per breakpoint.
 *
 * Layout: both items hold [title][icon] in the DOM. The next item is always
 * reversed to [icon][title], so in the Side by Side layout the two arrows end
 * up next to each other in the middle:  title [<]  [>] title.
 * In the Stacked layout the previous item is reversed as well, so both arrows
 * sit in front of their own title.
 *
 * Arrow position: with content-width items the midpoint between the two arrows
 * is W/2 + (prev width - next width) / 2, so the pair drifts towards the
 * shorter title. The "Centered" option gives each item an equal half of the
 * row (flex: 1 1 0) and pushes its content towards the middle, which puts the
 * arrows at the true centre no matter how long the titles are.
 */

.mlnav {
	/* Layout (set by the Layout and Alignment controls) */
	--mlnav-dir: row;
	--mlnav-prev-dir: row;
	--mlnav-justify: center;
	--mlnav-cross: center;
	--mlnav-items-align: center;

	/* Arrow position – raw values from the Arrows control */
	--mlnav-ap-flex: 1 1 0;
	--mlnav-ap-justify: flex-end;
	--mlnav-ap-prev-text: end;
	--mlnav-ap-next-text: start;

	/* Values actually used – the Layout control decides whether the Arrows
	   values apply (Side by Side) or are neutralised (Stacked) */
	--mlnav-item-flex: var(--mlnav-ap-flex);
	--mlnav-item-justify: var(--mlnav-ap-justify);
	--mlnav-prev-text: var(--mlnav-ap-prev-text);
	--mlnav-next-text: var(--mlnav-ap-next-text);

	--mlnav-gap: 40px;
	--mlnav-icon-gap: 34px;

	/* Titles */
	--mlnav-title-color: #3f8220;
	--mlnav-title-color-hover: #2c5c16;

	/* Icons */
	--mlnav-icon-color: #666666;
	--mlnav-icon-color-hover: #3f8220;
	--mlnav-icon-size: 22px;
	--mlnav-icon-shift: 0px;

	/* Note */
	--mlnav-note-color: #333333;
	--mlnav-note-color-hover: #3f8220;

	--mlnav-transition: 200ms;

	display: block;
	box-sizing: border-box;
	width: 100%;
}

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

/* ==========================================================================
   ROW
   ========================================================================== */

.mlnav__row {
	display: flex;
	flex-direction: var(--mlnav-dir);
	flex-wrap: wrap;
	justify-content: var(--mlnav-justify);
	align-items: var(--mlnav-items-align);
	gap: var(--mlnav-gap);
}

/* ==========================================================================
   ITEMS
   ========================================================================== */

.mlnav .mlnav__item {
	display: inline-flex;
	align-items: center;
	justify-content: var(--mlnav-item-justify);
	flex: var(--mlnav-item-flex);
	gap: var(--mlnav-icon-gap);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* A single item (only Previous or only Next shown) always keeps its content
   width, so the Alignment control still decides where it sits. Centering two
   arrows is meaningless when there is only one. */
.mlnav .mlnav__item:only-child {
	flex: 0 1 auto;
	justify-content: flex-start;
}

/* Previous: title then icon, so its arrow sits on the inside.
   Stacked flips it so the arrow leads the title instead. */
.mlnav .mlnav__item--prev {
	flex-direction: var(--mlnav-prev-dir);
}

/* Next: icon then title, so its arrow also sits on the inside. */
.mlnav .mlnav__item--next {
	flex-direction: row-reverse;
}

.mlnav .mlnav__title {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--mlnav-title-color);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
	transition: color var(--mlnav-transition) ease;
}

.mlnav .mlnav__item:hover .mlnav__title,
.mlnav .mlnav__item:focus-visible .mlnav__title {
	color: var(--mlnav-title-color-hover);
}

/* When a title wraps, its lines stay on the side the arrow is on. */
.mlnav .mlnav__item--prev .mlnav__title {
	text-align: var(--mlnav-prev-text);
}

.mlnav .mlnav__item--next .mlnav__title {
	text-align: var(--mlnav-next-text);
}

.mlnav .mlnav__item:only-child .mlnav__title {
	text-align: start;
}

/* ==========================================================================
   ICONS
   ========================================================================== */

.mlnav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--mlnav-icon-color);
	font-size: var(--mlnav-icon-size);
	line-height: 1;
	transition: color var(--mlnav-transition) ease, transform var(--mlnav-transition) ease;
}

.mlnav__icon i {
	display: block;
	line-height: 1;
}

.mlnav__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mlnav .mlnav__item:hover .mlnav__icon,
.mlnav .mlnav__item:focus-visible .mlnav__icon {
	color: var(--mlnav-icon-color-hover);
}

/* Each arrow slides in the direction it points */
.mlnav .mlnav__item--prev:hover .mlnav__icon,
.mlnav .mlnav__item--prev:focus-visible .mlnav__icon {
	transform: translateX(calc(-1 * var(--mlnav-icon-shift)));
}

.mlnav .mlnav__item--next:hover .mlnav__icon,
.mlnav .mlnav__item--next:focus-visible .mlnav__icon {
	transform: translateX(var(--mlnav-icon-shift));
}

/* ==========================================================================
   NOTE
   ========================================================================== */

.mlnav__note-wrap {
	margin-top: 26px;
	text-align: center;
}

.mlnav .mlnav__note {
	display: inline-block;
	color: var(--mlnav-note-color);
	font-size: 17px;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--mlnav-transition) ease;
}

.mlnav .mlnav__note--link:hover,
.mlnav .mlnav__note--link:focus-visible {
	color: var(--mlnav-note-color-hover);
}

.mlnav .mlnav__note--underline-underline {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.mlnav .mlnav__note--underline-hover:hover,
.mlnav .mlnav__note--underline-hover:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   FOCUS
   ========================================================================== */

.mlnav .mlnav__item:focus-visible,
.mlnav .mlnav__note--link:focus-visible {
	outline: 2px solid var(--mlnav-title-color);
	outline-offset: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
	.mlnav .mlnav__title,
	.mlnav__icon,
	.mlnav .mlnav__note {
		transition: none;
	}

	.mlnav .mlnav__item:hover .mlnav__icon,
	.mlnav .mlnav__item:focus-visible .mlnav__icon {
		transform: none;
	}
}