/* ================================================
   AMOTZ — FAQ  "שאלות שאנשים שואלים לפני שנרשמים"  (Figma 570:682)
   ================================================
   band      1440x840 · #F6F4EE · padding 80/60
   deco      two pale clusters pinned to the left and right edges
   headline  Polin Bold 54/1.2 · tracking 1 · #152114 · centred, two authored lines
   list      900px · rows 48px apart
   question  Polin Medium 18/1.2 · #15130F
   answer    Polin Regular 16/1.4 · #6B5E50
   toggle    28px #DDA833 disc, radius 14, with a 12px bar
   pill      138x50 outline button — "לכל השאלות"
   ================================================ */

.az-faq {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 80px var(--az-edge);
	overflow: hidden;
	background-color: var(--az-cream);
}

/* ------------------------------------------------
   THE DECORATION  (570:690, 570:1311)
   ------------------------------------------------
   Two clusters of pale scattered shapes at the band's edges. Flattened to WebP for the same
   reason as the benefits section's: in Figma they are groups of many individually rotated
   vectors, and the group nodes report ROTATED bounding boxes — 874x872 and 595x594 for
   artwork that actually renders 238px wide. Those numbers cannot be used for placement.

   POSITIONS ARE MEASURED, NOT READ OFF. A render of the whole band was scanned for pixels
   differing from the #F6F4EE ground, and each cluster's box compared against the exported
   layer's own opaque bounds:

     left   band x 0..237,    y 25..599   ·  layer opaque y 8..582 in a 594 canvas  -> top 17
     right  band x 1202..1439, y 82..823  ·  layer opaque y 70..811 in an 828 canvas -> top 12

   Both widths came out at exactly 238, matching the exports, which is what confirms the
   alignment. Offsets are from the band's CENTRE so they stay put on screens wider than the
   1440 design frame. */
.az-faq__deco {
	position: absolute;
	top: 0;
	z-index: 0;
	width: 238px;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 100%;
	pointer-events: none;
}

.az-faq__deco--left {
	top: 17px;
	left: calc(50% - 720px);
	height: 594px;
}

.az-faq__deco--right {
	top: 12px;
	left: calc(50% + 482px); /* 1202 - 720 */
	height: 828px;
}

.az-faq__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	width: 100%;
	max-width: 900px;
}

.az-faq__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #152114;
	text-align: center;
}

.az-faq__title span {
	display: block; /* the design breaks this into two authored lines */
}

/* The design separates the rows with a 1px rule (Line 152/154/155/156, stroke #D7D3C7) sitting
   at the MIDPOINT of the 48px gap — 24px below one row, 24px above the next.

   So the 48px gap is split: 24px of padding carrying the border, then a 24px flex gap. A plain
   `gap: 48px` with a border on the row would draw the rule hard against the text instead of
   centred between the two. */
.az-faq__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.az-faq__item:not(:last-child) {
	padding-bottom: 24px;
	border-bottom: 1px solid #D7D3C7;
}

/* ------------------------------------------------
   A ROW
   ------------------------------------------------
   Built on <details>/<summary>, so it opens and closes with no JavaScript at all, is
   keyboard-operable, and announces its expanded state to assistive tech for free. The only
   scripting an accordion would otherwise need is exactly what the element already does.

   The question is FIRST and the toggle LAST, with space-between: under dir="rtl" that puts
   the text against the right edge and the disc at the far left, which is where the design has
   them (icon at canvas x=0, text running from x=112 to the right edge). */
.az-faq__item {
	width: 100%;
}

.az-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: #15130F;
	text-align: right;
}

/* Safari draws its own disclosure triangle unless this is removed. */
.az-faq__q::-webkit-details-marker {
	display: none;
}

.az-faq__q:focus-visible {
	outline: 2px solid #DDA833;
	outline-offset: 4px;
	border-radius: 4px;
}

/* The toggle. A minus when open, a plus when closed — the design shows only the open state
   (a single 12px bar), so the closed state is the same bar plus its rotated twin.

   Drawn in CSS rather than swapped between two SVGs: it is two rectangles, it animates
   between the states, and it keeps the icon in one place instead of two files that can
   drift. */
/* TWO STATES, TWO FILLS. Closed rows carry a barely-there wash of the ink colour; only the
   OPEN row goes gold. Shipping gold for both made every row look expanded. */
.az-faq__toggle {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background-color: rgba(21, 19, 15, 0.08);
	border-radius: 14px;
	/* The bars inherit this. */
	color: #15130F;
	transition: background-color 0.2s ease;
}

.az-faq__item[open] .az-faq__toggle {
	background-color: #DDA833;
}

.az-faq__toggle::before,
.az-faq__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background-color: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* The second bar stands upright to make the plus, and folds away when the row opens. */
.az-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.az-faq__item[open] .az-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.az-faq__a {
	margin-top: 16px;
	/* Aligned with the question text rather than the row: the design indents the text column
	   to x=112 and leaves the toggle in its own gutter. */
	padding-inline-end: 52px;
	font-size: 16px;
	font-weight: 400; /* Polin Regular */
	line-height: 1.4;
	color: #6B5E50;
	text-align: right;
}

/* ------------------------------------------------
   PILL  (570:1969)
   ------------------------------------------------
   NOT the same component as the benefits section's pill, which is what the first build assumed.
   Reading the node itself: NO fill at all, a 1px #472D00 border, #472D00 Semibold 14/20 text
   and no letter-spacing. The assumed version had a gold wash and #815F0C — wrong on all three. */
.az-faq__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 138px;
	height: 50px;
	padding: 15px 29px;
	background-color: transparent;
	border: 1px solid var(--az-brown);
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--az-brown);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.az-faq__pill:hover,
.az-faq__pill:focus-visible {
	background-color: var(--az-brown);
	color: var(--az-cream);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.az-faq {
		padding: 64px 32px;
	}

	.az-faq__inner {
		gap: 48px;
	}

	.az-faq__list {
		gap: 32px;
	}

	/* The clusters are placed for a 1440 frame and start overlapping the questions below it. */
	.az-faq__deco {
		display: none;
	}
}

@media (max-width: 640px) {
	.az-faq {
		padding: 48px 20px;
	}

	.az-faq__q {
		gap: 16px;
		font-size: 16px;
	}

	.az-faq__a {
		padding-inline-end: 0; /* no room for the gutter on a phone */
		font-size: 15px;
	}

	/* See the !important note in amotz-announcement-bar.css. */
	.az-faq__title {
		font-size: clamp(26px, 6.5vw, 34px) !important;
		letter-spacing: 0 !important;
	}
}