/*
 * [button] from the LiteGear pages.
 *
 * The converter emitted `class="lg-button"` and nothing ever styled it, so all 63 buttons rendered
 * as plain body text — the LiteTile Spectrum "Resources Page" call to action lost its yellow
 * outline and its right alignment both.
 *
 * Values MEASURED from litegear.ddev.site, not guessed. Flatsome's palette, read from its own
 * custom properties on the source:
 *     primary #afafaf   secondary #fec00f   success #d6d6d6   alert #0a0a0a
 * and the is-small metrics: 12.8px / padding 0 15.36px / line-height 28.032px / radius 10px.
 *
 * 59 of the 63 are style="outline", so outline is the base and `--fill` is the exception.
 * #tm-main prefixes match the specificity of YOOtheme's inline button rules, which otherwise win
 * on source order — the same collision the form styling hit.
 */

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button {
	display: inline-block;
	border: 2px solid currentColor;
	border-radius: 10px;
	padding: 0 1.2em;
	line-height: 2.19em;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-decoration: none;
	background: transparent;
	/* Flatsome uppercases button text by default; letter_case="lowercase" opts out. */
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--lowercase { text-transform: none; }

/* Colours. Outline buttons take the colour on the text and border; the fill variant swaps them. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--primary   { color: #afafaf; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--secondary { color: #fec00f; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--success   { color: #d6d6d6; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--alert     { color: #0a0a0a; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--white     { color: #fff; }

/* No colour attribute at all — Flatsome falls back to primary. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button:not([class*="lg-button--primary"]):not([class*="lg-button--secondary"]):not([class*="lg-button--success"]):not([class*="lg-button--alert"]):not([class*="lg-button--white"]) {
	color: #afafaf;
}

/* Sizes, as Flatsome scales them against the 16px base. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--smaller { font-size: 11.2px; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--small   { font-size: 12.8px; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--large   { font-size: 18.4px; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--larger  { font-size: 20.8px; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button--xlarge  { font-size: 24px; }

#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button:hover,
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button:focus-visible {
	background: currentColor;
	text-decoration: none;
}

/* Invert the label against the filled background on hover. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button:hover { filter: none; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-button:hover::selection { color: #000; }

/*
 * Column alignment. [col align="center|left|right"] appears 163 times across the migration and was
 * dropped wholesale — every centred or right-aligned column rendered left. The converter now emits
 * these classes from the source attribute.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-align-center { text-align: center; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-align-left   { text-align: left; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-align-right  { text-align: right; }

/*
 * A run of consecutive [button]s, emitted into one paragraph by collect_html.
 *
 * Flatsome's .button is inline-block, so two calls to action written one after the other sit side
 * by side — "Kits" and "QuickPick" in the LiteMat Plus hero are 76px and 131px on one line. A
 * paragraph each stacked them, which changed both the height of the overlay and where it sits,
 * since the box is anchored to its bottom edge. The gap is Flatsome's own button margin.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) p.lg-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6em;
	align-items: center;
	margin: 0.5em 0;
}

#tm-main :is(.lg-flatsome, .lg-litetile) p.lg-buttons > .lg-button { margin: 0.4em 0; }

/* Inherits the column's text-align via the flex main axis. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-align-center p.lg-buttons { justify-content: center; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-align-right p.lg-buttons { justify-content: flex-end; }