/*
 * FAQs (Figma: desktop 330:12 · mobile 386:6448). Intro and the question card (.zain-ask): sections.css.
 * Questions are core Details blocks; the +/− icon is drawn here (Figma 343:9 open, 343:17 closed).
 */

/* Intro photo — 344:614 (desktop), 386:6616 (mobile) */
.zain-page-intro--faq .zain-page-intro__photo {
	--zh: 113.38%;
}

/* ------------------------------------------------------------------ Questions (344:619) */

.zain-faqs {
	width: calc(1628 * var(--s));
	margin-top: calc(64 * var(--s));
	padding: calc(120 * var(--s)) calc(180 * var(--s));
	border-radius: calc(30 * var(--s));
	background: var(--wp--custom--color--ivory);
}

.zain-faq {
	padding: 32px 0 31px; /* + the 1px rule = Figma's 32 (its lines take no space) */
	border-bottom: 1px solid rgb(0 0 0 / 0.15);
}

.zain-faq:first-child {
	padding-top: 0;
}

.zain-faq summary {
	display: flex;
	align-items: center;
	gap: 48px;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--hanken-grotesk);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--heading-3);
	list-style: none;
	cursor: pointer;
}

.zain-faq summary::-webkit-details-marker {
	display: none;
}

.zain-faq summary::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--custom--color--forest-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10.5 16h11M16 10.5v11' stroke='%23278427' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
	transition: background-color 0.2s;
}

.zain-faq[open] summary {
	align-items: flex-start;
}

.zain-faq[open] summary::before {
	background: var(--wp--preset--color--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10.5 16h11' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
}

.zain-faq summary:hover::before {
	background-color: rgb(39 132 39 / 0.12);
}

.zain-faq__answer {
	margin: 16px 0 0 80px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--large);
}

@media (max-width: 1199px) {
	.zain-page-intro--faq .zain-page-intro__photo {
		--zw: 345.18%;
		--zh: 100%;
		--zx: -105.05%;
	}

	.zain-faqs {
		width: calc(440 * var(--s));
		margin-top: calc(40 * var(--s));
		padding: calc(50 * var(--s)) calc(24 * var(--s));
		border-radius: 0;
		background: var(--wp--custom--color--shell);
	}

	/* Mobile rows: max(icon 32, question) + 16 above + 32 below the rule (Figma rows overlap by 16) */
	.zain-faq {
		padding: 16px 0 31px;
	}

	.zain-faq:first-child {
		padding-top: 0;
	}

	/* Open row: Figma aligns to the 28px question, the icon may hang below it */
	.zain-faq[open] summary::before {
		margin-bottom: -4px;
	}

	.zain-faq summary {
		gap: 24px;
		font-family: var(--wp--preset--font-family--open-sans);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 400;
		line-height: var(--wp--custom--line-height--large);
	}

	.zain-faq__answer {
		max-width: calc(304 * var(--s)); /* grows with the column on tablets */
		margin-left: 56px;
		font-size: var(--wp--preset--font-size--regular);
		line-height: var(--wp--custom--line-height--regular);
	}

}