/* Mobile menu (≤991px): hamburger + full-screen overlay (nav + subjects panels). */

/* Hamburger toggle — mobile only. */
.gh-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gh-text-primary);
	cursor: pointer;
}

@media (max-width: 991px) {
	.gh-mobile-toggle {
		display: inline-flex;
	}

	/* Mobile header (Figma 3242:9644): logomark only on the left; "Get a demo"
	   + hamburger on the right. Sign in is dropped here — it lives in the open
	   menu's footer instead. */
	.gh-header {
		padding: 8px 16px;
	}

	.gh-header__logo .gh-logotext {
		display: none;
	}

	.gh-header__logo .gh-logomark {
		width: 32px;
		height: 32px;
	}

	.gh-header__actions .gh-btn--text {
		display: none;
	}

	.gh-header__actions .gh-btn--primary {
		padding: 12px 16px;
	}
}

/* Scroll lock while the overlay is open. */
body.gh-mobile-open {
	overflow: hidden;
}

/* Overlay — sits off-screen to the right and slides in when opened. */
.gh-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: var(--gh-white);
	overflow: hidden;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s;
}

.gh-mobile-menu.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Above the mobile breakpoint the overlay must never show (safety on resize). */
@media (min-width: 992px) {
	.gh-mobile-menu {
		display: none !important;
	}
}

.gh-mobile-menu__viewport {
	display: flex;
	width: 200%;
	height: 100%;
	transition: transform 0.25s ease;
}

.gh-mobile-menu.is-subjects .gh-mobile-menu__viewport {
	transform: translateX(-50%);
}

.gh-mobile-panel {
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* The bar stays pinned; the inner list (.gh-mobile-nav / .gh-mobile-subjects)
	   is the scroll container — see those rules. */
}

/* Top bar (logo/back left, close right) */
.gh-mobile-bar {
	flex-shrink: 0;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	border-bottom: 1px solid var(--gh-accent);
}

.gh-mobile-bar__logo {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gh-mobile-close,
.gh-mobile-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: 'avenir_next_worlddemi', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
}

.gh-mobile-close {
	color: var(--gh-text-primary);
}

.gh-mobile-back {
	color: #008768;
}

/* Panel 1: top-level nav list */
.gh-mobile-nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 8px 16px;
}

.gh-mobile-nav__item + .gh-mobile-nav__item {
	border-top: 1px solid var(--gh-accent);
}

.gh-mobile-nav__link,
.gh-mobile-nav__drill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 8px;
	margin: 0;
	padding: 24px 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: 'avenir_next_worlddemi', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	color: var(--gh-text-primary);
}

.gh-mobile-nav__drill .gh-mobile-icon {
	color: var(--gh-text-secondary);
}

/* Panel 1: bottom CTAs */
.gh-mobile-menu__cta {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
}

.gh-mobile-cta {
	width: 100%;
	height: 48px;
	border-radius: 8px;
	font-size: 14px;
}

.gh-mobile-cta--outline {
	border: 1px solid var(--gh-text-primary);
	color: var(--gh-text-primary);
	background: var(--gh-white);
}

/* Panel 2: single-column subjects list */
.gh-mobile-subjects {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px 16px 100px;
}