/* AMC FAQ + Schema — base front-end styles.
 * Structure and icon only. Colours, sizes and spacing come from
 * Settings → AMC FAQ, which outputs rules after this file. */

.amc-faq {
	clear: both;
	box-sizing: border-box;
	border: 0 solid currentColor;
}
.amc-faq *,
.amc-faq *::before,
.amc-faq *::after { box-sizing: border-box; }

/* Rows */
.amc-faq__list {
	display: flex;
	flex-direction: column;
}
.amc-faq__item {
	margin: 0;
	border-color: var(--amc-faq-item-border-color, #e2e2e2);
	border-style: var(--amc-faq-item-border-style, solid);
	border-width: 0;
	overflow: hidden;
	transition: background-color .2s;
}

/* Dividers: a line between rows plus top and bottom. */
.amc-faq--border-divider .amc-faq__item { border-top-width: var(--amc-faq-item-border-width, 1px); }
.amc-faq--border-divider .amc-faq__item:last-child,
.amc-faq--border-divider.amc-faq--gapped .amc-faq__item { border-bottom-width: var(--amc-faq-item-border-width, 1px); }

/* Cards: a border all round each row. */
.amc-faq--border-box .amc-faq__item { border-width: var(--amc-faq-item-border-width, 1px); }

/* Question */
.amc-faq__question {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: 0;
	cursor: pointer;
	list-style: none;
	transition: color .2s, background-color .2s;
}
.amc-faq__question::-webkit-details-marker { display: none; }
.amc-faq__question::marker { content: ""; }
.amc-faq__question-text { flex: 1 1 auto; }
.amc-faq__question:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Icon */
.amc-faq__question::after {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1;
	color: var(--amc-faq-icon-color, currentColor);
	transition: transform .2s, color .2s;
}
.amc-faq__item[open] > .amc-faq__question::after { color: var(--amc-faq-icon-open-color, var(--amc-faq-icon-color, currentColor)); }
.amc-faq--icon-left .amc-faq__question::after { order: -1; }

.amc-faq--icon-plus .amc-faq__question::after,
.amc-faq--icon-plusminus .amc-faq__question::after { content: "+"; }
.amc-faq--icon-plus .amc-faq__item[open] > .amc-faq__question::after { transform: rotate(45deg); }
.amc-faq--icon-plusminus .amc-faq__item[open] > .amc-faq__question::after { content: "\2212"; }

.amc-faq--icon-chevron .amc-faq__question::after {
	content: "";
	width: .45em;
	height: .45em;
	margin: 0 .25em;
	border-right: 2px solid var(--amc-faq-icon-color, currentColor);
	border-bottom: 2px solid var(--amc-faq-icon-color, currentColor);
	transform: translateY(-25%) rotate(45deg);
}
.amc-faq--icon-chevron .amc-faq__item[open] > .amc-faq__question::after {
	border-color: var(--amc-faq-icon-open-color, var(--amc-faq-icon-color, currentColor));
	transform: translateY(25%) rotate(-135deg);
}
.amc-faq--icon-none .amc-faq__question::after { content: none; }

/* Answer */
.amc-faq__answer > :first-child { margin-top: 0; }
.amc-faq__answer > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.amc-faq__item,
	.amc-faq__question,
	.amc-faq__question::after { transition: none; }
}
