/* apiscrapy.com — per-post FAQ accordion ([post_faqs]).
 *
 * Native <details>/<summary> accordion (no JS, accessible, CWV-friendly). On-brand:
 * #ff0066 / #9b51e0. Loaded only on singular views with FAQs enabled. */

.apx-faq {
	--apx-pink: #ff0066;
	--apx-purple: #9b51e0;
	--apx-ink: #171226;
	--apx-muted: #5b5570;
	--apx-line: #ece9f4;
	margin: 40px 0;
	max-width: 820px;
}

.apx-faq .apx-faq-title {
	margin: 0 0 20px !important;
	padding: 0 !important;
	font-size: 27px !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em;
	color: var(--apx-ink) !important;
}

.apx-faq .apx-faq-list { display: flex; flex-direction: column; gap: 12px; }

.apx-faq .apx-faq-item {
	border: 1px solid var(--apx-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.apx-faq .apx-faq-item[open] {
	border-color: #e2d8f2;
	box-shadow: 0 16px 40px -30px rgba(155, 81, 224, .5);
}

.apx-faq .apx-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--apx-ink);
}
.apx-faq .apx-faq-q::-webkit-details-marker { display: none; }
.apx-faq .apx-faq-item[open] .apx-faq-q { color: var(--apx-purple); }

/* chevron icon */
.apx-faq .apx-faq-ico {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--apx-pink);
	border-bottom: 2px solid var(--apx-pink);
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-top: -4px;
}
.apx-faq .apx-faq-item[open] .apx-faq-ico {
	transform: rotate(-135deg);
	margin-top: 3px;
	border-color: var(--apx-purple);
}

.apx-faq .apx-faq-a {
	padding: 0 22px 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--apx-muted);
}
.apx-faq .apx-faq-a :first-child { margin-top: 0 !important; }
.apx-faq .apx-faq-a :last-child { margin-bottom: 0 !important; }
.apx-faq .apx-faq-a a { color: var(--apx-purple); text-decoration: underline; font-weight: 600; }
.apx-faq .apx-faq-a strong { color: var(--apx-ink); }

@media (max-width: 600px) {
	.apx-faq .apx-faq-title { font-size: 23px !important; }
	.apx-faq .apx-faq-q { padding: 15px 17px; font-size: 15.5px; }
	.apx-faq .apx-faq-a { padding: 0 17px 16px; font-size: 15px; }
}