/* =========================================================================
   Mobile Menu Element
   =========================================================================
   Toggle: .wooforge-mmob-toggle
   Panel:  .wooforge-mmob-panel  (opened via window.WooForgeOverlay)
   Styles: wooforge-mmob--default (accordion) | wooforge-mmob--drilled (slide-in)
   Positions: wooforge-mmob--left | wooforge-mmob--right | wooforge-mmob--fullwidth
   Overlap:   wooforge-mmob--no-overlap  =>  top: var(--wooforge-header-total-height)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Toggle (hamburger button)
   ------------------------------------------------------------------------- */

.wooforge-mmob-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: inherit;
}

.wooforge-mmob-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: opacity .15s, transform .2s;
}

/* Animate to × when open */
.wooforge-mmob-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.wooforge-mmob-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.wooforge-mmob-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   Panel base
   ------------------------------------------------------------------------- */

.wooforge-mmob-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 300px;
	max-width: 90vw;
	z-index: 9999;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease;
}


/* No-overlap: panel starts below the header (--wooforge-header-total-height already includes admin bar) */
.wooforge-mmob-panel.wooforge-mmob--no-overlap {
	top: var(--wooforge-header-total-height, 0px);
}

/* Admin bar offset for overlap panels (no-overlap already accounts for it via the JS variable) */
body.admin-bar .wooforge-mmob-panel:not(.wooforge-mmob--no-overlap) {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .wooforge-mmob-panel:not(.wooforge-mmob--no-overlap) {
		top: 46px;
	}
}

/* --- Position variants --- */

.wooforge-mmob-panel.wooforge-mmob--left {
	left: 0;
	transform: translateX(-100%);
}

.wooforge-mmob-panel.wooforge-mmob--right {
	right: 0;
	transform: translateX(100%);
}

.wooforge-mmob-panel.wooforge-mmob--fullwidth {
	left: 0;
	width: 100%;
	max-width: none;
	transform: translateY(-100%);
}

/* Open state — all positions collapse to translate(0) */
.wooforge-mmob-panel.is-open {
	transform: translate(0, 0);
}

/* -------------------------------------------------------------------------
   Panel header (always-visible bar with the close button)
   ------------------------------------------------------------------------- */

.wooforge-mmob-panel-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 6px 8px;
	border-bottom: 1px solid #f0f0f0;
}

.wooforge-mmob-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s;
}
.wooforge-mmob-close:hover { opacity: 1; }
.wooforge-mmob-close img,
.wooforge-mmob-close svg {
	display: block;
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Content area (fills remaining panel height)
   ------------------------------------------------------------------------- */

.wooforge-mmob-content {
	flex: 1 1 0;
	min-height: 0; /* allow shrinking inside flex column */
}

.wooforge-mmob-widgets {
	flex-shrink: 0;
	padding: 12px 16px;
}
.wooforge-mmob-widgets .widget:last-child {
	margin-bottom: 0;
}

/* Shared nav-list resets */
.wooforge-mmob-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wooforge-mmob-panel a {
	text-decoration: none;
	color: inherit;
}

/* =========================================================================
   DEFAULT STYLE — accordion (sub-menus expand below their parent)
   ========================================================================= */

/* THE WHOLE PANEL SCROLLS, NOT JUST THE MENU. The panel holds four children
   in a column: the header, a widget area before the menu, the menu, and a
   widget area after it. Only the menu used to scroll, and the two widget
   areas are flex: 0 0 auto - so a widget taller than the screen pushed
   everything else out and could not itself be reached.

   Measured on a 390x844 phone with the "before" area filled: that area was
   2166px tall against a 659px panel, the menu between the two widget areas
   was squeezed to a height of ZERO - the navigation had disappeared entirely
   - and nothing scrolled, because the scroll container was the menu that had
   just been squeezed out of existence. Both menu styles did this.

   So the scroll moves up to the panel, where it covers all three content
   blocks at once, and the menu goes back to being sized by its content. */
.wooforge-mmob-panel {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Sticky rather than a fixed sibling: the header is already the first child
   of the scroll container, so this pins it with no change to the markup and
   no height to keep in sync. */
.wooforge-mmob-panel > .wooforge-mmob-panel-header {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
}

.wooforge-mmob-panel .wooforge-mmob-content {
	flex: 0 0 auto;
}

.wooforge-mmob-panel.wooforge-mmob--default .wooforge-mmob-content {
	overflow: visible;
}

.wooforge-mmob-panel.wooforge-mmob--default > .wooforge-mmob-content > ul,
.wooforge-mmob-panel.wooforge-mmob--default .wooforge-mmob-content > nav > ul {
	padding: 8px 0;
}

/* Items with children: link + expand button share a row */
.wooforge-mmob-panel.wooforge-mmob--default .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.wooforge-mmob-panel.wooforge-mmob--default .menu-item-has-children > a {
	flex: 1;
}

.wooforge-mmob-panel.wooforge-mmob--default .wooforge-mmob-content a {
	display: block;
	padding: 12px 16px;
}
.wooforge-mmob-panel.wooforge-mmob--default .wooforge-mmob-content a:hover {
	background: #f8f8f8;
}

/* Expand toggle button (added by JS) */
.wooforge-mmob-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	padding: 0;
	background: transparent;
	border: none;
	border-left: 1px solid #f0f0f0;
	cursor: pointer;
	color: inherit;
	transition: transform .2s;
}
.wooforge-mmob-expand:hover { background: #f8f8f8; }
.wooforge-mmob-expand.is-open { transform: rotate(180deg); }
.wooforge-mmob-expand svg {
	width: 14px;
	height: 14px;
	pointer-events: none;
}

/* Sub-menus: hidden by default, toggled by JS */
.wooforge-mmob-panel.wooforge-mmob--default .sub-menu {
	display: none;
	width: 100%;
	padding: 4px 0;
	background: #fafafa;
	border-top: 1px solid #f0f0f0;
}
.wooforge-mmob-panel.wooforge-mmob--default .sub-menu.is-open {
	display: block;
}
.wooforge-mmob-panel.wooforge-mmob--default .sub-menu li {
	border-bottom: 1px solid #f0f0f0;
	border-left: 3px solid #e8e8e8;
}
.wooforge-mmob-panel.wooforge-mmob--default .sub-menu a {
	padding-left: 24px;
}

/* Mega Menu HTML Block content revealed inside the mobile menu (see
   WooForge_Mobile_Mega_Menu_Walker) — arbitrary shortcode output, not a
   list of links, so it gets its own padding instead of the link-indent
   rules above. Also overrides drilled style's "li { display:flex }" (meant
   for a single link + drill button per row), which would otherwise force
   multi-element shortcode content into an unwanted flex row. */
.wooforge-mmob-mega-content-item {
	display: block !important;
	padding: 12px 16px;
	border-left: none;
}

/* =========================================================================
   DRILLED STYLE — slide-in (each sub-menu appears as a new full panel)
   ========================================================================= */

/* The content clips the horizontally-sliding viewport */
.wooforge-mmob-panel.wooforge-mmob--drilled .wooforge-mmob-content {
	overflow: hidden;
}

/* Viewport: flex row of screens, transitions left/right */
.wooforge-mmob-viewport {
	display: flex;
	height: 100%;
	will-change: transform;
	transition: transform .3s ease;
}

/* Each screen: one panel's worth of content */
.wooforge-mmob-screen {
	flex: 0 0 100%;
	min-width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

/* Back bar (shown at top of every sub-menu screen) */
.wooforge-mmob-back-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-bottom: 1px solid #f0f0f0;
	background: #f8f8f8;
	position: sticky;
	top: 0;
	z-index: 1;
}

.wooforge-mmob-back {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	opacity: .7;
	transition: opacity .15s;
}
.wooforge-mmob-back:hover { opacity: 1; }
.wooforge-mmob-back svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.wooforge-mmob-level-title {
	font-weight: var(--wooforge-fw-widget-title, 600);
	text-transform: var(--wooforge-tt-widget-title, none);
	font-size: .9em;
}

/* Drilled screen nav list */
.wooforge-mmob-panel.wooforge-mmob--drilled .wooforge-mmob-screen > ul {
	padding: 8px 0;
}

.wooforge-mmob-panel.wooforge-mmob--drilled li {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #f0f0f0;
}
.wooforge-mmob-panel.wooforge-mmob--drilled li:last-child { border-bottom: none; }

.wooforge-mmob-panel.wooforge-mmob--drilled a {
	flex: 1;
	display: block;
	padding: 12px 16px;
}
.wooforge-mmob-panel.wooforge-mmob--drilled a:hover { background: #f8f8f8; }

/* Drill-in button (›) placed next to the item's link */
.wooforge-mmob-drill {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	padding: 0;
	background: transparent;
	border: none;
	border-left: 1px solid #f0f0f0;
	cursor: pointer;
	color: inherit;
	transition: background .15s;
}
.wooforge-mmob-drill:hover { background: #f8f8f8; }
.wooforge-mmob-drill svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* Drilled keeps its own machinery: the sliding row of screens needs a box of
   a known height to clip against, so the fix here is not to let the widgets
   collapse that box to nothing.

   min-height is what does it. flex: 1 1 0 alone let the menu shrink to zero
   the moment a widget was taller than the panel - measured at exactly 0px -
   which is how the navigation vanished. With a floor under it the menu is
   always there, the panel's own scroll reaches the widgets above and below,
   and long submenus still scroll inside their screen as before.

   Not applied to the accordion style, which has no reason for a second
   scroll: there the menu simply grows and the panel scrolls it. */
.wooforge-mmob-panel.wooforge-mmob--drilled .wooforge-mmob-content {
	flex: 1 1 auto;
	min-height: 60vh;
}