.xtool-nav-menu {
	position: relative;
}

.xtool-nav-menu__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #1a1814;
	font-size: 22px;
	line-height: 1;
}

.xtool-nav-menu__icon-close {
	display: none;
}

.xtool-nav-menu.is-open .xtool-nav-menu__icon-open {
	display: none;
}

.xtool-nav-menu.is-open .xtool-nav-menu__icon-close {
	display: inline-flex;
}

.xtool-nav-menu__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 26px;
}

.xtool-nav-menu__list .menu-item {
	position: relative;
}

.xtool-nav-menu__list > .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: #1a1814;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 0;
}

/* Hover/Active Underline (opt-in, off by default — see
   enable_item_underline in class-nav-menu.php). The <a> itself (not just
   the parent .menu-item, which already has position:relative for its own
   dropdown-panel purposes) needs its own positioning context so ::after
   anchors to the link's own box, not the wider <li>. Only added when the
   feature is on, matching this widget's own "byte-for-byte unchanged
   unless opted in" convention for every other structural toggle. */
.xtool-nav-menu--underline .xtool-nav-menu__list > .menu-item > a {
	position: relative;
}

.xtool-nav-menu--underline .xtool-nav-menu__list > .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background-color: #C89B3C;
	pointer-events: none;
	/* Hidden by default regardless of which Reveal Style is chosen below —
	   this is what makes "Instant (No Animation)" still only show on
	   hover/active instead of being permanently visible (which it would
	   be if this base rule left opacity/transform at their normal CSS
	   initial values — fully visible — with no animation-specific rule
	   ever setting a hidden resting state for it). */
	opacity: 0;
}

/* Reveal styles — each ADDS its own resting transform/transition on top
   of the opacity:0 base above; item_underline_animation only ever picks
   ONE of these four modifier classes, so there's no risk of two
   competing transforms on the same property (see the codebase's own
   documented "two controls, one CSS property" gotcha). */
.xtool-nav-menu--underline-anim-grow-center .xtool-nav-menu__list > .menu-item > a::after {
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.xtool-nav-menu--underline-anim-grow-left .xtool-nav-menu__list > .menu-item > a::after {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.xtool-nav-menu--underline-anim-fade .xtool-nav-menu__list > .menu-item > a::after {
	transition: opacity 0.25s ease;
}

/* "none" (instant) intentionally adds no transition/resting-transform of
   its own — the opacity:0 base above is already the correct hidden
   state, and the trigger rule below reveals it with no easing at all. */

/* Trigger rules — which state(s) reveal the underline. Each animation
   style's own "revealed" value (scaleX(1) and/or opacity:1) is applied
   identically regardless of trigger, only the SELECTOR (hover vs.
   current-menu-item vs. both) differs per xtool-nav-menu--underline-{trigger}
   modifier class. */
.xtool-nav-menu--underline-hover_active .xtool-nav-menu__list > .menu-item > a:hover::after,
.xtool-nav-menu--underline-hover_active .xtool-nav-menu__list > .menu-item.current-menu-item > a::after,
.xtool-nav-menu--underline-hover .xtool-nav-menu__list > .menu-item > a:hover::after,
.xtool-nav-menu--underline-active .xtool-nav-menu__list > .menu-item.current-menu-item > a::after {
	transform: scaleX(1);
	opacity: 1;
}

/* Text Swap on Hover (opt-in, off by default — see enable_link_hover_swap
   in class-nav-menu.php) — same mechanism as the Fullscreen Menu widget's
   own hover-swap effect: the label is rendered twice, stacked, the
   duplicate copy pre-positioned one line below and hidden by the
   overflow:hidden wrapper, then both slide up together on hover so the
   real label exits upward while its duplicate enters from below. Only
   ever present in the DOM when the switch is on (render() doesn't wrap
   the title at all otherwise), so no separate CSS off-state is needed the
   way Fullscreen Menu needs .xtool-fsm--no-hover-swap (that widget
   defaults this effect ON). */
.xtool-nav-menu__link-texts {
	position: relative;
	display: block;
	overflow: hidden;
	height: 1.3em;
}

.xtool-nav-menu__link-text {
	display: block;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.xtool-nav-menu__link-text:last-child {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(100%);
}

.xtool-nav-menu__list > .menu-item > a:hover .xtool-nav-menu__link-text:first-child {
	transform: translateY(-100%);
}

.xtool-nav-menu__list > .menu-item > a:hover .xtool-nav-menu__link-text:last-child {
	transform: translateY(0);
}

.xtool-nav-menu__list:not(.xtool-nav-menu__list--no-arrow) .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
	margin-top: -3px;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.xtool-nav-menu__list .menu-item-has-children.is-open > a::after {
	transform: rotate(-135deg);
	margin-top: 3px;
}

/* Dropdown submenus — desktop */
.xtool-nav-menu__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	min-width: 200px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	pointer-events: none;
}

.xtool-nav-menu__list .menu-item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.xtool-nav-menu__list .sub-menu .sub-menu {
	top: -8px;
	left: 100%;
}

.xtool-nav-menu__list .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 18px;
	color: #4a4742;
	text-decoration: none;
	white-space: nowrap;
	font-size: 13.5px;
}

.xtool-nav-menu__list .sub-menu a:hover {
	color: #1a1814;
}

.xtool-nav-menu__item-icon {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 11px;
	opacity: 0.55;
}

.xtool-nav-menu__item-icon svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* Mobile */
.xtool-nav-menu.is-mobile .xtool-nav-menu__toggle {
	display: inline-flex;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 300;
	background: #fff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	max-height: 80vh;
	overflow-y: auto;
}

.xtool-nav-menu.is-mobile.is-open .xtool-nav-menu__panel {
	display: block;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list .menu-item {
	border-bottom: 1px solid #f2ede7;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list > .menu-item > a {
	padding: 14px 20px;
	width: 100%;
	box-sizing: border-box;
	justify-content: space-between;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	box-shadow: none;
	border-radius: 0;
	background: #faf9f7;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	transition: max-height 0.25s ease;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list .menu-item.is-open > .sub-menu {
	max-height: 1000px;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list .sub-menu a {
	padding: 12px 20px 12px 36px;
}

.xtool-nav-menu.is-mobile .xtool-nav-menu__list .sub-menu .sub-menu a {
	padding-left: 52px;
}

/* ─── Vertical Layout ────────────────────────────────────────────────── */
/* Always a plain vertical list, at every screen size — nav-menu.js never
   adds .is-mobile for this layout, so none of the mobile toggle/panel
   rules above ever apply here; the toggle button is hidden outright since
   it would otherwise sit unused in the DOM. */
.xtool-nav-menu--layout-vertical .xtool-nav-menu__toggle {
	display: none;
}

.xtool-nav-menu--layout-vertical .xtool-nav-menu__panel {
	position: static;
	max-height: none;
	overflow: visible;
}

.xtool-nav-menu--layout-vertical .xtool-nav-menu__list {
	flex-direction: column;
	align-items: flex-start;
}

.xtool-nav-menu--layout-vertical .xtool-nav-menu__list > .menu-item {
	width: 100%;
}

.xtool-nav-menu--layout-vertical .xtool-nav-menu__list > .menu-item > a {
	width: 100%;
}

/* Submenus flyout to the right instead of dropping below (default vertical
   submenu style), same convention already used for nested subs at any
   depth (.sub-menu .sub-menu below). */
.xtool-nav-menu--layout-vertical.xtool-nav-menu--vsub-flyout .xtool-nav-menu__list > .menu-item > .sub-menu {
	top: 0;
	left: 100%;
}

/* Expand Below Parent — an always-in-flow accordion instead of a flyout
   panel, same max-height/overflow toggle idiom already used for the
   mobile dropdown style above. Applies at every nesting depth (not just
   the top level) via the plain .sub-menu selector, so a sub-submenu
   expands under its own parent row too rather than suddenly flying out
   once you're more than one level deep. */
.xtool-nav-menu--layout-vertical.xtool-nav-menu--vsub-inline .xtool-nav-menu__list .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	box-shadow: none;
	border-radius: 0;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	transition: max-height 0.25s ease;
}

.xtool-nav-menu--layout-vertical.xtool-nav-menu--vsub-inline .xtool-nav-menu__list .menu-item.is-open > .sub-menu {
	max-height: 1000px;
	padding: 4px 0 8px;
}

.xtool-nav-menu--layout-vertical.xtool-nav-menu--vsub-inline .xtool-nav-menu__list .sub-menu a {
	padding-left: 20px;
}

.xtool-nav-menu--layout-vertical.xtool-nav-menu--vsub-inline .xtool-nav-menu__list .sub-menu .sub-menu a {
	padding-left: 36px;
}

/* Fullscreen mobile overlay variant */
.xtool-nav-menu.is-mobile.xtool-nav-menu--fullscreen .xtool-nav-menu__panel {
	position: fixed;
	inset: 0;
	top: 0;
	max-height: none;
	height: 100vh;
	display: none;
	align-items: center;
	justify-content: center;
}

.xtool-nav-menu.is-mobile.xtool-nav-menu--fullscreen.is-open .xtool-nav-menu__panel {
	display: flex;
}

.xtool-nav-menu.is-mobile.xtool-nav-menu--fullscreen .xtool-nav-menu__list {
	text-align: center;
	max-height: 90vh;
	overflow-y: auto;
}