/**
 * On this page - Frontend Styles
 * Sticky sidebar that scrolls to sections by ID, with dark mode support
 *
 * DARK MODE:
 * - html.theme-dark (Salient theme toggle)
 * - body.dark-mode (compatibility)
 * - @media (prefers-color-scheme: dark)
 */

.ai-on-this-page {
	display: none;
}

@media (min-width: 1024px) {
	.ai-on-this-page {
		display: block;
		position: sticky;
		top: 8rem; /* 128px - matches top-32 */
		width: 16rem; /* 256px - matches w-64 */
		flex-shrink: 0;
		margin-left: 3rem; /* ml-12 */
		align-self: flex-start;
	}
}

body.logged-in.admin-bar .ai-on-this-page {
	top: 7rem;
}

.ai-on-this-page-heading {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #94a3b8; /* slate-400 */
	margin: 0 0 1rem 0;
}

.ai-on-this-page-list {
	list-style: none!important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-left: 2px solid #f1f5f9; /* slate-100 */
}
.ai-on-this-page-list li{

		list-style: none!important;
}
@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .ai-on-this-page-list { border-left-color: #1e293b; }
}
html.theme-dark .ai-on-this-page-list,
body.dark-mode .ai-on-this-page-list {
	border-left-color: #1e293b !important;
}

.ai-on-this-page-item {
	margin-left: -2px;
}

.ai-on-this-page ul li .ai-on-this-page-btn {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.25rem 0 0.25rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	border: none;
	border-left: 2px solid transparent;
	margin-left: 0px;
	background: none;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #64748b; 
	border-radius: 0px!important;
}

.ai-on-this-page ul li .ai-on-this-page-btn:hover {
	color: #2563eb;
}

@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .ai-on-this-page-btn { color: #94a3b8; }
	html:not(.theme-light) .ai-on-this-page-btn:hover { color: #60a5fa; }
}
html.theme-dark .ai-on-this-page ul li .ai-on-this-page-btn,
body.dark-mode .ai-on-this-page ul li .ai-on-this-page-btn {
	color: #94a3b8 !important;
}
html.theme-dark .ai-on-this-page ul li .ai-on-this-page-btn:hover,
body.dark-mode .ai-on-this-page ul li .ai-on-this-page-btn:hover {
	color: #60a5fa !important;
}

/* Active state */
.ai-on-this-page ul li .ai-on-this-page-btn.is-active {
	color: #2563eb;
	border-left-color: #2563eb;
}

@media (prefers-color-scheme: dark) {
	html:not(.theme-light) .ai-on-this-page ul li .ai-on-this-page-btn.is-active {
		color: #60a5fa;
		border-left-color: #60a5fa;
	}
}
html.theme-dark .ai-on-this-page ul li .ai-on-this-page-btn.is-active,
body.dark-mode .ai-on-this-page ul li .ai-on-this-page-btn.is-active {
	color: #60a5fa !important;
	border-left-color: #60a5fa !important;
}