/* FAQ interaction refinements. */
.ys-faq h3 button:hover {
	background: var(--brand-red);
	color: #fff;
}

.ys-faq h3 button[aria-expanded="true"] {
	background: #111;
	color: #fff;
}

.ys-faq article > div p {
	margin: 10px 0 10px 10px;
}

.ys-faq h3 button > span {
	position: relative;
	flex: 0 0 21px;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

.ys-faq h3 button > span::before,
.ys-faq h3 button > span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.ys-faq h3 button > span::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ys-faq h3 button[aria-expanded="true"] > span::after {
	display: none;
}