/* ==========================================================================
   Component: FAQ accordion + Home FAQ section
   Figma: DS "FAQ / Question Card" (226:91) + Home "FAQ Section" (4181:17328).
   Exact values: section bg #F8FAFC py96, container max 896; item bg #F3F4F6,
   border #E0E2E8, r12, py16/px24 rows, 16/24 Bold #002C45 questions,
   16/24 #4B5563 answers, 20px chevron.
   Native <details>/<summary> (accessible, no JS).
   RTL: chevron non-directional (rotates on open); logical properties.
   ========================================================================== */

.mada-faq-section {
	background-color: var(--color-white);        /* #F8FAFC */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 96 */
}
.mada-faq-section__inner {
	/* Figma draws this column at 896. The inline padding must be FOLDED INTO
	   the cap, exactly as --container-max does (tokens.css S12 note): a bare
	   `max-inline-size: 896px` next to `padding-inline: var(--grid-margin)`
	   double-insets, because --pad-section-inline ramps 64->192 SCREEN px
	   (/ --ui-scale = 80->240 layout px) on the desktop band. Measured before
	   this fix: the column collapsed to 470 at 1440 and 333 at 1920 SCREEN px
	   against the 716.8 (= 896 x 0.8) the design asks for -- MADA-2849's
	   "the width does not match the Figma design". Folded, the identity
	   `content = min(896, vw - 2*pad)` holds at every width; verified
	   320->2560, LTR + RTL. */
	max-inline-size: calc(896px + (var(--pad-section-inline) * 2));
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);                        /* 64 */
}
.mada-faq-section__title {
	margin: 0;
	text-align: center;
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                    /* Heading/Large 36 */
	line-height: var(--lh-2xl);                  /* 40 */
	letter-spacing: var(--ls-none);
	color: var(--color-black);                   /* #071124 */
}

.mada-faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);                         /* 16 */
	inline-size: 100%;
}

.mada-faq__item {
	background-color: var(--color-neutral-100);  /* #F3F4F6 */
	border: var(--border-width-thin) solid var(--color-neutral-200); /* #E0E2E8 */
	border-radius: var(--radius-xl);             /* 12 */
	overflow: hidden;
	padding-block: var(--space-5);               /* 16 */
}

.mada-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-inline: var(--space-7);              /* 24 */
	cursor: pointer;
	list-style: none;
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);                     /* 16 */
	line-height: 24px;
	color: var(--color-trust-80);                /* #002C45 */
}
.mada-faq__q::-webkit-details-marker { display: none; }
.mada-faq__item--static .mada-faq__q { cursor: default; }

.mada-faq__icon {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
	color: var(--color-trust-80);
}
.mada-faq__item[open] .mada-faq__icon { transform: rotate(180deg); }

.mada-faq__item[open] .mada-faq__q {
	border-block-end: var(--border-width-thin) solid var(--color-neutral-150); /* #EAECEF */
	padding-block-end: var(--space-4);           /* 12 */
}

.mada-faq__a {
	padding-inline: var(--space-7);              /* 24 */
	padding-block-start: var(--space-5);         /* 16 */
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-700);             /* #4B5563 */
}