/* ==========================================================================
   KA CM Accordion Widget — Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.ka-cm-accordion {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Item
   --------------------------------------------------------------------------
   The configurable "border" is rendered as four inset box-shadows (one per
   side) so the gold hover line (::after, z-index:2) always paints on top.
   A real CSS border lives on the box edge and cannot be covered by ::after.

   Each side shadow formula:
     top    → inset  0                             N  0  0  color
     right  → inset  -N                            0  0  0  color
     bottom → inset  0                            -N  0  0  color
     left   → inset  N                             0  0  0  color
   -------------------------------------------------------------------------- */
.ka-cm-accordion__item {
	position: relative; /* Required for ::after hover line */
	overflow: hidden;   /* Keeps body animation clean + clips ::after */
	width: 100%;
	box-sizing: border-box;

	/* Disable any real border so only the inset shadows are visible */
	border: none;

	/* Four inset shadows — one per side, each driven by its own CSS var.
	   When a side's var is 0px the shadow is invisible. */
	box-shadow:
		/* top    */ inset 0                                    var(--ka-item-border-top,    0px) 0 0 var(--ka-item-border-color, transparent),
		/* right  */ inset calc(-1 * var(--ka-item-border-right,  0px)) 0                   0 0 var(--ka-item-border-color, transparent),
		/* bottom */ inset 0 calc(-1 * var(--ka-item-border-bottom, 0px))                   0 0 var(--ka-item-border-color, transparent),
		/* left   */ inset var(--ka-item-border-left,  0px)             0                   0 0 var(--ka-item-border-color, transparent);
}

/* --------------------------------------------------------------------------
   Hover bottom line — slides from left to right via ::after
   Sits at z-index:2 so it always paints on top of the inset box-shadow border.
   -------------------------------------------------------------------------- */
.ka-cm-accordion__item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: var(--ka-hover-line-height, 2px);
	background-color: var(--ka-hover-line-color, #C9A84C);
	transition: width var(--ka-hover-line-duration, 400ms) ease;
	pointer-events: none;
	z-index: 2;
}

.ka-cm-accordion__item:hover::after {
	width: 100%;
}

/* Keep the line visible when the item is active (open) */
.ka-cm-accordion__item.is-active::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Header / trigger (div replacing button)
   -------------------------------------------------------------------------- */
.ka-cm-accordion__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	gap: 12px;

	background: transparent;
	cursor: pointer;

	/* Inherit typography so Elementor controls apply */
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;

	/* Remove any default user-agent button styles */
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;

	/* Smooth background transition */
	transition: background-color 0.2s ease;

	/* Ensure it acts as a block */
	text-align: left;
}

/* Icon on the left: push title to the right */
.ka-cm-accordion__header--icon-left {
	flex-direction: row;
}

.ka-cm-accordion__header--icon-right {
	flex-direction: row;
}

/* Keyboard focus — visible ring for accessibility */
.ka-cm-accordion__header:focus-visible {
	outline: 2px solid var(--ka-hover-line-color, #C9A84C);
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.ka-cm-accordion__title {
	flex: 1;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
	pointer-events: none; /* Clicks pass through to the header div */
}

/* --------------------------------------------------------------------------
   SVG Icon wrapper
   -------------------------------------------------------------------------- */
.ka-cm-accordion__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	pointer-events: none;

	/* Rotation transition */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* Stroke color inherits from parent */
	color: inherit;
}

.ka-cm-accordion__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ka-cm-accordion__icon svg circle,
.ka-cm-accordion__icon svg line {
	transition: stroke 0.2s ease;
}

/* Hover — rotate icon 180° by default (configurable via Elementor) */
.ka-cm-accordion__header:hover .ka-cm-accordion__icon {
	transform: rotate(180deg);
}

/* Active/open — locked rotation (looks like × at 45°) */
.ka-cm-accordion__item.is-active .ka-cm-accordion__icon {
	transform: rotate(45deg);
}

/* Active + hovered — keep the active rotation */
.ka-cm-accordion__item.is-active .ka-cm-accordion__header:hover .ka-cm-accordion__icon {
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Body wrapper — animated collapse/expand
   -------------------------------------------------------------------------- */
.ka-cm-accordion__body-wrapper {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Body content
   -------------------------------------------------------------------------- */
.ka-cm-accordion__body {
	padding: 16px 20px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Elementor editor — show all panels so the user can edit content
   -------------------------------------------------------------------------- */
.elementor-editor-active .ka-cm-accordion__body-wrapper {
	display: block !important;
}