/**
 * Dual Menu widget styles.
 * Namespace: .gke-dual-menu
 * All selectors are scoped under this namespace — nothing here ever
 * targets a bare .menu / ul / li / a / button selector, so the widget
 * can never leak into the rest of the site.
 *
 * RTL-first: logical properties (inset-inline, margin-inline,
 * border-inline, padding-inline) are used throughout instead of
 * left/right, so panels/flyouts/indentation automatically mirror on
 * RTL sites and stay correct on LTR sites without any special-casing.
 * The one deliberate exception is the mobile-tabs "Custom Border"
 * indicator (Style → Mobile Tabs), which the widget's own controls
 * expose in explicitly physical Top/Bottom/Left/Right terms — those
 * controls write physical border-top/right/bottom/left declarations
 * directly via inline `selectors`, not through this stylesheet.
 */

.gke-dual-menu {
	--gke-dm-panel-width: 320px;
	--gke-dm-panel-duration: 300ms;
	--gke-dm-msub-duration: 300ms;
	--gke-dm-indicator-color: currentColor;

	position: relative;
	display: block;
}

.gke-dual-menu * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * Shared list/item/link base (desktop bar AND mobile panel both use
 * this same markup shape — see class-dual-menu-walker.php).
 * ------------------------------------------------------------- */
.gke-dual-menu .gke-dm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.gke-dual-menu .gke-dm-item {
	position: relative;
	list-style: none;
}

.gke-dual-menu .gke-dm-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.gke-dual-menu .gke-dm-toggle {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 4px;
	margin-inline-start: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: inherit;
	line-height: 1;
}

.gke-dual-menu .gke-dm-toggle-icon svg,
.gke-dual-menu .gke-dm-toggle-icon i {
	width: 1em;
	height: 1em;
	font-size: 0.8em;
	fill: currentColor;
	display: block;
}

.gke-dual-menu .gke-dm-toggle[aria-expanded="true"] .gke-dm-toggle-icon-default,
.gke-dual-menu .gke-dm-toggle:not([aria-expanded="true"]) .gke-dm-toggle-icon-active {
	display: none;
}

.gke-dual-menu .gke-dm-link:focus-visible,
.gke-dual-menu .gke-dm-toggle:focus-visible,
.gke-dual-menu .gke-dm-trigger:focus-visible,
.gke-dual-menu .gke-dm-close:focus-visible,
.gke-dual-menu .gke-dm-tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.gke-dm-editor-notice {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.7;
	font-size: 13px;
}

/* ---------------------------------------------------------------
 * Desktop / tablet bar.
 * ------------------------------------------------------------- */
.gke-dual-menu .gke-dm-desktop-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.gke-dual-menu .gke-dm-desktop-bar .gke-dm-menu {
	position: relative;
}

/* Sub-menu wrap: absolutely positioned flyout, closed by default. */
.gke-dual-menu .gke-dm-desktop-bar .gke-dm-item > .gke-dm-submenu-wrap {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
	pointer-events: none;
}

/* Nested (level 2+) flyouts open to the side, not below. */
.gke-dual-menu .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-item > .gke-dm-submenu-wrap {
	top: 0;
	inset-inline-start: 100%;
	transform: translateX(0) translateY(0);
}

.gke-dual-menu .gke-dm-desktop-bar .gke-dm-submenu {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	white-space: nowrap;
}

.gke-dual-menu .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-item {
	position: relative;
}

.gke-dual-menu .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-link {
	width: 100%;
}

/* Opens on hover / keyboard focus — only when Hover trigger mode is selected. */
.gke-dual-menu.gke-dm-trigger-mode-hover .gke-dm-desktop-bar .gke-dm-item:hover > .gke-dm-submenu-wrap,
.gke-dual-menu.gke-dm-trigger-mode-hover .gke-dm-desktop-bar .gke-dm-item:focus-within > .gke-dm-submenu-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.gke-dual-menu.gke-dm-trigger-mode-hover .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-item:hover > .gke-dm-submenu-wrap,
.gke-dual-menu.gke-dm-trigger-mode-hover .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-item:focus-within > .gke-dm-submenu-wrap {
	transform: translateX(0);
}

/* Opens whenever its toggle button says so — works in BOTH hover and
   click trigger modes, so keyboard/touch users always have a way in
   regardless of the selected mode. */
.gke-dual-menu .gke-dm-desktop-bar .gke-dm-toggle[aria-expanded="true"] ~ .gke-dm-submenu-wrap {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.gke-dual-menu .gke-dm-desktop-bar .gke-dm-submenu .gke-dm-toggle[aria-expanded="true"] ~ .gke-dm-submenu-wrap {
	transform: translateX(0);
}

/* ---------------------------------------------------------------
 * Mobile trigger.
 * ------------------------------------------------------------- */
.gke-dual-menu .gke-dm-trigger-wrap {
	display: none; /* Shown below the mobile breakpoint — see inline breakpoint CSS + fallback below. */
	width: 100%;
}

.gke-dual-menu .gke-dm-trigger {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: inherit;
	line-height: 1;
}

.gke-dual-menu .gke-dm-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gke-dual-menu .gke-dm-trigger-icon svg,
.gke-dual-menu .gke-dm-trigger-icon i {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------------------------------------------------------
 * Mobile off-canvas panel.
 * ------------------------------------------------------------- */
.gke-dual-menu .gke-dm-overlay {
	--gke-dm-target-opacity: 0.6;

	position: fixed;
	inset: 0;
	background-color: #000000;
	opacity: 0;
	z-index: 999980;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--gke-dm-panel-duration) ease, visibility var(--gke-dm-panel-duration);
}

.gke-dual-menu.gke-dm-open .gke-dm-overlay {
	visibility: visible;
	pointer-events: auto;
	opacity: var( --gke-dm-target-opacity, 0.6 );
}

.gke-dual-menu .gke-dm-panel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: auto;
	inset-inline-start: 0;
	width: var(--gke-dm-panel-width);
	max-width: 92vw;
	height: 100%;
	background-color: #ffffff;
	z-index: 999990;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform var(--gke-dm-panel-duration) ease, opacity var(--gke-dm-panel-duration) ease, visibility var(--gke-dm-panel-duration);
}

/* LTR: panel is pinned to the inline-start edge and slides in from the left. */
html:not([dir="rtl"]) .gke-dual-menu .gke-dm-panel {
	transform: translateX(-100%);
}

/* RTL: panel is pinned to the inline-start edge (the visual right) and
   slides in from the right. Matches html[dir="rtl"] (language_attributes())
   and body.rtl (body_class()/is_rtl()) — some themes only emit one of the two. */
html[dir="rtl"] .gke-dual-menu .gke-dm-panel,
body.rtl .gke-dual-menu .gke-dm-panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: translateX(100%);
}

.gke-dual-menu.gke-dm-open .gke-dm-panel {
	/* !important is required here: the LTR/RTL base rules above both
	   include a `html` type selector (html:not([dir="rtl"]) / html[dir="rtl"]),
	   which gives them higher specificity than a plain
	   `.gke-dual-menu.gke-dm-open .gke-dm-panel` selector could ever match —
	   so without !important this rule silently loses and the panel never
	   visually slides in, even though the JS/ARIA state is correct. */
	transform: translateX(0) !important;
}

/* Fade variant: no slide, opacity + visibility only. */
.gke-dual-menu.gke-dm-panel-anim-fade .gke-dm-panel {
	transform: none !important;
	opacity: 0;
	visibility: hidden;
}

.gke-dual-menu.gke-dm-panel-anim-fade.gke-dm-open .gke-dm-panel {
	opacity: 1;
	visibility: visible;
}

/* Explicit panel side (Content → Mobile Menu → Panel Side), independent
   of the site's LTR/RTL direction. Physical left/right on purpose — this
   is a deliberate override of the dir-based default above, not a value
   that should itself flip with dir. The closed-state transform below must
   also exclude .gke-dm-open: both it and the shared `.gke-dm-open
   .gke-dm-panel` rule use !important, and this selector has higher
   specificity, so without the exclusion it would win even while open and
   permanently hide the panel. It's excluded from the fade variant via
   :not() since fade never slides. */
.gke-dual-menu.gke-dm-panel-side-left .gke-dm-panel {
	left: 0 !important;
	right: auto !important;
}

.gke-dual-menu.gke-dm-panel-side-left:not(.gke-dm-panel-anim-fade):not(.gke-dm-open) .gke-dm-panel {
	transform: translateX(-100%) !important;
}

.gke-dual-menu.gke-dm-panel-side-right .gke-dm-panel {
	right: 0 !important;
	left: auto !important;
}

.gke-dual-menu.gke-dm-panel-side-right:not(.gke-dm-panel-anim-fade):not(.gke-dm-open) .gke-dm-panel {
	transform: translateX(100%) !important;
}

.gke-dual-menu .gke-dm-panel-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.gke-dual-menu .gke-dm-close {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	flex: 0 0 auto;
	margin: 8px;
	line-height: 1;
}

/* Same fix as .gke-dm-toggle-icon / .gke-dm-trigger-icon above: Elementor's
   icon control can render either a font-icon <i> or an inline <svg>
   depending on which icon the user picks in the Icon Library. Font-icon
   glyphs size themselves off font-size alone, so they "happen" to show up
   with only the close_size control's font-size rule — but a bare <svg>
   has no intrinsic size or fill, so without this rule it renders at 0x0
   (or invisible) the moment someone actually picks an icon instead of
   leaving the default untouched. */
.gke-dual-menu .gke-dm-close svg,
.gke-dual-menu .gke-dm-close i {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.gke-dual-menu .gke-dm-panel-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.gke-dual-menu .gke-dm-mobile-menu[hidden] {
	display: none;
}

.gke-dual-menu .gke-dm-panel .gke-dm-list {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.gke-dual-menu .gke-dm-panel .gke-dm-item {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.gke-dual-menu .gke-dm-panel .gke-dm-link {
	flex: 1 1 auto;
	width: 100%;
}

.gke-dual-menu .gke-dm-panel .gke-dm-has-children {
	justify-content: space-between;
}

/* flex-grow is intentionally 0 here (unlike the plain .gke-dm-link rule
   above, which is 1). If the link were allowed to grow, it would always
   consume 100% of the row's free space itself, leaving nothing for
   justify-content to distribute — which pins the toggle icon to the far
   edge permanently, ignoring any Alignment control (Menu 1/Menu 2's
   top-level items, or Mobile Submenus' nested items) no matter what the
   user picks. With flex-grow at 0, the link only takes the width its own
   text needs, so the link+icon pair moves and sits together at whichever
   edge (or center) the chosen justify-content value puts them — while the
   default 'space-between' above still produces the exact same start/end
   layout as before for anyone who never touches the alignment control. */
.gke-dual-menu .gke-dm-panel .gke-dm-has-children > .gke-dm-link {
	flex: 0 1 auto;
	width: auto;
}

.gke-dual-menu .gke-dm-panel .gke-dm-submenu-wrap {
	flex: 1 1 100%;
	width: 100%;
}

/* Accordion (slide): grid-template-rows trick animates to/from an
   unknown content height with no JS measuring required. */
.gke-dual-menu.gke-dm-msub-anim-slide .gke-dm-panel .gke-dm-submenu-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--gke-dm-msub-duration) ease;
}

.gke-dual-menu.gke-dm-msub-anim-slide .gke-dm-panel .gke-dm-toggle[aria-expanded="true"] ~ .gke-dm-submenu-wrap {
	grid-template-rows: 1fr;
}

.gke-dual-menu.gke-dm-msub-anim-slide .gke-dm-panel .gke-dm-submenu-wrap > .gke-dm-submenu {
	overflow: hidden;
	min-height: 0;
}

/* Fade variant. */
.gke-dual-menu.gke-dm-msub-anim-fade .gke-dm-panel .gke-dm-submenu-wrap {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity var(--gke-dm-msub-duration) ease;
}

.gke-dual-menu.gke-dm-msub-anim-fade .gke-dm-panel .gke-dm-toggle[aria-expanded="true"] ~ .gke-dm-submenu-wrap {
	max-height: none;
	opacity: 1;
}

/* None variant: instant show/hide, no transition. */
.gke-dual-menu.gke-dm-msub-anim-none .gke-dm-panel .gke-dm-submenu-wrap {
	display: none;
}

.gke-dual-menu.gke-dm-msub-anim-none .gke-dm-panel .gke-dm-toggle[aria-expanded="true"] ~ .gke-dm-submenu-wrap {
	display: block;
}

.gke-dual-menu .gke-dm-panel .gke-dm-submenu {
	list-style: none;
	margin: 0;
	width: 100%;
}

/* Nested indentation compounds naturally: each level's own padding is
   relative to its own (already-indented) parent — see
   mobile_submenu_indent in class-dual-menu.php. */
.gke-dual-menu .gke-dm-panel .gke-dm-submenu {
	padding-inline-start: 16px;
}

/* ---------------------------------------------------------------
 * Mobile tabs.
 * ------------------------------------------------------------- */
.gke-dual-menu .gke-dm-tabs {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.gke-dual-menu .gke-dm-tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: inherit;
	flex: 1 1 auto;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Reduced motion.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gke-dual-menu .gke-dm-panel,
	.gke-dual-menu .gke-dm-overlay,
	.gke-dual-menu .gke-dm-submenu-wrap,
	.gke-dual-menu .gke-dm-toggle-icon {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------
 * Static fallback for the desktop-bar / mobile-trigger switch.
 * This mirrors, at the default value, the dynamic inline style the
 * widget injects from Elementor's actual configured "mobile"
 * breakpoint (see maybe_print_breakpoint_style() in
 * class-dual-menu.php). Because that inline style is printed *after*
 * this stylesheet in the page, it always wins when present — this
 * block only matters as a defensive fallback if, for any reason, the
 * dynamic version isn't printed.
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
	.gke-dual-menu .gke-dm-desktop-bar {
		display: none !important;
	}

	.gke-dual-menu .gke-dm-trigger-wrap {
		display: flex !important;
	}
}

@media (min-width: 768px) {
	.gke-dual-menu .gke-dm-trigger-wrap {
		display: none !important;
	}

	.gke-dual-menu .gke-dm-panel {
		display: none !important;
	}
}