/*!
 * Baly UI — FAQ (native details).
 *
 * Handle: `bch-ui-faq` (depends on `bch-ui`). Registered by the theme, NOT enqueued
 * globally: list it in your stylesheet's deps on pages that render it.
 * The bch_ui_*() helpers also enqueue it as a fallback. See the primitives doc.
 */

/* ── 10. FAQ — native <details>; hairline rows, no box per row. */
.bsy-faq { min-width: 0; }
.bsy-faq__head { margin: 0 0 var(--bsy-space-6); } /* heading → content 24 */
.bsy-faq__title {
	margin: 0;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-section-sm); font-weight: var(--bsy-fw-bold);
	line-height: var(--bsy-leading-heading);
	color: var(--bsy-ink);
}
.bsy-faq__list {
	display: block;
	margin: 0; padding: 0; list-style: none;
	border-block-start: 1px solid var(--bsy-line);
}
.bsy-faq__row {
	margin: 0; padding: 0;
	border: 0;
	border-block-end: 1px solid var(--bsy-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.bsy-faq__q {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--bsy-space-4);
	box-sizing: border-box;
	min-height: 56px;
	padding: var(--bsy-space-4) 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--bsy-font);
	font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-semibold); line-height: 1.5;
	color: var(--bsy-ink);
}
.bsy-faq__q::-webkit-details-marker { display: none; }
.bsy-faq__q::marker { content: ""; }
.bsy-faq__q:focus-visible { border-radius: var(--bsy-radius-sm); }
.bsy-faq__qt { margin: 0; font: inherit; color: inherit; }
.bsy-faq__chev {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
	width: var(--bsy-size-icon); height: var(--bsy-size-icon);
	background: none;
	color: var(--bsy-fg2);
}
.bsy-faq__chev svg { display: block; width: var(--bsy-size-icon); height: var(--bsy-size-icon); }
.bsy-faq__row[open] > .bsy-faq__q .bsy-faq__chev { transform: rotate(180deg); }
@media (hover: hover) {
	.bsy-faq__q:hover {
		background: var(--bsy-grey-50);
		margin-inline: calc(var(--bsy-space-3) * -1);
		padding-inline: var(--bsy-space-3);
		border-radius: var(--bsy-radius-sm);
	}
}
.bsy-faq__a {
	margin: 0;
	padding: 0 0 var(--bsy-space-6);
	max-width: 56ch;
	font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-regular);
	line-height: 1.75;
	color: var(--bsy-fg2);
}
.bsy-faq__a > :first-child { margin-block-start: 0; }
.bsy-faq__a p { margin: 0 0 var(--bsy-space-3); }
.bsy-faq__a > :last-child { margin-block-end: 0; }
.bsy-faq__a :is(ol, ul) { margin: 0 0 var(--bsy-space-3); padding-inline-start: var(--bsy-space-5); }
.bsy-faq__a li { margin: 4px 0; }
.bsy-faq__a a { color: var(--bsy-brand); }
.bsy-faq__more { margin: var(--bsy-space-4) 0 0; font-size: var(--bsy-text-sm); line-height: var(--bsy-leading-small); color: var(--bsy-fg2); }
.bsy-faq__more a {
	display: inline-flex; align-items: center; min-height: var(--bsy-size-tap);
	color: var(--bsy-brand); font-weight: var(--bsy-fw-semibold); text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
	.bsy-faq__chev { transition: transform var(--bsy-duration-base) var(--bsy-ease-out); }
	/* Height animation where the browser supports it; plain open/close elsewhere. */
	.bsy-faq { interpolate-size: allow-keywords; }
	.bsy-faq__row::details-content {
		height: 0; overflow: clip;
		transition: height 200ms var(--bsy-ease-out), content-visibility 200ms allow-discrete;
	}
	.bsy-faq__row[open]::details-content { height: auto; }
}
@media (min-width: 641px) {
	.bsy-faq__title { font-size: var(--bsy-text-section); }
	.bsy-faq__q { min-height: 64px; font-size: var(--bsy-text-md); }
}
@media (min-width: 961px) {
	/* Title column (200px) beside the list; the one «تواصل ويانا» line moves
	   under the title (it follows the list on phones). */
	.bsy-faq--split {
		display: grid; grid-template-columns: 200px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--bsy-space-8); align-items: start;
	}
	.bsy-faq--split > .bsy-faq__head { grid-column: 1; grid-row: 1; margin: 0; }
	.bsy-faq--split > .bsy-faq__list { grid-column: 2; grid-row: 1 / span 2; }
	.bsy-faq--split > .bsy-faq__more { grid-column: 1; grid-row: 2; margin: var(--bsy-space-3) 0 0; }
}