/* CONTENT */

.CONTENT::before,
.CONTENT::after {
	content: "";
	display: block;
	overflow: hidden;
}

.CONTENT :is(h1, h2, h3, h4, h5, h6):first-child + p:last-child {
	text-wrap: balance;
}

.CONTENT .table-of-contents {
	max-width: var(--col-3);
	border: 1px solid var(--black);
	padding: var(--s5) 0 var(--s4);
	border-radius: var(--s4);
	margin: 0 0 0 auto;
	font-size: 16rem;
}

.CONTENT .table-of-contents h4 {
	margin: 0 var(--s5);
}

.CONTENT .table-of-contents ul {
	list-style: none;
	padding: 0;
}

.CONTENT .table-of-contents li {
	margin: 0;
}

.CONTENT .table-of-contents li a {
	color: var(--black);
	text-decoration: none;
	display: block;
	padding: var(--s1) var(--s5);
	transition: color 0.25s, background-color 0.25s;
}

.CONTENT .table-of-contents li a:not(.alt-active):hover {
	color: var(--blue-700);
}

.CONTENT .table-of-contents li a.alt-active {
	background: var(--blue-50);
}

.wp-block .CONTENT[data-misc~="table-of-contents"] .b-column {width: 100%;}
.wp-block .CONTENT[data-misc~="table-of-contents"] .b-column:first-child {display: none;}

.CONTENT[data-misc~="center-text"] {text-align: center;}

@media screen and (min-width: 961px) {
	.CONTENT[data-misc~="table-of-contents"] .b-columns {flex-direction: row-reverse;}
	.CONTENT .table-of-contents {position: sticky; top: var(--s7);}

	.CONTENT.alt-button-bottom {align-self: stretch; display: flex; flex-direction: column;}
	.CONTENT.alt-button-bottom .content{flex-grow: 1;}
}

@media screen and (max-width: 960px) {
	.CONTENT .table-of-contents {max-width: 100%; margin: 0 0 var(--s5) 0;}
}