/* ============================================================
 * io-kenos-child v1.2 — FAQ Accordion (Phase 3 B3)
 * ------------------------------------------------------------
 * Native <details>/<summary> styling. Niche-aware: hover and
 * open states pick up --wdz-primary; chevron uses --wdz-accent.
 * Single-open behavior enforced by faq-accordion.js but the
 * markup degrades gracefully without JS (allows multiple open).
 * ============================================================ */

.wdz-faqs {
	margin: var(--wdz-space-7, 56px) auto;
	max-width: 920px;
	padding: 0 16px;
}

.wdz-faqs__heading {
	font-family: 'Fredoka One', 'Lilita One', var(--wdz-font-heading, inherit);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	color: var(--wdz-primary, #6B46C1);
	text-align: center;
	margin: 0 0 28px;
	letter-spacing: 0.01em;
}

.wdz-faqs__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ============================================================
 * Single FAQ item — card-style with smooth open/close
 * ============================================================ */

.wdz-faqs__item {
	background: var(--wdz-surface, #fff);
	border: 1px solid var(--wdz-border, #E4E4E7);
	border-radius: var(--wdz-radius-lg, 16px);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.wdz-faqs__item[open] {
	border-color: var(--wdz-primary, #6B46C1);
	box-shadow: 0 4px 16px rgba(107, 70, 193, 0.10);
}

/* Strip default disclosure triangle */
.wdz-faqs__item summary::-webkit-details-marker { display: none; }
.wdz-faqs__item summary { list-style: none; }

/* ============================================================
 * Question (summary) — clickable, large hit area
 * ============================================================ */

.wdz-faqs__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	user-select: none;
	font-family: var(--wdz-font-heading, inherit);
	font-size: 17px;
	font-weight: 600;
	color: var(--wdz-text, #1A1A1A);
	line-height: 1.45;
	transition: background 0.15s ease, color 0.15s ease;
}

.wdz-faqs__question:hover,
.wdz-faqs__question:focus-visible {
	background: rgba(107, 70, 193, 0.04);
	background: color-mix(in srgb, var(--wdz-primary, #6B46C1) 5%, transparent);
	color: var(--wdz-primary, #6B46C1);
}

.wdz-faqs__question:focus-visible {
	outline: 2px solid var(--wdz-accent, #F59E0B);
	outline-offset: -2px;
}

.wdz-faqs__q-text {
	flex: 1 1 auto;
}

/* ============================================================
 * Chevron — rotates on open
 * ============================================================ */

.wdz-faqs__chevron {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wdz-accent, #F59E0B);
	color: #fff;
	border-radius: 50%;
	font-family: var(--wdz-font-body);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.wdz-faqs__item[open] .wdz-faqs__chevron {
	transform: rotate(45deg);
}

/* ============================================================
 * Answer (region) — niche-tinted paragraph block
 * ============================================================ */

.wdz-faqs__answer {
	padding: 0 22px 20px;
	color: var(--wdz-text, #1A1A1A);
	font-size: 16px;
	line-height: 1.65;
	animation: wdz-faq-fade 0.18s ease-out;
}

.wdz-faqs__answer > *:first-child { margin-top: 0; }
.wdz-faqs__answer > *:last-child  { margin-bottom: 0; }

.wdz-faqs__answer a {
	color: var(--wdz-primary, #6B46C1);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.wdz-faqs__answer a:hover {
	color: var(--wdz-accent, #F59E0B);
}

@keyframes wdz-faq-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Narrow viewports
 * ============================================================ */

@media (max-width: 640px) {
	.wdz-faqs {
		margin: var(--wdz-space-6, 48px) auto;
		padding: 0 12px;
	}
	.wdz-faqs__question {
		padding: 16px 16px;
		font-size: 16px;
	}
	.wdz-faqs__chevron {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
		font-size: 19px;
	}
	.wdz-faqs__answer {
		padding: 0 16px 16px;
		font-size: 15px;
	}
}