/*
 * Mobile nav — off-canvas drawer slides in from the right.
 * Activated by .liv-icon-btn[data-toggle="mobile-nav"].
 */

.liv-mobile-nav {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 92vw);
	background: var(--liv-ink-900);
	color: var(--liv-paper);
	z-index: var(--z-mobile-nav);
	transform: translateX(100%);
	transition: transform var(--liv-transition-slow);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: -16px 0 32px rgba(0,0,0,0.4);
}
.liv-mobile-nav[data-open="true"] { transform: translateX(0); }

.liv-mobile-nav__scrim {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: var(--z-overlay-scrim);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--liv-transition);
}
.liv-mobile-nav__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.liv-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--liv-ink-500);
}
.liv-mobile-nav__logo svg { height: 28px; }

.liv-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 1rem 0;
}
.liv-mobile-nav__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	color: var(--liv-paper);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	transition: background-color var(--liv-transition);
}
.liv-mobile-nav__list a:hover { background: rgba(255,255,255,0.04); color: var(--liv-leaf-300); }
.liv-mobile-nav__list a svg { width: 14px; height: 14px; opacity: 0.5; }

.liv-mobile-nav__cta {
	padding: 1.5rem 1.25rem;
	border-top: 1px solid var(--liv-ink-500);
}
.liv-mobile-nav__cta .liv-pill { width: 100%; justify-content: space-between; }

.liv-mobile-nav__utility {
	padding: 1rem 1.5rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--liv-ink-300);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.liv-mobile-nav__utility a { color: var(--liv-ink-300); }
.liv-mobile-nav__utility a:hover { color: var(--liv-paper); }

@media (min-width: 1024px) {
	.liv-mobile-nav,
	.liv-mobile-nav__scrim { display: none; }
}