/* Product FAQ presentation.
 * The FAQ itself (list, item, question, chevron, answer) is the shared .ati-faq
 * contract in sections.css, which Industry FAQ renders too. Only the header
 * treatments below are Product-specific. The header markup comes from the
 * shared atichap_child_section_header() component, so these rules re-apply the
 * Product treatments on top of it. They stay scoped to .ati-product-faq on
 * purpose: that component is shared across the theme, and the ruled-off 70ch
 * measure belongs to this section only. */

/*
 * No max-width on this header block.
 *
 * It used to carry `max-width: 70ch`, which capped the whole header column at
 * ~551px inside a 1136px container. That is the same defect the Homepage
 * section headers had, and the same fix applies here: the measure belongs to the
 * prose, not to the column that also holds the heading.
 *
 * Two things were visibly wrong while the cap was in place. The heading
 * (`سؤالات متداول`) was held to 551px when the row had 1136px to give, and the
 * `border-bottom` rule below spans only as wide as its own box, so the divider
 * stopped 585px short of the container edge instead of ruling off the full
 * section width.
 *
 * The readable measure is unchanged and still Product-scoped, one level down on
 * the description (see the 70ch rule below), mirroring the Homepage: heading
 * takes the full width, prose keeps its measure.
 */
.ati-product-faq .ati-section-header {
	margin-bottom: var(--ati-space-6);
	padding-bottom: var(--ati-space-6);
	border-bottom: 1px solid var(--ati-color-divider);
}

.ati-product-faq .ati-section-header__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--ati-space-2);
	padding: var(--ati-space-1) var(--ati-space-2);
	border-radius: var(--ati-radius-xs);
	background: var(--ati-color-primary-soft);
	color: var(--ati-color-primary);
	line-height: 1.5;
}

.ati-product-faq .ati-section-header__title {
	margin: 0;
	font-size: var(--ati-text-h2);
	line-height: var(--ati-leading-h2);
}

.ati-product-faq .ati-section-header__description {
	max-width: var(--ati-measure-wide);
	margin: var(--ati-space-2) 0 0;
	color: var(--ati-color-text-muted);
	font-size: var(--ati-text-body);
	line-height: var(--ati-leading-body);
}

/*
 * FAQ answer width.
 *
 * The shared .ati-faq__answer rule (sections.css) carries `max-width: 75ch`,
 * a hardcoded prose measure attached to the answer's *container*. Inside a
 * full-width FAQ item that made the whole answer block ~590px wide with the
 * remaining ~546px of the item empty. The measure belongs to the text, not to
 * the container, so the Product FAQ lets the answer fill the item. Scoped to
 * .ati-product-faq on purpose: .ati-faq is a shared contract (Industry FAQ
 * renders it too), and only the Product FAQ is in scope here.
 */
.ati-product-faq .ati-faq__answer {
	width: 100%;
	max-width: none;
}