/**
 * Finewerk FAQ
 *
 * Scoped, BEM-style styles for the two-column FAQ widget: intro column
 * (heading, description, light-green CTA card) plus an accordion column.
 * Open/close animation uses the grid-template-rows 0fr/1fr technique with
 * an opacity fade; faq.js toggles the .is-open class, the global background
 * material classes and the ARIA state.
 *
 * The CTA card and the open accordion item are surfaced by the theme-level
 * `fw-bg-gradient` utility, added in the markup. This file
 * therefore paints no gradient and no grain of its own — same contract the
 * Steps cards follow — and only sets the flat colour that sits beneath them.
 * All custom properties are namespaced with --fw-faq- to avoid collisions.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-faq {
	font-family: var(--fw-font-body);
}

.finewerk-faq :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-faq :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-faq {
	--fw-faq-col-gap: 64px;
	--fw-faq-item-gap: 20px;
	--fw-faq-icon-size: 36px;
	--fw-faq-avatar-size: 44px;
	--fw-faq-cta-gap: 96px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 64px 0;
	background-color: #FFFFFF;
}

.finewerk-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: var(--fw-faq-col-gap);
	align-items: start;
}

/* ---------- Intro column ---------- */

.finewerk-faq__heading {
	margin: 0 0 20px;
	color: #1A1A1A;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.finewerk-faq__description {
	margin: 0;
	color: #6B7280;
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- CTA card ---------- */

/*
 * The card always carries `fw-bg-gradient`, so the gradient and
 * its grain are the real surface. The colour below is not a second gradient:
 * it is the flat base the gradient paints over, and the safety net that keeps
 * the white copy readable if the global utility CSS is ever absent.
 */
.finewerk-faq__cta {
	box-sizing: border-box;
	margin-top: var(--fw-faq-cta-gap);
	padding: 32px;
	background-color: #123F3A;
	border-radius: 24px;
}

.finewerk-faq__cta-people {
	display: flex;
	align-items: center;
	column-gap: 12px;
	margin-bottom: 22px;
}

.finewerk-faq__avatars {
	display: flex;
	align-items: center;
}

.finewerk-faq__avatar {
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	width: var(--fw-faq-avatar-size);
	height: var(--fw-faq-avatar-size);
	/* Separator ring between the overlapping avatars: a translucent rim now
	   that the card behind it is the dark gradient rather than pale green. */
	border: 2px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	overflow: hidden;
	background-color: #DDE7D2;
}

.finewerk-faq__avatar + .finewerk-faq__avatar {
	margin-left: calc(var(--fw-faq-avatar-size) * -0.28);
}

.finewerk-faq__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.finewerk-faq__cta-plus {
	flex: 0 0 auto;
	display: inline-flex;
	width: 12px;
	height: 12px;
	color: #FFFFFF;
}

.finewerk-faq__cta-plus svg {
	display: block;
	width: 100%;
	height: 100%;
}

.finewerk-faq__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--fw-faq-avatar-size);
	height: calc(var(--fw-faq-avatar-size) * 0.86);
	padding: 0 12px;
	background-color: #4C7CF0;
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.finewerk-faq__cta-title {
	margin: 0 0 8px;
	color: #FFFFFF;
	font-family: var(--fw-font-title);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.finewerk-faq__cta-text {
	margin: 0 0 24px;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- CTA button ---------- */

.finewerk-faq__button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	row-gap: 4px;
	box-sizing: border-box;
	padding: 14px 30px;
	background-color: #FFFFFF;
	border-radius: 999px;
	box-shadow: 0 18px 28px -10px rgba(17, 24, 17, 0.35);
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finewerk-faq__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 32px -10px rgba(17, 24, 17, 0.4);
}

.finewerk-faq__button:focus-visible {
	outline: 2px solid #1A1A1A;
	outline-offset: 3px;
}

.finewerk-faq__button-label {
	color: #111111;
	font-family: var(--fw-font-title);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.finewerk-faq__button-status {
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	color: #8A8F98;
	font-size: 12px;
	line-height: 1.2;
}

.finewerk-faq__button-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background-color: #53B443;
	border-radius: 50%;
}

/* ---------- Accordion list ---------- */

.finewerk-faq__list {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-faq-item-gap);
	min-width: 0;
}

.finewerk-faq__item {
	box-sizing: border-box;
	padding: 8px 24px;
	background-color: #FFFFFF;
	border: 1px solid #E6E8E3;
	border-radius: 16px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.finewerk-faq__item.is-open {
	background-color: #F3FAE7;
	border-color: #E1EFCB;
}

/*
 * An open item wears `fw-bg-gradient` (added by faq.js, and by the
 * PHP for the initially open one), so these two declarations exist only to get
 * out of that material's way: the pale-green surface would tint it and the
 * light rim would outline it. `transparent` on the border keeps the box metrics
 * identical while letting the surface run to the edge, and the flat green is
 * the same fallback the CTA uses. Elementor's own open background/border
 * controls carry equal specificity and are emitted later, so a value set in the
 * editor still wins.
 */
.finewerk-faq__item.is-open.fw-bg-gradient {
	background-color: #123F3A;
	border-color: transparent;
}

/* White copy for the whole open item — question and answer alike. It crosses
   over on the same 0.25s curve as the surface (see the `transition: color` on
   each element's own rule), so the two changes read as one. */
.finewerk-faq__item.is-open .finewerk-faq__question-text,
.finewerk-faq__item.is-open .finewerk-faq__answer-text {
	color: #FFFFFF;
}

.finewerk-faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.finewerk-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 20px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 16px 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.finewerk-faq__toggle:focus-visible {
	outline: 2px solid #1A1A1A;
	outline-offset: 3px;
	border-radius: 8px;
}

.finewerk-faq__question-text {
	color: #2B2B2B;
	font-family: var(--fw-font-title);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	transition: color 0.25s ease;
}

/* ---------- Toggle icon ---------- */

.finewerk-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--fw-faq-icon-size);
	height: var(--fw-faq-icon-size);
	background-color: #FFFFFF;
	color: #111111;
	border: 1px solid #E2E2DE;
	border-radius: 50%;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.finewerk-faq__icon svg {
	display: block;
	width: 50%;
	height: 50%;
}

.finewerk-faq__icon-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.finewerk-faq__item.is-open .finewerk-faq__icon {
	background-color: #161616;
	border-color: #161616;
	color: #FFFFFF;
}

/* Minus when open: collapse the vertical bar of the plus. */
.finewerk-faq__item.is-open .finewerk-faq__icon-v {
	transform: scaleY(0);
	opacity: 0;
}

/* ---------- Answer (grid rows collapse technique) ---------- */

.finewerk-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.finewerk-faq__answer-inner {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0.35s;
}

.finewerk-faq__item.is-open .finewerk-faq__answer {
	grid-template-rows: 1fr;
}

.finewerk-faq__item.is-open .finewerk-faq__answer-inner {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 0.25s ease 0.08s,
		transform 0.25s ease 0.08s,
		visibility 0s;
}

.finewerk-faq__answer-text {
	margin: 2px 0 18px;
	max-width: 62ch;
	color: #75806B;
	font-size: 15px;
	line-height: 1.6;
	transition: color 0.25s ease;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-faq__item,
	.finewerk-faq__question-text,
	.finewerk-faq__answer-text,
	.finewerk-faq__icon,
	.finewerk-faq__icon-v,
	.finewerk-faq__answer,
	.finewerk-faq__answer-inner,
	.finewerk-faq__button {
		transition: none !important;
	}

	.finewerk-faq__button:hover {
		transform: none;
	}
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
	.finewerk-faq {
		--fw-faq-col-gap: 40px;
		--fw-faq-cta-gap: 56px;
	}

	.finewerk-faq__question-text {
		font-size: 18px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.finewerk-faq {
		--fw-faq-item-gap: 14px;
		--fw-faq-cta-gap: 32px;
		padding: 48px 20px;
	}

	.finewerk-faq__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
	}

	.finewerk-faq__cta {
		padding: 24px;
	}

	.finewerk-faq__item {
		padding: 4px 18px;
	}

	.finewerk-faq__question-text {
		font-size: 17px;
	}
}