@media (max-width: 768px) {

	.post-toc {
		position: relative;
		width: 100%;
	}
}

@media (min-width: 769px) {

	.post-toc {
		position: sticky;
		top: calc(70px + 2rem);
		width: 350px;
		background-color: #fff;
		border-radius: 20px;
		box-shadow:
			inset 0 0 0 1px var(--wp--preset--color--grey-100, #cfd0d5),
			0 2px 2px 1px rgba(4, 8, 16, 0.08);
	}
}

.post-toc {
	background-color: #fff;
	border-radius: 20px;
	box-shadow:
		inset 0 0 0 1px var(--wp--preset--color--grey-100, #cfd0d5),
		0 2px 2px 1px rgba(4, 8, 16, 0.08);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.post-toc .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.post-toc h2 {
	padding: 2rem 2rem 0 2rem;
	margin: 0;
	font-size: 1.5rem;
	font-weight: var(--wp-preset-font-weight--semi-bold, 600);
	line-height: var(--wp-preset-line-height--normal, normal);
	color: var(--wp--preset--color--grey-900, #0d162f);
}

.post-toc a {
	display: block;
	font-size: 15px;
	font-weight: var(--wp-preset-font-weight--regular, 400);
	line-height: 1.555;
	color: var(--wp--preset--color--grey-600, #565c6d);
	transition: all 0.2s ease;
}

.post-toc a:hover {
	color: var(--wp--preset--color--grey-900, #0d162f);
	text-decoration: underline;
}

.post-toc ul {
	max-height: calc(100dvh - 13rem);
	padding: 0 2rem 2rem 2rem;
	margin: 0;
	overflow-y: auto;
	list-style: none;
}

.post-toc ul li:not(:last-child) {
	margin-bottom: 10px;
}

.post-toc li.active a {
	font-weight: 600;
	color: var(--wp--preset--color--grey-900, #0d162f);
}

.post-toc li[data-depth="1"] {
	margin-left: 0;
}

.post-toc li[data-depth="2"] {
	margin-left: 1.5rem;
}