.sitemap {
	padding: 3.5rem 0;
	background-color: var(--color-bg);
}

.sitemap__container {
	width: 100%;
}

.sitemap__folder-icon,
.sitemap__link-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.sitemap__folder-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

.sitemap__link-icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.sitemap__main-link {
	font-family: var(--font-family-heading);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: bold;
	line-height: 1.3;
	color: var(--color-secondary);
	text-decoration: none;
	transition: var(--transition-color);
}

.sitemap__main-link:hover,
.sitemap__main-link:focus-visible {
	color: var(--color-primary);
}

.sitemap__main-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	padding-bottom: 1.5rem;
}

.sitemap__main-grid--top {
	margin-bottom: 3rem;
}

.sitemap__main-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}

.sitemap__groups {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.sitemap__group {
	--sitemap-stem-x: 20px;
	--sitemap-line-color: #c8c8c8;
	--sitemap-col-padding: 2.15rem;
	--sitemap-link-icon-size: 28px;
	position: relative;
}

.sitemap__main {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0;
}

.sitemap__tree {
	position: relative;
	padding-top: 1.25rem;
}

.sitemap__tree::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--sitemap-stem-x);
	width: 0;
	height: 1.25rem;
	border-left: 1px dashed var(--sitemap-line-color);
	transform: translateX(-50%);
	pointer-events: none;
}

.sitemap__columns {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 2.5rem;
}

.sitemap__columns::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--sitemap-stem-x);
	right: 0;
	height: 0;
	border-top: 1px dashed var(--sitemap-line-color);
	pointer-events: none;
}

.sitemap__column {
	--sitemap-vline-x: 0.85rem;
	position: relative;
	margin: 0;
	padding: 0.15rem 0 0 var(--sitemap-col-padding);
	list-style: none;
	overflow: visible;
}

.sitemap__column--1 {
	--sitemap-vline-x: var(--sitemap-stem-x);
}

.sitemap__column::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sitemap-vline-x);
	width: 0;
	border-left: 1px dashed var(--sitemap-line-color);
	transform: translateX(-50%);
	pointer-events: none;
}

.sitemap__column--empty {
	min-height: 0;
	padding: 0;
}

.sitemap__column--empty::before {
	display: none;
}

.sitemap__child {
	--sitemap-child-connector-y: calc(0.75rem + (var(--sitemap-link-icon-size) / 2));
	--sitemap-connector-width: calc(var(--sitemap-col-padding) - var(--sitemap-vline-x));
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.75rem 0;
	min-width: 0;
	overflow: visible;
}

.sitemap__child::before {
	content: "";
	position: absolute;
	top: var(--sitemap-child-connector-y);
	left: calc(var(--sitemap-vline-x) - var(--sitemap-col-padding));
	width: var(--sitemap-connector-width);
	height: 0;
	border-top: 1px dashed var(--sitemap-line-color);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.sitemap__child::after {
	content: "";
	position: absolute;
	top: var(--sitemap-child-connector-y);
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid var(--sitemap-line-color);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 0;
}

.sitemap__link-icon,
.sitemap__child-link {
	position: relative;
	z-index: 1;
}

.sitemap__child-link {
	font-family: var(--font-family);
	font-size: 0.95rem;
	font-weight: var(--font-weight-normal);
	line-height: 1.45;
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition-color);
}

.sitemap__child-link:hover,
.sitemap__child-link:focus-visible {
	color: var(--color-primary);
}

@media (max-width: 991px) {
	.sitemap {
		padding: 2.5rem 0;
	}

	.sitemap__main-grid,
	.sitemap__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sitemap__main-grid,
	.sitemap__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.sitemap__main-grid--top {
		margin-bottom: 2.25rem;
	}

	.sitemap__groups {
		gap: 2.25rem;
	}

	.sitemap__child {
		padding: 0.7rem 0;
	}
}