/* -----------------------------------------------------------------------------
   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;
	}
}

/* -----------------------------------------------------------------------------
   LicenseLeader only: the FAQ page (#24) carries a jQuery accordion with its own inline
   <style> block (.faq-accordion / .faq-item / .question / .answer). The content stays as it
   is; these rules only restyle it to match the theme. The extra selector depth is needed
   to beat the inline stylesheet, which loads after this one.
   -------------------------------------------------------------------------- */

.l4u-prose .faq-accordion {
	width: 100%;
	max-width: var(--l4u-measure);
	margin: 1.5rem auto 0;
	border-block-start: 1px solid var(--l4u-border);
}

.l4u-prose .faq-item {
	margin: 0;
	border: 0;
	border-block-end: 1px solid var(--l4u-border);
	border-radius: 0;
	background: transparent;
}

.l4u-prose .faq-item .question {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1.1rem .25rem;
	background: transparent;
	cursor: pointer;
	color: var(--l4u-black);
}

.l4u-prose .faq-item .question h5 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
}

.l4u-prose .faq-item .question:hover h5,
.l4u-prose .faq-item .question:has(+ .answer.active) h5 {
	color: var(--l4u-blue);
}

/* The markup expects Font Awesome for its plus icon, which this site never loaded. Draw the
   chevron in CSS instead, like the Licenses4US accordion. */
.l4u-prose .faq-item .question i {
	display: none;
}

.l4u-prose .faq-item .question::after {
	content: '';
	flex: none;
	width: .55rem;
	height: .55rem;
	margin-inline-start: auto;
	margin-block-start: .45rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}

.l4u-prose .faq-item .question:has(+ .answer.active)::after {
	transform: rotate(-135deg);
}

.l4u-prose .faq-item .answer {
	padding: 0 2rem 1.35rem .25rem;
	color: var(--l4u-muted);
}

.l4u-prose .faq-item .answer p {
	margin-block: 0 .8em;
}

@media (prefers-reduced-motion: reduce) {
	.l4u-prose .faq-item .question::after {
		transition: none;
	}
}