/*
 * Mobile Menu popup (Elementor popup 168 - Swipeix template, reused).
 * Figma: design-refs/figma/mobile-menu/ (node 2107:8970).
 *
 * Bottom-sheet layout (anchor, overlay, close button colour/size) lives in
 * the popup document settings; this file covers what those settings can't:
 * kit-proof heading type, nav item rhythm, footer pinning, close focus.
 * Scoped to .nge-mobile-menu (custom class on the popup's root container)
 * so it survives a different popup post ID on staging.
 */

/* Sheet height: content-sized. The old 380px floor (design 422) stranded ~134px
   of dead space between the nav and the Visit row, with the row pinned to the
   bottom by margin-top:auto. The client asked to tighten that, so the sheet now
   hugs its content (close X, nav, Visit row). The flex context of a boxed
   container is .e-con-inner, not the .e-con itself. */
.nge-mobile-menu > .e-con-inner {
	min-height: 0;
}

/* Space below the close X so the first nav item is not level with it (they
   overlapped: the X is pinned top-right, the nav started at the same line). */
.nge-mobile-menu .elementor-widget-nav-menu {
	margin-top: 24px;
}

/* FB3: black sheet + 2px gold frame + white text (client override of the white
   Figma menu). Scoped via :has() so only the NG mobile-menu popup is affected.
   Design (design-refs/figma/mobile-menu): a FULL-WIDTH sheet anchored to the
   BOTTOM of the screen, rounded top corners, not a centred card. */
.elementor-popup-modal:has(.nge-mobile-menu) {
	align-items: flex-end !important;  /* push the sheet to the bottom edge */
	/* Use the DYNAMIC viewport height so the sheet's bottom stays on-screen above the
	   mobile browser toolbar (a top:0/bottom:0 fixed overlay sits behind the iOS Safari
	   bar, cutting the sheet off). dvh == vh on desktop/headless, so no regression. */
	height: 100dvh !important;
	max-height: 100dvh !important;
}
.dialog-widget-content:has(.nge-mobile-menu) {
	background-color: var(--ng-color-surface, #1A1714) !important; /* FB23 supersedes FB3's pure black; FB3 gold frame kept */
	/* Elementor positions the sheet ABSOLUTE, which is why it cut off at the bottom on
	   mobile. Pin it FIXED to the viewport bottom instead - the entrance/exit transform
	   animations still run on a fixed element. */
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	width: 100% !important;            /* full-width bottom sheet */
	max-width: 100% !important;
	margin: 0 !important;              /* flush to the screen edges */
	border: 2px solid #E7B040 !important;      /* FB3 gold frame, top + sides */
	border-bottom: 0 !important;               /* sheet sits flush to the bottom */
	border-radius: 16px 16px 0 0 !important;   /* rounded top only */
	overflow: hidden !important;
}

/* Hide the duplicate "Visit eatout.co.za" NAV item in the popup (it is the bottom CTA
   already). Target its specific menu-item id, scoped to the popup, so the desktop
   header copy is untouched. Verified on staging: hiding it leaves Restaurants /
   Featured Gems / About intact (it is a leaf item, not a wrapper). */
.dialog-widget-content:has(.nge-mobile-menu) .menu-item-125 {
	display: none !important;
}
.nge-mobile-menu,
.nge-mobile-menu > .e-con-inner {
	background-color: var(--ng-color-surface, #1A1714);
}
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	color: #FFFFFF !important;
}
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus {
	color: #E7B040 !important;
}
.nge-mobile-menu a.e-con,
.nge-mobile-menu a.e-con * {
	color: #FFFFFF;
}
/* The ↗ arrow beside "Visit eatout.co.za" renders black on the dark sheet. It is an
   inline SVG on staging but an <img src=ArrowUpRight.svg> locally, so handle both:
   recolour the SVG fill, and run the <img> through a filter that turns black to white. */
.dialog-widget-content:has(.nge-mobile-menu) a.e-con svg,
.dialog-widget-content:has(.nge-mobile-menu) a.e-con svg * {
	fill: #FFFFFF !important;
}
.dialog-widget-content:has(.nge-mobile-menu) a.e-con img {
	filter: brightness(0) invert(1) !important;
}

/* R3: client asked to centre the mobile-menu close X and the menu items below it.
   Centre the X on the sheet's top edge and centre the content column (heading, nav,
   Visit row). Scoped via :has(.nge-mobile-menu) / .nge-mobile-menu so only this popup
   is touched. NOTE: the popup markup diverges local↔staging - verify on staging via
   the Elementor popup API before sign-off. */
.elementor-popup-modal:has(.nge-mobile-menu) .dialog-close-button {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}
/* The Elementor popup message wrapper rendered ~372px wide with ~89px side padding, so
   the centred content sat in a narrow strip and did not line up under the sheet-centred X
   (visible at 430px). Stretch it to the full sheet width with a sensible gutter so the X
   and the menu items share one centre axis. */
.dialog-widget-content:has(.nge-mobile-menu) .dialog-message,
.dialog-widget-content:has(.nge-mobile-menu) .dialog-lightbox-message {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}
.nge-mobile-menu > .e-con-inner {
	align-items: center;
	text-align: center;
}
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu,
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu > li {
	text-align: center;
	justify-content: center;
}

/* Heading: the kit's h4 rule (.elementor-kit-N h4) outranks widget typography */
.nge-mobile-menu .elementor-widget-text-editor h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: #FFFFFF !important; /* FB3: white heading on the black sheet */
}

/* Nav items: 24px gap between entries (Figma frame 11). Elementor's default
   13px/20px item padding both breaks the rhythm and wraps "Featured Gems"
   (173px of text in the 194px content column). */
.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child) {
	margin-bottom: 24px;
}

.nge-mobile-menu .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
	padding: 0;
	white-space: nowrap;
}

/* Footer link: a normal gap below the nav. Was margin-top:auto, which pinned it
   to the sheet bottom and (with the old 380px min-height) left a large gap above
   it; the client asked to reduce that. The sheet's own row-gap now sets the
   spacing after the nav block. */
.nge-mobile-menu a.e-con {
	margin-top: 0;
	align-items: center;
}

/* "Visit Eatout.co.za ↗": the text-editor widget ran ~14px taller than its
   text, pushing the text above the vertically-centred arrow icon. Collapse
   the paragraph so the text and the icon centre on the same line (JP 2026-06-17). */
.nge-mobile-menu a.e-con .elementor-widget-text-editor p {
	margin: 0;
	line-height: 1.4;
}

.nge-mobile-menu a.e-con .elementor-widget-image,
.nge-mobile-menu a.e-con .elementor-widget-image .elementor-widget-container {
	display: flex;
	align-items: center;
}

/* Close button: bare black X; ring only for keyboard focus */
.elementor-popup-modal .dialog-close-button {
	color: #000000;
}

/* FB3: solid white close X on the dark sheet. The icon is an SVG, so force fill
   too - color alone leaves the X dark (as it rendered). */
.elementor-popup-modal:has(.nge-mobile-menu) .dialog-close-button,
.elementor-popup-modal:has(.nge-mobile-menu) .dialog-close-button i,
.elementor-popup-modal:has(.nge-mobile-menu) .dialog-close-button svg {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}

/* The duplicate "Visit eatout.co.za" is NOT hidden via CSS. On staging the popup
   menu nests the items under the eatout <li>, so any rule targeting that <li> takes
   the whole nav with it (it has done so twice). The nav is non-negotiable; the
   duplicate is cosmetic and must be solved in the menu data, not here. Leave both. */

.elementor-popup-modal .dialog-close-button:focus {
	outline: none;
}

.elementor-popup-modal .dialog-close-button:focus-visible {
	outline: 2px solid #E7B040;
	outline-offset: 2px;
}

/* Entrance animation - mobile-menu.js adds .nge-mm-opening on show; the sheet slides
   up from below. (position:fixed removed Elementor's own entrance, so it just appeared.) */
@keyframes ngMobileMenuSlideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
.elementor-popup-modal.nge-mm-opening .dialog-widget-content {
	animation: ngMobileMenuSlideUp .34s cubic-bezier(.22, 1, .36, 1) both;
}

/* Exit animation - driven by assets/js/mobile-menu.js, which adds .nge-mm-closing
   just before handing off to Elementor's close. The sheet slides down, the
   scrim fades. (JP 2026-06-17 - Elementor hides popups instantly otherwise.) */
.elementor-popup-modal.nge-mm-closing {
	transition: background-color .28s ease;
	background-color: transparent !important;
}

.elementor-popup-modal.nge-mm-closing .dialog-widget-content {
	transition: transform .28s ease, opacity .28s ease;
	transform: translateY(100%);
	opacity: 0;
}