/* =====================================================
   Baijia Menu Drawer Widget
   ===================================================== */

/* ── Trigger ── */
.bjmd-wrapper {
	display: inline-flex;
	position: relative;
}

.bjmd-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: none;
	background: transparent;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bjmd-trigger svg {
	display: block;
	flex-shrink: 0;
}

.bjmd-btn-text {
	white-space: nowrap;
}

/* =====================================================
   Overlay
   ===================================================== */
.bjmd-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: var(--bjmd-overlay, rgba(0, 0, 0, 0.5));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.bjmd-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* =====================================================
   Drawer
   ===================================================== */
.bjmd-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: var(--bjmd-width, 360px);
	max-width: 100vw;
	z-index: 99999;
	background: var(--bjmd-bg, #ffffff);
	display: flex;
	flex-direction: column;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
	overflow-x: hidden; /* clip internal overflow */
	transform: translateX(100%);
	/* delay visibility:hidden until slide-out animation finishes */
	visibility: hidden;
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            visibility 0s linear 0.35s;
	will-change: transform;
}

.bjmd-drawer.is-open {
	transform: translateX(0);
	/* make visible immediately when opening */
	visibility: visible;
	transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            visibility 0s linear 0s;
}

/* ── Header ── */
.bjmd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--bjmd-divider, #eeeeee);
	flex-shrink: 0;
}

.bjmd-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bjmd-title-color, #111111);
}

.bjmd-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #555555;
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	flex-shrink: 0;
}

.bjmd-close:hover {
	background: #f5f5f5;
	color: #111111;
}

.bjmd-close svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ── Body (nav area) ── */
.bjmd-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px 24px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* images / embeds inside drawer must not overflow */
.bjmd-body img,
.bjmd-body video,
.bjmd-body iframe,
.bjmd-body svg {
	max-width: 100%;
	height: auto;
}

/* ── Nav menu ── */
.bjmd-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bjmd-nav li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--bjmd-divider, #eeeeee);
}

.bjmd-nav li:last-child {
	border-bottom: none;
}

.bjmd-nav a {
	display: block;
	padding: var(--bjmd-item-pt, 12px) 0 var(--bjmd-item-pb, 12px);
	color: var(--bjmd-item-color, #111111);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	transition: color 0.2s ease;
}

.bjmd-nav a:hover,
.bjmd-nav a:focus {
	color: var(--bjmd-item-hover, #555555);
}

/* Sub-menu */
.bjmd-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 8px 14px;
}

.bjmd-nav .sub-menu li {
	border-bottom: none;
}

.bjmd-nav .sub-menu a {
	font-size: 14px;
	padding: 8px 0;
	opacity: 0.8;
}

/* Current item */
.bjmd-nav .current-menu-item > a,
.bjmd-nav .current-menu-ancestor > a {
	font-weight: 600;
}

/* No menu placeholder */
.bjmd-no-menu {
	padding: 24px 0;
	color: #aaaaaa;
	font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
	.bjmd-drawer {
		width: 100vw;
	}

	.bjmd-header {
		padding: 16px 20px;
	}

	.bjmd-body {
		padding: 8px 20px;
	}
}