/* ==========================================================================
   FAQ
   The coloured FAQ accordion. HTML: template-parts/shared/faq-accordion.php
   ========================================================================== */

.faq + .faq { padding-top: 0; }
.accordion { display: grid; gap: 14px; }
.accordion__item {
	--fc: #a78bfa;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	border-color: color-mix(in srgb, var(--fc) 26%, transparent);
	background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 7%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .015));
	transition: border-color .3s, background .3s, box-shadow .3s;
}
.accordion__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fc); box-shadow: 0 0 12px var(--fc); opacity: .55; transition: opacity .3s; }
.accordion__item:hover { border-color: color-mix(in srgb, var(--fc) 50%, transparent); }
.accordion__item[open] { border-color: var(--fc); background: radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--fc) 20%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--fc) 10%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .015)); box-shadow: 0 22px 44px -28px var(--fc); }
.accordion__item[open]::before { opacity: 1; }
.accordion__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 22px 26px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: #fff;
}
.accordion__item summary { justify-content: flex-start; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__num { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--fc); background: color-mix(in srgb, var(--fc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent); transition: background .3s, color .3s; }
.accordion__q { flex: 1; transition: color .3s; }
.accordion__item[open] .accordion__num { background: var(--fc); color: #0b0620; border-color: transparent; }
.accordion__item[open] .accordion__q { color: var(--fc); }
.accordion__icon { position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); transition: transform .35s var(--ease), background .3s; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--fc); border-radius: 2px; transition: transform .35s var(--ease), background .3s; }
.accordion__icon::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__icon { transform: rotate(180deg); background: var(--fc); border-color: var(--fc); }
.accordion__item[open] .accordion__icon::before, .accordion__item[open] .accordion__icon::after { background: #0b0620; }
.accordion__item[open] .accordion__icon::after { transform: rotate(0); }
.accordion__body { padding: 0 26px 22px 80px; color: var(--muted); }
.accordion__body p { margin: 0; }

@media (max-width: 600px) {
	.accordion__body { padding-left: 26px; }
	.accordion__num { width: 32px; height: 32px; }
}