/*
 * Autocontent — FAQ exkluzív accordion (Step 46).
 *
 * A markupot a plugin render-idejű transzformja adja (class-content-filter.php):
 *   <div class="ac-faq">
 *     <details class="ac-faq-item" name="ac-faq-{post}-{n}" open>
 *       <summary class="ac-faq-q">Kérdés</summary>
 *       <div class="ac-faq-a"><p>Válasz</p></div>
 *     </details>…
 *   </div>
 * A natív name-csoportosítás adja az "egyszerre csak egy nyitva" viselkedést; az első
 * elem alapból nyitva. A nyitás-animáció modern CSS (interpolate-size + ::details-content,
 * Chrome 129+); máshol azonnali váltás, törés nélkül.
 */

.ac-faq {
	margin: 1.6em 0 2.2em;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-faq-item {
	border: 1px solid #E8EDF1;
	border-radius: 12px;
	background: #fff;
	interpolate-size: allow-keywords;
}

.ac-faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ac-ink, #012030);
	user-select: none;
}

.ac-faq-q::-webkit-details-marker {
	display: none;
}

/* CSS-only chevron. */
.ac-faq-q::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ac-accent, #45C4B0);
	border-bottom: 2px solid var(--ac-accent, #45C4B0);
	transform: rotate(45deg);
	transition: transform .22s ease;
	flex-shrink: 0;
	margin-left: auto;
	margin-top: -4px;
}

.ac-faq-item[open] > .ac-faq-q::after {
	transform: rotate(225deg);
	margin-top: 4px;
}

.ac-faq-a {
	padding: 0 18px 16px;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(1, 32, 48, .72);
}

.ac-faq-a p {
	margin: 0;
}

/* Nyitás-animáció (progresszív: ahol a ::details-content nem támogatott, azonnali). */
.ac-faq-item::details-content {
	block-size: 0;
	overflow-y: clip;
	opacity: 0;
	transition: block-size .28s ease, opacity .28s ease, content-visibility .28s allow-discrete;
}

.ac-faq-item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@media (max-width: 640px) {
	.ac-faq-q {
		padding: 12px 14px;
		font-size: 14px;
	}

	.ac-faq-a {
		padding: 0 14px 14px;
		font-size: 13.5px;
	}
}