/**
 * Fabrixa — performance.css
 *
 * Page-load performance optimizations. Auto-enqueued by
 * `fabrixa_auto_enqueue_assets_css()` in functions.php.
 *
 * Added 2026-05-04 for the Fespa pre-launch PageSpeed sweep.
 */

/* -----------------------------------------------------------
 * 1. content-visibility: auto on sections
 *
 * The browser skips rendering off-screen <section> elements until
 * the user scrolls them into view. Dramatically reduces initial
 * render cost on the 12-section product leaf pages (~2000px tall).
 *
 * contain-intrinsic-size reserves estimated space so scroll position
 * stays stable as content un-defers. ~800px per section is a reasonable
 * estimate for the typical hero / range table / use-case grid.
 *
 * Browsers without content-visibility support gracefully ignore this.
 *
 * Note: this is OPT-IN per section — we apply it via the .fbx-section
 * class which only appears on Fabrixa-built sections, not parent-theme
 * navigation/footer.
 * --------------------------------------------------------- */
.fbx-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

/* The first section (hero) should always render — exclude it from
 * content-visibility so the LCP element (hero background image) is
 * visible immediately. We target the first .fbx-section inside #pxl-main.
 */
#pxl-main .fbx-section:first-of-type {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* Bug fix 2026-05-06: spec strip clipping.
 *
 * Several leaf product pages use a "spec strip" pattern where the inner
 * .fbx-container has `margin-top:-40px` so the strip overlaps the bottom
 * of the previous (hero) section. Because `content-visibility: auto`
 * implicitly applies `contain: layout paint`, anything that visually
 * extends outside the section's content box gets clipped — which on
 * leaf pages was clipping the top 40px of the strip (the labels).
 *
 * Fix: any .fbx-section that contains a child .fbx-container with a
 * negative margin-top must not be clipped. Disable content-visibility
 * and contain on those sections only.
 */
.fbx-section:has(> .fbx-container[style*="margin-top:-"]) {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    contain: none !important;
    overflow: visible !important;
}

/* Defensive: also disable clipping on the section that comes BEFORE the
 * negative-margin strip, in case the previous section's overflow:hidden
 * (or any future :has() chain) clips the strip from the top side. */
.fbx-section:has(+ .fbx-section > .fbx-container[style*="margin-top:-"]) {
    overflow: visible !important;
}

/* -----------------------------------------------------------
 * 2. Reduce-motion preference
 *
 * Disable transitions, animations, and smooth scroll for users who've
 * set prefers-reduced-motion at the OS level. Minor performance benefit
 * (saves animation frames) and significant accessibility benefit.
 * --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------
 * 3. Image rendering quality optimization
 *
 * Tell the browser to use high-quality interpolation when scaling
 * background images. CSS background-image doesn't get the same
 * decoding optimizations as <img>, so this hint helps slightly.
 * --------------------------------------------------------- */
.fbx-section[style*="background-image"],
.fbx-section[style*="background:"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* -----------------------------------------------------------
 * 4. Will-change hint on hover-animated elements
 *
 * Pre-promote .fbx-tile to its own composite layer on hover. Avoids
 * paint thrashing on hover transitions.
 * --------------------------------------------------------- */
.fbx-tile {
    will-change: border-color, transform;
}
.fbx-tile:hover {
    /* No transform applied currently, but reserve the layer for any
     * future hover effects that might add transform */
}

/* -----------------------------------------------------------
 * 5. KILL THE BRIGHTHUB PRELOADER (2026-05-06)
 *
 * BrightHub renders a fullscreen spinner with the brand mark while
 * waiting for window.onload to fire. The hide-it script gets delayed
 * by WP Rocket's "Delay JavaScript Execution" on mobile, leaving the
 * preloader visible forever. Brand B2B sites don't need preloaders —
 * they delay perceived performance and obscure first-paint content.
 * Hide via CSS (which isn't delayed) and keep the body visible
 * regardless of any opacity-toggle JS.
 * --------------------------------------------------------- */
body .pxl-preloader,
body .pxl-loading,
body .pxl-page-loader,
body .pxl-preload-wrap,
body .pxl-loader,
body #pxl-preloader,
body #pxl-loading,
body [class*="preloader"],
body [class*="page-loader"],
body [id*="preloader"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* If BrightHub sets body to opacity:0 while the preloader is shown,
 * force it back to visible so the page is never blank. */
html, body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* -----------------------------------------------------------
 * 6. KILL EXTRA SPACE BETWEEN PAGE CONTENT AND FOOTER (2026-05-06)
 *
 * On all non-homepage templates we were seeing a 400-600px navy band
 * between the last <section> and the footer. The leaf templates only
 * have padding:140px on their final CTA section — so the gap had to
 * be coming from a BrightHub wrapper or an empty section it injects
 * after </main>. Defensive nuke: zero out the bottom margin/padding
 * on main + any wrapper, and hide any empty siblings between main
 * and footer.
 * --------------------------------------------------------- */
body main,
body #pxl-main,
body .pxl-content-wrap,
body .pxl-page-wrap,
body .pxl-main-wrap,
body .pxl-content-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body footer,
body .pxl-footer,
body #pxl-footer,
body .pxl-footer-wrap {
    margin-top: 0 !important;
}

/* Hide empty wrappers/sections that sit between </main> and footer */
body main + section:empty,
body main + div:empty,
body main + section.elementor-section:empty,
body #pxl-main + section:empty,
body #pxl-main + div:empty,
body main ~ section.elementor-section:empty,
body main ~ div:empty:not([class]),
body footer:empty,
body .pxl-footer-spacer,
body .pxl-bottom-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}