/* Slide-In Menu Panel */

/* Prevent body scroll when menu is open */
body.slide-menu-open {
	overflow: hidden;

}

/* Main panel container */
.slide-menu-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	visibility: hidden;
	transition: visibility 0s linear 0.3s;

}

.slide-menu-panel.is-open {
	visibility: visible;
	transition-delay: 0s;

}

/* Overlay background */
.slide-menu-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
	cursor: pointer;

}

.slide-menu-panel.is-open .slide-menu-overlay {
	opacity: 1;

}

/* Menu container - slides from right */
.slide-menu-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 400px;
	background-color: var(--bg-primary, #ffffff);
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;

}

.slide-menu-panel.is-open .slide-menu-container {
	transform: translateX(0);

}

/* Menu header */
.slide-menu-header {
	padding: 20px;
	border-bottom: 1px solid var(--border-light, #d4d4d4);
	background-color: var(--bg-secondary, #fafafa);
	flex-shrink: 0;

}

.slide-menu-close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--text-primary, #2c2c48);
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;

}

.slide-menu-close:hover,
.slide-menu-close:focus {
	background-color: var(--bg-tertiary, #f5f5f5);
	color: var(--accent-primary, #4a90e2);
	outline: none;

}

/* Menu content */
.slide-menu-content {
	flex: 1;
	padding: 20px;
	overflow-y: auto;

}

/* Empty menu message */
.slide-menu-empty {
	color: var(--text-secondary, #6b6b7b);
	font-style: italic;
	text-align: center;
	padding: 40px 20px;

}

/* Menu list */
.slide-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;

}

/* Explore section — site-wide nav items mirrored into the panel */
.slide-menu-section--explore {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-light);

}

/* Top-level list */
.slide-menu-level-0 {
	/* No additional styling */
}

/* Child list */
.slide-menu-level-1 {
	padding-left: 20px;
	margin-top: 8px;

}

/* Menu item */
.slide-menu-item {
	margin-bottom: 8px;

}

.slide-menu-item a {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: var(--text-primary, #2c2c48);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-size: 16px;
	line-height: 1.5;

}

.slide-menu-item a:hover,
.slide-menu-item a:focus {
	background-color: var(--bg-tertiary, #f5f5f5);
	color: var(--accent-primary, #4a90e2);
	outline: none;

}

/* Count pill on an account item (e.g. Bookmarks), pushed to the row's end. */
.slide-menu-count {
	margin-left: auto;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--brand-amber, #c07a28);
	color: var(--text-inverse, #fff);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
}

.slide-menu-count[hidden] {
	display: none;
}

/* The account section (Bookmarks) lives in the slide-in menu only on mobile, where
   the top bar is tight. On desktop the top bar shows Bookmarks itself, so hide the
   menu copy there to avoid showing it twice. Mirrors the bar link's `hide-mobile`. */
@media (min-width: 768px) {
	.slide-menu-section--account {
		display: none;
	}
}

/* External link icon */
.slide-menu-external-icon {
	margin-left: 6px;
	font-size: 12px;
	opacity: 0.6;

}

/* Child items styling */
.slide-menu-level-1 .slide-menu-item a {
	font-size: 14px;
	padding: 10px 14px;

}

/* Dark mode support */
[data-theme="dark"] .slide-menu-container {
	background-color: var(--bg-primary, #1e1e1e);
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);

}

[data-theme="dark"] .slide-menu-header {
	background-color: var(--bg-secondary, #252533);
	border-bottom-color: var(--border-light, #3a3a4a);

}

[data-theme="dark"] .slide-menu-close {
	color: var(--text-primary, #e0e0e0);

}

[data-theme="dark"] .slide-menu-close:hover,
[data-theme="dark"] .slide-menu-close:focus {
	background-color: var(--bg-tertiary, #2a2a3a);

}

[data-theme="dark"] .slide-menu-item a {
	color: var(--text-primary, #e0e0e0);

}

[data-theme="dark"] .slide-menu-item a:hover,
[data-theme="dark"] .slide-menu-item a:focus {
	background-color: var(--bg-tertiary, #2a2a3a);

}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .slide-menu-container {
		background-color: #1e1e1e;
		box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);

	}

	:root:not([data-theme="light"]) .slide-menu-header {
		background-color: #252533;
		border-bottom-color: #3a3a4a;

	}

	:root:not([data-theme="light"]) .slide-menu-close {
		color: #e0e0e0;

	}

	:root:not([data-theme="light"]) .slide-menu-close:hover,
	:root:not([data-theme="light"]) .slide-menu-close:focus {
		background-color: #2a2a3a;

	}

	:root:not([data-theme="light"]) .slide-menu-item a {
		color: #e0e0e0;

	}

	:root:not([data-theme="light"]) .slide-menu-item a:hover,
	:root:not([data-theme="light"]) .slide-menu-item a:focus {
		background-color: #2a2a3a;

	}

}

/* Responsive adjustments */
@media (max-width: 768px) {
	.slide-menu-container {
		max-width: 320px;

	}

	.slide-menu-item a {
		font-size: 14px;
		padding: 10px 12px;

	}

	.slide-menu-level-1 .slide-menu-item a {
		font-size: 13px;
		padding: 8px 10px;

	}

}

@media (max-width: 480px) {
	.slide-menu-container {
		max-width: 280px;

	}

}