/**
 * Mobile drawer navigation
 */

.ms-mobile-nav__backdrop {
	display: none;
}

@media (max-width: 899px) {
	.ms-mobile-nav {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 350;
		pointer-events: none;
		visibility: hidden;
	}

	.ms-mobile-nav.is-open {
		pointer-events: auto;
		visibility: visible;
	}

	.ms-mobile-nav__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(15, 23, 42, 0.52);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.ms-mobile-nav.is-open .ms-mobile-nav__backdrop {
		opacity: 1;
	}

	.ms-mobile-nav__panel {
		position: absolute;
		top: 0;
		right: 0;
		width: min(340px, 92vw);
		height: 100%;
		max-height: 100dvh;
		background: var(--ms-color-surface);
		box-shadow: -12px 0 48px rgba(27, 43, 75, 0.18);
		display: flex;
		flex-direction: column;
		padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
		transform: translateX(100%);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
		overflow: hidden;
	}

	.ms-mobile-nav.is-open .ms-mobile-nav__panel {
		transform: translateX(0);
	}

	.ms-mobile-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--ms-color-border);
		flex-shrink: 0;
	}

	.ms-mobile-nav__head .ms-logo__text,
	.ms-mobile-nav__head .custom-logo-link img {
		max-width: none;
	}

	.ms-mobile-nav__close {
		width: 44px;
		height: 44px;
		border: 1px solid var(--ms-color-border);
		border-radius: 12px;
		background: var(--ms-color-bg);
		font-size: 1.65rem;
		line-height: 1;
		cursor: pointer;
		color: var(--ms-color-text);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.ms-mobile-nav__close:hover {
		background: var(--ms-color-primary-light);
		border-color: rgba(234, 88, 12, 0.3);
	}

	.ms-mobile-nav__body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-inline: 0.15rem;
	}

	.ms-mobile-nav__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ms-mobile-nav__list > li {
		margin-bottom: 4px;
	}

	.ms-mobile-nav__list .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.ms-mobile-nav__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		min-height: 52px;
		padding: 12px 14px;
		color: var(--ms-color-text);
		font-weight: 700;
		font-size: var(--ms-text-base);
		border-radius: var(--ms-radius-md);
		text-decoration: none;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.ms-mobile-nav__list a:hover,
	.ms-mobile-nav__list .current-menu-item > a,
	.ms-mobile-nav__list .current_page_item > a {
		background: var(--ms-color-primary-light);
		color: var(--ms-color-primary);
	}

	.ms-mobile-nav__list .menu-item-has-children > a {
		grid-column: 1;
		padding-inline-end: 0.5rem;
	}

	.ms-mobile-nav__list .menu-item-has-children > .ms-mobile-nav__sub-toggle {
		grid-column: 2;
		grid-row: 1;
		margin-inline-end: 0.35rem;
	}

	.ms-mobile-nav__list .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
	}

	.ms-mobile-nav__sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin-inline-start: auto;
		border: none;
		border-radius: 10px;
		background: transparent;
		color: inherit;
		font-size: 1.1rem;
		line-height: 1;
		cursor: pointer;
		flex-shrink: 0;
		transition: background 0.2s ease, transform 0.2s ease;
	}

	.ms-mobile-nav__sub-toggle:hover {
		background: rgba(27, 43, 75, 0.06);
	}

	.ms-mobile-nav__list .menu-item-has-children.is-sub-open > .ms-mobile-nav__sub-toggle {
		transform: rotate(180deg);
	}

	.ms-mobile-nav__list .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0 0 0.35rem;
		display: none;
	}

	.ms-mobile-nav__list .menu-item-has-children.is-sub-open > .sub-menu {
		display: block;
	}

	.ms-mobile-nav__list .sub-menu a {
		min-height: 44px;
		padding-inline-start: 1.75rem;
		font-size: var(--ms-text-sm);
		font-weight: 600;
		color: var(--ms-color-text-muted);
	}

	.ms-mobile-nav__list .sub-menu a:hover,
	.ms-mobile-nav__list .sub-menu .current-menu-item > a {
		color: var(--ms-color-primary);
	}

	.ms-mobile-nav__footer {
		display: flex;
		flex-direction: column;
		gap: 0.65rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--ms-color-border);
		flex-shrink: 0;
	}

	.ms-mobile-nav__footer .ms-btn {
		width: 100%;
		min-height: 50px;
		font-size: var(--ms-text-sm);
	}

	.ms-mobile-nav__footer .ms-btn--primary {
		box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25);
	}

	body.ms-nav-open {
		overflow: hidden;
		touch-action: none;
	}

	/* Hamburger → X */
	.ms-nav-toggle.is-active .ms-nav-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.ms-nav-toggle.is-active .ms-nav-toggle__bar:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.ms-nav-toggle.is-active .ms-nav-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.ms-nav-toggle.is-active {
		border-color: rgba(234, 88, 12, 0.35);
		background: var(--ms-color-primary-light);
	}
}