/**
 * Love Pharm · Product FAQ — accordion layout & styling.
 *
 * LAYOUT ONLY. No font-size / font-weight / font-family / color on the question
 * or answer text — both inherit the theme's typography so the block reads as
 * "more of the same document", not a widget. Only neutral theme values are used
 * (dividers = --light-gray; the chevron inherits currentColor). No brand/accent.
 * Everything is scoped under .lp-faq so nothing leaks into the Elementor tabs.
 * RTL-correct via logical properties. See product-faq.php for the markup.
 */

.lp-faq {
	box-sizing: border-box;
	direction: rtl;
}

.lp-faq *,
.lp-faq *::before,
.lp-faq *::after {
	box-sizing: border-box;
}

/* ---------- Section heading ----------
 * Plain <h2>; deliberately unstyled so it inherits the theme's content heading
 * type and sits among the surrounding product-description headings. */
.lp-faq__heading {
	margin-block: 0 clamp(12px, 2.5vw, 24px);
}

/* ---------- List / dividers ----------
 * Minimal: horizontal rules between items, no cards, no fills. A line above
 * every item (border-block-start) plus one below the last (on the list) yields
 * clean dividers top-to-bottom without doubling. */
.lp-faq__list {
	border-block-end: 1px solid var(--light-gray, #eee);
}

.lp-faq__item {
	border-block-start: 1px solid var(--light-gray, #eee);
}

/* ---------- Question row (summary) ---------- */
.lp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between; /* text at inline-start, chevron at inline-end (LTR + RTL). */
	gap: clamp(12px, 3vw, 24px);
	padding-block: clamp(14px, 2.4vw, 20px);
	cursor: pointer;
	list-style: none; /* drop the native disclosure triangle... */
}

.lp-faq__q::-webkit-details-marker { /* ...including the WebKit/Safari marker. */
	display: none;
}

.lp-faq__q-text {
	flex: 1 1 auto;
	margin: 0; /* it's an <h3>: drop the theme's heading margins so it sits centred in
	            * the summary row. Layout only — font size/weight/colour still inherit. */
}

/* ---------- Chevron ----------
 * Drawn from two borders on a rotated square (no SVG / icon asset). It inherits
 * currentColor, so no colour is declared. The glyph is left/right-symmetric and
 * `transform` ignores `direction`, so it points the same way in RTL and LTR — a
 * physical two-border corner is correct here; logical borders would flip it. */
.lp-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin-block-start: -0.15em; /* optical centering of the down-tilted glyph. */
	border: solid currentColor;
	border-width: 0 2px 2px 0;   /* right + bottom → points down when rotated 45°. */
	transform: rotate(45deg);    /* closed state: chevron down. */
	/* Rotate in sync with the slide (same 0.24s). The script toggles the open/closed
	 * class at the START of each slide, so the rotation begins as the panel does. */
	transition: transform 0.24s ease, margin-block-start 0.24s ease;
}

/* Open state → chevron up. Without the script this follows the native `[open]`
 * attribute. */
.lp-faq__item[open] .lp-faq__q::after {
	transform: rotate(-135deg);  /* open state: chevron up. */
	margin-block-start: 0.15em;  /* keep it optically centred once flipped. */
}

/* Script-enhanced: the script sets `open` at the START of the open slide (to
 * render/measure the panel), so following `[open]` would flip the chevron early.
 * Under `.lp-faq--js` we keep it DOWN while the item is open but not yet settled,
 * and let the `is-open` class (added by the script exactly when a slide finishes)
 * drive the up state — so the chevron turns precisely on completion, both ways. */
.lp-faq--js .lp-faq__item[open]:not(.is-open) .lp-faq__q::after {
	transform: rotate(45deg);
	margin-block-start: -0.15em;
}

/* ---------- Answer ----------
 * Two elements: .lp-faq__a is the element the script animates to 0 height, so it
 * carries NO padding/border — an element can't be shorter than its own padding, and
 * that clamp is what makes the first/last ~20px of the slide jump. All spacing lives
 * on the padded inner wrapper instead. The parsed paragraphs/lists keep the theme's
 * own rhythm; trim the first/last child margins so the reveal spacing stays even. */
.lp-faq__a-inner {
	padding-block-end: clamp(14px, 2.4vw, 22px);
	padding-inline-end: clamp(0px, 4vw, 32px); /* keep answer clear of the chevron column. */
}

.lp-faq__a-inner > :first-child {
	margin-block-start: 0;
}

.lp-faq__a-inner > :last-child {
	margin-block-end: 0;
}

/* ---------- Open / close slide ----------
 * The smooth open+close SLIDE is done in JavaScript (product-faq.js), not here,
 * on purpose: a CSS-only close on a native <details> needs a content-visibility
 * transition that janks on mobile Safari. The script animates the answer PANEL's
 * height with the Web Animations API and sets inline height/overflow on it only
 * while an animation runs, then clears them — so this stylesheet intentionally
 * declares NO height/overflow on .lp-faq__a. Clipping the panel (not the whole
 * <details>) keeps the question row and chevron out of the clipped box, so they
 * never distort mid-slide. With the script disabled the panel simply opens/closes
 * instantly (native), which is the correct fallback. */

/* ---------- Responsive ----------
 * Single-column by nature; just tighten the reveal padding on small screens. */
@media (max-width: 560px) {
	.lp-faq__q {
		padding-block: clamp(12px, 4vw, 16px);
	}

	.lp-faq__a-inner {
		padding-inline-end: 0; /* reclaim width on phones; text is full-bleed. */
	}
}