/**
 * Nexio Toolkit — Nexio Menu widget styles.
 *
 * Structure (see class-menu-widget.php render() and class-menu-walker.php):
 *
 *   <nav class="nexio-menu" data-mode="desktop|mobile">
 *     <button class="nexio-menu__hamburger">...</button>
 *     <div class="nexio-menu__overlay"></div>            (drawer style only)
 *     <div class="nexio-menu__panel" data-style="drawer|dropdown" data-position="left|right">
 *       <div class="nexio-menu__panel-header">...</div>   (drawer style only)
 *       <ul class="nexio-menu__list">
 *         <li class="nexio-menu__item nexio-menu__item--has-children">
 *           <a class="nexio-menu__link">...</a>
 *           <button class="nexio-menu__toggle"><svg class="nexio-menu__toggle-icon">...</button>
 *           <ul class="nexio-menu__submenu">... (recurses) ...</ul>
 *         </li>
 *       </ul>
 *     </div>
 *   </nav>
 *
 * `data-mode` is set by assets/js/nexio-menu.js from the widget's own
 * configured breakpoint (matchMedia), not a fixed one — so the rules
 * below are written unprefixed = the desktop look, with `[data-mode=
 * "mobile"]` overriding into the mobile look. A viewport-only
 * `@media (max-width: 1024px)` fallback (the "Tablet" preset, the
 * default) covers the brief window before JS attaches `data-mode`.
 */

.nexio-menu {
	position: relative;
	--nexio-menu-indicator-color: #4f46e5;
	--nexio-menu-indicator-thickness: 2px;
	--nexio-menu-submenu-offset: 10px;
	--nexio-menu-mobile-divider: rgba(0, 0, 0, 0.08);
	--nexio-menu-drawer-width: 320px;
}

.nexio-menu__list,
.nexio-menu__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nexio-menu__item {
	position: relative;
	display: flex;
	align-items: center;
}

.nexio-menu__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* ---------- Submenu toggle button + indicator icon ---------- */

/*
 * Every raw <button> on this site also matches the Elementor kit's
 * global button reset (`.elementor-kit-{n} button`), whose specificity
 * is one class + one element. A bare `.nexio-menu__toggle` (one class)
 * loses that fight — hence the `.nexio-menu` ancestor qualifier here
 * and on `.nexio-menu__hamburger`/`.nexio-menu__close` below, which
 * brings this to two classes and wins regardless of source order.
 */
.nexio-menu .nexio-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: inherit;
	line-height: 0;
}

.nexio-menu__toggle-icon {
	transition: transform 0.2s ease;
}

/*
 * Either the link or the whole item can carry the border/background
 * (the "Border & Background Around" control). Both get a border-box
 * and a zero-width transparent border up front, so switching one on
 * never changes the item's height or nudges its neighbours.
 */
.nexio-menu__link,
.nexio-menu__item {
	box-sizing: border-box;
	border: 0 solid transparent;
}

/* Deliberately NO overflow clipping here: the item is the positioning
   context for its dropdown submenu, so hiding overflow would clip the
   submenu out of existence. It isn't needed either — when the item is
   the box, the background sits on the item and the link has none. */

/*
 * With the padding on the item, the link covers only its own text —
 * so the padded strip that visibly belongs to the box does nothing
 * when clicked. Stretching the link vertically is not enough, because
 * the padding is outside its box entirely.
 *
 * A transparent overlay pinned to the item makes the whole visible box
 * the link's hit area, without moving the padding back onto the link
 * (which is what pushed the arrow away from the text in the first
 * place). The arrow and the submenu are lifted above it so they stay
 * independently clickable.
 */
.nexio-menu-boxtarget-item .nexio-menu[data-mode="desktop"] .nexio-menu__link {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
}

.nexio-menu-boxtarget-item .nexio-menu[data-mode="desktop"] .nexio-menu__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nexio-menu-boxtarget-item .nexio-menu[data-mode="desktop"] .nexio-menu__toggle {
	position: relative;
	z-index: 2;
}

/* Above the overlay, and above the 1000 the submenu already uses. */
.nexio-menu-boxtarget-item .nexio-menu[data-mode="desktop"] .nexio-menu__submenu {
	z-index: 1001;
}

/* ---------- Custom toggle icons (closed / open) ---------- */

/*
 * Both icons are in the DOM and swapped here rather than by JS, so the
 * open state paints in the same frame as the click — no icon-font or
 * SVG request at the moment the menu opens.
 */
.nexio-menu__toggle-icon-closed,
.nexio-menu__toggle-icon-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.nexio-menu__toggle-icon-open,
.nexio-menu__hamburger[aria-expanded="true"] .nexio-menu__toggle-icon-closed {
	display: none;
}

.nexio-menu__hamburger[aria-expanded="true"] .nexio-menu__toggle-icon-open {
	display: inline-flex;
}

/* Custom icons must not be collapsed by the theme's
   `img, …, svg { max-width: 100% }` inside a shrink-to-fit flex item. */
.nexio-menu__toggle-icon-closed svg,
.nexio-menu__toggle-icon-open svg,
.nexio-menu .nexio-menu__close svg {
	max-width: none;
	display: block;
}

/*
 * An uploaded SVG arrives with its own width/height attributes baked in
 * (Elementor inlines the file as-authored), so without this a custom
 * toggle icon would ignore the Toggle Size control entirely and render
 * at whatever size the file happened to be. The variable is set by that
 * control on .nexio-menu__hamburger and inherits down to here.
 */
.nexio-menu__toggle-icon-closed svg,
.nexio-menu__toggle-icon-open svg {
	width: var(--nexio-menu-toggle-size, 24px);
	height: var(--nexio-menu-toggle-size, 24px);
}

.nexio-menu__toggle-icon-closed i,
.nexio-menu__toggle-icon-open i {
	font-size: var(--nexio-menu-toggle-size, 24px);
	line-height: 1;
}

.nexio-menu-subicon-chevron .nexio-menu__toggle[aria-expanded="true"] .nexio-menu__toggle-icon {
	transform: rotate(180deg);
}

.nexio-menu-subicon-plus .nexio-menu__toggle[aria-expanded="true"] .nexio-menu__toggle-icon {
	transform: rotate(45deg);
}

/* ---------- Active-item indicator ---------- */

.nexio-menu-active-underline .nexio-menu__item.current-menu-item > .nexio-menu__link,
.nexio-menu-active-underline .nexio-menu__item.current-menu-ancestor > .nexio-menu__link {
	box-shadow: inset 0 calc(var(--nexio-menu-indicator-thickness) * -1) 0 0 var(--nexio-menu-indicator-color);
}

.nexio-menu-active-left-bar .nexio-menu[data-mode="desktop"] .nexio-menu__item.current-menu-item > .nexio-menu__link,
.nexio-menu-active-left-bar .nexio-menu[data-mode="desktop"] .nexio-menu__item.current-menu-ancestor > .nexio-menu__link,
.nexio-menu-active-left-bar .nexio-menu:not([data-mode]) .nexio-menu__item.current-menu-item > .nexio-menu__link,
.nexio-menu-active-left-bar .nexio-menu:not([data-mode]) .nexio-menu__item.current-menu-ancestor > .nexio-menu__link {
	box-shadow: inset 0 calc(var(--nexio-menu-indicator-thickness) * -1) 0 0 var(--nexio-menu-indicator-color);
}

.nexio-menu-active-left-bar .nexio-menu[data-mode="mobile"] .nexio-menu__item.current-menu-item > .nexio-menu__link,
.nexio-menu-active-left-bar .nexio-menu[data-mode="mobile"] .nexio-menu__item.current-menu-ancestor > .nexio-menu__link {
	box-shadow: inset var(--nexio-menu-indicator-thickness) 0 0 0 var(--nexio-menu-indicator-color);
}

/* ======================================================================
   DESKTOP (default / unprefixed rules)
   ====================================================================== */

.nexio-menu__hamburger,
.nexio-menu__overlay,
.nexio-menu__panel-header {
	display: none;
}

.nexio-menu__panel {
	position: static;
}

.nexio-menu__list {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Dropdown submenu — masked with opacity/visibility (not display) so
   the close transition can run, and pointer-events is toggled with it
   so an invisible-but-still-there panel never intercepts clicks. */
.nexio-menu__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: var(--nexio-menu-submenu-offset);
	min-width: 200px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.nexio-menu__item.is-open > .nexio-menu__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Nested (2nd level+) submenus flyout to the side rather than stacking
   underneath — the conventional multi-level dropdown layout. */
.nexio-menu__submenu .nexio-menu__submenu {
	top: 0;
	left: 100%;
	margin-top: 0;
	margin-left: var(--nexio-menu-submenu-offset);
}

.nexio-menu-submenu-anim-none .nexio-menu__submenu {
	transition: none;
	transform: none;
}

.nexio-menu-submenu-anim-fade .nexio-menu__submenu {
	transform: none;
}

/* ---------- Hamburger icon (3 lines → ✕) ---------- */

/* See the specificity note above .nexio-menu__toggle — same fight,
   same fix (the `.nexio-menu` ancestor qualifier). */
.nexio-menu .nexio-menu__hamburger {
	position: relative;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	background: transparent;
	flex: 0 0 auto;
	font-size: 0;
	line-height: 0;
	border-radius: 0;
	--nexio-menu-toggle-size: 20px;
}

.nexio-menu__hamburger-box {
	position: relative;
	display: inline-block;
	width: var(--nexio-menu-toggle-size);
	height: calc(var(--nexio-menu-toggle-size) * 0.7);
}

.nexio-menu__hamburger-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nexio-menu__hamburger-line:nth-child(1) {
	top: 0;
}

.nexio-menu__hamburger-line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.nexio-menu__hamburger-line:nth-child(3) {
	top: auto;
	bottom: 0;
}

.nexio-menu__hamburger[aria-expanded="true"] .nexio-menu__hamburger-line:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.nexio-menu__hamburger[aria-expanded="true"] .nexio-menu__hamburger-line:nth-child(2) {
	opacity: 0;
}

.nexio-menu__hamburger[aria-expanded="true"] .nexio-menu__hamburger-line:nth-child(3) {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%) rotate(-45deg);
}

/* ---------- Close button (drawer) ---------- */

.nexio-menu__panel-header {
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
}

.nexio-menu__panel-title {
	font-weight: 600;
}

/* See the specificity note above .nexio-menu__toggle — same fight,
   same fix (the `.nexio-menu` ancestor qualifier). */
.nexio-menu .nexio-menu__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	color: inherit;
	font-size: 0;
	line-height: 0;
	border-radius: 0;
}

.nexio-menu__close svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ---------- Overlay (drawer) ---------- */

.nexio-menu__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 15, 20, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	z-index: 99999;
}

.nexio-menu__overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ======================================================================
   MOBILE — driven by [data-mode="mobile"] (set by JS from the widget's
   own configured breakpoint), with a viewport-only fallback for the
   brief pre-hydration window (matches the default "Tablet" preset).
   ====================================================================== */

.nexio-menu[data-mode="mobile"] .nexio-menu__hamburger,
.nexio-menu:not([data-mode]) .nexio-menu__hamburger {
	display: inline-flex;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__list,
.nexio-menu:not([data-mode]) .nexio-menu__list {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/*
 * Grid, not flex-direction: column. The toggle button is a SIBLING of
 * the link (see class-menu-walker.php), not nested inside it — a
 * column flex container stacks every child as its own full-width row,
 * so the arrow inherited the item's `align-items: stretch` on the
 * cross axis (width, since the main axis is now vertical) and
 * rendered as a wide empty bar with the glyph centered in the middle
 * of it, instead of a small button sitting next to the text. Grid
 * puts the link and the toggle side by side in row 1 and lets the
 * accordion submenu span the full width in row 2.
 */
.nexio-menu[data-mode="mobile"] .nexio-menu__item,
.nexio-menu:not([data-mode]) .nexio-menu__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__item > .nexio-menu__link,
.nexio-menu:not([data-mode]) .nexio-menu__item > .nexio-menu__link {
	grid-column: 1 / -1;
	width: 100%;
}

/* An item that HAS a toggle leaves column 2 free for the arrow
   instead of spanning the full row. */
.nexio-menu[data-mode="mobile"] .nexio-menu__item--has-children > .nexio-menu__link,
.nexio-menu:not([data-mode]) .nexio-menu__item--has-children > .nexio-menu__link {
	display: flex;
	grid-column: 1;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__item > .nexio-menu__toggle,
.nexio-menu:not([data-mode]) .nexio-menu__item > .nexio-menu__toggle {
	grid-column: 2;
	grid-row: 1;
}

/* The submenu is the 3rd grid child by DOM order; without this it
   would land in column 1 of row 2 alone, leaving column 2 an empty
   gap beside it instead of spanning underneath both. */
.nexio-menu[data-mode="mobile"] .nexio-menu__item > .nexio-menu__submenu,
.nexio-menu:not([data-mode]) .nexio-menu__item > .nexio-menu__submenu {
	grid-column: 1 / -1;
}

/* Divider between top-level items. */
.nexio-menu[data-mode="mobile"] .nexio-menu__list > .nexio-menu__item:not(:last-child),
.nexio-menu:not([data-mode]) .nexio-menu__list > .nexio-menu__item:not(:last-child) {
	border-bottom: 1px solid var(--nexio-menu-mobile-divider);
}

/* Accordion submenu: max-height is driven by JS (measured scrollHeight)
   so it works for content of any length — this just defines the
   collapsed/transition baseline. */
.nexio-menu[data-mode="mobile"] .nexio-menu__submenu,
.nexio-menu:not([data-mode]) .nexio-menu__submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__submenu .nexio-menu__link,
.nexio-menu:not([data-mode]) .nexio-menu__submenu .nexio-menu__link {
	padding-left: calc(20px + 16px);
}

/* ---------- Panel: inline dropdown ---------- */

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="dropdown"],
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="dropdown"] {
	width: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="dropdown"].is-open,
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="dropdown"].is-open {
	max-height: 2000px; /* Generous cap; overflow-y stays safe if content ever exceeds it. */
	overflow-y: auto;
}

/* ---------- Panel: off-canvas drawer ---------- */

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="drawer"],
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="drawer"] {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100000;
	width: var(--nexio-menu-drawer-width, 320px);
	max-width: 100vw;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: transform 0.3s ease;
	background-color: #ffffff;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="drawer"][data-position="right"],
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="drawer"][data-position="right"] {
	right: 0;
	transform: translateX(100%);
}

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="drawer"][data-position="left"],
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="drawer"][data-position="left"] {
	left: 0;
	transform: translateX(-100%);
}

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="drawer"].is-open,
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="drawer"].is-open {
	transform: translateX(0);
}

.nexio-menu[data-mode="mobile"] .nexio-menu__panel[data-style="drawer"] .nexio-menu__panel-header,
.nexio-menu:not([data-mode]) .nexio-menu__panel[data-style="drawer"] .nexio-menu__panel-header {
	display: flex;
	flex: 0 0 auto;
}

/* The pre-hydration fallback is viewport-driven, matching the default
   "Tablet" (1024px) preset — a custom breakpoint only takes effect once
   JS attaches data-mode. */
@media (min-width: 1025px) {
	.nexio-menu:not([data-mode]) .nexio-menu__hamburger {
		display: none;
	}

	.nexio-menu:not([data-mode]) .nexio-menu__list {
		flex-direction: row;
	}

	.nexio-menu:not([data-mode]) .nexio-menu__item {
		flex-direction: row;
		align-items: center;
	}

	.nexio-menu:not([data-mode]) .nexio-menu__submenu {
		position: absolute;
		max-height: none;
		overflow: visible;
	}
}

/* ======================================================================
   MOBILE EXTRAS — a saved template and/or header elements moved in by
   the JS. Both live inside the panel markup at all times but are only
   ever shown at the mobile breakpoint; the desktop menu is untouched.
   ====================================================================== */

.nexio-menu__extra {
	display: none;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 20px;
}

.nexio-menu[data-mode="mobile"] .nexio-menu__extra,
.nexio-menu:not([data-mode]) .nexio-menu__extra {
	display: flex;
}

/* An adopted block with nothing in it (selector matched nothing, or
   everything it matched was skipped by the guards) must not leave a
   stray padded gap in the panel. */
.nexio-menu__extra--adopted:empty {
	display: none !important;
}

.nexio-menu-extras-divider-yes .nexio-menu__extra {
	border-top: 1px solid var(--nexio-menu-extras-divider, rgba(0, 0, 0, 0.08));
}

/* A template/adopted block sitting ABOVE the list divides from what's
   below it instead, so the line never doubles up with the panel header. */
.nexio-menu-extras-divider-yes .nexio-menu__panel > .nexio-menu__extra:first-child,
.nexio-menu-extras-divider-yes .nexio-menu__panel-header + .nexio-menu__extra {
	border-top: 0;
	border-bottom: 1px solid var(--nexio-menu-extras-divider, rgba(0, 0, 0, 0.08));
}

/* Adopted elements arrive with whatever widths their header layout gave
   them; neutralize the common culprits so they sit sensibly in a narrow
   drawer instead of overflowing it. */
.nexio-menu__extra > * {
	max-width: 100%;
}

.nexio-menu__extra--adopted > * {
	margin: 0;
}

/* ---------- Body scroll lock while a drawer is open ---------- */

html.nexio-menu-scroll-locked,
html.nexio-menu-scroll-locked body {
	overflow: hidden !important;
	height: 100%;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.nexio-menu__submenu,
	.nexio-menu__hamburger-line,
	.nexio-menu__toggle-icon,
	.nexio-menu__panel,
	.nexio-menu__overlay,
	.nexio-menu__link {
		transition-duration: 0.001ms !important;
	}
}