/**
 * Mobile Menu
 *
 * VISUAL THEME FRAMEWORK.
 *
 * Styles the slide-in mobile menu panel and its overlay backdrop.
 * The panel is hidden by default and shown only when header-nav.js
 * adds the .is-open class — see that file for the toggle behavior.
 * No section markup or selector is referenced anywhere in this file.
 *
 * TOKEN-ONLY.
 */

.atb-mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background-color: rgb(0 0 0 / 0.4);
	z-index: var(--atb-z-mobile-menu-overlay, 190);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

.atb-mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(80vw, 320px);
	background-color: var(--atb-color-background, #ffffff);
	z-index: var(--atb-z-mobile-menu, 200);
	box-shadow: var(--atb-shadow-xl, 0 20px 25px rgb(0 0 0 / 0.1));
	transform: translateX(100%);
	transition: transform 0.25s ease;
	padding: var(--atb-space-6, 1.5rem);
	overflow-y: auto;
}

.atb-mobile-menu.is-open {
	transform: translateX(0);
}

.atb-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--atb-space-6, 1.5rem);
	background: transparent;
	border: 1px solid var(--atb-color-border, #e5e5e5);
	border-radius: var(--atb-radius-md, 0.5rem);
	font-size: var(--atb-font-size-lg, 1.125rem);
	cursor: pointer;
}

.atb-mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: var(--atb-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.atb-mobile-menu__link {
	font-family: var(--atb-font-family-base, sans-serif);
	font-size: var(--atb-font-size-base, 1rem);
	font-weight: var(--atb-font-weight-medium, 500);
	color: var(--atb-color-text, #171717);
	text-decoration: none;
	display: block;
	padding: var(--atb-space-2, 0.5rem) 0;
}

.atb-mobile-menu__link:hover {
	color: var(--atb-color-primary, #2563eb);
}

@media (prefers-reduced-motion: reduce) {
	.atb-mobile-menu,
	.atb-mobile-menu-overlay {
		transition: none;
	}
}

/* Above the medium breakpoint, the mobile menu and its overlay are
   never shown, regardless of .is-open state — desktop users always
   see the standard nav from header-nav.css. KNOWN CSS LIMITATION:
   hardcoded to match --atb-breakpoint-md — see container.css. */
@media (min-width: 769px) {
	.atb-mobile-menu,
	.atb-mobile-menu-overlay {
		display: none;
	}
}