/* ============================================================
   MOBILE MENU — Core Layout & Interactions
   ============================================================ */

/* Full logo hidden by default (desktop shows icon-only) */
.navbar-brand .nav-logo-full {
	display: none;
}

/* Overlay backdrop */
.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 1100;
}

body.mobile-menu-open .mobile-menu-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media only screen and (max-width: 991px) {
	/* Header z-index when menu is open */
	body.mobile-menu-open header.main-header,
	body.mobile-menu-open header.main-header .header-sticky,
	body.mobile-menu-open header.main-header .navbar {
		position: relative;
		z-index: 1300;
	}

	/* 3-column grid: [spacer] [logo] [hamburger] */
	.navbar .container {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	/* Logo — centered, swap to full version */
	.navbar-brand {
		grid-column: 2;
		justify-self: center;
	}

	.navbar-brand .nav-logo-icon-only {
		display: none;
	}

	.navbar-brand .nav-logo-full {
		display: block;
		height: 28px;
		width: auto;
	}

	/* Hide old SlickNav staging area */
	.responsive-menu {
		display: none;
	}

	/* Hamburger toggle — right-aligned */
	.navbar-toggle {
		display: block;
		margin-left: auto;
		position: relative;
		grid-column: 3;
		justify-self: end;
		z-index: 1300;
	}

	/* Panel — wider on mobile with rounded corners */
	.navbar-toggle .slicknav_nav {
		top: calc(100% + 20px);
		border-radius: 10px;
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	/* Mobile menu footer — login CTA at bottom of panel */
	.navbar-toggle .slicknav_nav .mobile-menu-footer {
		list-style: none;
		padding: 12px 16px 8px;
		margin: 6px 0 0;
		border-top: 1px solid #eeeeee;
	}

	.navbar-toggle .slicknav_nav .mobile-menu-login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		background: transparent;
		border: 1.5px solid #d8d8d8;
		color: #3f3f3f;
		font-family: var(--accent-font);
		font-size: 13.5px;
		font-weight: 600;
		padding: 10px 16px !important;
		border-radius: 8px !important;
		text-transform: capitalize;
		text-decoration: none;
		transition: all 0.25s ease;
	}

	.navbar-toggle .slicknav_nav .mobile-menu-login-btn:hover,
	.navbar-toggle .slicknav_nav .mobile-menu-login-btn:focus {
		background: #EA220F;
		border-color: #EA220F;
		color: #ffffff;
	}
}