body.anchorPage {
	--main-grid-column-lg: 1 / span 8;
	--aside-grid-column: 10 / span 3;
	--subpage-wrap-max-width: 1470px;
}

@media (max-width: 991px) {

.anchorPage .mainContainer > .contentWrap {
				display: flex;
				flex-direction: column-reverse;
				gap: 35px
		}
			}

.anchorPage .anchorBlocks {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}

.anchorPage .anchorBlocks h2,
		.anchorPage .anchorBlocks h3,
		.anchorPage .anchorBlocks h4,
		.anchorPage .anchorBlocks h5,
		.anchorPage .anchorBlocks h6 {
			margin: 0;
			scroll-margin-top: 80px;
		}

.anchorPage .anchorBlocks h3,
		.anchorPage .anchorBlocks h4,
		.anchorPage .anchorBlocks h5,
		.anchorPage .anchorBlocks h6 {
			font-family: var(--heading-font-family);
			font-weight: 500;
		}

.anchorPage .anchorBlocks .hero {
			border-radius: var(--border-radius-default);
			background: var(--background, var(--color-primary));
			color: var(--color, #fff);
			text-align: center;
			padding: 50px;
		}

.anchorPage .anchorBlocks .hero .headline {
				font-size: 22px;
				margin-bottom: 15px;
			}

.anchorPage .anchorBlocks .hero h2 {
				font-size: 45px;
				font-weight: 400;
				margin-bottom: 10px;
			}

.anchorPage .anchorBlocks .chapterLevel1 {
			color: #fff;
			padding: 80px 50px 35px;
			margin-block: 30px;
			border-radius: var(--border-radius-default);
			background-color: var(--color-primary);
		}

@media (max-width: 991px) {

.anchorPage .anchorBlocks .chapterLevel1 {
				padding: 50px 30px 25px
		}
			}

.anchorPage .anchorBlocks .chapterLevel1 .chapter {
				font-size: 20px;
				font-weight: 400;
			}

@media (max-width: 991px) {

.anchorPage .anchorBlocks .chapterLevel1 .chapter {
					font-size: 18px
			}
				}

.anchorPage .anchorBlocks .chapterLevel1 h2 {
				font-size: 40px;
				font-weight: 400;
				scroll-margin-top: 100px;
			}

@media (max-width: 991px) {

.anchorPage .anchorBlocks .chapterLevel1 h2 {
					font-size: 24px
			}
				}

.anchorPage .anchorBlocks .chapterLevel2 {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}

.anchorPage .anchorBlocks .chapterLevel3 {
			display: flex;
			gap: 25px;
		}

.anchorPage .anchorBlocks .chapterLevel3:has(.chapterTitle h4) {
				flex-direction: column;
			}

.anchorPage .anchorBlocks .chapterLevel3:has(.chapterTitle h4) .chapterContent {
					padding-left: 63px;
				}

.anchorPage .anchorBlocks .chapterLevel3 .chapterTitle {
				display: flex;
				gap: 25px;
			}

.anchorPage .anchorMenu {
		font-size: 16px;
		font-weight: 400;
	}

@media print {

.anchorPage .anchorMenu {
			display: none
	}
		}

@media (min-width: 992px) {

.anchorPage .anchorMenu {
			position: sticky;
			top: 30px
	}
		}

.anchorPage .anchorMenu ul {
			display: flex;
			flex-direction: column;
			gap: 30px;
			padding-block: 15px;
			padding-left: 20px;
			list-style: none;
			border-left: 1px solid var(--color-secondary);
		}

.anchorPage .anchorMenu a {
			position: relative;
			display: flex;
			gap: 15px;
			color: #000;
			font-weight: 300;
		}

.anchorPage .anchorMenu a:before {
				position: absolute;
				top: 7px;
				left: -25px;
				width: 10px;
				aspect-ratio: 1;
				content: '';
				border-radius: 50%;
				border: 1px solid var(--color-primary);
				background-color: #fafafa;
				transition: background-color 0.6s ease;
			}

/* Also add active state class here? */

.anchorPage .anchorMenu a:hover {
				color: var(--color-primary);
			}

.anchorPage .anchorMenu a:hover:before {
					background-color: var(--color-primary);
				}

.anchorPage .anchorMenu a.active {
				font-weight: 400;
			}

.anchorPage .anchorMenu a.active::before {
					width: 13px;
					top: 6px;
					left: -27px;
					border-width: 2px;
				}

.anchorPage .anchorMenu .level2 {
			margin-top: -20px;
			padding-left: 30px;
		}

.anchorPage .anchorMenu .level2 a {
				font-size: 14px;
			}

.anchorPage .anchorMenu .level2 a:before {
					top: 7px;
					left: -20px;
					width: 6px;
				}

/*# sourceMappingURL=anchorPage.css.map */