/* -----------------------------------------------------------------------------
   FAQ accordion.

   Built on <details>/<summary>, so it opens and closes without a line of JavaScript
   and keeps working if scripts are delayed by LiteSpeed. Search engines read the
   answers either way: the text is in the HTML whether the item is open or not.
   -------------------------------------------------------------------------- */

.l4u-faq {
	margin-block-start: 1.5rem;
	border-block-start: 1px solid var(--l4u-border);
}

.l4u-faq__item {
	border-block-end: 1px solid var(--l4u-border);
}

.l4u-faq__item > summary {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1.1rem .25rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
	list-style: none;
	color: var(--l4u-black);
}

/* Hide the native disclosure triangle in both engines; the chevron below replaces it. */
.l4u-faq__item > summary::-webkit-details-marker {
	display: none;
}

.l4u-faq__item > summary::marker {
	content: '';
}

.l4u-faq__item > summary:hover,
.l4u-faq__item[open] > summary {
	color: var(--l4u-blue);
}

.l4u-faq__item > summary:focus-visible {
	outline: 2px solid var(--l4u-blue);
	outline-offset: 2px;
	border-radius: var(--l4u-radius);
}

/* Chevron drawn in CSS: no icon font, no extra request. */
.l4u-faq__item > summary::after {
	content: '';
	flex: none;
	width: .55rem;
	height: .55rem;
	margin-inline-start: auto;
	margin-block-start: .4rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}

.l4u-faq__item[open] > summary::after {
	transform: rotate(-135deg);
}

.l4u-faq__answer {
	padding: 0 2rem 1.35rem .25rem;
	color: var(--l4u-muted);
}

.l4u-faq__answer > :first-child {
	margin-block-start: 0;
}

.l4u-faq__answer > :last-child {
	margin-block-end: 0;
}

.l4u-faq__answer p {
	margin-block: 0 .8em;
}

@media (prefers-reduced-motion: reduce) {
	.l4u-faq__item > summary::after {
		transition: none;
	}
}