/* ============================================================
   ac-faq.css — sectie 8 van /ai-chatbot/.
   Bouwt op widgets/shared/bconnect-ac.css (handle `bconnect-ac`).
   Bron: upgrade-aichatbot.css, "SECTIE 8 — FAQ".
   ============================================================ */

.ac-faq { display: flex; width: 100%; box-sizing: border-box; max-width: 860px; margin: clamp(30px, 3.5vw, 44px) auto 0; flex-direction: column; gap: 12px; }
.ac-faq-item { display: block; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgba(20, 20, 100, .08); border-radius: 14px; overflow: hidden; transition: box-shadow .2s var(--ease); }
.ac-faq-item.is-open { box-shadow: 0 12px 30px rgba(20, 20, 100, .08); }
.ac-faq-q { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16.5px; line-height: 1.35; color: var(--c-navy); }
.ac-faq-q:hover { color: var(--c-magenta); }
.ac-faq-ic { position: relative; width: 20px; height: 20px; flex: none; }
.ac-faq-ic::before,
.ac-faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-navy); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .22s var(--ease), opacity .22s var(--ease); }
.ac-faq-ic::before { width: 13px; height: 2px; }
.ac-faq-ic::after { width: 2px; height: 13px; }
.ac-faq-item.is-open .ac-faq-ic::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.ac-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.ac-faq-item.is-open .ac-faq-a { max-height: 460px; }
.ac-faq-a-inner { display: block; width: 100%; box-sizing: border-box; padding: 0 22px 20px; }
.ac-faq-a-inner p { font-size: 15px; line-height: 1.65; color: var(--c-text-muted); margin: 0; text-wrap: pretty; }
.ac-faq-a-inner a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; }
.ac-faq-a-inner a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); }

@media (max-width: 700px) {
	.ac-faq-q { font-size: 15.5px; padding: 16px 18px; }
	/* Het langste antwoord (uitvoeringsmodellen, 405 tekens) wordt op 390px
	   ruim twee keer zo hoog als op 1280; 460px is dan te krap en het
	   antwoord wordt afgekapt. */
	.ac-faq-item.is-open .ac-faq-a { max-height: 640px; }
}

/* ============================================================
   HARDENING

   Deze widget heeft geen <img> en geen inline SVG: het plus/min-icoon is
   opgebouwd uit twee pseudo-elementen. `.elementor img` raakt hier dus
   niets.

   Wat wél moet: `.ac-faq-q` is een <button>, en Elementor zet daar eigen
   regels op (o.a. `button{background-color:...}` en een eigen
   line-height). Een kale klassenselector op een button is (0,1,0) en dat
   is genoeg tegen een type-selector, maar Elementor heeft ook
   `.elementor-widget-container button`-varianten op (0,2,1). Daarom
   expliciet onder de widgetklasse.
   ============================================================ */
.elementor-widget-bconnect_ac_faq .ac-faq-q {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	line-height: 1.35;
}