.faq {
	max-width: 42rem;
	margin: 0 auto;
	border-top: 1px solid var(--color-border);
}

.faq__item {
	border-bottom: 1px solid var(--color-border);
}

/* ─── Native FAQ-knop: winningspecificiteit t.o.v. Hello/Elementor theme styles & Kit (buttons) ─── */
.faq .faq__question,
.faq button.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-6) 0;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color var(--transition);
	-webkit-appearance: none;
	appearance: none;
	/* Reset global button / Elementor Theme Style */
	color: var(--color-primary) !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.faq .faq__question:hover,
.faq .faq__question:focus,
.faq .faq__question:focus-visible,
.faq button.faq__question:hover,
.faq button.faq__question:focus,
.faq button.faq__question:focus-visible {
	color: var(--color-accent) !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none;
}

.faq .faq__question[aria-expanded='true'],
.faq button.faq__question[aria-expanded='true'] {
	color: var(--color-primary) !important;
	background-color: transparent !important;
	background-image: none !important;
}

.faq .faq__question[aria-expanded='true']:hover,
.faq button.faq__question[aria-expanded='true']:hover {
	color: var(--color-accent) !important;
}

.faq__question-icon {
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex-shrink: 0;
}

.faq__question[aria-expanded="true"] .faq__question-icon,
.faq button.faq__question[aria-expanded='true'] .faq__question-icon {
	transform: rotate(-135deg);
}

.faq__panel {
	padding-bottom: var(--space-6);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
	color: var(--color-text-light);
}

.faq__panel[hidden] {
	display: none;
}

.faq__panel p + p {
	margin-top: var(--space-3);
}

/* ─── Elementor Accordion / Toggle widget — zelfde look als child FAQ (geen kit-primary vlak) ───
   Tabbladtitels: .elementor-tab-title; open: .elementor-active
   Zie: elementor-widget-accordion, elementor-widget-toggle */
.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--color-primary) !important;
	border: none !important;
	box-shadow: none !important;
}

.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title:hover,
.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title:focus,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title:hover,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title:focus {
	background-color: transparent !important;
	color: var(--color-accent) !important;
}

.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title.elementor-active {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--color-primary) !important;
}

.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active:hover,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title.elementor-active:hover {
	color: var(--color-accent) !important;
}

.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title .elementor-accordion-icon i:before,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title .elementor-toggle-icon i:before {
	color: var(--color-primary) !important;
}

.elementor-widget-accordion .elementor-accordion-item .elementor-tab-title.elementor-active .elementor-accordion-icon i:before,
.elementor-widget-toggle .elementor-toggle-item .elementor-tab-title.elementor-active .elementor-toggle-icon i:before {
	color: var(--color-primary) !important;
}

/* Elementor Pro / 3.22+ Nested Accordion (e-n-accordion) */
.elementor-widget-n-accordion summary,
.elementor-widget-n-accordion .e-n-accordion-item-title-header {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--color-primary) !important;
	box-shadow: none !important;
}

.elementor-widget-n-accordion summary:hover,
.elementor-widget-n-accordion .e-n-accordion-item-title-header:hover {
	color: var(--color-accent) !important;
	background-color: transparent !important;
}

.elementor-widget-n-accordion details[open] > summary,
.elementor-widget-n-accordion .e-n-accordion-item.is-active summary,
.elementor-widget-n-accordion details[open] .e-n-accordion-item-title-header {
	background-color: transparent !important;
	color: var(--color-primary) !important;
}