/* Full-bleed layout for migrated LiteGear microsite pages.
 *
 * Kino Flo's YOOtheme layout boxes page content:
 *     <main class="tm-main uk-section uk-section-default">
 *         <div class="uk-container">        <- max-width + horizontal padding
 *             <div class="lg-microsite">
 *
 * The LiteGear originals are full-bleed — their hero sections and background images run edge
 * to edge — so the boxed container has to be neutralised or nothing lines up with the source.
 *
 * NOTE: unlike lg-vendor.css and lg-<site>.css, these rules are deliberately NOT scoped under
 * .lg-microsite, because they target that element's ANCESTORS. Containment comes instead from
 * the body class, which functions.php adds only on pages carrying `_lg_microsite` post meta —
 * so this file can never affect a normal Kino Flo page.
 */

body.lg-microsite-page .tm-main > .uk-container,
body.lg-microsite-page .tm-main > * > .uk-container {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/*
 * Content measure for the converted Flatsome pages.
 *
 * Flatsome constrains every default [row] to `max-width: 1080px` with a 15px gutter; only
 * [row width="full-width"] escapes it (12 rows across the whole migration, against 306 default
 * ones). The converter emits YOOtheme rows inside a `width: expand` section, which has no
 * container at all — so the copy ran the full width of the viewport and touched both edges. On a
 * 1280px screen that is a 200-character measure with no margin, which is what reads as "broken".
 *
 * Banners are deliberately exempt: in the source they sit OUTSIDE any [row] and are full-bleed, and
 * the converter wraps each one in a row of its own. `:has()` distinguishes the two without needing
 * the layouts regenerated — the alternative was a marker prop, and YOOtheme's row element has no
 * class field to carry one.
 *
 * NOT gated on body.lg-microsite-page: that class is only added for pages carrying `_lg_microsite`,
 * which the Flatsome rebuilds deliberately do not set (it suppresses the header and footer). The
 * .lg-flatsome / .lg-litetile scope on the section wrapper is what contains these rules.
 */
:is(.lg-flatsome, .lg-litetile) .uk-grid:not(:has(.lg-banner--bleed)):not(:has(> .lg-row-full)):not(:has(> .lg-row-loose)):not(.uk-grid .uk-grid) {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*
 * The 15px is Flatsome's COLUMN gutter, not row padding.
 *
 * Both put the outer edge of the copy in the same place, so this looked interchangeable and was
 * written on the row — but it is not: 1080px of row with 15px of row padding gives six columns of
 * 175px, while 1080px of row with 15px on each column gives six of 180px whose CONTENT is 150px.
 * A card image fills its column, so ours came out 175px square against the original's 150, and
 * every row of cards was ~25px too tall. /support-center/ has thirteen of them.
 *
 * Applies at every nesting level, as Flatsome's does — a [row_inner]'s columns are padded too.
 * Bleed banners are exempt for the same reason they are exempt from the measure above.
 */
:is(.lg-flatsome, .lg-litetile) .uk-grid:not(:has(.lg-banner--bleed)) > * {
    padding: 0 15px 30px;
    box-sizing: border-box;
}

/*
 * [row style="collapse|large|small"] — Flatsome's gutter scale, measured on the source. The classes
 * ride on the COLUMNS because YOOtheme's row element has no class field; make_row stamps them.
 * 158 of the 499 rows here are collapsed, which is why the default gutter alone was not enough.
 */
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-row-collapse { padding: 0; }

/* A row holding nothing but a [gap]. On the original the gap is a bare block with no column around
   it, so the column here must contribute nothing of its own or the spacing doubles. Both the
   column's padding and the .uk-panel.uk-margin YOOtheme wraps every element in have to go — a 30px
   gap was measuring 60px with either one left in. */
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-gap-col { padding: 0; }
:is(.lg-flatsome, .lg-litetile) .lg-gap-col > * { margin: 0; }

/* [scroll_to] targets. Flatsome renders a bare `<a name="...">` with no box of its own, so ours has
   to occupy no space either — a row that contributes 30px of column padding would push everything
   below it down by 30px per anchor, and /literibbon/ has three. */
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-anchor-col { padding: 0; }
:is(.lg-flatsome, .lg-litetile) .lg-anchor-col > * { margin: 0; }
:is(.lg-flatsome, .lg-litetile) .lg-anchor { display: block; height: 0; overflow: hidden; }
/* Content that sat OUTSIDE any [row] on the original.
   Distinct from .lg-row-full, which marks `[row width="full-width"]` — that IS a row and keeps
   Flatsome's 15px column gutter. Loose content has no column around it at all, so carrying the
   gutter left /literibbon/'s hero images at 1570 against the original's 1600. */
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-row-loose { padding-left: 0; padding-right: 0; }
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-loose-media { padding-bottom: 0; }
/* ...and it contributes no vertical chrome either. Content outside a [row] has no column around it
   on the original, so it carries neither Flatsome's 30px column padding-bottom nor the 20px that
   UIkit's `.uk-panel.uk-margin` puts on every element YOOtheme emits. Together those cost 51px per
   loose element: the four "Volts" spec blocks on /literibbon/ stack six product images each and ran
   +296, +302, +195 and +144 against the source. Vertical rhythm between loose elements comes from
   the explicit [gap] blocks, exactly as it does on litegear.com — the inner element keeps its own
   margins, only the wrapper's are dropped. */
:is(.lg-flatsome, .lg-litetile) .lg-loose-media > .uk-panel { margin-top: 0; margin-bottom: 0; }

:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-row-large { padding: 0 30px 30px; }
:is(.lg-flatsome, .lg-litetile) .uk-grid > .lg-row-small { padding: 0 9.8px 19.6px; }

/* A collapsed row narrows to 1050. With no column padding to absorb, that is what keeps its
   content aligned with the default rows above and below it. */
:is(.lg-flatsome, .lg-litetile) .uk-grid:not(:has(.lg-banner--bleed)):not(:has(> .lg-row-full)):has(> .lg-row-collapse) {
    max-width: 1050px;
}

/* Embeds carry their own width attribute and ignore the measure above — a 1600px YouTube iframe on
   /warehousesale/ pushed the page wider than the viewport. */
:is(.lg-flatsome, .lg-litetile) :is(iframe, video, embed, object) {
    max-width: 100%;
}

/* uk-section adds generous vertical padding; the originals start flush under the header. */
body.lg-microsite-page .tm-main.uk-section {
    padding-top: 0;
    padding-bottom: 0;
}

/* The page-title block YOOtheme renders above content has no counterpart in the originals —
   their heroes carry the title. */
body.lg-microsite-page .tm-page-title,
body.lg-microsite-page .tm-main > .uk-container > .uk-margin-large-bottom:empty {
    display: none;
}

/* Most originals set an explicit white page background. Kino Flo leaves body transparent,
   which shows through sections that have no background of their own (litemat-featured).

   This is the DEFAULT, not the rule. Two pages — /litemat-spectrum/spectrum/ and
   /spectrum-os/home/ — paint their canvas black in the source, and several of their sections are
   deliberately transparent so the canvas shows through. Getting white here put white body text on
   a white background from "Dimming Curves" to the foot of the page.

   Those per-page canvases come from lg-<site>.css as `body.lg-microsite-page.lg-mspage-<path>`,
   two classes to this rule's one, so they win no matter which file loads last. Do not raise the
   specificity here without raising it there too. */
body.lg-microsite-page {
    background-color: #fff;
}

/* NO overflow guard here, deliberately — do not add one back.
 *
 * YOOtheme 5 ships `body{overflow:hidden;overflow:clip}` in its own theme.css (v4.5.33 had no such
 * rule; the upgrade is what introduced it). That already clips horizontal overflow, so the guard
 * this file used to carry is redundant.
 *
 * It is also actively harmful. CSS forbids pairing `clip` with `hidden` across axes, so adding
 * `overflow-x: hidden` on top forces the computed `overflow-y` from `clip` down to `hidden`. <body>
 * then becomes a real scroll container, and a scroll-container ancestor disables `position: sticky`
 * for every descendant — including the scroll-sequence stage on /auroris/ and /auroris/home-copy/.
 * The pinned frame scrolls away and the page becomes ~12,000px of empty black spacer.
 *
 * Measured: `overflow-x: hidden` -> stage top -800 while scrolling (broken).
 *           `overflow: clip`     -> stage top 0 (pins correctly).
 * `clip` does not break sticky; `hidden` does.
 *
 * Guarded by _migration/checks/check-scroll-sequence.mjs. */

/* Kino Flo's chrome is no longer hidden here — it is never rendered on these pages. See
 * lg_strip_yootheme_chrome_widgets() / lg_strip_yootheme_chrome_sidebar_active() in
 * functions.php, which empty the header/toolbar/dialog widget positions for the request so
 * templates/header.php's $hasHeader gate is false and no <header> is emitted at all. */

/* Full-bleed for BUILDER-layout microsite pages.
 *
 * A Builder layout nests the content in YOOtheme's own section/container/grid chrome, which
 * is padded: .uk-section adds 70px top, .uk-container adds 40px left/right, and the grid
 * column adds another 40px. The LiteGear originals are edge-to-edge, so that reads as a white
 * border around the whole page.
 *
 * This is a different structure from the non-Builder pages (handled above, where the
 * container sits under .tm-main), so it needs its own rules rather than an extension of them.
 * Scoped to .lg-microsite, which only exists on migrated pages. */
/* The three ACF microsites are edge-to-edge and start flush, so their sections carry no padding.
 * The converted Flatsome pages are NOT: their sections have real vertical padding, and because they
 * also carry .lg-microsite for the shared styling this rule was flattening every one of them —
 * exactly 60px short per section, on every converted page. :not() hands those back to YOOtheme's
 * own padding scale, which build-pageset-layout.py now maps from the source's [section padding=]. */
.lg-microsite.uk-section:not(.lg-flatsome):not(.lg-litetile) {
    padding-top: 0;
    padding-bottom: 0;
}

.lg-microsite .uk-container,
.lg-microsite.uk-section > .uk-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* The grid's negative margin pairs with the column's left padding; zero both or the row
   shifts sideways instead of going full width. */
.lg-microsite .uk-grid,
.lg-microsite .uk-grid-margin {
    margin-left: 0;
    margin-top: 0;
}

/*
 * ...and the same again, one class heavier, for the converted Flatsome pages.
 *
 * The rule above is `.lg-microsite .uk-grid-margin` — 0,2,0. YOOtheme's theme.1.css carries
 * `.uk-grid + .uk-grid { margin-top: 30px }` at the same 0,2,0 and loads afterwards, so it won and
 * every row after the first sat 30px lower than the one before it. Flatsome's rows are FLUSH: its
 * row-to-row spacing is the column's own 30px padding-bottom, which these columns already have, so
 * the 30px was pure double-count — 360px of it on /support-center/ alone, across twelve rows.
 *
 * Measured on the source: consecutive .row elements there start exactly where the previous one
 * ends, with margin-top 0 on every one.
 */
:is(.lg-flatsome, .lg-litetile) .uk-grid + .uk-grid,
:is(.lg-flatsome, .lg-litetile) .uk-grid > .uk-grid-margin,
:is(.lg-flatsome, .lg-litetile) * + .uk-grid-margin {
    margin-top: 0;
}

.lg-microsite .uk-grid > * {
    padding-left: 0;
}

/* Logo lockup sizing for the migrated microsites, now that the brand slot holds the Kino Flo SVG.
 *
 * ALL THREE need this. The generated CSS sizes the brand logo with
 * `.site-logo a:first-child img { width: 80% }`, which worked when that slot held a PNG with real
 * intrinsic dimensions. An SVG has none, and 80% of an INLINE <a> resolves to nothing — the
 * lockup rendered at zero width and vanished from the spectrum-os header entirely.
 *
 * Sizing by HEIGHT instead is what keeps marks of very different aspect ratios on one baseline
 * (the Kino Flo lockup is ~4.9:1; the product marks are far wider and flatter). The flex row
 * makes the anchors block-level so the percentage trap can't come back. */
body.lg-microsite-page .lg-microsite .site-logo {
    display: flex;
    align-items: center;
    /* Breathing room before the product mark. spectrum-os and litemat-spectrum carry a divider
     * baked into the left edge of their image, which otherwise sits hard against the "O". */
    gap: 16px;
}

body.lg-microsite-page .lg-microsite .site-logo a {
    flex: 0 0 auto;
}

body.lg-microsite-page .lg-microsite .site-logo a:first-child img {
    width: auto;
    height: 44px;
}

/* The product mark in slot two — sized for EVERY microsite, not just auroris.
 *
 * This used to say "spectrum-os and litemat-spectrum hold PNGs that already render at the right
 * size" and leave them alone. They do not: spectrum-litegear-sec.png is 330px wide and rendered at
 * its natural size beside a 44px-tall lockup, so the product mark towered over the brand mark it
 * is supposed to sit level with. The original puts both at the same height (51px in its header).
 *
 * 44px matches the Kino Flo lockup in slot one, so the pair reads as one lockup with a common
 * baseline. Auroris keeps its own smaller value: its mark is a different shape and 44px makes it
 * overpower the row.
 *
 * Heights only work now that the source image has been re-cropped. The shipped PNG was 330x98
 * with ~28px of empty space baked into the bottom, so ANY height applied to it left the visible
 * mark sitting high in its own box with dead space beneath — read as "the Kino Flo logo has a
 * strange space above it". The replacement is 330x70, trimmed to the artwork; the originals are
 * kept in _migration/media/replaced/ if the crop ever needs revisiting. */
body.lg-microsite-page .lg-microsite .site-logo a + a img {
    width: auto;
    height: 44px;
}

body.lg-microsite-auroris .lg-microsite .site-logo a + a img {
    width: auto;
    height: 26px;
}

/* The divider the combined image used to supply. The original theme had this as a commented-out
 * `:before` (see lg-auroris.css) — restored here rather than there, because lg-auroris.css is
 * generated by _migration/css-build/build.mjs and edits to it are lost on the next build. */
body.lg-microsite-auroris .lg-microsite .site-logo a:first-child {
    /* Padding only — the flex `gap` above supplies the space after the divider. */
    padding-right: 18px;
}

body.lg-microsite-auroris .lg-microsite .site-logo a:first-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: rgba(255, 255, 255, 0.45);
}

@media (max-width: 767px) {
    body.lg-microsite-auroris .lg-microsite .site-logo a:first-child img { height: 34px; }
    body.lg-microsite-auroris .lg-microsite .site-logo a + a img { height: 20px; }
    body.lg-microsite-auroris .lg-microsite .site-logo a:first-child { padding-right: 12px; }
    body.lg-microsite-page .lg-microsite .site-logo { gap: 10px; }
}

/*
 * Columns nested inside a text_box or card.
 *
 * Flatsome allows a full [row] of [col span="n"] inside an overlay, and the converter now keeps
 * that structure as .lg-row / .lg-col rather than flattening it (see build-pageset-layout.py).
 * Span is Flatsome's twelfths. This matters more than it looks: the images in these cells are
 * sized in percent, so without the column the LiteTile Spectrum feature icons rendered at 784px
 * instead of 196px — four 1000px PNGs stacked down the page.
 */
.lg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -15px;
    margin-right: -15px;
}

.lg-col {
    flex: 0 0 calc(var(--lg-span, 12) / 12 * 100%);
    max-width: calc(var(--lg-span, 12) / 12 * 100%);
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.lg-col img {
    max-width: 100%;
    height: auto;
}

/* Flatsome stacks these below its medium breakpoint (span__sm="12" on every one of them). */
@media (max-width: 849px) {
    .lg-col {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/*
 * Pages on Flatsome's DEFAULT page template.
 *
 * That template wraps the_content() in `.row.row-main` — max-width 1080px — and that bounds
 * EVERYTHING on the page, banners included. Rendering them full-bleed is mostly invisible because
 * most banners carry explicit pixel heights, but a height-less banner takes its background image's
 * aspect ratio, so the container width decides how tall it is: /firmware/'s strip came out 158px
 * against the original's 113.
 *
 * The converter used to apply this class to any page with no [section], which is a different set:
 * 8 of the 52 pages use the default template and 44 use page-blank.php, which has no wrapper at
 * all. Those 44 were being boxed to 1050px where the original runs their heroes edge to edge at
 * the full 1440. See build_layout in build-pageset-layout.py.
 *
 * Overrides the bleed exemption above, which is why it is last and names both classes.
 */
/* No horizontal padding here: the 15px is on the columns (see the gutter rule above), and having it
   in both places narrowed the content to 990px against the original's 1050 — which then resized
   every percentage-positioned banner overlay inside it. */
:is(.lg-flatsome, .lg-litetile).lg-page-boxed .uk-grid:not(.uk-grid .uk-grid) {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* The FOOTER lockup, which the header rules above get wrong.
 *
 * `.site-logo a { flex: 0 0 auto }` was written for the header, where the product marks happen to
 * render at the right size. The footer holds the same lockup at a smaller scale: the original sizes
 * both anchors to 166x49 inside a 333px row, with `flex: 0 1 auto` so they SHRINK to fit.
 *
 * With shrink disabled ours laid them out at their natural sizes — 215px for the Kino Flo SVG plus
 * 330px for the product PNG — overflowing the 333px column by 212px and printing the Spectrum OS
 * mark straight through the "Stay Connected" newsletter block beside it.
 *
 * Height, not width, for the same reason as the header rules: these two marks have very different
 * aspect ratios and a shared baseline is what makes them read as one lockup. 49px is what the
 * original renders.
 */
body.lg-microsite-page .lg-microsite .footer-logo.site-logo a {
	flex: 0 1 auto;
	min-width: 0;
}

/* max-height, NOT height. A fixed height on a shrinking flex item keeps the image at its natural
   width while the anchor narrows around it, so the mark gets CLIPPED — the first attempt cut the
   "O" off "KINO FLO". Capping the height and letting width follow lets both marks scale down
   proportionally when the 333px row cannot hold them at full size, which is what the original does. */
body.lg-microsite-page .lg-microsite .footer-logo.site-logo a img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 49px;
}

/* =============================================================================
   Sticky microsite header must stay inside the boxed page
   =============================================================================
   `.header-bar.fixed` in each lg-<site>.css sets `position: fixed; top: 0` and
   nothing else. On litegear.com that was correct: those pages were full-bleed,
   so a fixed bar with `width: auto` filling the viewport WAS the page width.

   Kino Flo boxes the page at 1600. Once the bar goes fixed its containing block
   becomes the viewport rather than the boxed page, so `width: auto` resolves to
   100vw — at 2560 the bar ran from 480 to 3040, nearly 1000px past the right
   edge of the box, over the grey surround.

   Centred on the viewport and capped at the boxed measure, which matches how
   .tm-page itself is centred. Below 1600 the page is full width and so is this,
   so the same rule holds at every size.

   Reported on /spectrum-os/, but the rule is identical in all three microsite
   stylesheets, so this is scoped to the shared body class rather than fixed
   three times.
   ============================================================================= */
body.lg-microsite-page .header-bar.fixed {
    left: 50%;
    transform: translateX(-50%);
    /* 1600px is .tm-page's max-width. Stated here because the theme exposes no
       custom property for it; if the boxed measure ever changes, this follows. */
    width: min(100%, 1600px);
}

/* -----------------------------------------------------------------------------
   Bootstrap rows whose parent lost its gutter padding
   -----------------------------------------------------------------------------
   The LiteGear markup is Bootstrap: `.row` carries `margin: 0 -12px` on the
   assumption that its parent supplies a matching 12px of padding, which cancels
   it. Several wrappers on /litemat-spectrum/ have no padding at all, so the
   negative margin is uncancelled and the row sits 12px proud on each side.

   On litegear.com that was invisible — the page was full-bleed, so 12px of
   overhang had nothing to overhang onto. Inside Kino Flo's 1600 box it paints
   over the grey surround, the same class of bug as the sticky header.

   The padding is restored on the PARENT rather than zeroing the row's margin:
   zeroing it would pull the outer columns 12px inward and misalign them against
   every other band on the page. This way the columns do not move at all.
   ----------------------------------------------------------------------------- */
body.lg-microsite-page .element-col-group,
body.lg-microsite-page .power-inner,
body.lg-microsite-page .monting-inner {
    padding-left: 12px;
    padding-right: 12px;
}