/* 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;
}



/* table */

.CONTENT table {position: relative;}
.CONTENT table td {width: 50%; box-sizing: border-box; border-color: var(--grey-100);}
.CONTENT table tr:first-child td {border-top: none; padding-top: 0;}
.CONTENT table tr:last-child td {border-bottom: none; padding-bottom: 0;}
.CONTENT table td:last-child {border-color: var(--blue-100);}

.CONTENT table::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--s5);
	background: var(--white);
	transform: translate(-50%, 0);
}

.CONTENT table ul.b-checklist li {background-image: url(../../assets/images/ui-checkbox-alt.svg);}
.CONTENT table ul.b-wronglist li {background-image: url(../../assets/images/ui-wrongbox-alt.svg);}



/* table of contents */

.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);
}

.CONTENT[data-misc~="center-text"] {text-align: center;}
.CONTENT[data-misc~="center-text"] .b-img-container .b-img {margin: 0 auto;}

.CONTENT.alt-pfa-announcement  .content {color: var(--white);}
[data-text-color="white"]  .CONTENT.alt-three-buttons .b-button.alt-text {color: var(--white);}

@media screen and (min-width: 961px) {
	.CONTENT[data-misc~="horizontal-buttons"] .b-buttons br {display: none;}
	.CONTENT[data-misc~="horizontal-buttons"] .b-buttons .b-button.alt-text {margin-right: var(--s5);}
	.CONTENT[data-misc~="horizontal-buttons"] .b-buttons .b-button.alt-text svg {display: none;}
	.CONTENT[data-misc~="horizontal-buttons"] .b-buttons .b-button.alt-text.alt-active {color: var(--black);}

	.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;}

	.CONTENT.alt-pfa-announcement {display: flex; justify-content: center; align-items: center;}
	.CONTENT.alt-pfa-announcement .b-buttons {margin: var(--ns3) 0 0 var(--s5);}
	.CONTENT.alt-three-buttons .b-buttons {display: flex; gap: var(--s5); flex: row wrap; justify-content: center;}
	.CONTENT.alt-three-buttons .b-buttons .b-button.alt-text svg {display: block;}

	.CONTENT.alt-right {text-align: right;}

	.CONTENT[data-misc~="center-text"] .b-checklist li {width: fit-content; margin-left: auto; margin-right: auto;}
	.CONTENT[data-misc~="center-text"] .b-wronglist li {width: fit-content; margin-left: auto; margin-right: auto;}
}

@media screen and (max-width: 960px) {
	.CONTENT .table-of-contents {max-width: 100%; margin: 0 0 var(--s5) 0;}
	.CONTENT[data-misc~="center-text"] .b-checklist {text-align: left;}

	.CONTENT table::after {width: var(--s3);}
	.CONTENT table h4 {font-size: 20rem;}
}

.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;}



/* TABLE (quick fix) */

.CONTENT[data-variant="table"] table td {width: auto; border-color: var(--grey-100);}
.CONTENT[data-variant="table"] table td:last-child {border-color: var(--grey-100);}
.CONTENT[data-variant="table"] table::after {display: none;}



/* INVIEW ANIMATION */

@media screen and (min-width: 961px) {
	.b-page .CONTENT [data-inview] {transition: transform 0.5s, opacity 0.5s;}
	.b-page .CONTENT [data-inview="0"] {opacity: 0; transform: translate(0, var(--s5));}
}