/* !important throughout — same theme/plugin generic-button-reset conflict
   already found and fixed on this widget's own Close button (see
   .xtool-fsm__close below): a raw, unhardened <button> can be silently
   shrunk/reflowed/backgrounded by a site's own CSS, and for the trigger
   specifically that reads as the 2-line hamburger collapsing into
   something else entirely (reported live as looking like a 3-dot "⋮"
   icon) rather than just a color/position glitch. */
.xtool-fsm__trigger {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* No fixed width/height here — the button auto-sizes to its content,
	   which is exactly the icon wrapper's own fixed 28px square below when
	   there's no Trigger Label, so this is visually identical to the old
	   fixed-size button for every existing instance. Only with a label
	   present does the button need to actually grow past a square. */
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	/* iOS/Android WebKit's default tap-highlight overlay (a translucent
	   blue-ish box shown while a clickable element is pressed) is a
	   separate mechanism from :focus's outline — outline:none above does
	   NOT suppress it. Reported live via screenshot on this widget's own
	   Close button (see .xtool-fsm__close below) as "the browser auto-
	   highlights it with a blue border" on mobile; the trigger shares the
	   exact same tappable-icon-button shape so it gets the same fix
	   proactively rather than waiting for its own separate report. */
	-webkit-tap-highlight-color: transparent !important;
	cursor: pointer;
}

.xtool-fsm__trigger--has-label {
	gap: 8px;
}

.xtool-fsm__trigger-icon {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0 !important;
}

/* Same root cause as the fill fix right below, applied to the "Icon
   Size" control instead of "Line / Icon Color": a raw uploaded SVG file
   almost always carries its own explicit width="24" height="24"
   attributes, which are NOT an inherited property the way font-size is —
   the burger_size control's own selector only ever resizes this element's
   PARENT (.xtool-fsm__trigger-icon), and a child element's own width/
   height attributes don't automatically track a parent's size the way a
   font-icon <i> automatically tracks the parent's font-size. Confirmed
   via an isolated render test: the wrapper correctly grew to the
   control's chosen size, but the child <svg> itself stayed locked at its
   original 24x24, completely ignoring it. Forcing the svg to fill 100%
   of its now-correctly-sized wrapper is what makes it actually respond.
   viewBox (present on essentially every real icon SVG export) is what
   makes the internal artwork scale proportionally to fill that box,
   rather than just being reflowed/clipped inside a bigger canvas. */
.xtool-fsm__trigger-icon svg {
	width: 100% !important;
	height: 100% !important;
}

/* A Custom Icon uploaded as a raw SVG file (Elementor's own "Upload SVG"
   icon-picker tab) keeps whatever fill color was baked into that file —
   almost always a hardcoded hex value, not "currentColor". An SVG
   presentation attribute like fill="#000" on a <path> only ever loses to
   a CSS rule that targets that SAME element directly; a rule on the
   ancestor <svg> (inheritance) can never override it, since an element's
   own directly-specified value always wins over an inherited one. So
   this has to target every descendant explicitly, not just the <svg>
   root — confirmed via an isolated render test before shipping (a bare
   "svg{fill:currentColor}" rule alone measurably did NOT recolor a child
   path with its own fill attribute; adding "svg *" alongside it did). A
   library icon (the default, Font Awesome-style <i>) never reaches this
   rule at all — it's a completely different element, already correctly
   recolored via burger_color's own `color` selector on the ancestor
   button. Fill only, not stroke — forcing stroke:currentColor on every
   descendant risks adding a visible outline to a shape that intentionally
   has none. */
.xtool-fsm__trigger-icon svg,
.xtool-fsm__trigger-icon svg * {
	fill: currentColor !important;
}

.xtool-fsm__trigger-label {
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #1a1814;
}

.xtool-fsm__trigger:hover,
.xtool-fsm__trigger:focus,
.xtool-fsm__trigger:focus-visible,
.xtool-fsm__trigger:active,
.xtool-fsm__trigger:visited {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.xtool-fsm__burger {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

.xtool-fsm__burger .line {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	height: 2px !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #1a1814;
	border: 0 !important;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.xtool-fsm__burger .line._1 {
	top: 35%;
}

.xtool-fsm__burger .line._2 {
	top: 65%;
}

.xtool-fsm__trigger[aria-expanded="true"] .line._1 {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.xtool-fsm__trigger[aria-expanded="true"] .line._2 {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

.xtool-fsm {
	display: none;
}

.xtool-fsm.is-open {
	display: block;
}

.xtool-fsm__blur {
	position: fixed;
	inset: 0;
	/* Above Popup's own z-index:99999 (see class-module.php) — an open
	   Fullscreen Menu should never be visually buried under a popup,
	   requested directly. Still well below the 999999 tier used by Page
	   Transition/Preloader/Video-lightbox, so that relationship (Popup
	   sitting below Page Transition specifically) is unaffected. */
	z-index: 100000;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	transition: opacity 0.4s ease;
	/* Clickable on purpose (no pointer-events:none) — this is what "click
	   outside the panel to close" (Close On Overlay Click) actually
	   clicks. The panel itself sits above this in z-index and always
	   handles its own clicks first, so this is never reachable through
	   the panel — only through the visible backdrop area around it
	   (mainly relevant for the Box panel style, which doesn't cover the
	   full screen). Harmless while .xtool-fsm is display:none (closed). */
}

.xtool-fsm.is-visible .xtool-fsm__blur {
	opacity: 1;
}

.xtool-fsm__panel {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
	padding: 60px 8vw;
	overflow-y: auto;
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.4s ease, transform 0.4s ease;
	/* Explicit, not relying on Elementor's/the theme's own global reset —
	   the Box panel's own padding (32px, see below) is added on TOP of
	   whatever width the box_width control sets; without this, a width of
	   exactly 100vw plus that padding would render wider than the real
	   viewport (content-box is the CSS default), overflowing off-screen
	   instead of the full-bleed look the control is meant to produce.
	   Caught during verification of the box_width safety-cap fix, not
	   independently reported. */
	box-sizing: border-box;
}

.xtool-fsm.is-visible .xtool-fsm__panel {
	opacity: 1;
	transform: scale(1);
}

/* Box style — a smaller panel anchored to one screen corner instead of a
   fullscreen overlay, growing in from that corner (transform-origin
   matches the anchor so the scale animation visually reads as "coming
   from the icon"). Position/size/offsets all come from Style-tab controls
   (see class-fullscreen-menu.php) via the CSS below — this stylesheet
   only sets the STRUCTURE (position:fixed + inset:auto so top/right/
   bottom/left can be set independently, flex-start instead of centered
   content, scrollable if content is taller than max-height). */
.xtool-fsm--box .xtool-fsm__panel {
	inset: auto;
	justify-content: flex-start;
	padding: 32px;
	transform: scale(0.85);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.xtool-fsm--box.is-visible .xtool-fsm__panel {
	transform: scale(1);
}

.xtool-fsm--box .xtool-fsm__link {
	font-size: 22px;
}

.xtool-fsm--box .xtool-fsm__links {
	margin: 0;
}

.xtool-fsm--anchor-top-right .xtool-fsm__panel {
	transform-origin: top right;
}

.xtool-fsm--anchor-top-left .xtool-fsm__panel {
	transform-origin: top left;
}

.xtool-fsm--anchor-bottom-right .xtool-fsm__panel {
	transform-origin: bottom right;
}

.xtool-fsm--anchor-bottom-left .xtool-fsm__panel {
	transform-origin: bottom left;
}

/* !important + explicit appearance reset on layout-critical properties —
   reported live as a completely invisible/missing close button specifically
   in Safari, matching a bug class already confirmed and fixed twice
   elsewhere in this codebase (Video widget's lightbox close button, learned
   from the sibling XProject plugin's own hard-won CSS hardening): Safari is
   the most aggressive of the major browsers about applying native OS button
   chrome to a plain <button>, and a theme's own generic button reset can
   also silently shrink/reposition/hide an unhardened one. -webkit-appearance
   specifically targets the native-button-chrome half of that risk, which
   the earlier Video widget fix didn't need (that one only ever fought theme
   resets, not Safari's own default rendering). */
.xtool-fsm__close {
	position: absolute !important;
	/* No top/right/bottom/left here — set per-corner by the
	   .xtool-fsm__close--{position} modifier classes below, so the
	   Fullscreen and Box panel styles can each keep their own distinct
	   default distance-from-edge for the same corner (see close_position
	   control's own description in class-fullscreen-menu.php). */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.2em !important;
	height: 2.2em !important;
	min-width: 2.2em !important;
	min-height: 2.2em !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 22px;
	line-height: 1 !important;
	color: #1a1814 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	/* Reported live via screenshot: the custom close icon showed a
	   translucent blue-ish box around it on mobile, described as "the
	   browser auto-highlights it." That's iOS/Android WebKit's default
	   tap-highlight overlay (shown while a clickable element is being
	   pressed) — a separate mechanism from :focus's outline, which
	   outline:none above never suppresses; needs this property
	   explicitly. */
	-webkit-tap-highlight-color: transparent !important;
	cursor: pointer;
	z-index: 2;
	/* Fine-Tune Position nudge — a CSS custom property rather than a
	   direct transform, safe to apply unconditionally here since no other
	   control on this element writes to `transform` (unlike Container
	   Carousel's arrows, which had to fold a nudge into an already-
	   competing transform from a different control). */
	transform: translate(var(--xtool-fsm-close-nudge-x, 0px), var(--xtool-fsm-close-nudge-y, 0px)) !important;
}

.xtool-fsm__close--top-right    { top: 32px !important; right: 8vw !important; left: auto !important; bottom: auto !important; }
.xtool-fsm__close--top-left     { top: 32px !important; left: 8vw !important; right: auto !important; bottom: auto !important; }
.xtool-fsm__close--bottom-right { bottom: 32px !important; right: 8vw !important; top: auto !important; left: auto !important; }
.xtool-fsm__close--bottom-left  { bottom: 32px !important; left: 8vw !important; top: auto !important; right: auto !important; }

/* Box panel style keeps its own smaller, distinct default offset for the
   same 4 corners — same values the old, single-corner-only
   .xtool-fsm--box .xtool-fsm__close rule used before close_position
   existed, just now expressed for all 4 choices instead of only one. */
.xtool-fsm--box .xtool-fsm__close--top-right    { top: 16px !important; right: 16px !important; left: auto !important; bottom: auto !important; }
.xtool-fsm--box .xtool-fsm__close--top-left     { top: 16px !important; left: 16px !important; right: auto !important; bottom: auto !important; }
.xtool-fsm--box .xtool-fsm__close--bottom-right { bottom: 16px !important; right: 16px !important; top: auto !important; left: auto !important; }
.xtool-fsm--box .xtool-fsm__close--bottom-left  { bottom: 16px !important; left: 16px !important; top: auto !important; right: auto !important; }

.xtool-fsm__close:hover,
.xtool-fsm__close:focus,
.xtool-fsm__close:focus-visible,
.xtool-fsm__close:active,
.xtool-fsm__close:visited {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.xtool-fsm__close svg {
	display: block !important;
	width: 1em;
	height: 1em;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0 !important;
}

.xtool-fsm__links {
	margin: auto 0;
}

.xtool-fsm__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xtool-fsm__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: #1a1814;
	font-size: clamp(32px, 6vw, 64px);
	font-weight: 600;
	line-height: 1.1;
}

.xtool-fsm__link-texts {
	position: relative;
	display: block;
	overflow: hidden;
	height: 1.1em;
}

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

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

.xtool-fsm__link:hover .xtool-fsm__link-text:first-child {
	transform: translateY(-100%);
}

.xtool-fsm__link:hover .xtool-fsm__link-text:last-child {
	transform: translateY(0);
}

/* Enable Text Swap on Hover, off — label just stays put; only Hover
   Color (see class-fullscreen-menu.php) does anything on hover. Each
   override restores that element's own RESTING transform value (not
   "none" for both) — the duplicate copy's resting state is already
   translateY(100%) (hidden below), and using "none" there instead would
   have snapped it back into normal position, overlapping the visible
   copy, on every hover. */
.xtool-fsm--no-hover-swap .xtool-fsm__link:hover .xtool-fsm__link-text:first-child {
	transform: none;
}

.xtool-fsm--no-hover-swap .xtool-fsm__link:hover .xtool-fsm__link-text:last-child {
	transform: translateY(100%);
}

.xtool-fsm__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #1a1814;
	flex-shrink: 0;
	transform: scale(0);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.xtool-fsm__menu .current-menu-item .xtool-fsm__dot {
	transform: scale(1);
	opacity: 1;
}

/* Only ever rendered at all when "Show Submenus" is on (see
   class-fullscreen-menu.php) — a plain-flat menu never has a
   .menu-item-has-children/.sub-menu in its markup in the first place, so
   none of this can ever visually affect that (unchanged) default case.
   Same max-height:0 → large-cap + overflow:hidden accordion idiom
   already used for Nav Menu's own "Expand Below Parent" submenu style
   elsewhere in this codebase, reused here for consistency. */
.xtool-fsm__menu .sub-menu {
	list-style: none;
	margin: 10px 0 0;
	padding: 0 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.xtool-fsm__menu .menu-item-has-children.is-fsm-open > .sub-menu {
	max-height: 2000px;
}

.xtool-fsm__menu .sub-menu .xtool-fsm__link {
	font-size: clamp(16px, 2.6vw, 26px);
	font-weight: 500;
	gap: 10px;
}

/* A deeper level (a child that itself has children) indents again on
   top of its own parent's indent — .sub-menu .sub-menu compounds the
   padding-left naturally since each level's rule still applies. */
.xtool-fsm__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 2px;
	transition: transform 0.3s ease;
}

.xtool-fsm__menu .menu-item-has-children.is-fsm-open > a .xtool-fsm__submenu-toggle {
	transform: rotate(180deg);
}

.xtool-fsm__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
}

.xtool-fsm__social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.xtool-fsm__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #1a1814;
	text-decoration: none;
	transition: color 0.2s ease;
}

.xtool-fsm__social-link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.xtool-fsm__contact {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	overflow: hidden;
	min-width: 160px;
	min-height: 64px;
	padding: 14px 18px;
	border-radius: 12px;
	background-color: #f2ede7;
	text-decoration: none;
}

.xtool-fsm__contact-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.xtool-fsm__contact-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
}

.xtool-fsm__contact-text {
	font-size: 14px;
	font-weight: 600;
	color: #1a1814;
}

.xtool-fsm__contact-arrow {
	font-size: 12px;
	color: inherit;
}

.xtool-fsm__legal {
	display: flex;
	gap: 20px;
}

.xtool-fsm__legal-link {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	font-size: 12px;
	color: #8a8680;
	text-decoration: none;
}

.xtool-fsm__legal-line {
	display: block;
	height: 1px;
	margin-top: 4px;
	background-color: #1a1814;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.xtool-fsm__legal-link:hover .xtool-fsm__legal-line {
	transform: scaleX(1);
}

@media (max-width: 767px) {
	.xtool-fsm__panel {
		padding: 50px 6vw;
	}
	.xtool-fsm__link {
		font-size: clamp(28px, 9vw, 44px);
	}
	.xtool-fsm__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.xtool-fsm__blur,
	.xtool-fsm__panel,
	.xtool-fsm__link-text,
	.xtool-fsm__dot,
	.xtool-fsm__burger .line,
	.xtool-fsm__legal-line {
		transition: none;
	}
}