/* HealthPulse Table of Contents — matches the theme palette */

.hptoc {
	background: #fff;
	border: 1px solid #e3eeec;
	border-left: 4px solid #0e9f8a;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 1.6em 0;
	max-width: 480px;
	box-shadow: 0 2px 10px rgba(15, 60, 54, 0.05);
}

.hptoc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hptoc-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1f2d2b;
}

.hptoc-toggle {
	background: none;
	border: 0;
	color: #0b7d6d;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
}

.hptoc-toggle:hover { background: rgba(14, 159, 138, 0.1); }

/* Show/Hide label swap */
.hptoc .hptoc-show { display: none; }
.hptoc.hptoc-collapsed .hptoc-show { display: inline; }
.hptoc.hptoc-collapsed .hptoc-hide { display: none; }
.hptoc.hptoc-collapsed .hptoc-list { display: none; }

.hptoc-list {
	margin: 10px 0 0;
	padding-left: 0;
	list-style: none;
	counter-reset: hptoc;
}

.hptoc-list li {
	margin: 0;
	padding: 3px 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.hptoc-list li.hptoc-l3 { padding-left: 22px; font-size: 0.9rem; }

/* Numbers via counters so nested H3s share the parent's sequence feel */
.hptoc-numbered li {
	counter-increment: hptoc;
	position: relative;
	padding-left: 30px;
}

.hptoc-numbered li.hptoc-l3 { padding-left: 52px; }

.hptoc-numbered li::before {
	content: counter(hptoc);
	position: absolute;
	left: 0;
	top: 3px;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: #0b7d6d;
	background: rgba(14, 159, 138, 0.12);
	border-radius: 50%;
}

.hptoc-numbered li.hptoc-l3::before {
	background: none;
	color: #5f7370;
	content: "\2013"; /* en dash for sub-items */
}

.hptoc-list a {
	color: #1f2d2b;
	text-decoration: none;
}

.hptoc-list a:hover {
	color: #0b7d6d;
	text-decoration: underline;
}

/* Sticky-header offset so anchored headings aren't hidden behind it */
.hp-content h2[id],
.hp-content h3[id] {
	scroll-margin-top: 90px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
	.hptoc { max-width: none; }
}