/*
 * Heading scale for the migrated LiteGear pages.
 *
 * Taken from flatsome.css directly, not inferred from one page:
 *
 *     body     h1 1.7em   h2 1.6em   h3 1.25em   h4 1.125em   h5 1em   h6 .85em
 *     .banner  h1 3.5em   h2 2.9em   h3 2em      h4 1.5em
 *
 * Flatsome scales headings UP inside a banner overlay, which is why the same tag is 46.4px in the
 * LiteTile Spectrum hero and 25.6px in body copy. Kino Flo's own scale rendered that hero heading
 * at 30px/700 against the original's 46.4px/500 — noticeably smaller, and wrapping differently.
 *
 * Sizes and weights only. The font FAMILY is deliberately left to Kino Flo: the source is Poppins,
 * which this install does not load, and forcing it would fall back silently to something arbitrary.
 * Worth a separate decision about whether the merged site carries LiteGear's typeface.
 *
 * #tm-main matches the specificity of YOOtheme's own heading rules.
 */

#tm-main :is(.lg-flatsome, .lg-litetile) :is(h1, .h1) { font-size: 1.7em; font-weight: 500; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h2, .h2) { font-size: 1.6em; font-weight: 500; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h3, .h3) { font-size: 1.25em; font-weight: 500; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h4, .h4) { font-size: 1.125em; font-weight: 500; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h5, .h5) { font-size: 1em; font-weight: 500; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h6, .h6) { font-size: 0.85em; font-weight: 500; opacity: 0.8; }

/* The overlay scale. Line-height 1 is what Flatsome gives these — measured 46.4px on a 46.4px h2. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-banner-box-content h1 { font-size: 3.5em; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-banner-box-content h2 { font-size: 2.9em; }
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-banner-box-content h3 { font-size: 2em; }

/* flatsome.css: `.banner h2,.banner h3{line-height:1;margin-bottom:.2em;margin-top:.2em;padding:0}`.
   Weight is 500 here rather than Flatsome's 400 because that is what the source actually computes —
   the site overrides the framework, and the measurement is the authority. */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-banner-box-content :is(h1, h2, h3) {
	line-height: 1;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	padding: 0;
}
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-banner-box-content h4 {
	font-size: 1.5em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	padding: 0;
}

/*
 * Heading METRICS for body copy — the sizes above were right and everything around them was not.
 *
 * Measured on /sitelite/, where the font sizes already matched to the pixel:
 *
 *              source                    ours (YOOtheme's defaults)
 *     h2       mt 0  mb .5em  lh 1.3     mt 40px  mb 20px  lh 1.1
 *     h4       mt 0  mb .5em  lh 1.6     mt 40px  mb 20px  lh 1.4
 *
 * 40px of margin above every h2 and h4 is what left a run of heading-only blocks measuring 71px
 * against the original's 51px, down the length of a page with twenty of them. Flatsome gives its
 * headings no top margin at all — the space above a heading comes from the paragraph before it.
 *
 * h1/h2 are set tight (1.3) and h3 down inherit the body's 1.6; that split is the source's, not a
 * simplification. Card and banner-overlay headings are unaffected: their rules name a further
 * class and outrank these.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-bottom: 0.5em;
}

#tm-main :is(.lg-flatsome, .lg-litetile) :is(h1, h2) { line-height: 1.3; }
#tm-main :is(.lg-flatsome, .lg-litetile) :is(h3, h4, h5, h6) { line-height: 1.6; }

/* Body copy: 16px / 1.6, weight 500, as the source sets it. The weight is the site's own default,
   not Flatsome's — Kino Flo's 400 reads noticeably lighter beside the original. */
#tm-main :is(.lg-flatsome, .lg-litetile) :is(p, li) {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 1.3em;
}

/*
 * [ux_text font_size="1.4"] — a type scale applied to a whole block. The converter emits the em on
 * the wrapper (see wrap_font_size); the only thing needed here is to stop the hard 16px above from
 * intercepting it. Paragraphs go back to inheriting, which is what makes the em cascade work at
 * all — headings already inherit, because their sizes are expressed in em.
 *
 * A flat `font-size: 16px` on p was right for ordinary copy and wrong here: the /registration/ hero
 * paragraph is 22.4px on the original (1.4 x 16) and rendered at 16px, and the same rule was
 * silently flattening every one of the 103 scaled blocks across the twelve pages that use them.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-ux-text :is(p, li) { font-size: 1em; }

/*
 * Flatsome utility classes that ride along in pasted post content. Measured on the source rather
 * than taken from the framework defaults, since the site overrides both:
 *   .uppercase   uppercase, 0.05em tracking, line-height 1.2
 *   .thin-font   weight 300
 * 22 and 56 uses respectively. Without them "PRODUCT REGISTRATION" renders as "Product
 * Registration" — the copy is right, the design is not.
 *
 * p1 / s1 / p2 / s2 also appear in the source markup and are deliberately NOT here: they are inert
 * on the original too, pasted in from Slack along with the c-message_kit__* wrappers beside them.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) .uppercase {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
}

#tm-main :is(.lg-flatsome, .lg-litetile) .thin-font { font-weight: 300; }

/*
 * [gap height="20px"] — Flatsome's spacer. Padding on an empty block, not a height, so it collapses
 * to nothing if the padding is ever overridden rather than silently holding a phantom line box.
 */
#tm-main :is(.lg-flatsome, .lg-litetile) .lg-gap {
	display: block;
	clear: both;
	height: 0;
}