.faddom-ez-toc {
	/* --faddom-ez-toc-noise is injected from PHP (assets/img/faddom-noise.svg). */
	position: relative;
	background: var(--faddom-color-aqua-50, #E6F4F4);
	border-radius: 4px;
	padding: 12px;
	overflow: hidden;
	margin: 64px 0;
}

.faddom-ez-toc::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: var(--faddom-ez-toc-noise);
	background-repeat: repeat;
	background-size: 256px 256px;
	opacity: 0.6;
}

.faddom-ez-toc__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.faddom-ez-toc__summary,
.faddom-ez-toc__title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	outline: none;
	font-family: var(--faddom-type-title-small-family);
	font-size: var(--faddom-type-title-small-size);
	font-weight: var(--faddom-type-title-small-weight);
	line-height: var(--faddom-type-title-small-line);
	letter-spacing: var(--faddom-type-title-small-tracking);
	color: var(--faddom-color-aqua-800);
	padding: 0;
}

.faddom-ez-toc__title {
	cursor: default;
}

.faddom-ez-toc__summary::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12.9994%2010.0002C12.9994%2010.198%2012.9407%2010.3913%2012.8308%2010.5557C12.7209%2010.7201%2012.5648%2010.8482%2012.3821%2010.9239C12.1994%2010.9996%2011.9984%2011.0194%2011.8044%2010.9808C11.6104%2010.9422%2011.4323%2010.847%2011.2924%2010.7072L7.99943%207.41421L4.70643%2010.7072C4.51783%2010.8894%204.26523%2010.9902%204.00303%2010.9879C3.74083%2010.9856%203.49002%2010.8804%203.30461%2010.695C3.1192%2010.5096%203.01403%2010.2588%203.01176%209.99661C3.00948%209.73442%203.11027%209.48182%203.29243%209.29321L7.29243%205.29321C7.47996%205.10574%207.73427%205.00043%207.99943%205.00043C8.2646%205.00043%208.5189%205.10574%208.70643%205.29321L12.7064%209.29321C12.894%209.48071%2012.9994%209.73502%2012.9994%2010.0002Z'%20fill='%23032D2D'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	transform: rotate(180deg);
	transform-origin: center;
	transition: transform 0.28s ease;
}

.faddom-ez-toc__toggle:checked ~ .faddom-ez-toc__summary::after {
	transform: rotate(0deg);
}

.faddom-ez-toc__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s ease;
}

.faddom-ez-toc__toggle:checked ~ .faddom-ez-toc__panel {
	grid-template-rows: 1fr;
}

.faddom-ez-toc__body {
	position: relative;
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
	margin-top: 0;
	background: var(--faddom-color-white, #FFFFFF);
	border-radius: 4px;
	padding: 0 12px;
	opacity: 0;
	transition:
		opacity 0.24s ease,
		margin-top 0.32s ease,
		padding-top 0.32s ease,
		padding-bottom 0.32s ease;
}

.faddom-ez-toc__toggle:checked ~ .faddom-ez-toc__panel .faddom-ez-toc__body,
.faddom-ez-toc > .faddom-ez-toc__body {
	margin-top: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	opacity: 1;
}

.faddom-ez-toc__body::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background-image: var(--faddom-ez-toc-noise);
	background-repeat: repeat;
	background-size: 256px 256px;
	opacity: 0.6;
}

.faddom-ez-toc__nav {
	position: relative;
	z-index: 1;
}

.faddom-ez-toc__list {
	margin: 0;
	padding: 0 0 0 28px;
}

.faddom-ez-toc__item {
	margin-bottom: 0;
}

.faddom-ez-toc__item:last-child {
	margin-bottom: 0;
}

.faddom-ez-toc__link {
	font-family: var(--faddom-type-body-medium-family);
	font-size: var(--faddom-type-body-medium-size);
	font-weight: var(--faddom-type-body-medium-weight);
	line-height: var(--faddom-type-body-medium-line);
	letter-spacing: var(--faddom-type-body-medium-tracking);
	color: var(--faddom-color-granite-500);
	text-decoration: none!important;
}

.faddom-ez-toc__link:hover,
.faddom-ez-toc__link:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.faddom-ez-toc__panel,
	.faddom-ez-toc__body,
	.faddom-ez-toc__summary::after {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.faddom-ez-toc {
		margin: 32px 0;
	}
}