/**
 * Frontend styles for Accordion block
 * Simpele smooth expand animatie
 */

/* ===== ACCORDION CONTAINER ===== */
.buro-staal-accordion {
	display: flex;
	width: 100%;
	counter-reset: accordion-counter;
}

/* HORIZONTAL mode: items onder elkaar */
.buro-staal-accordion-horizontal {
	flex-direction: column;
	gap: var(--accordion-gap, 1rem);
}

/* VERTICAL mode: items naast elkaar */
.buro-staal-accordion-vertical {
	flex-direction: row;
	gap: var(--accordion-gap, 1rem);
	align-items: flex-start; /* Items bepalen eigen hoogte */
}

.buro-staal-accordion__items {
	display: flex;
	flex-direction: inherit;
	gap: inherit;
	width: 100%;
	align-items: flex-start; /* Items bepalen eigen hoogte */
}

/* ===== ACCORDION ITEM ===== */
.buro-staal-accordion-item {
	counter-increment: accordion-counter;
	display: flex;
	position: relative;
}

/* Vertical mode: animeer width, height, background (GEEN padding) */
.buro-staal-accordion-vertical .buro-staal-accordion-item {
	transition: width var(--accordion-duration, 0.3s) ease,
	            max-width var(--accordion-duration, 0.3s) ease,
	            min-height var(--accordion-duration, 0.3s) ease,
	            max-height var(--accordion-duration, 0.3s) ease,
	            background-color var(--accordion-duration, 0.3s) ease,
	            border-radius var(--accordion-duration, 0.3s) ease;
}

/* Horizontal mode: animeer height, padding, background (GEEN width) */
/* Transition is always active, but we control what changes via inline styles */
.buro-staal-accordion-horizontal .buro-staal-accordion-item {
	transition: height var(--accordion-duration, 0.3s) ease,
	            max-height var(--accordion-duration, 0.3s) ease,
	            min-height var(--accordion-duration, 0.3s) ease,
	            background-color var(--accordion-duration, 0.3s) ease,
	            border-radius var(--accordion-duration, 0.3s) ease;
}

/* Disable transition on page load */
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-no-animation] {
	transition: none !important;
}

.buro-staal-accordion-item.has-custom-bg {
	background: var(--accordion-item-custom-bg, var(--accordion-content-bg, #f5f2df)) !important;
}

.buro-staal-accordion-vertical .buro-staal-accordion-item.has-custom-bg.is-open,
.buro-staal-accordion-vertical .buro-staal-accordion-item.has-custom-bg[data-is-open="true"],
.buro-staal-accordion-vertical .buro-staal-accordion-item.has-custom-bg.is-closing {
	background: var(--accordion-item-custom-bg, var(--accordion-content-bg, #f5f2df)) !important;
}

/* Disable transition bij page load */
.buro-staal-accordion-item[data-no-animation] {
	transition: none !important;
}

/* HORIZONTAL mode - COLLAPSED (default) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item {
	flex-direction: column;
	width: 100%;
	padding: 16px 28px;
	background: var(--accordion-header-bg, #e8e4cb);
	border-radius: var(--accordion-header-radius, 20px);
	gap: 16px;
	cursor: pointer;
	height: var(--accordion-item-height, 80px); /* Fixed collapsed height */
	max-height: var(--accordion-item-height, 80px);
	overflow: hidden;
}

/* HORIZONTAL mode - OPENING (animate to expanded) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening {
	/* Height is controlled by JS inline styles - do not set here */
	min-height: auto;
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	padding: 16px 28px;
	flex-direction: column;
	gap: 16px;
	cursor: default;
	position: relative;
	overflow: hidden; /* Keep content within bounds during animation */
}

/* HORIZONTAL mode - OPEN (fully expanded) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] {
	height: auto;
	max-height: none;
	min-height: auto;
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	padding: 16px 28px;
	flex-direction: column;
	gap: 16px;
	cursor: default;
	position: relative;
	overflow: visible; /* Allow content to overflow when fully open */
}

/* HORIZONTAL mode - CLOSING (collapse back) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing {
	/* Height is controlled by JS inline styles - do not set here */
	padding: 16px 28px;
	/* Keep expanded styling for smooth animation */
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	flex-direction: column;
	gap: 16px;
	cursor: default;
	position: relative;
	overflow: hidden; /* Keep content within bounds during animation */
}

/* VERTICAL mode - DICHTGEKLAPT (card-collapsed) */
.buro-staal-accordion-vertical .buro-staal-accordion-item {
	width: 80px;
	max-width: 80px;
	min-height: var(--accordion-item-height, 220px); /* Minimum hoogte, wordt overschreven door JS */
	background: var(--accordion-header-bg, #e8e4cb);
	border-radius: var(--accordion-header-radius, 12px);
	padding: 14px;
	flex-direction: column;
	cursor: pointer;
	overflow: hidden;
}

/* VERTICAL mode - OPENING (animeer naar expanded, content blijft binnen bounds) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening {
	width: 950px;
	max-width: 950px;
	min-height: auto;
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	padding: 11px;
	flex-direction: row;
	gap: 24px;
	cursor: default;
	position: relative;
	overflow: hidden; /* Houd content binnen bounds tijdens animatie */
}

/* VERTICAL mode - UITGEKLAPT (card-expanded) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] {
	width: 950px;
	max-width: 950px;
	min-height: auto;
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	padding: 13px 12px;
	flex-direction: row;
	gap: 24px;
	cursor: default;
	position: relative; /* Voor absolute positioned tail */
}

/* VERTICAL mode - CLOSING (behoud expanded styling behalve width/padding) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing {
	/* Width en padding animeren naar collapsed */
	width: 80px;
	max-width: 80px;
	padding: 14px;
	/* Behoud expanded styling voor smooth animatie */
	background: var(--accordion-content-bg, #f5f2df);
	border-radius: var(--accordion-header-radius, 20px);
	flex-direction: row;
	gap: 24px;
	cursor: default;
	position: relative;
	overflow: hidden; /* Houd content binnen bounds tijdens animatie */
}

/* ===== SPEECH BUBBLE TAIL (design SVG) ===== */
.accordion-item-tail {
	position: absolute;
	display: none;
	pointer-events: none;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.5) ease calc(var(--accordion-duration, 0.3s) * 0.5);
	/* Fade in over 150ms, start na 150ms (halverwege opening animatie) */
	opacity: 0;
	z-index: 3; /* Above image (z-index: 2) */
	/* SVG aspect ratio: 154:62 ≈ 2.5:1 */
	width: 154px;
	height: 62px;
	filter: none;
	box-shadow: none;
}

.accordion-item-tail svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Tail alleen zichtbaar bij open items (na animatie) */
.buro-staal-accordion-item.is-open .accordion-item-tail,
.buro-staal-accordion-item[data-is-open="true"] .accordion-item-tail {
	display: block;
	opacity: 1;
}

/* Tijdens closing: fade out tail aan het begin van animatie */
.buro-staal-accordion-item.is-closing .accordion-item-tail {
	display: block !important;
	opacity: 0 !important;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease 0s;
}

/* Tail positie: Right (zoals in design - onderkant rechts) */
.accordion-item-tail,
.tail-right .accordion-item-tail {
	bottom: -2px;
	right: -3px;
	transform: scale(1.02);
	transform-origin: bottom right;
}

/* Tail positie: Left (gespiegeld) */
.tail-left .accordion-item-tail {
	bottom: -2px;
	left: -3px;
	right: auto;
	transform: scale(1.02) scaleX(-1);
	transform-origin: bottom left;
}

/* Tail positie: Top (ondersteboven) */
.tail-top .accordion-item-tail {
	top: -2px;
	right: -3px;
	bottom: auto;
	transform: scale(1.02) scaleY(-1);
	transform-origin: top right;
}

/* Tail positie: Bottom (zoals right maar ander positie) */
.tail-bottom .accordion-item-tail {
	bottom: -2px;
	left: 50%;
	right: auto;
	transform: translateX(-50%) scale(1.02);
	transform-origin: bottom center;
}

/* Tail padding alleen op open items */
.buro-staal-accordion-item.has-tail.tail-right.is-open .accordion-item-content,
.buro-staal-accordion-item.has-tail.tail-right[data-is-open="true"] .accordion-item-content {
	padding-right: var(--accordion-tail-gap, 24px);
}

.buro-staal-accordion-item.has-tail.tail-left.is-open .accordion-item-content,
.buro-staal-accordion-item.has-tail.tail-left[data-is-open="true"] .accordion-item-content {
	padding-left: var(--accordion-tail-gap, 24px);
}

.buro-staal-accordion-item.has-tail.tail-top.is-open .accordion-item-content,
.buro-staal-accordion-item.has-tail.tail-top[data-is-open="true"] .accordion-item-content {
	padding-top: var(--accordion-tail-gap, 24px);
}

.buro-staal-accordion-item.has-tail.tail-bottom.is-open .accordion-item-content,
.buro-staal-accordion-item.has-tail.tail-bottom[data-is-open="true"] .accordion-item-content {
	padding-bottom: calc(var(--accordion-tail-gap, 24px) + var(--accordion-tail-gap-bottom, 0px));
}

.buro-staal-accordion-item.has-tail:not(.tail-bottom).is-open .accordion-item-content,
.buro-staal-accordion-item.has-tail:not(.tail-bottom)[data-is-open="true"] .accordion-item-content {
	padding-bottom: var(--accordion-tail-gap-bottom, 0px);
}

/* ===== IMAGE ===== */
.accordion-item-image {
	display: none;
	flex-shrink: 0;
	position: relative;
	z-index: 2; /* Below tail (z-index: 3) */
	object-fit: cover;
}

/* Horizontal mode: image altijd zichtbaar als aanwezig */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.has-image .accordion-item-image {
	display: none;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open.has-image .accordion-item-image,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"].has-image .accordion-item-image {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto;
	margin-bottom: 8px;
	opacity: 1;
}

/* Vertical mode uitgeklapt: image zichtbaar (ook tijdens closing want is-open blijft) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open.has-image .accordion-item-image,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"].has-image .accordion-item-image {
	display: block;
	opacity: 1;
	/* Styling komt van inline styles (width, height, borderRadius, objectFit) */
}

/* ===== CONTENT WRAPPER ===== */
.accordion-item-content {
	display: flex;
	flex: 1;
	width: 100%;
	min-width: 0;
}

/* Horizontal mode: altijd row (nummer | divider | content naast elkaar) */
.buro-staal-accordion-horizontal .accordion-item-content {
	flex-direction: row;
}

/* Vertical mode: column layout */
.buro-staal-accordion-vertical .accordion-item-content {
	flex-direction: column;
}

/* Vertical dichtgeklapt: center content, vul volledige hoogte */
.buro-staal-accordion-vertical .buro-staal-accordion-item .accordion-item-content {
	align-items: center;
	justify-content: space-between;
	height: 100%;
	min-height: auto; /* Dynamisch obv content */
}

/* Vertical uitgeklapt: normale flow */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-content,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-content {
	align-items: flex-start;
	justify-content: flex-start;
}

/* ===== NUMMER ===== */
.accordion-item-number {
	font-size: 22px;
	font-weight: 600;
	padding-top: 30px;
	color: var(--accordion-header-color, #333);
	flex-shrink: 0;
}

/* CSS counter voor nummering - default format is padded */
.buro-staal-accordion.has-numbering .accordion-item-number::before {
	content: attr(data-prefix) counter(accordion-counter) attr(data-suffix);
}

/* Vertical dichtgeklapt: grotere number */
.buro-staal-accordion-vertical .buro-staal-accordion-item .accordion-item-number {
	font-size: 20px;
}

/* Vertical uitgeklapt: normale size */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-number,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-number {
	font-size: 22px;
}

/* ===== DIVIDER ===== */
.accordion-item-divider {
	background: var(--accordion-divider-color, #000);
	flex-shrink: 0;
}

/* Vertical mode divider: horizontale lijn (van links naar rechts) */
.buro-staal-accordion-vertical .accordion-item-divider {
	width: 100%;
	height: var(--accordion-divider-width, 3px);
	margin: 10px 0 20px 0;
	align-self: auto;
}

/* Horizontal mode divider: verticale lijn (van boven naar beneden) */
.buro-staal-accordion-horizontal .accordion-item-divider {
	width: var(--accordion-divider-width, 3px);
	height: stretch;
	margin: 0 16px;
	flex-shrink: 0;
}

/* ===== INNER CONTENT ===== */
.accordion-item-inner {
	flex: 1;
	width: 100%;
	min-width: 0;
}

/* Vertical dichtgeklapt: label verticaal, vul volledige hoogte */
.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open) .accordion-item-inner {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-align: center; /* Alleen voor label */
	font-size: 14px;
	line-height: 1.2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: start;
	height: 100%; /* Vul de ruimte tussen nummer en divider */
	position: relative; /* Voor absolute positioned label */
}

/* Tijdens closing: BEHOUD horizontale layout (geen rotatie tijdens animatie) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner {
	writing-mode: horizontal-tb;
	transform: none;
	text-align: left;
	font-size: inherit;
	position: relative; /* Voor absolute positioned label */
	/* Rotatie gebeurt pas NADAT animatie klaar is en classes verwijderd zijn */
}

/* Vertical dichtgeklapt: verberg alles behalve eerste paragraph (label) */
.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open):not(.is-closing) .accordion-item-inner > * {
	display: none;
}

.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open):not(.is-closing) .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open):not(.is-closing) .accordion-item-inner > .accordion-header-label {
	display: block;
	opacity: 1;
}

/* Horizontal dichtgeklapt: inner moet zichtbaar zijn en gecentreerd */
.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not([data-is-open="true"]) .accordion-item-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
/* Horizontal open/opening: row layout with number, divider, content */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-content,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-content,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	height: 100%; /* Fill parent height during animation */
	min-height: 0; /* Allow shrinking */
}

/* Horizontal closing: centered column layout (like collapsed) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-number {
	flex: 0 0 5%;
	max-width: 5%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-divider,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-divider,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-divider {
	width: var(--accordion-divider-width, 3px);
	height: stretch;
	background: var(--accordion-divider-color, #000);
	margin: 0 16px;
	flex-shrink: 0;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-inner {
	flex: 1 1 calc(95% - 25px);
	min-width: 0;
	overflow: visible; /* Allow content to be visible during animation */
}

/* Uitgeklapt: normale layout */
.buro-staal-accordion-horizontal .accordion-item-inner,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-inner,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner {
	writing-mode: horizontal-tb;
	transform: none;
	text-align: left; /* Expliciet links uitlijnen */
	font-size: inherit;
	line-height: inherit;
}

/* Zorg dat alle child elementen ook links aligned zijn */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > *,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > *,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-inner > *,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > * {
	text-align: left !important;
}

/* ===== CONTENT VISIBILITY & ANIMATIONS ===== */

/* Content altijd zichtbaar (opacity: 1), geen fade animatie */
.buro-staal-accordion-vertical .buro-staal-accordion-item .accordion-item-inner,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-inner,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner {
	opacity: 1;
}

/* Closing animation: fade out content aan het begin */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner {
	opacity: 0 !important;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease 0s;
}

/* Label tijdens closing: pas zichtbaar aan het einde (fade in laatste 30%) */
/* Absolute position zodat het geen ruimte inneemt tijdens fade in */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner > .accordion-header-label {
	display: block !important;
	opacity: 0 !important;
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(180deg) !important;
	width: 100%;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease calc(var(--accordion-duration, 0.3s) * 0.7);
	/* Start fade in bij 70% (210ms), duurt 90ms */
	/* Sync met image fade out */
	/* Absolute position voorkomt content shift */
}

/* NA closing: label volledig zichtbaar */
.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open):not(.is-closing) .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item:not(.is-open):not(.is-closing) .accordion-item-inner > .accordion-header-label {
	opacity: 1;
}

/* Image closing animation - fade out aan het begin */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-image {
	opacity: 0 !important;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease 0s;
	pointer-events: none;
}

/* Uitgeklapt: toon alle content */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open:not(.is-opening) .accordion-item-inner > *,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"]:not(.is-opening) .accordion-item-inner > *,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open:not(.is-opening) .accordion-item-inner > *,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"]:not(.is-opening) .accordion-item-inner > * {
	display: block;
}

/* Tijdens opening: content blijft verborgen, geen ruimte innemen */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-inner > * {
	display: none !important;
}

/* Image tijdens opening: fade in vanaf 70% van animatie */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-image {
	display: block !important;
	opacity: 0;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease calc(var(--accordion-duration, 0.3s) * 0.7);
	/* Fade in over 30% van tijd, start bij 70% */
}

/* Tail tijdens opening: direct zichtbaar, geen animatie */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-tail {
	display: block !important;
	opacity: 1;
}

/* Content inner fade in na 70% van opening animatie (laatste 30%) */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open:not(.is-opening) .accordion-item-inner,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"]:not(.is-opening) .accordion-item-inner {
	opacity: 1;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease;
}

/* Tijdens opening: content inner opacity 0 */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-inner {
	opacity: 0;
}

/* Titel en divider fade in tijdens laatste 30% */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open:not(.is-opening) .accordion-item-number,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open:not(.is-opening) .accordion-item-divider {
	opacity: 1;
	transition: opacity calc(var(--accordion-duration, 0.3s) * 0.3) ease;
}

.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-number,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-opening .accordion-item-divider {
	opacity: 0;
}

/* Tijdens closing: verberg alle content BEHALVE het label */
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner > *:not(:first-child) {
	display: none !important;
}

/* Uitgeklapt: verberg eerste paragraph (label) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > *:first-child,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > .accordion-header-label,
.buro-staal-accordion-horizontal .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > .accordion-header-label,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-open .accordion-item-inner > .accordion-header-label,
.buro-staal-accordion-vertical .buro-staal-accordion-item[data-is-open="true"] .accordion-item-inner > .accordion-header-label,
.buro-staal-accordion-vertical .buro-staal-accordion-item.is-closing .accordion-item-inner > .accordion-header-label {
	display: none;
}

/* ===== HORIZONTAL MODE - CONTENT VISIBILITY (EXPAND, NO FADE) ===== */

/* Collapsed: only show label (centered) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-inner > *:not(:first-child) {
	display: none !important;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-inner > .accordion-header-label {
	display: block;
	opacity: 1;
}

/* Collapsed: hide number and divider */
.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item:not(.is-open):not(.is-opening):not(.is-closing) .accordion-item-divider {
	display: none;
}

/* Opening & Open: show all content (no fade, just expand reveal) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-inner,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-inner > *,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > * {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Opening & Open: hide label (first child) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-inner > .accordion-header-label,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-inner > .accordion-header-label {
	display: none !important;
}

/* Opening & Open: show number and divider */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-divider,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-divider {
	display: flex !important;
	opacity: 1 !important;
}

/* Opening & Open: show image */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-opening .accordion-item-image,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-open .accordion-item-image {
	display: block !important;
	opacity: 1 !important;
}

/* Closing: hide all content except label (instant) */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-inner > *:not(:first-child) {
	display: none !important;
}

/* Closing: show and center label */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-inner > *:first-child,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-inner > .accordion-header-label {
	display: block !important;
	opacity: 1 !important;
}

/* Closing: hide number and divider */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-number,
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-divider {
	display: none !important;
}

/* Closing: hide image */
.buro-staal-accordion-horizontal .buro-staal-accordion-item.is-closing .accordion-item-image {
	display: none !important;
}


/* ===== CONTENT STYLING ===== */
/* Titles */
.accordion-item-inner h1,
.accordion-item-inner h2,
.accordion-item-inner h3,
.accordion-item-inner h4,
.accordion-item-inner h5,
.accordion-item-inner h6 {
	margin: 0 0 12px 0;
	font-size: 26px;
	line-height: 1.2;
	font-family: Georgia, serif;
}

/* Paragraphs */
.accordion-item-inner p {
	/* margin: 0 0 22px 0; */
	line-height: 1.5;
	font-size: 15px;
}

/* Buttons / Links */
.accordion-item-inner .wp-block-button,
.accordion-item-inner a.wp-block-button__link {
	background: none;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
}

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 1024px) {
	/* Verberg numbering en divider op tablet als uitgeschakeld */
	.buro-staal-accordion[data-show-numbering-tablet="false"] .accordion-item-number,
	.buro-staal-accordion[data-show-numbering-tablet="false"] .accordion-item-divider {
		display: none !important;
	}

	/* Tablet: switch naar horizontal mode als data-direction-tablet="horizontal" */
	.buro-staal-accordion[data-direction-tablet="horizontal"] {
		flex-direction: column !important;
	}
	
	/* Tablet horizontal: animatie van boven naar beneden */
	.buro-staal-accordion-vertical[data-direction-tablet="horizontal"] .buro-staal-accordion-item,
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: var(--accordion-item-height-tablet, var(--accordion-item-height, 220px)) !important;
		max-height: var(--accordion-item-height-tablet, var(--accordion-item-height, 220px)) !important;
		overflow: hidden !important;
		background: var(--accordion-header-bg-tablet, var(--accordion-header-bg, #e8e4cb)) !important;
		padding: 16px 28px !important;
		transition-property: height, width, max-width, min-height, max-height, background-color, border-radius !important;
		transition-duration: var(--accordion-duration-tablet, var(--accordion-duration, 0.3s)) !important;
		transition-timing-function: ease !important;
	}
	
	/* Tablet horizontal opening state */
	.buro-staal-accordion-vertical[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-opening,
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-opening {
		/* min-height wordt via JS geanimeerd */
		max-height: none !important;
		overflow: hidden !important;
		background: var(--accordion-content-bg-tablet, var(--accordion-content-bg, #f5f2df)) !important;
	}
	
	/* Tablet horizontal closing state */
	.buro-staal-accordion-vertical[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-closing,
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-closing {
		min-height: var(--accordion-item-height-tablet, var(--accordion-item-height, 220px)) !important;
		max-height: var(--accordion-item-height-tablet, var(--accordion-item-height, 220px)) !important;
		overflow: hidden !important;
		background: var(--accordion-content-bg-tablet, var(--accordion-content-bg, #f5f2df)) !important;
	}
	
	/* Tablet horizontal: opening/closing states need overflow hidden */
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-opening,
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-closing {
		overflow: hidden !important;
	}
	
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item.is-open:not(.is-opening),
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item[data-is-open="true"]:not(.is-opening) {
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 16px 28px;
		background: var(--accordion-content-bg-tablet, var(--accordion-content-bg, #f5f2df)) !important;
	}

	.buro-staal-accordion[data-direction-tablet="horizontal"] .accordion-item-content {
		flex-direction: row !important;
	}
	
	.buro-staal-accordion[data-direction-tablet="horizontal"] .accordion-item-inner {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		text-align: left !important;
	}
	
	.buro-staal-accordion[data-direction-tablet="horizontal"] .accordion-item-divider {
		width: var(--accordion-divider-width-tablet, var(--accordion-divider-width, 3px)) !important;
		height: stretch !important;
		margin: 0 16px !important;
		flex-shrink: 0 !important;
	}
	
	.buro-staal-accordion[data-direction-tablet="horizontal"] .accordion-item-image {
		width: 100% !important;
		height: auto !important;
		max-height: 200px;
		margin-bottom: 16px;
	}
	
	.buro-staal-accordion[data-direction-tablet="horizontal"] .buro-staal-accordion-item:not(.is-open):not([data-is-open="true"]) .accordion-item-inner > *:not(:first-child) {
		display: none !important;
	}
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 768px) {
	/* Verberg numbering en divider op mobile als uitgeschakeld */
	.buro-staal-accordion[data-show-numbering-mobile="false"] .accordion-item-number,
	.buro-staal-accordion[data-show-numbering-mobile="false"] .accordion-item-divider {
		display: none !important;
	}

	/* Mobile: switch naar horizontal mode als data-direction-mobile="horizontal" */
	.buro-staal-accordion[data-direction-mobile="horizontal"] {
		flex-direction: column !important;
	}
	
	/* Mobile horizontal: animatie van boven naar beneden */
	.buro-staal-accordion-vertical[data-direction-mobile="horizontal"] .buro-staal-accordion-item,
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: var(--accordion-item-height-mobile, var(--accordion-item-height, 220px)) !important;
		max-height: var(--accordion-item-height-mobile, var(--accordion-item-height, 220px)) !important;
		overflow: hidden !important;
		background: var(--accordion-header-bg-mobile, var(--accordion-header-bg, #e8e4cb)) !important;
		padding: 16px 28px !important;
		transition-property: height, width, max-width, min-height, max-height, background-color, border-radius !important;
		transition-duration: var(--accordion-duration-mobile, var(--accordion-duration, 0.3s)) !important;
		transition-timing-function: ease !important;
	}
	
	/* Mobile horizontal opening state */
	.buro-staal-accordion-vertical[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-opening,
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-opening {
		/* min-height wordt via JS geanimeerd */
		max-height: none !important;
		overflow: hidden !important;
		background: var(--accordion-content-bg-mobile, var(--accordion-content-bg, #f5f2df)) !important;
	}
	
	/* Mobile horizontal closing state */
	.buro-staal-accordion-vertical[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-closing,
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-closing {
		min-height: var(--accordion-item-height-mobile, var(--accordion-item-height, 220px)) !important;
		max-height: var(--accordion-item-height-mobile, var(--accordion-item-height, 220px)) !important;
		overflow: hidden !important;
		background: var(--accordion-content-bg-mobile, var(--accordion-content-bg, #f5f2df)) !important;
	}
	
	/* Mobile horizontal: opening/closing states need overflow hidden */
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-opening,
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-closing {
		overflow: hidden !important;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item.is-open:not(.is-opening),
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item[data-is-open="true"]:not(.is-opening) {
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 16px 28px;
		background: var(--accordion-content-bg-mobile, var(--accordion-content-bg, #f5f2df)) !important;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .accordion-item-content {
		flex-direction: row !important;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .accordion-item-inner {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		text-align: left !important;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .accordion-item-divider {
		width: var(--accordion-divider-width-mobile, var(--accordion-divider-width, 3px)) !important;
		height: stretch !important;
		margin: 0 16px !important;
		flex-shrink: 0 !important;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .accordion-item-image {
		width: 100% !important;
		height: auto !important;
		max-height: 200px;
		margin-bottom: 16px;
	}
	
	.buro-staal-accordion[data-direction-mobile="horizontal"] .buro-staal-accordion-item:not(.is-open):not([data-is-open="true"]) .accordion-item-inner > *:not(:first-child) {
		display: none !important;
	}
}