/*
 * FAQ als Karteikarten-Akkordeon (Schritt 6, Thema 9): jede Frage eine Karte, Plus wird Minus, offen zeigt sie die
 * linierte Antwort. Markup: inc/faq.php (details/summary, ohne JavaScript). Nur auf der FAQ-Seite geladen.
 */

/* Die Karten liegen direkt auf dem Vorhang, nicht im Pult-Feld der normalen Seiten */
.page main#main-page .wp-block-group.default-box-shadow:has(.studio-faq) {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.studio-faq {
	--studio-faq-head: 56px;
	--studio-faq-line: 1.7rem;
	display: grid;
	gap: 1rem;
	max-width: 820px;
}

.studio-faq__item {
	padding: 0.4rem 1.25rem;
	background: var(--studio-grain), var(--studio-paper);
	color: var(--studio-paper-ink);
	rotate: calc(var(--studio-tilt, 0deg) * 0.4);
	box-shadow: 0 12px 20px -10px oklch(0% 0 0 / 0.7);
	transition: rotate 200ms var(--studio-ease);
}

/* Offen: Karte liegt gerade, Antwort steht auf Linien */
.studio-faq__item[open] { padding-bottom: 1rem; rotate: 0deg; }

.studio-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--studio-faq-head);
	padding-block: 0.5rem;
	border-bottom: 2px solid oklch(71.5% 0.135 234 / 0.65);
	color: var(--studio-paper-ink);
	font: 750 var(--studio-step-1) / 1.3 var(--studio-font-text);
	list-style: none;
	cursor: pointer;
}

.studio-faq__item summary::-webkit-details-marker { display: none; }
.studio-faq__item summary:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 4px; }

/* Plus aus zwei Strichen, offen wird es zum Minus */
.studio-faq__item summary i { position: relative; flex: none; width: 22px; height: 22px; }

.studio-faq__item summary i::before,
.studio-faq__item summary i::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: rotate 200ms var(--studio-ease);
}

.studio-faq__item summary i::after { rotate: 90deg; }
.studio-faq__item[open] summary i::after { rotate: 0deg; }

.studio-faq__answer {
	padding-top: 0.75rem;
	background: repeating-linear-gradient(transparent 0 calc(var(--studio-faq-line) - 1px), oklch(78% 0.03 240 / 0.7) calc(var(--studio-faq-line) - 1px) var(--studio-faq-line)) content-box;
}

main#main-page .studio-faq__answer :is(p, li) {
	margin: 0;
	color: var(--studio-paper-ink);
	font-size: 1.05rem;
	line-height: var(--studio-faq-line);
}

main#main-page .studio-faq__answer p + p { margin-top: var(--studio-faq-line); }
main#main-page .studio-faq__answer a { color: oklch(42% 0.13 250); text-underline-offset: 3px; }
main#main-page .studio-faq__answer a:focus-visible { outline: 2px solid oklch(42% 0.13 250); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.studio-faq__item,
	.studio-faq__item summary i::before,
	.studio-faq__item summary i::after { transition: none; }
}