/* =========================================================
   eh-faq.css  —  FAQ Block (Pertanyaan yang Sering Diajukan)
   BEM: .eh-faq / .eh-faq__*
   Designed to work inside a Gutenberg Columns column.
   ========================================================= */

/* ── CSS Variables ────────────────────────────────────── */
.eh-faq {
	--faq-text-dark:    #1A2332;
	--faq-text-mid:     #546E7A;
	--faq-text-light:   #78909C;
	--faq-border:       #E8ECF0;
	--faq-teal:         #19babf;
	--faq-answer-bg:    #F8FAFB;
}

/* ── Section wrapper ──────────────────────────────────── */
.eh-faq {
	display: block;
	width: 100%;
	padding: 24px 0 28px;
	box-sizing: border-box;
}

/* ── Heading ──────────────────────────────────────────── */
.eh-faq__heading {
	font-size: 15px;
	font-weight: 700;
	color: var(--faq-text-dark);
	margin: 0 0 16px;
	line-height: 1.2;
}

/* ── Accordion list ───────────────────────────────────── */
.eh-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--faq-border);
}

/* ── Single item ──────────────────────────────────────── */
.eh-faq__item {
	border-bottom: 1px solid var(--faq-border);
}

/* ── Question button ──────────────────────────────────── */
.eh-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--faq-text-dark);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.15s;
}

.eh-faq__btn:hover {
	color: var(--faq-teal);
}

.eh-faq__question {
	flex: 1;
}

/* ── Chevron icon ─────────────────────────────────────── */
.eh-faq__chevron {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--faq-border);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, border-color 0.15s;
}

.eh-faq__chevron svg {
	width: 10px;
	height: 10px;
	fill: none;
	stroke: var(--faq-text-mid);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.15s;
}

.eh-faq__item.is-open .eh-faq__chevron {
	transform: rotate(180deg);
	border-color: var(--faq-teal);
}

.eh-faq__item.is-open .eh-faq__chevron svg {
	stroke: var(--faq-teal);
}

.eh-faq__btn:hover .eh-faq__chevron {
	border-color: var(--faq-teal);
}

.eh-faq__btn:hover .eh-faq__chevron svg {
	stroke: var(--faq-teal);
}

/* ── Answer panel ─────────────────────────────────────── */
.eh-faq__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding: 0;
}

.eh-faq__item.is-open .eh-faq__answer {
	max-height: 600px;  /* large enough for any reasonable answer */
	padding-bottom: 14px;
}

.eh-faq__answer-text {
	font-size: 13px;
	color: var(--faq-text-mid);
	line-height: 1.6;
	margin: 0;
}

/* ── Empty state ──────────────────────────────────────── */
.eh-faq__empty {
	font-size: 13px;
	color: var(--faq-text-light);
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 520px) {
	.eh-faq { padding: 18px 0 22px; }
	.eh-faq__btn { font-size: 13px; padding: 12px 0; }
}