/* COMMAR Rich Accordion — basis-layout. Kleuren/typografie komen uit Elementor. */

.commar-racc__item {
	position: relative;
	transition: border-color 200ms ease, background-color 200ms ease;
}

/* Header (altijd zichtbaar, klikbaar) */
.commar-racc__head {
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
}

.commar-racc__head::-webkit-details-marker {
	display: none;
}

.commar-racc__img {
	flex: 0 0 auto;
	display: block;
	/* Altijd boven de rand, zodat de lijn achter een uitstekende visual langs loopt. */
	position: relative;
	z-index: 1;
}

.commar-racc__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.commar-racc__title {
	margin: 0;
	line-height: 1.15;
}

.commar-racc__subtitle {
	display: block;
}

/* Body */
.commar-racc__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.commar-racc__content > :first-child { margin-top: 0; }
.commar-racc__content > :last-child  { margin-bottom: 0; }

.commar-racc__link {
	display: inline-block;
	text-decoration: underline;
	align-self: flex-start;
}

/* Link-uitlijning (laat de bodytekst op volle breedte staan) */
.commar-racc--link-left   .commar-racc__link { align-self: flex-start; }
.commar-racc--link-center .commar-racc__link { align-self: center; }
.commar-racc--link-right  .commar-racc__link { align-self: flex-end; }

/* ----------------------------------------------------------------------
 * Icoon: absoluut gepositioneerd t.o.v. het item.
 * Het icoon blijft een DOM-kind van <summary>, dus klikken toggelt het
 * item ook al ligt het visueel over de body. Geen JavaScript nodig.
 * -------------------------------------------------------------------- */
.commar-racc__icon {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.commar-racc__icon svg {
	display: block;
}

/* Toon het juiste icoon op basis van open/dicht */
.commar-racc__item[open] .commar-racc__icon--open,
.commar-racc__item:not([open]) .commar-racc__icon--active {
	display: none;
}

/* Horizontale positie */
.commar-racc--iconh-right .commar-racc__icon { right: var(--racc-ioff-h, 30px); left: auto; }
.commar-racc--iconh-left  .commar-racc__icon { left:  var(--racc-ioff-h, 30px); right: auto; }

/* Verticale positie — geldt voor zowel het gesloten (+) als het geopende (-) icoon */
.commar-racc--iconv-top    .commar-racc__icon { top: var(--racc-ioff-v, 24px); bottom: auto; transform: none; }
.commar-racc--iconv-center .commar-racc__icon { top: 50%; bottom: auto; transform: translateY(-50%); }
.commar-racc--iconv-bottom .commar-racc__icon { bottom: var(--racc-ioff-v, 24px); top: auto; transform: none; }