/* ================================================================
   ECTO FAQ — ecto-faq.css
   ================================================================ */

/* --- CSS custom properties (defaults, Figma spec) --- */
.ecto-faq-wrap {
	--ecto-faq-item-bg:        #fafafa;
	--ecto-faq-item-hover-bg:  #fafafa;
	--ecto-faq-item-open-bg:   #fafafa;
	--ecto-faq-q-color:        #18181b;
	--ecto-faq-q-open-color:   #18181b;
	--ecto-faq-a-color:        #52525a;
	--ecto-faq-icon-color:     #52525a;
	--ecto-faq-icon-open-color:#18181b;
	--ecto-faq-icon-size:      20px;
	--ecto-faq-duration:       320ms;
	--ecto-faq-delay:          0;
}

/* ================================================================
   LIST
   ================================================================ */

.ecto-faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ================================================================
   ITEM
   ================================================================ */

.ecto-faq-item {
	background-color: var(--ecto-faq-item-bg);
	border: 1px solid #f4f4f5;
	border-radius: 16px;
	overflow: hidden;
	transition:
		background-color var(--ecto-faq-duration) ease,
		border-color     0.2s ease,
		box-shadow       0.25s ease;

	/* entrance animation on load */
	animation: ecto-faq-item-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: calc(var(--ecto-faq-delay, 0) * 60ms + 40ms);
	will-change: transform, opacity;
}

.ecto-faq-item:not(.ecto-faq-item--open):hover {
	background-color: var(--ecto-faq-item-hover-bg);
}

.ecto-faq-item--open {
	background-color: var(--ecto-faq-item-open-bg);
}

/* ================================================================
   TRIGGER (button)
   ================================================================ */

.ecto-faq-question-wrap {
	margin: 0;
	padding: 0;
}

.ecto-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 32px;
	background: transparent !important;
	border: none;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.ecto-faq-trigger:hover,
.ecto-faq-trigger:active,
.ecto-faq-trigger:focus {
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
}

.ecto-faq-trigger:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: -4px;
	border-radius: 14px;
}

/* ================================================================
   QUESTION TEXT
   ================================================================ */

.ecto-faq-question {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ecto-faq-q-color);
	transition: color 0.2s ease;
}

.ecto-faq-item--open .ecto-faq-question {
	color: var(--ecto-faq-q-open-color);
}

/* ================================================================
   ICON WRAPPER
   ================================================================ */

.ecto-faq-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--ecto-faq-icon-size);
	height: var(--ecto-faq-icon-size);
	color: var(--ecto-faq-icon-color);
	transition:
		color       0.25s ease,
		background  0.2s ease,
		transform   var(--ecto-faq-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ecto-faq-item--open .ecto-faq-icon-wrap {
	color: var(--ecto-faq-icon-open-color);
}

/* --- Chevron: rotate 180° when open --- */
.ecto-faq-chevron-svg {
	width:  var(--ecto-faq-icon-size);
	height: var(--ecto-faq-icon-size);
	display: block;
	transition: transform var(--ecto-faq-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform;
}

.ecto-faq-item--open .ecto-faq-chevron-svg {
	transform: rotate(180deg);
}

/* --- Plus/Minus icon --- */
.ecto-faq-plus-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width:  var(--ecto-faq-icon-size);
	height: var(--ecto-faq-icon-size);
}

.ecto-faq-plus-svg,
.ecto-faq-minus-svg {
	width:  var(--ecto-faq-icon-size);
	height: var(--ecto-faq-icon-size);
	display: block;
	position: absolute;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ecto-faq-minus-svg {
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
}

.ecto-faq-item--open .ecto-faq-plus-svg {
	opacity: 0;
	transform: rotate(90deg) scale(0.5);
}

.ecto-faq-item--open .ecto-faq-minus-svg {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* --- Custom icon swap --- */
.ecto-faq-custom-open {
	display: none;
}

.ecto-faq-item--open .ecto-faq-custom-closed {
	display: none;
}

.ecto-faq-item--open .ecto-faq-custom-open {
	display: block;
}

/* ================================================================
   PANEL — smooth expand/collapse via CSS grid trick
   ================================================================ */

.ecto-faq-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--ecto-faq-duration) cubic-bezier(0.4, 0, 0.2, 1);
	will-change: grid-template-rows;
}

.ecto-faq-item--open .ecto-faq-panel {
	grid-template-rows: 1fr;
}

.ecto-faq-panel-inner {
	overflow: hidden;
	/* extra opacity + translate for richer feel */
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity   calc(var(--ecto-faq-duration) * 0.75) ease calc(var(--ecto-faq-duration) * 0.1),
		transform var(--ecto-faq-duration) cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--ecto-faq-duration) * 0.05);
	will-change: opacity, transform;
}

.ecto-faq-item--open .ecto-faq-panel-inner {
	opacity: 1;
	transform: translateY(0);
}

/* ================================================================
   ANSWER CONTENT
   ================================================================ */

.ecto-faq-answer-wrap {
	padding: 0 32px 32px;
}

.ecto-faq-answer {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ecto-faq-a-color);
}

.ecto-faq-answer p:first-child { margin-top: 0; }
.ecto-faq-answer p:last-child  { margin-bottom: 0; }

.ecto-faq-answer a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecto-faq-answer ul,
.ecto-faq-answer ol {
	padding-left: 1.4em;
}

.ecto-faq-answer li {
	margin-bottom: 0.35em;
}

/* ================================================================
   ENTRANCE ANIMATION — on page load
   ================================================================ */

@keyframes ecto-faq-item-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ================================================================
   ACCESSIBILITY — prefers-reduced-motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.ecto-faq-item,
	.ecto-faq-panel,
	.ecto-faq-panel-inner,
	.ecto-faq-chevron-svg,
	.ecto-faq-icon-wrap,
	.ecto-faq-plus-svg,
	.ecto-faq-minus-svg {
		transition:  none !important;
		animation:   none !important;
	}

	.ecto-faq-item {
		opacity: 1;
		transform: none;
	}
}