/*
 * KW Biohof – FAQ-Widget. Akkordeon aus Frage-Antwort-Paaren über natives
 * <details>/<summary>, gestaltet als EINE ruhige, verbundene Liste (feine
 * Trennlinien) – nicht als Stapel gleicher Karten. Die warme Fläche
 * (--biohof-faq-open-surface) hebt allein die geöffnete Frage hervor; die Frage
 * steht in der Serifen-Schrift (Wärme + Hierarchie). Symbol = getöntes
 * Medaillon (wie im Fakten-Widget), füllt sich beim Öffnen.
 *
 * Komplett ohne JS – Aufklappen (::details-content + interpolate-size, mit
 * Sofort-Fallback), Medaillon-Drehung, Hover und Scroll-Reveal sind reines CSS.
 * Alle Farben aus Tokens; lokale --biohof-faq-* mit Marken-Fallback, vom
 * Stil-Tab überschreibbar. Kein !important.
 */

.biohof-faq {
	--biohof-faq-radius: var(--biohof-radius-lg);
	--biohof-faq-question-color: var(--biohof-color-text-strong);
	--biohof-faq-answer-color: var(--biohof-color-text);
	--biohof-faq-accent-color: var(--biohof-color-primary);
	--biohof-faq-open-surface: var(--biohof-color-surface-soft);
	--biohof-faq-border-color: var(--biohof-color-border);

	/* Abgeleitete Maße: Medaillon-Größe steuert auch den Antwort-Einzug. */
	--biohof-faq-medallion: 2.5rem;
	--biohof-faq-pad-inline: var(--biohof-space-lg);
	--biohof-faq-pad-block: var(--biohof-space-md);

	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
	color: var(--biohof-faq-answer-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* ── Verbundene Liste: ein zusammenhängendes Objekt, feine Trennlinien ───────── */
.biohof-faq__items {
	border: 1px solid var(--biohof-faq-border-color);
	border-radius: var(--biohof-faq-radius);
	/* Runde Ecken auch für offene Flächen + begrenzt die Aufklapp-Animation. */
	overflow: clip;
	background: var(--biohof-color-bg);
}

/* Trennlinie nur ZWISCHEN den Einträgen (etwas zarter als der Außenrahmen). */
.biohof-faq__item + .biohof-faq__item {
	border-top: 1px solid color-mix(in srgb, var(--biohof-faq-border-color) 65%, transparent);
}

/* Geöffneter Eintrag: warm hervorgehoben – DAS ist die Hierarchie. */
.biohof-faq__item[open] {
	background: var(--biohof-faq-open-surface);
}

/* Eine offene Frage grenzt sich nach unten zart von ihrer Antwort ab. */
.biohof-faq__item[open] + .biohof-faq__item {
	border-top-color: transparent;
}

/* ── Frage-Kopf (das <summary>) ─────────────────────────────────────────────── */
.biohof-faq__summary {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-md);
	padding: var(--biohof-faq-pad-block) var(--biohof-faq-pad-inline);
	min-block-size: 44px;
	cursor: pointer;
	/* Natives Aufklapp-Dreieck ausblenden – wir zeichnen ein eigenes Medaillon. */
	list-style: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-faq__summary::-webkit-details-marker {
	display: none;
}

.biohof-faq__summary::marker {
	content: "";
}

/* Fokusring innen, da die Liste ihren Inhalt beschneidet (overflow: clip). */
.biohof-faq__summary:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: -3px;
	border-radius: 0;
}

/* Frage in der warmen Serifen-Schrift – Charakter und klare Hierarchie. */
.biohof-faq__question {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-500);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-faq-question-color);
	text-wrap: balance;
	overflow-wrap: break-word;
	transition: color var(--biohof-duration) var(--biohof-ease);
}

.biohof-faq__item[open] .biohof-faq__question {
	color: var(--biohof-faq-accent-color);
}

/* ── Symbol-Medaillon (reines CSS; füllt sich und dreht beim Öffnen) ─────────── */
.biohof-faq__indicator {
	position: relative;
	flex: 0 0 auto;
	inline-size: var(--biohof-faq-medallion);
	block-size: var(--biohof-faq-medallion);
	border-radius: var(--biohof-radius-pill);
	color: var(--biohof-faq-accent-color);
	background: color-mix(in srgb, var(--biohof-faq-accent-color) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biohof-faq-accent-color) 22%, transparent);
	transition: background-color var(--biohof-duration) var(--biohof-ease),
		color var(--biohof-duration) var(--biohof-ease),
		box-shadow var(--biohof-duration) var(--biohof-ease);
}

.biohof-faq__indicator::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-inline-end: 2.5px solid currentColor;
	border-block-end: 2.5px solid currentColor;
	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-faq__item[open] .biohof-faq__indicator {
	color: var(--biohof-color-on-primary);
	background: var(--biohof-faq-accent-color);
	box-shadow: none;
}

.biohof-faq__item[open] .biohof-faq__indicator::before {
	transform: translate(-50%, -35%) rotate(-135deg);
}

/* ── Hover: nur geschlossene Fragen reagieren (offene sind schon getönt) ──────── */
@media (hover: hover) {
	.biohof-faq__item:not([open]) .biohof-faq__summary:hover {
		background-color: color-mix(in srgb, var(--biohof-faq-open-surface) 50%, transparent);
	}
	.biohof-faq__item:not([open]) .biohof-faq__summary:hover .biohof-faq__question {
		color: var(--biohof-faq-accent-color);
	}
	.biohof-faq__item:not([open]) .biohof-faq__summary:hover .biohof-faq__indicator {
		background: color-mix(in srgb, var(--biohof-faq-accent-color) 20%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biohof-faq-accent-color) 35%, transparent);
	}
}

/* ── Antwort: fluchtet mit dem Fragetext (Einzug = Medaillon + Abstand) ───────── */
.biohof-faq__answer {
	padding-block: var(--biohof-space-2xs) var(--biohof-space-lg);
	padding-inline: calc(var(--biohof-faq-pad-inline) + var(--biohof-faq-medallion) + var(--biohof-space-md)) var(--biohof-faq-pad-inline);
	color: var(--biohof-faq-answer-color);
	text-wrap: pretty;
}

/* Lesbare Zeilenlänge in der Antwort. */
.biohof-faq__answer > * {
	max-inline-size: 66ch;
}

.biohof-faq__answer > :first-child {
	margin-block-start: 0;
}

.biohof-faq__answer > :last-child {
	margin-block-end: 0;
}

/* Auf schmaler Breite kein tiefer Einzug – die Antwort nutzt die volle Breite. */
@media (max-width: 30rem) {
	.biohof-faq__answer {
		padding-inline: var(--biohof-faq-pad-inline);
	}
}

/* ── Antwort-Links: Pink-Reset (Elementor-V4-Defense setzt color: inherit auf
   <a>). Die a-Doppelung propagiert die Pseudo-Spezifität (anders als :where()).
   Wie im Fließtext- und Bild-+-Text-Widget. ─────────────────────────────────── */
.biohof-faq .biohof-faq__answer a {
	color: var(--biohof-color-primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--biohof-color-primary) 45%, transparent);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
}

.biohof-faq.biohof-faq .biohof-faq__answer a:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-primary-hover);
	text-decoration-color: var(--biohof-color-primary-hover);
}

/* ── Fokus sichtbar (Antwort-Links; das summary hat seinen eigenen Ring) ─────── */
.biohof-faq.biohof-faq .biohof-faq__answer a:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
}

/* ── Editor-Hinweis (leer) ─────────────────────────────────────────────────── */
.biohof-faq--empty {
	color: var(--biohof-color-text);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
}

/* ── Sanftes Aufklappen: ::details-content (mit Sofort-Fallback) ─────────────────
   interpolate-size erlaubt die Höhen-Animation von 0 → auto. Ohne Support
   klappt der Inhalt ohne Übergang auf – funktional identisch. */
@supports (interpolate-size: allow-keywords) {
	.biohof-faq__item {
		interpolate-size: allow-keywords;
	}

	.biohof-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size var(--biohof-duration) var(--biohof-ease),
			opacity var(--biohof-duration) var(--biohof-ease),
			content-visibility var(--biohof-duration) allow-discrete;
	}

	.biohof-faq__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Die Liste hebt sich als Ganzes
   sanft an – ruhiger als ein Stagger und ohne Clip-Konflikt mit der Animation. ── */
@supports (animation-timeline: view()) {
	.biohof-faq--reveal .biohof-faq__items {
		animation: biohof-faq-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 35%;
	}
}

@keyframes biohof-faq-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-faq--reveal .biohof-faq__items {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.biohof-faq__item,
	.biohof-faq__summary,
	.biohof-faq__question,
	.biohof-faq__indicator,
	.biohof-faq__indicator::before {
		transition: none;
	}
	@supports (interpolate-size: allow-keywords) {
		.biohof-faq__item::details-content {
			transition: none;
		}
	}
}