/*
 * Fabify 3D — HARD WHITE MOBILE CSS v1.6.0
 * Added for the Samsung/Android screenshot where the content and header are
 * dark but the Fabify logo, CTA and featured product artwork remain normal.
 * Applies whether the browser claims light or dark mode. No global filter or
 * inversion: the hero product, WooCommerce items, images and CTA stay intact.
 * This stylesheet requires the opt-in root class set by this plugin.
 */
@media screen and (max-width: 1199.98px) {
    /* Request a light UI regardless of OS/browser dark preference. */
    html.fabify-light-lock--force-mobile-white,
    html.fabify-light-lock--force-mobile-white body {
        color-scheme: only light !important;
        background-color: #ffffff !important;
        /* CSS gradients are treated as backgrounds by some auto-dark engines. */
        background-image: linear-gradient(#ffffff, #ffffff) !important;
        color: #1d2d43 !important;
    }

    /* Root layout surfaces. Do NOT target individual cards, image blocks,
       product galleries, carousels, buttons, or arbitrary Elementor columns. */
    html.fabify-light-lock--force-mobile-white body :is(
        #page, #wrapper, #site, #outer-wrap, #app,
        .site, .site-wrapper, .site-container,
        #content, #primary, #main, .site-content,
        .content-area, .site-main, .wp-site-blocks,
        main.site-main, main#main, .entry-content
    ) {
        background-color: #ffffff !important;
        color-scheme: only light !important;
    }

    /* The dark rectangle at the top of the supplied mobile screenshot. */
    html.fabify-light-lock--force-mobile-white body :is(
        #masthead, .site-header, .main-header, .header-wrapper,
        .header-inner, .site-header-inner, .elementor-location-header,
        header[role="banner"], #site-header, .mobile-header, .mobile-header-bar,
        .navbar, .navbar-header, .nav-header, .main-navigation
    ) {
        background-color: #ffffff !important;
        color-scheme: only light !important;
    }

    /* Typical custom homepage introductions, used by many WordPress themes.
       These are broad hero section selectors but intentionally NOT all divs. */
    html.fabify-light-lock--force-mobile-white body :is(
        #hero, #home-hero, .hero, .hero-section, .homepage-hero,
        .home-hero, .home-intro, .hero-wrapper, .intro-section,
        .page-hero, .hero-content, .hero-inner
    ) {
        background-color: #ffffff !important;
        color-scheme: only light !important;
    }
    html.fabify-light-lock--force-mobile-white body :is(
        .hero, .hero-section, .homepage-hero, .home-hero,
        .home-intro, .intro-section, .hero-content, .hero-inner
    ) :is(p, .lead, .subtitle, .description, .hero-description, .hero-subtitle) {
        color: #1d2d43 !important;
        -webkit-text-fill-color: #1d2d43 !important;
    }

    /* Common Elementor and WordPress hero wrappers (first top-level section
       only); leave subsequent blue product slider sections alone. */
    html.fabify-light-lock--force-mobile-white body .elementor > .e-con:first-child,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-top-section:first-child,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-section-wrap > .elementor-top-section:first-child,
    html.fabify-light-lock--force-mobile-white body .entry-content > .wp-block-group:first-child:not(.has-background) {
        background-color: #ffffff !important;
        color-scheme: only light !important;
    }

    /* Nested hero backgrounds sometimes come from Elementor layout wrappers.
       Limit this to the FIRST hero region: do not whiten later sliders/cards. */
    html.fabify-light-lock--force-mobile-white body .elementor > .e-con:first-child > .e-con-inner,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-top-section:first-child > .elementor-container,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-section-wrap > .elementor-top-section:first-child > .elementor-container,
    html.fabify-light-lock--force-mobile-white body :is(.hero, .hero-section, .home-hero, .homepage-hero, .hero-wrapper) > :is(.container, .row, .wrap, .inner, .hero-inner) {
        background-color: #ffffff !important;
        color-scheme: only light !important;
    }

    /* Standard text widgets in the introductory section. This intentionally
       avoids links, price badges, CTA buttons and nested dark product cards. */
    html.fabify-light-lock--force-mobile-white body :is(.hero, .hero-section, .home-hero, .homepage-hero, .home-intro, .intro-section)
    :is(.elementor-widget-text-editor, .hero-description, .hero-subtitle, .description, .lead, .subtitle),
    html.fabify-light-lock--force-mobile-white body .elementor > .e-con:first-child .elementor-widget-text-editor,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-top-section:first-child .elementor-widget-text-editor {
        color: #1d2d43 !important;
        -webkit-text-fill-color: #1d2d43 !important;
    }

    /* Fix screenshot's white introductory paragraph on a now-white page.
       Text inside intentionally colored product sliders/cards is not touched. */
    html.fabify-light-lock--force-mobile-white body :is(
        .site-main > p, .entry-content > p, .entry-content > .wp-block-paragraph,
        main > p, article > p
    ),
    html.fabify-light-lock--force-mobile-white body .elementor > .e-con:first-child .elementor-widget-text-editor p,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-top-section:first-child .elementor-widget-text-editor p,
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-section-wrap > .elementor-top-section:first-child .elementor-widget-text-editor p,
    html.fabify-light-lock--force-mobile-white body .entry-content > .wp-block-group:first-child:not(.has-background) > p {
        color: #1d2d43 !important;
        -webkit-text-fill-color: #1d2d43 !important;
    }

    /* Keep the blue hero headline visible, without recoloring graphics. */
    html.fabify-light-lock--force-mobile-white body .elementor > .e-con:first-child .elementor-widget-heading :is(h1,h2,h3),
    html.fabify-light-lock--force-mobile-white body .elementor > .elementor-top-section:first-child .elementor-widget-heading :is(h1,h2,h3),
    html.fabify-light-lock--force-mobile-white body .entry-content > h1,
    html.fabify-light-lock--force-mobile-white body .entry-content > h2 {
        color: #073573 !important;
        -webkit-text-fill-color: #073573 !important;
    }

    /* Explicitly preserve visual contrast on CTA buttons and form inputs. */
    html.fabify-light-lock--force-mobile-white body :is(
        .elementor-button, .wp-element-button, .wp-block-button__link,
        a.button, button.button, .woocommerce a.button,
        .woocommerce button.button, .woocommerce input.button
    ) {
        color-scheme: only light !important;
    }
    html.fabify-light-lock--force-mobile-white body :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
        textarea, select
    ) {
        color-scheme: only light !important;
    }
}

/* Other responsive rules do not need to live inside this CSS: leave the
   existing desktop design untouched, and do not invert/brighten photos. */

/*
 * v1.6: extra light-surface safeguards for browser/Android forced color
 * transformations. White CSS gradients are images: some forced-dark heuristics
 * preserve them even where they recolor an ordinary background-color.
 * Deliberately NOT applied to cards, carousels, product grids or all <div>s.
 * Samsung Internet may still override them at the browser compositing layer.
 * Landscape tablets can exceed 1200 CSS px, so also detect touch pointers.
 */
@media screen and (max-width:1199.98px), screen and (hover:none) and (pointer:coarse) {
    /* Fallback selectors use simple syntax for older Safari/Android WebViews. */
    html.fabify-light-lock--force-mobile-white,
    html.fabify-light-lock--force-mobile-white body,
    html.fabify-light-lock--force-mobile-white body #page,
    html.fabify-light-lock--force-mobile-white body #site,
    html.fabify-light-lock--force-mobile-white body #wrapper,
    html.fabify-light-lock--force-mobile-white body #outer-wrap,
    html.fabify-light-lock--force-mobile-white body .site,
    html.fabify-light-lock--force-mobile-white body .site-wrapper,
    html.fabify-light-lock--force-mobile-white body .site-container,
    html.fabify-light-lock--force-mobile-white body .wp-site-blocks,
    html.fabify-light-lock--force-mobile-white body #content,
    html.fabify-light-lock--force-mobile-white body #main,
    html.fabify-light-lock--force-mobile-white body .site-content,
    html.fabify-light-lock--force-mobile-white body .site-main,
    html.fabify-light-lock--force-mobile-white body .content-area,
    html.fabify-light-lock--force-mobile-white body .entry-content,
    html.fabify-light-lock--force-mobile-white body #masthead,
    html.fabify-light-lock--force-mobile-white body #site-header,
    html.fabify-light-lock--force-mobile-white body .site-header,
    html.fabify-light-lock--force-mobile-white body .main-header,
    html.fabify-light-lock--force-mobile-white body .header-wrapper,
    html.fabify-light-lock--force-mobile-white body .header-inner,
    html.fabify-light-lock--force-mobile-white body .mobile-header,
    html.fabify-light-lock--force-mobile-white body .mobile-header-bar,
    html.fabify-light-lock--force-mobile-white body .elementor-location-header {
        background-color: #ffffff !important;
        background-image: linear-gradient(to bottom, #ffffff, #ffffff) !important;
        color-scheme: light !important;
        color-scheme: only light !important;
    }

    /* Homepage hero only, not later colored slider/product sections. */
    html.fabify-light-lock--force-mobile-white body.home #hero,
    html.fabify-light-lock--force-mobile-white body.home .hero-section,
    html.fabify-light-lock--force-mobile-white body.home .home-hero,
    html.fabify-light-lock--force-mobile-white body.home .homepage-hero,
    html.fabify-light-lock--force-mobile-white body.home .home-intro,
    html.fabify-light-lock--force-mobile-white body.home .intro-section,
    html.fabify-light-lock--force-mobile-white body.home .elementor > .e-con:first-child,
    html.fabify-light-lock--force-mobile-white body.home .elementor > .elementor-top-section:first-child,
    html.fabify-light-lock--force-mobile-white body.home .elementor > .elementor-section-wrap > .elementor-top-section:first-child {
        background-color: #ffffff !important;
        background-image: linear-gradient(to bottom, #ffffff, #ffffff) !important;
    }

    /* First Elementor hero text: preserve branding color on headings/buttons. */
    html.fabify-light-lock--force-mobile-white body.home .elementor > .e-con:first-child .elementor-widget-text-editor,
    html.fabify-light-lock--force-mobile-white body.home .elementor > .e-con:first-child .elementor-widget-text-editor p,
    html.fabify-light-lock--force-mobile-white body.home .elementor > .elementor-top-section:first-child .elementor-widget-text-editor p,
    html.fabify-light-lock--force-mobile-white body.home .home-intro p,
    html.fabify-light-lock--force-mobile-white body.home .hero-section p {
        color: #1d2d43 !important;
        -webkit-text-fill-color: #1d2d43 !important;
    }

    /* If text links are intentionally blue, retain their blue color. */
    html.fabify-light-lock--force-mobile-white body.home .home-intro a,
    html.fabify-light-lock--force-mobile-white body.home .hero-section a {
        -webkit-text-fill-color: currentColor;
    }
}