/* ==========================================================================
   Premium off-canvas mobile navigation drawer (header.jsp).
   Self-contained: does not depend on mmenu.js/menu.css. Site-wide (loaded
   via csstemplate.jsp), so it applies consistently on every page that uses
   the shared header, not just the home page. Desktop (>=992px) is untouched
   -- the drawer and overlay are hidden entirely there.
   ========================================================================== */

.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 20, 60, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	z-index: 1998;
}

.mobile-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 85%;
	max-width: 340px;
	background: linear-gradient(165deg, #2D368F 0%, #1F2668 100%);
	color: #ffffff;
	z-index: 1999;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.mobile-nav-drawer * {
	box-sizing: border-box;
}

/* box-shadow only while open -- translateX(-100%) moves the drawer off-screen,
   but a static box-shadow's blur radius still extends past the element's own
   edge, so applying it unconditionally left a shadow band bleeding into the
   viewport even with the drawer closed. */
.mobile-nav-drawer.is-open {
	transform: translateX(0);
	box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
}

body.mobile-nav-open {
	overflow: hidden;
}

/* ---------- Sticky mobile top bar (logo + hamburger + search) ---------- */

@media only screen and (max-width: 991.98px) {
	/* common.css applies a heavy, always-on double box-shadow to the whole
	   .mobile-menu wrapper (0 2px 4px + 0 4px 12px, !important) -- that's the
	   "extra shadow" visible on every page. Replace it with one subtle shadow
	   scoped to just the sticky logo bar itself. */
	.mobile-menu {
		box-shadow: none !important;
	}

	.header_top.home6 {
		display: none !important;
	}

	.mobile-menu .header.stylehome1.home6.mobile-header {
		position: sticky;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px !important;
		background: #ffffff !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		overflow: visible;
	}

	/* menu.css styles every `.header a` as the old hamburger glyph
	   (absolute 28x18 at top/left 0). Logo and language flags inherit
	   that, so they leave the flex row and paint on top of the bell. */
	.mobile-menu .mobile-header a {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		display: inline-flex;
		align-items: center;
	}

	.mobile-menu .mobile-header a:before {
		content: none !important;
		display: none !important;
		width: 0;
		height: 0;
		background: none;
	}

	/* menu.css `.header a` / `a span` is the old hamburger (28x18 + a 35x2
	   white bar). That span is the language name inside each flag link, so
	   it clips the SVG into a color tile. Hide it and pin a 3:2 flag. */
	.mobile-menu .mobile-header a.lms-lang__flag {
		display: block !important;
		width: 32px !important;
		height: 21px !important;
		min-width: 32px !important;
		min-height: 21px !important;
		padding: 0 !important;
		overflow: hidden;
		border-radius: 3px;
		flex: none;
	}

	.mobile-menu .mobile-header a.lms-lang__flag img {
		display: block !important;
		width: 32px !important;
		height: 21px !important;
		max-width: none !important;
		object-fit: contain;
	}

	.mobile-menu .mobile-header a.lms-lang__flag span,
	.mobile-menu .mobile-header a.lms-lang__flag:before {
		display: none !important;
		content: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	/* common.css has its own `.mobile-header .nav_logo_img { height: auto !important }`
	   at <=520px, which cancels a plain `height: 34px` here -- matching its
	   !important (at higher selector specificity, so this still wins) is the
	   only way to actually pin the logo's size on small phones. */
	.mobile-menu .main_logo_home2 .nav_logo_img {
		height: 34px !important;
		width: auto !important;
		max-width: 160px !important;
	}

	/* course-overview page's mobile header shows the course name next to the
	   logo (see overview-header.jsp) -- constrain and truncate it so a long
	   title never pushes the hamburger off-screen or wraps awkwardly.
	   .main_logo_home2 and .menu_bar_home2 (the hamburger) are both direct
	   flex children of .mobile-header; without an explicit flex-basis here,
	   the logo row took all the space and the hamburger collapsed to 0 width
	   and wrapped onto its own line instead of sitting beside it. */
	.mobile-header {
		flex-wrap: nowrap;
	}

	.main_logo_home2 {
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
		/* max-width (not just flex-shrink) is the real fix: flex-shrink alone
		   wasn't constraining this element below its natural content width in
		   practice, so it kept rendering at ~300px and, being `position:
		   relative` (from the base template, not this stylesheet), painted
		   above the static hamburger button regardless of DOM order --
		   silently swallowing every click on it. A hard cap guarantees the
		   two can never overlap. */
		max-width: calc(100% - 168px);
		overflow: hidden;
	}

	.main_logo_home2 .mobile-course-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	/* self-contained hamburger button -- replaces the legacy .menu_bar_home2
	   markup, which drew its icon via a `position:absolute` link with a
	   hardcoded `top:15px`. That assumed a specific ancestor for its
	   containing block; once .mobile-header itself became `position:sticky`
	   (a positioned element, and thus a new containing block for absolutely
	   positioned descendants), the icon's position broke and it stopped
	   rendering inside the visible header. This version just flows in the
	   flex row normally, no absolute positioning involved. */
	.mobile-nav-hamburger {
		flex: 0 0 auto;
		position: relative;
		z-index: 1;
		width: 34px;
		height: 34px;
		border: none;
		background: transparent;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		cursor: pointer;
	}

	.mobile-nav-hamburger span {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: #1F2668;
	}

	.mobile-header-actions {
		position: relative;
		z-index: 20;
		margin-left: auto;
		flex: none;
		display: flex;
		align-items: center;
		gap: 8px;
		overflow: visible;
	}

	.mobile-header-actions .lms-lang {
		gap: 6px;
	}

	.mobile-header-actions .lms-lang__flag {
		width: 32px !important;
		height: 21px !important;
		min-width: 32px;
		overflow: hidden;
		border-radius: 3px;
	}

	.mobile-header-actions .lms-lang__flag img {
		width: 32px !important;
		height: 21px !important;
		max-width: none;
		object-fit: contain;
	}

	.mobile-header-actions .lms-lang__flag span {
		display: none !important;
	}

	/* global-search.css hides .global-search entirely below 1200px since it
	   was only ever wired up for the desktop nav -- this is a second instance
	   (see header.jsp) placed in the mobile header, so it needs to opt back
	   in and drop the desktop-only sizing (flex/max-width/margin). */
	.mobile-header-search {
		padding: 8px 16px 12px;
		background: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	.mobile-header-search .global-search {
		display: block !important;
		width: 100%;
		max-width: 100%;
		flex: none;
		margin: 0;
	}

	.mobile-header-search .global-search-dropdown {
		width: 100%;
	}
}

.mobile-nav-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 18px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	flex: none;
}

.mobile-nav-drawer__logo {
	height: 30px;
	background: #ffffff;
	border-radius: 8px;
	padding: 5px 10px;
}

.mobile-nav-drawer__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #ffffff;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mobile-nav-drawer__close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.mobile-nav-drawer__profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 16px 4px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	text-decoration: none !important;
	color: #ffffff !important;
	flex: none;
}

.mobile-nav-drawer__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
}

.mobile-nav-drawer__profile-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.mobile-nav-drawer__profile-link {
	display: block;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 2px;
}

.mobile-nav-drawer__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px 12px;
}

.mobile-nav-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-link,
.mobile-nav-drawer__expand {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	margin-bottom: 2px;
	border-radius: 10px;
	border-left: 3px solid transparent;
	background: none;
	border-top: none;
	border-right: none;
	color: rgba(255, 255, 255, 0.88) !important;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.mobile-nav-link i,
.mobile-nav-drawer__expand > i:first-child {
	font-size: 18px;
	width: 20px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	flex: none;
}

.mobile-nav-link:hover,
.mobile-nav-drawer__expand:hover {
	background: rgba(255, 255, 255, 0.08);
}

.mobile-nav-link.is-active {
	background: rgba(40, 185, 40, 0.16);
	border-left-color: #28B928;
	color: #ffffff !important;
}

.mobile-nav-link.is-active i {
	color: #28B928;
}

.mobile-nav-drawer__auth {
	display: flex;
	gap: 10px;
	padding: 14px 18px;
	flex: none;
}

.mobile-nav-drawer__btn {
	flex: 1 1 0;
	text-align: center;
	padding: 12px 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none !important;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav-drawer__btn--outline {
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	color: #ffffff !important;
}

.mobile-nav-drawer__btn--outline:hover {
	background: rgba(255, 255, 255, 0.08);
}

.mobile-nav-drawer__btn--solid {
	background: #28B928;
	color: #ffffff !important;
	box-shadow: 0 10px 24px rgba(40, 185, 40, 0.35);
}

.mobile-nav-drawer__btn--solid:hover {
	background: #23a323;
}

.mobile-nav-drawer__utility {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	flex: none;
}

.mobile-nav-drawer__utility a {
	display: inline-flex;
	opacity: 0.85;
}

.mobile-nav-drawer__utility a:hover {
	opacity: 1;
}

.mobile-nav-drawer__utility img {
	width: 20px;
	height: 20px;
}

.mobile-nav-drawer__utility select {
	margin-left: auto;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 13px;
	min-width: 96px;
}

.mobile-nav-drawer__utility select option {
	color: #222222;
}

@media only screen and (min-width: 576px) and (max-width: 991.98px) {
	.mobile-nav-drawer {
		width: 62%;
		max-width: 380px;
	}
}

@media only screen and (min-width: 992px) {
	.mobile-nav-overlay,
	.mobile-nav-drawer {
		display: none !important;
	}
}