/*
 * FAQ accordion using <details>/<summary>.
 */

/* Soft paper background on every section that contains a FAQ block. */
.teledom-design section:has(> .container > .faq) {
	background: var(--paper-2);
}

.teledom-design .faq {
	max-width: 780px;
	margin: 0 auto;
}

.teledom-design .faq-item {
	border-top: 1px solid var(--line-light);
	padding: 24px 0;
	cursor: pointer;
}

.teledom-design .faq-item:last-child {
	border-bottom: 1px solid var(--line-light);
}

.teledom-design .faq-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 26px;
	font-family: var(--display);
	font-size: 20px;
	font-weight: 400;
	color: var(--ink);
	transition: color 0.25s var(--ease);
}

.teledom-design .faq-item summary::-webkit-details-marker {
	display: none;
}

.teledom-design .faq-item:hover summary {
	color: var(--gold-deep);
}

.teledom-design .faq-item .plus {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--line-light);
	display: grid;
	place-items: center;
	font-size: 17px;
	color: var(--ink);
	flex-shrink: 0;
	transition: all 0.25s var(--ease);
}

.teledom-design .faq-item[open] .plus {
	background: var(--ink);
	color: var(--gold-bright);
	transform: rotate(45deg);
}

.teledom-design .faq-item p {
	margin-top: 15px;
	font-size: 14px;
	color: var(--muted-light);
	max-width: 80ch;
}