/* Acid AEO — front-end styling for the TL;DR, FAQ and key takeaways blocks. */

.acid-aeo-summary {
	border-left: 3px solid var(--acid-aeo-accent, #00db87);
	background: var(--acid-aeo-summary-bg, rgba(0, 0, 0, 0.03));
	padding: 0.9em 1.2em;
	margin: 0 0 1.6em;
}

.acid-aeo-summary__label {
	margin: 0 0 0.3em;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 700;
}

.acid-aeo-summary__text,
.acid-aeo-faq__answer > :last-child,
.acid-aeo-takeaways > ul {
	margin-bottom: 0;
}

.acid-aeo-faq,
.acid-aeo-takeaways {
	margin: 0 0 1.6em;
}

.acid-aeo-faq__item {
	border-bottom: 1px solid var(--acid-aeo-rule, rgba(0, 0, 0, 0.12));
	padding: 0.6em 0;
}

.acid-aeo-faq__item > summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.acid-aeo-faq__item > summary::-webkit-details-marker {
	display: none;
}

.acid-aeo-faq__item > summary::before {
	content: "\203A\00a0";
	display: inline-block;
	color: var(--acid-aeo-accent, #00db87);
}

.acid-aeo-faq__item[open] > summary::before {
	transform: rotate(90deg);
}

.acid-aeo-takeaways {
	border-top: 3px solid var(--acid-aeo-accent, #00db87);
	padding-top: 0.9em;
}

.acid-aeo-takeaways > ul {
	padding-left: 1.2em;
}