/*
 * en2x FAQ – structural styles + the fixed toggle/active colours.
 *
 * Headline on top, then a list of question/answer accordion entries. The chosen
 * background + text colour come inline per instance (scoped to the unique id);
 * the FIXED design (toggle button, hover/open cyan, dividers) is wired here and
 * is not editable. Font inherited (Rubik).
 *
 * Progressive enhancement: answers are collapsed by default (no load flash);
 * faq.js wires the toggles and animates open/close via max-height. For the rare
 * no-JS visitor the template emits a <noscript> style that reveals the answers,
 * so the content stays accessible without JavaScript.
 */

/* Fixed brand colours (not instance-scoped). */
.en2x-faq {
	--en2x-faq-toggle-bg: #221182;     /* dark blue toggle */
	--en2x-faq-accent: #0f7c8c;        /* en2x cyan (dunkler, AA): hover + open state, weißes Icon erreicht 4,9:1 */
	--en2x-faq-divider: rgba(37, 15, 81, 0.12);

	/* Self-brought side gutter (same mechanism as the sibling modules) + vertical
	 * rhythm (20px more top & bottom so it isn't cramped against neighbours).
	 * Fluid width, so it fills any column correctly. */
	margin: 20px var(--en2x-side-gutter, 20px) 52px;
	font-family: inherit;
	color: inherit;
}

/* When a background colour is set (inline), pad the box. */
.en2x-faq--filled {
	padding: 28px 32px;
	border-radius: 8px;
}

.en2x-faq__headline {
	margin: 0 0 18px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: inherit;
}

.en2x-faq__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Divider under each entry. */
.en2x-faq__item {
	list-style: none;
	border-bottom: 1px solid var(--en2x-faq-divider);
}

.en2x-faq__item::before {
	display: none;
	content: none;
}

.en2x-faq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

/* The whole question row is the toggle button (click question OR toggle). */
.en2x-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 18px 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.en2x-faq__question-text {
	min-width: 0;
}

/* Open entry: the title turns cyan. */
.en2x-faq__item.is-open .en2x-faq__question-text {
	color: var(--en2x-faq-accent);
}

/* Toggle button: dark-blue square, white +/- icon; cyan on hover/open. */
.en2x-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	background: var(--en2x-faq-toggle-bg);
	transition: background 0.15s ease;
}

.en2x-faq__question:hover .en2x-faq__toggle,
.en2x-faq__question:focus-visible .en2x-faq__toggle,
.en2x-faq__item.is-open .en2x-faq__toggle {
	background: var(--en2x-faq-accent);
}

/* +/- drawn with two white bars; the vertical bar hides when open → minus. */
.en2x-faq__toggle::before,
.en2x-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

.en2x-faq__toggle::before {
	width: 14px;
	height: 2px;
}

.en2x-faq__toggle::after {
	width: 2px;
	height: 14px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.en2x-faq__item.is-open .en2x-faq__toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Answer: collapsed by default; faq.js sets the open height inline (max-height)
 * and animates. The <noscript> override in the template reveals it without JS. */
.en2x-faq__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.en2x-faq__answer-inner {
	padding: 0 0 20px;
	color: inherit;
}

.en2x-faq__answer-inner p {
	margin: 0 0 12px;
}

.en2x-faq__answer-inner :last-child {
	margin-bottom: 0;
}

.en2x-faq__answer-inner a {
	color: var(--en2x-color-primary, #221182);
}

/* Respect reduced-motion: no open/close animation. */
@media (prefers-reduced-motion: reduce) {
	.en2x-faq__answer,
	.en2x-faq__toggle,
	.en2x-faq__toggle::after {
		transition: none;
	}
}