/*
 * LG Accordion — the Kino Flo rendering of Flatsome's [accordion] / [accordion-item].
 *
 * The converter emits native <details>/<summary> (see accordion_html in build-pageset-layout.py):
 * semantic, keyboard-accessible, and with no dependency on Flatsome's JS. What it had no styling
 * for at all was the CLOSED state, which is the state a visitor sees first and the only one the
 * page-height comparison can measure.
 *
 * Measured on the source's collapsed rows:
 *
 *     .accordion-item   50px tall, no margin, no padding
 *     .accordion-title  padding 10.56px 40.48px, font-size 17.6px, line-height 28.16px,
 *                       weight 500, border-top 1px #ddd, colour #4a4a4a
 *
 * Ours were 28px — an unpadded 16px line — so a ten-item FAQ block came out 220px short. That is
 * the single largest remaining difference on /support-center/, /about-auroris/ and /firmware/,
 * and it read as "the accordion is a bit tight" rather than as a number.
 *
 * The horizontal 40.48px is not decoration either: it is the room Flatsome leaves for the toggle
 * chevron at one end and keeps symmetrical at the other. The marker below sits in it.
 */

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item {
	margin: 0;
	padding: 0;
}

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item > summary {
	position: relative;
	display: block; /* not list-item: that is what draws the default triangle */
	padding: 0.6em 2.3em;
	border-top: 1px solid #ddd;
	font-size: 1.1em;
	line-height: 1.6;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item > summary::-webkit-details-marker {
	display: none;
}

/* The chevron, in the space the padding above reserves for it. Rotates when open, as Flatsome's
   does. A CSS triangle rather than an icon font — these pages carry no icon set of their own. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item > summary::after {
	content: "";
	position: absolute;
	left: 1em;
	top: 50%;
	width: 0.4em;
	height: 0.4em;
	margin-top: -0.3em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	opacity: 0.6;
}

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -0.1em;
}

/* Body copy sits under the title, indented to match it. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item > :not(summary) {
	padding: 0 2.3em 1em;
}

/* The last item closes the stack, matching the rule above the first. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-accordion-item:last-of-type {
	border-bottom: 1px solid #ddd;
}