/* =========================================================
   GENIUS MOVIES
   MOBILE SAFE LAYOUT V3

   IMPORTANT:
   - ORIGINAL HEADER DESIGN IS UNTOUCHED
   - ORIGINAL BRAND DESIGN IS UNTOUCHED
   - ORIGINAL SEARCH DESIGN IS UNTOUCHED
   - ONLY SAFE SPACING + GLOBAL BOTTOM NAV
   ========================================================= */

:root{
    --gm-mobile-top-safe:0px;
    --gm-mobile-bottom-safe:0px;
}


/* Desktop / default */

.gm-mobile-header-spacer{
    display:none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    html{

        scroll-padding-top:
            calc(
                var(--gm-mobile-top-safe)
                +
                10px
            ) !important;
    }


    /*
     * We deliberately DO NOT alter:
     *
     * .header-inner
     * .brand
     * .brand-mark
     * .brand-name
     * search box/form/input
     *
     * Their original site CSS controls them.
     */


    /* =====================================================
       FIXED HEADER
       Keep original appearance.
       ===================================================== */

    body.gm-mobile-safe-layout
    .gm-fixed-site-header{

        position:fixed !important;

        top:0 !important;

        left:0 !important;

        right:0 !important;

        width:100% !important;

        margin:0 !important;

        transform:none !important;

        z-index:2147483000 !important;
    }


    /* =====================================================
       SAFE SPACE UNDER HEADER
       ===================================================== */

    body.gm-mobile-safe-layout
    .gm-mobile-header-spacer{

        display:block !important;

        width:100% !important;

        height:
            var(--gm-mobile-top-safe) !important;

        min-height:
            var(--gm-mobile-top-safe) !important;

        max-height:
            var(--gm-mobile-top-safe) !important;

        margin:0 !important;

        padding:0 !important;

        border:0 !important;

        pointer-events:none !important;

        visibility:hidden !important;
    }


    /* =====================================================
       GLOBAL BOTTOM MENU
       ===================================================== */

    body.gm-mobile-safe-layout
    .gm-main-nav.gm-global-mobile-nav{

        position:fixed !important;

        top:auto !important;

        bottom:
            calc(
                10px
                +
                env(safe-area-inset-bottom)
            ) !important;

        left:10px !important;

        right:10px !important;

        width:auto !important;

        max-width:
            calc(
                100vw - 20px
            ) !important;

        margin:0 !important;

        transform:none !important;

        box-sizing:border-box !important;

        overflow-x:auto !important;

        overflow-y:hidden !important;

        white-space:nowrap !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        z-index:2147482500 !important;
    }


    body.gm-mobile-safe-layout
    .gm-main-nav.gm-global-mobile-nav::-webkit-scrollbar{

        display:none;
    }


    body.gm-mobile-safe-layout
    .gm-global-mobile-nav
    .gm-nav-link,

    body.gm-mobile-safe-layout
    .gm-global-mobile-nav
    .gm-movies-nav{

        flex:0 0 auto !important;

        white-space:nowrap !important;
    }


    /* =====================================================
       RESERVE SPACE ABOVE BOTTOM MENU
       ===================================================== */

    body.gm-mobile-safe-layout{

        padding-bottom:
            var(--gm-mobile-bottom-safe) !important;
    }


    /* =====================================================
       CONTENT MUST NOT HIDE UNDER HEADER
       ===================================================== */

    body.gm-mobile-safe-layout
    :where(
        h1,
        h2,
        h3,
        h4,
        section,
        [id]
    ){

        scroll-margin-top:
            calc(
                var(--gm-mobile-top-safe)
                +
                10px
            );
    }

}


/* =========================================================
   DESKTOP
   NOTHING CHANGED
   ========================================================= */

@media(min-width:761px){

    .gm-mobile-header-spacer{

        display:none !important;
    }

}