/**
 * RSI Toolkit — FAQ Accordion widget ("Frequently Asked Questions" section).
 *
 * A column on a white background: accent bar + heading, then question rows
 * (chevron + question) that expand to reveal the answer, separated by hairline
 * dividers. One item open at a time (JS). Section background/spacing default
 * here but are controllable from the Style tab.
 *
 * Re-baked to the 2026 Figma Milestones FAQ (node 10543:633), which is the only
 * placed instance. The spacing model is taken straight from that frame and adds
 * up exactly, which is what confirms the reading:
 *
 *   closed item  16 + 28 (row) + 16                 = 60px   ✓ Figma
 *   open item    16 + 28 + 12 (gap) + 78 + 16       = 150px  ✓ Figma
 *
 * So the 16px lives on the ITEM (not the question row), and the 12px gap above
 * an open answer lives on the answer's inner box. Move that padding onto the row
 * and the closed height stops matching.
 *
 * Written with logical properties — the header and answer sit on the reading
 * edge, so Arabic starts right and English mirrors to left with no rtl.css entry.
 */

.rsi-faq {
	background: #ffffff;

	/* Fed by the Header Alignment control via selectors_dictionary. Defaults
	   here so the widget is correct before Elementor emits anything. */
	--rsi-faq-align: flex-start;
	--rsi-faq-text-align: start;
}

.rsi-faq__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 96px 24px;
}

/* ------------------------------- header -------------------------------- */
/* Figma: the bar + heading block is flush to the reading edge (its 216px box
   sits at x=138 in a 354px container), NOT centred. flex-start on a column flex
   container is the inline-start edge, so this mirrors per language on its own. */
.rsi-faq__head {
	display: flex;
	flex-direction: column;
	align-items: var(--rsi-faq-align);
	gap: 10px;
	margin-bottom: 32px;
}

.rsi-faq__bar {
	display: block;
	width: 48px;
	height: 9px;
	border-radius: 2px;
	background: #bf0031;
}

/* Figma: 34px / 65px line-height / .25px tracking. The 65px leading is the
   design's own heading-2 token, not a mistake — it is what gives the block its
   216x65 box and keeps the heading from crowding the accent bar above it. */
.rsi-faq__heading {
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 65px;
	letter-spacing: .25px;
	margin: 0;
	color: #0a0a0a;
	text-align: var(--rsi-faq-text-align);
}

/* -------------------------------- list --------------------------------- */
.rsi-faq__list {
	display: flex;
	flex-direction: column;
}

/* The 16px sits here, not on the question row — see the arithmetic at the top. */
.rsi-faq__item {
	padding: 16px 0;
}

.rsi-faq__item + .rsi-faq__item {
	border-top: 1px solid #e5e7eb;
}

.rsi-faq__q {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	cursor: pointer;
	user-select: none;
	background: none;
	border: 0;
	text-align: start;
}

.rsi-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: #0a0a0a;
	transition: transform .3s ease;
	/*
	 * Last in the row, opposite the question — the far LEFT in Arabic and the far
	 * RIGHT in English, with no per-language rule: a flex row runs along the text
	 * direction, so "last" already means the trailing edge in both.
	 *
	 * `order` rather than moving it in the markup, because the chevron is printed
	 * before the question text and is aria-hidden decoration; reordering visually
	 * costs nothing here, and the markup keeps the text first for anything reading
	 * the DOM.
	 */
	order: 1;
}

.rsi-faq__item.is-open .rsi-faq__chevron {
	transform: rotate(180deg);
}

/* Figma: 18px / 28px. Pinned rather than a ratio — 28px is what makes a closed
   item land on exactly 60px. */
.rsi-faq__qtext {
	flex: 1 1 auto;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	color: #0a0a0a;
}

/* Answer: collapsed to 0 height, animated open by the JS (sets max-height). */
.rsi-faq__a {
	max-height: 0;
	overflow: hidden;
	color: #374151;
	transition: max-height .35s ease;
}

/* Figma puts the answer at x=0 across the FULL container width — it is NOT
   indented to line up with the question text past the chevron. The old rule
   indented it by a physical `left: 32px`, which in Arabic lands on the END edge,
   so the answer read as inset from the wrong side. Only the 12px gap above it
   remains; the item's own 16px closes the bottom. */
.rsi-faq__a-inner {
	padding: 12px 0 0;
}

.rsi-faq__a p {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: inherit;
}

/* An answer may carry a link (the partnership one points at the contact page).
   Colour alone would not mark it, so it is underlined too — and the offset keeps
   the rule clear of Arabic descenders, which sit lower than Latin ones.

   ⚠️ Scoped through .rsi-faq deliberately — do not simplify to `.rsi-faq__a a`.
   Woodmart prints `.elementor a { text-decoration: var(--wd-link-decor) }` as an
   INLINE style, which ties that selector's specificity and wins on document
   order, so the underline silently disappears. */
.rsi-faq .rsi-faq__a a {
	color: var(--rsi-faq-accent, #bf0031);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity .2s ease;
}

.rsi-faq .rsi-faq__a a:hover,
.rsi-faq .rsi-faq__a a:focus-visible {
	opacity: .75;
}

/* ----------------------------- responsive ------------------------------ */
@media (max-width: 767px) {
	.rsi-faq__inner {
		padding: 80px 24px;
	}

	/* No mobile overrides at all, on purpose. The Figma reference frame IS the
	   mobile design (402px wide) and it sets the heading at 34px and the question
	   at 18px/28px — the same values as the base. The old 28px heading and 17px
	   question here were reductions the design never asked for; the 17px also put
	   every closed item 2px under the Figma's 60px. */
}