/**
 * Gili Studio – WordPress menu widget.
 *
 * Every value is a CSS custom property so the Elementor Style tab can drive it.
 */

.gili-nav {
	--gili-nav-color: #16183F;
	--gili-nav-color-hover: #2B35D6;
	--gili-nav-color-active: #2B35D6;
	--gili-nav-bg: transparent;
	--gili-nav-bg-hover: transparent;
	--gili-nav-bg-active: transparent;

	--gili-nav-pointer: #F5459B;
	--gili-nav-pointer-active: #2B35D6;
	--gili-nav-pointer-size: 2px;
	--gili-nav-pointer-offset: 0px;

	--gili-nav-gap: 8px;
	--gili-nav-item-padding: 10px 14px;
	--gili-nav-radius: 0px;
	--gili-nav-transition: 300ms cubic-bezier(0.2, 0.8, 0.2, 1);

	--gili-nav-divider-color: transparent;
	--gili-nav-divider-width: 1px;
	--gili-nav-divider-height: 60%;

	--gili-nav-sub-bg: #FFFFFF;
	--gili-nav-sub-color: #16183F;
	--gili-nav-sub-color-hover: #2B35D6;
	--gili-nav-sub-bg-hover: rgba(43, 53, 214, 0.06);
	--gili-nav-sub-width: 220px;
	--gili-nav-sub-offset: 8px;
	--gili-nav-sub-radius: 0px;
	--gili-nav-sub-padding: 8px 0;
	--gili-nav-sub-item-padding: 10px 18px;
	--gili-nav-sub-shadow: 0 18px 40px rgba(22, 24, 63, 0.12);
	--gili-nav-sub-border-color: rgba(22, 24, 63, 0.12);
	--gili-nav-sub-border-width: 1px;

	--gili-nav-toggle-color: #16183F;
	--gili-nav-toggle-color-hover: #2B35D6;
	--gili-nav-toggle-bg: transparent;
	--gili-nav-toggle-bg-hover: transparent;
	--gili-nav-toggle-border-color: rgba(22, 24, 63, 0.25);
	--gili-nav-toggle-border-width: 1px;
	--gili-nav-toggle-radius: 0px;
	--gili-nav-toggle-padding: 10px 14px;
	--gili-nav-toggle-size: 20px;

	--gili-nav-panel-bg: #FFFFFF;
	--gili-nav-panel-padding: 12px;

	position: relative;
	font-family: "Space Grotesk", "Heebo", system-ui, -apple-system, sans-serif;
}

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

/* ---------- lists ---------- */
.gili-nav__list,
.gili-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gili-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gili-nav-gap);
	justify-content: var(--gili-nav-align, flex-start);
}

.gili-nav--layout-vertical .gili-nav__list {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.gili-nav__item {
	position: relative;
	margin: 0;
}

/* ---------- item row (link + accordion toggle) ---------- */
.gili-nav__row {
	position: relative;
	display: flex;
	align-items: center;
}

.gili-nav.is-collapsed .gili-nav__row > .gili-nav__link {
	flex: 1 1 auto;
}

/* ---------- links ---------- */
.gili-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: var(--gili-nav-item-padding);
	border-radius: var(--gili-nav-radius);
	color: var(--gili-nav-color);
	background: var(--gili-nav-bg);
	text-decoration: none;
	line-height: 1.3;
	transition: color var(--gili-nav-transition), background-color var(--gili-nav-transition);
}

.gili-nav__link:hover,
.gili-nav__link:focus-visible {
	color: var(--gili-nav-color-hover);
	background: var(--gili-nav-bg-hover);
}

.gili-nav__item--current > .gili-nav__row > .gili-nav__link,
.gili-nav__item--active > .gili-nav__row > .gili-nav__link {
	color: var(--gili-nav-color-active);
	background: var(--gili-nav-bg-active);
}

.gili-nav__link:focus-visible {
	outline: 2px solid var(--gili-nav-color-hover);
	outline-offset: 2px;
}

.gili-nav__arrow {
	display: inline-flex;
	width: 0.7em;
	height: 0.7em;
	flex: none;
	transition: transform var(--gili-nav-transition);
}

.gili-nav__arrow svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------- dividers between top-level items ---------- */
.gili-nav--layout-horizontal .gili-nav__list > .gili-nav__item + .gili-nav__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc( var(--gili-nav-gap) / -2 );
	top: 50%;
	transform: translateY(-50%);
	width: var(--gili-nav-divider-width);
	height: var(--gili-nav-divider-height);
	background: var(--gili-nav-divider-color);
}

.gili-nav--layout-vertical .gili-nav__list > .gili-nav__item + .gili-nav__item::before {
	content: "";
	position: absolute;
	top: calc( var(--gili-nav-gap) / -2 );
	inset-inline-start: 0;
	width: 100%;
	height: var(--gili-nav-divider-width);
	background: var(--gili-nav-divider-color);
}

/* ---------- pointers ---------- */
.gili-nav--pointer-underline .gili-nav__link::after,
.gili-nav--pointer-overline .gili-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: var(--gili-nav-pointer-inset, 0);
	height: var(--gili-nav-pointer-size);
	background: var(--gili-nav-pointer);
	transform: scaleX(0);
	transform-origin: var(--gili-nav-pointer-origin, center);
	transition: transform var(--gili-nav-transition);
}

.gili-nav--pointer-underline .gili-nav__link::after {
	bottom: var(--gili-nav-pointer-offset);
}

.gili-nav--pointer-overline .gili-nav__link::after {
	top: var(--gili-nav-pointer-offset);
}

.gili-nav--pointer-underline .gili-nav__link:hover::after,
.gili-nav--pointer-underline .gili-nav__link:focus-visible::after,
.gili-nav--pointer-overline .gili-nav__link:hover::after,
.gili-nav--pointer-overline .gili-nav__link:focus-visible::after,
.gili-nav--pointer-underline .gili-nav__item--current > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-underline .gili-nav__item--active > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-overline .gili-nav__item--current > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-overline .gili-nav__item--active > .gili-nav__row > .gili-nav__link::after {
	transform: scaleX(1);
}

.gili-nav--pointer-underline .gili-nav__item--current > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-underline .gili-nav__item--active > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-overline .gili-nav__item--current > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-overline .gili-nav__item--active > .gili-nav__row > .gili-nav__link::after {
	background: var(--gili-nav-pointer-active);
}

/* Offset bar, in the studio's button style. */
.gili-nav--pointer-offset .gili-nav__link::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	inset-inline-end: -7px;
	top: 100%;
	height: var(--gili-nav-pointer-size);
	background: var(--gili-nav-pointer);
	opacity: 0;
	transition: opacity var(--gili-nav-transition);
}

.gili-nav--pointer-offset .gili-nav__link:hover::after,
.gili-nav--pointer-offset .gili-nav__link:focus-visible::after,
.gili-nav--pointer-offset .gili-nav__item--current > .gili-nav__row > .gili-nav__link::after,
.gili-nav--pointer-offset .gili-nav__item--active > .gili-nav__row > .gili-nav__link::after {
	opacity: 1;
}

/* Frame. */
.gili-nav--pointer-frame .gili-nav__link {
	border: var(--gili-nav-pointer-size) solid transparent;
}

.gili-nav--pointer-frame .gili-nav__link:hover,
.gili-nav--pointer-frame .gili-nav__link:focus-visible {
	border-color: var(--gili-nav-pointer);
}

.gili-nav--pointer-frame .gili-nav__item--current > .gili-nav__row > .gili-nav__link,
.gili-nav--pointer-frame .gili-nav__item--active > .gili-nav__row > .gili-nav__link {
	border-color: var(--gili-nav-pointer-active);
}

/* ---------- submenus (desktop) ---------- */
.gili-nav__submenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 30;
	min-width: var(--gili-nav-sub-width);
	margin-top: var(--gili-nav-sub-offset);
	padding: var(--gili-nav-sub-padding);
	background: var(--gili-nav-sub-bg);
	border: var(--gili-nav-sub-border-width) solid var(--gili-nav-sub-border-color);
	border-radius: var(--gili-nav-sub-radius);
	box-shadow: var(--gili-nav-sub-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--gili-nav-transition), transform var(--gili-nav-transition), visibility var(--gili-nav-transition);
}

/* A third level opens to the side. */
.gili-nav__submenu .gili-nav__submenu {
	top: 0;
	inset-inline-start: 100%;
	margin: 0 0 0 var(--gili-nav-sub-offset);
}

.gili-nav--layout-vertical > .gili-nav__panel > .gili-nav__list > .gili-nav__item > .gili-nav__submenu {
	top: 0;
	inset-inline-start: 100%;
	margin: 0 0 0 var(--gili-nav-sub-offset);
}

.gili-nav__item:hover > .gili-nav__submenu,
.gili-nav__item:focus-within > .gili-nav__submenu,
.gili-nav__item.is-open > .gili-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gili-nav__item.is-open > .gili-nav__row > .gili-nav__link .gili-nav__arrow {
	transform: rotate(180deg);
}

.gili-nav__submenu .gili-nav__link {
	padding: var(--gili-nav-sub-item-padding);
	color: var(--gili-nav-sub-color);
	border-radius: 0;
}

.gili-nav__submenu .gili-nav__link::after {
	display: none;
}

.gili-nav__submenu .gili-nav__link:hover,
.gili-nav__submenu .gili-nav__link:focus-visible,
.gili-nav__submenu .gili-nav__item--current > .gili-nav__row > .gili-nav__link,
.gili-nav__submenu .gili-nav__item--active > .gili-nav__row > .gili-nav__link {
	color: var(--gili-nav-sub-color-hover);
	background: var(--gili-nav-sub-bg-hover);
}

.gili-nav__submenu .gili-nav__item + .gili-nav__item::before {
	display: none;
}

/* ---------- accordion toggle inside the collapsed panel ---------- */
.gili-nav__submenu-toggle {
	display: none;
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	height: 100%;
	width: 44px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.gili-nav__submenu-toggle svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	transition: transform var(--gili-nav-transition);
}

.gili-nav__item.is-open > .gili-nav__row > .gili-nav__submenu-toggle svg {
	transform: rotate(180deg);
}

/* The burger, the accordion arrow and the overlay close are <button>s, and a
 * theme or Elementor's global kit styles every button on the site (gradient,
 * padding, radius). None of that belongs on a menu control, so it is reset
 * here — through the widget's own custom properties, so the Style tab keeps
 * full control. */
.gili-nav .gili-nav__toggle,
.gili-nav .gili-nav__submenu-toggle,
.gili-nav .gili-nav__close {
	margin: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: auto;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.gili-nav .gili-nav__toggle {
	padding: var(--gili-nav-toggle-padding) !important;
	border: var(--gili-nav-toggle-border-width) solid var(--gili-nav-toggle-border-color) !important;
	border-radius: var(--gili-nav-toggle-radius) !important;
	background-color: var(--gili-nav-toggle-bg) !important;
	color: var(--gili-nav-toggle-color) !important;
}

.gili-nav .gili-nav__toggle:hover,
.gili-nav .gili-nav__toggle:focus-visible {
	background-color: var(--gili-nav-toggle-bg-hover) !important;
	color: var(--gili-nav-toggle-color-hover) !important;
}

.gili-nav .gili-nav__submenu-toggle,
.gili-nav .gili-nav__close {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: inherit !important;
}

.gili-nav .gili-nav__close {
	color: var(--gili-nav-toggle-color) !important;
}

/* ---------- burger toggle ---------- */
.gili-nav__toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: var(--gili-nav-toggle-padding);
	border: var(--gili-nav-toggle-border-width) solid var(--gili-nav-toggle-border-color);
	border-radius: var(--gili-nav-toggle-radius);
	background: var(--gili-nav-toggle-bg);
	color: var(--gili-nav-toggle-color);
	font: inherit;
	cursor: pointer;
	transition: color var(--gili-nav-transition), background-color var(--gili-nav-transition), border-color var(--gili-nav-transition);
}

.gili-nav__toggle:hover,
.gili-nav__toggle:focus-visible {
	color: var(--gili-nav-toggle-color-hover);
	background: var(--gili-nav-toggle-bg-hover);
}

.gili-nav__toggle:focus-visible {
	outline: 2px solid var(--gili-nav-toggle-color-hover);
	outline-offset: 3px;
}

.gili-nav__burger {
	position: relative;
	display: block;
	width: var(--gili-nav-toggle-size);
	height: 2px;
	background: currentColor;
	transition: background-color var(--gili-nav-transition);
}

.gili-nav__burger::before,
.gili-nav__burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--gili-nav-transition), top var(--gili-nav-transition), bottom var(--gili-nav-transition);
}

.gili-nav__burger::before {
	bottom: 6px;
}

.gili-nav__burger::after {
	top: 6px;
}

.gili-nav__toggle[aria-expanded="true"] .gili-nav__burger {
	background: transparent;
}

.gili-nav__toggle[aria-expanded="true"] .gili-nav__burger::before {
	bottom: 0;
	transform: rotate(45deg);
}

.gili-nav__toggle[aria-expanded="true"] .gili-nav__burger::after {
	top: 0;
	transform: rotate(-45deg);
}

.gili-nav__toggle-label:empty {
	display: none;
}

/* ---------- collapsed (mobile) state ---------- */
.gili-nav.is-collapsed .gili-nav__toggle {
	display: inline-flex;
}

.gili-nav.is-collapsed .gili-nav__panel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 40;
	padding: var(--gili-nav-panel-padding);
	background: var(--gili-nav-panel-bg);
	border: var(--gili-nav-sub-border-width) solid var(--gili-nav-sub-border-color);
	border-radius: var(--gili-nav-sub-radius);
	box-shadow: var(--gili-nav-sub-shadow);
	display: none;
}

.gili-nav.is-collapsed.is-open > .gili-nav__panel {
	display: block;
}

.gili-nav.is-collapsed .gili-nav__list {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
}

.gili-nav.is-collapsed .gili-nav__item::before {
	display: none;
}

.gili-nav.is-collapsed .gili-nav__link::after {
	display: none;
}

.gili-nav.is-collapsed .gili-nav__item--has-children > .gili-nav__row > .gili-nav__link {
	padding-inline-end: 48px;
}

.gili-nav.is-collapsed .gili-nav__item--has-children .gili-nav__arrow {
	display: none;
}

.gili-nav.is-collapsed .gili-nav__submenu-toggle {
	display: flex;
}

.gili-nav.is-collapsed .gili-nav__submenu {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 16px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: none;
}

.gili-nav.is-collapsed .gili-nav__item.is-open > .gili-nav__submenu {
	display: block;
}

/* Full-screen overlay variant. */
.gili-nav--mobile-overlay.is-collapsed.is-open > .gili-nav__panel {
	position: fixed;
	inset: 0;
	top: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 0;
	border-radius: 0;
	overflow-y: auto;
	padding: 72px 24px 40px;
}

.gili-nav--mobile-overlay.is-collapsed.is-open .gili-nav__close {
	display: inline-flex;
}

.gili-nav__close {
	display: none;
	position: absolute;
	top: 18px;
	inset-inline-end: 18px;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--gili-nav-toggle-color);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
}

/* ---------- collapse breakpoints ----------
 * The script owns this: it reads data-collapse (never / tablet / mobile /
 * always, or a custom pixel width) and toggles .is-collapsed on the root, so
 * the burger and the panel can never disagree about which state they are in.
 */

/* ---------- editor / empty state ---------- */
.gili-nav__notice {
	padding: 16px 20px;
	border: 1px dashed rgba(22, 24, 63, 0.35);
	color: rgba(22, 24, 63, 0.75);
	font-size: 14px;
	line-height: 1.5;
	background: rgba(22, 24, 63, 0.03);
}

.gili-nav__notice a {
	color: #2B35D6;
}

@media (prefers-reduced-motion: reduce) {
	.gili-nav * {
		transition-duration: 0.01ms !important;
	}
}

/* Stop the page behind a full-screen menu from scrolling. */
html.gili-nav-locked,
html.gili-nav-locked body {
	overflow: hidden;
}