/*
 * uBind FAQ Component - complete presentation, defined once.
 *
 * Every rule is scoped to .ubind-faq-component, the wrapper this component renders itself.
 * Before 1.0.4 the component shipped only its interaction states and inherited its
 * appearance from whichever stylesheet the host page happened to carry. That worked on
 * pages whose CSS declared .faq-* unscoped, and failed on pages where the same rules were
 * prefixed with a page wrapper the component does not sit inside - there the accordion fell
 * back to raw <details>/<summary>. Owning the presentation here makes it look identical
 * wherever it is placed.
 *
 * Design tokens are used when the host page defines them, each with a literal fallback so
 * the component still renders correctly on a page that defines none.
 *
 * Token names must stay in uBind's own namespace. 1.0.6 renamed the question font from
 * var(--display) to var(--font-display): Elementor declares --display: flex on its container
 * elements, so inside one the variable was *set* and the literal fallback after the comma was
 * never reached - the rule computed to font-family: flex, an unknown family. It only looked
 * right where no ancestor container set it, or where a page's own .faq-q rule overrode this
 * one. Never read a bare, generic custom-property name here.
 */

.ubind-faq-component {
	background: var(--faq-background, #fff);
}

/* ---- layout ---- */

.ubind-faq-component .faq-list {
	max-width: 880px;
	margin: 0 auto;
}

.ubind-faq-component .faq-item {
	border-bottom: 1px solid var(--ink-100, #e7ece9);
	padding: 4px 0;
}

/* ---- question row ---- */

.ubind-faq-component .faq-q {
	width: 100%;
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	text-align: left;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display, "Soho Gothic Pro", "Montserrat", sans-serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--ink-1000, #050807);
	transition: color 0.2s;
}

/* Safari and Chrome each need their own marker suppression; display:flex alone
   is not enough in Safari. */
.ubind-faq-component .faq-q::-webkit-details-marker {
	display: none;
}

.ubind-faq-component .faq-q::marker {
	content: "";
}

.ubind-faq-component .faq-q:hover {
	color: var(--emerald-600, #128a5f);
}

.ubind-faq-component .faq-q:focus-visible {
	outline: 3px solid var(--emerald-400, #3bb790);
	outline-offset: 5px;
	border-radius: 4px;
}

/* ---- expand / collapse icon ---- */

.ubind-faq-component .faq-icn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ink-200, #c8d2cd);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-500, #4b5b54);
	transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}

/* ---- answer ---- */

.ubind-faq-component .faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
	color: var(--ink-500, #4b5b54);
	font-size: 16px;
	line-height: 1.65;
}

.ubind-faq-component .faq-a > div {
	padding-bottom: 24px;
	max-width: 720px;
}

.ubind-faq-component .faq-a strong {
	color: var(--ink-900, #0b110f);
}

/* ---- open state (native <details>) ---- */

.ubind-faq-component .faq-item[open] .faq-icn {
	background: var(--emerald-500, #3bb790);
	border-color: var(--emerald-500, #3bb790);
	color: #fff;
	transform: rotate(45deg);
}

.ubind-faq-component .faq-item[open] .faq-a {
	max-height: none;
	overflow: visible;
}

/* ---- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.ubind-faq-component .faq-q,
	.ubind-faq-component .faq-icn,
	.ubind-faq-component .faq-a {
		transition: none;
	}
}