/* H-Lead Accordion */

.hl-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-16);
	font-family: var(--hl-font-family);
}

.hl-accordion__item {
	border: 1px solid var(--hl-accordion-stroke);
	border-radius: var(--hl-radius-12);
	background-color: var(--hl-accordion-surface);
	overflow: hidden;
	transition: box-shadow 0.2s ease, opacity 0.6s ease, transform 0.6s ease;
	max-width: 770px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.hl-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hl-space-16);
	width: 100%;
	padding: var(--hl-space-20);
	background-color: var(--hl-accordion-surface);
	border: none;
	border-radius: 0;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.2s ease;
}

/* Figma has no separate hover variant for the closed accordion header —
 * it stays white. Beat theme/Elementor button:hover rules explicitly. */
.hl-accordion .hl-accordion__header:hover,
.hl-accordion .hl-accordion__header:focus {
	background-color: var(--hl-accordion-surface);
	color: var(--hl-color-text-title);
}

.hl-accordion .hl-accordion__item--open .hl-accordion__header,
.hl-accordion .hl-accordion__item--open .hl-accordion__header:hover,
.hl-accordion .hl-accordion__item--open .hl-accordion__header:focus {
	background-color: var(--hl-accordion-surface-active);
}

.hl-accordion__title {
	font-size: var(--hl-accordion-title-size);
	line-height: var(--hl-accordion-title-line-height);
	font-weight: var(--hl-font-weight-bold);
	color: var(--hl-color-text-title);
	transition: color 0.2s ease;
}

.hl-accordion__chevron {
	width: var(--hl-space-32);
	height: var(--hl-space-32);
	flex-shrink: 0;
	background-color: var(--hl-color-text-title);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.hl-accordion__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* Figma: header→list gap 16; list padding 0 20px 20px */
.hl-accordion__body-inner {
	padding: var(--hl-space-16) var(--hl-space-20) var(--hl-space-20);
}

.hl-accordion__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-accordion__checklist-item {
	display: flex;
	align-items: center;
	gap: var(--hl-space-12);
	font-size: var(--hl-accordion-body-size);
	line-height: var(--hl-accordion-body-line-height);
	font-weight: var(--hl-font-weight-regular);
	color: var(--hl-color-text-subtext);
}

.hl-accordion__check-icon {
	width: var(--hl-space-24);
	height: var(--hl-space-24);
	flex-shrink: 0;
	background-color: var(--hl-color-text-subtext);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Open state (Figma Open=true: header #002e3f, title 20/30 white,
 * drop shadow 0 0 12 rgba(0,0,0,.12)) */
.hl-accordion__item--open {
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
}

.hl-accordion__item--open .hl-accordion__title {
	color: var(--hl-accordion-title-active);
}

.hl-accordion__item--open .hl-accordion__chevron {
	background-color: var(--hl-accordion-title-active);
	transform: scaleY(-1);
}