/**
 * Mobile navigation architecture.
 *
 * Theme baseline (safwat-medicox/style.css, @media max-width:1080px):
 *   .sm-nav.sm-open{display:block;position:absolute;top:100%;left:0;right:0;...}
 * — absolutely positioned inside the sticky .sm-header, with NO height bound
 * and NO overflow. The panel therefore grows to its full content height and is
 * scrolled by the DOCUMENT, which is why the header's window-scroll handler
 * fires while the menu is open and why .sm-mobile-bar (position:fixed;
 * z-index:150) paints over the last items.
 *
 * This file makes the panel its own viewport-bounded scroll container.
 * Heights come from JS-measured custom properties, not magic numbers.
 */

@media (max-width: 1080px) {

	/* Own scroll container, bounded by the viewport below the header. */
	.sm-header .sm-nav.sm-open {
		position: fixed;
		top: var(--safwat-header-h, 86px);
		left: 0;
		right: 0;
		/* 100vh first as the old-iOS fallback; dvh overrides where supported. */
		height: calc(100vh - var(--safwat-header-h, 86px));
		height: calc(100dvh - var(--safwat-header-h, 86px));
		max-width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		overscroll-behavior-y: contain;
		/* Clear the fixed Appointment bar and the iPhone home indicator. */
		padding-bottom: calc(
			var(--safwat-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 28px
		);
		padding-left: max(20px, env(safe-area-inset-left, 0px));
		padding-right: max(20px, env(safe-area-inset-right, 0px));
		-webkit-overflow-scrolling: touch;
	}

	/* Nothing inside the panel may create horizontal overflow. */
	.sm-header .sm-nav.sm-open .sm-nav__list,
	.sm-header .sm-nav.sm-open .sm-mega-menu,
	.sm-header .sm-nav.sm-open .sm-mega-menu__grid {
		max-width: 100%;
		min-width: 0;
	}

	.sm-header .sm-nav.sm-open .sm-mega-menu__col a { overflow-wrap: anywhere; }

	/* Body lock. Applied by JS with the scroll offset preserved in --safwat-y. */
	html.safwat-nav-locked,
	body.safwat-nav-locked {
		overflow: hidden;
		overscroll-behavior: none;
	}

	body.safwat-nav-locked {
		position: fixed;
		top: var(--safwat-lock-top, 0px);
		left: 0;
		right: 0;
		width: 100%;
	}

	/* The Appointment bar stays reachable and above the panel, with safe area. */
	.sm-mobile-bar {
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
}

/* The theme reserves a flat 64px for the fixed bar; add the safe-area inset. */
@media (max-width: 680px) {
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	body.safwat-nav-locked { padding-bottom: 0; }
}