/*
 * IJPHR Mobile Navigation Button
 * High visibility hamburger
 */

@media screen and (max-width: 991px) {

    /*
     * Draw the hamburger DIRECTLY on the button.
     * This does not depend on the old span/pseudo-element design.
     */
    button.pkp_site_nav_toggle,
    .pkp_site_nav_toggle {
        display: block !important;

        width: 58px !important;
        height: 54px !important;

        background-color: #ffffff !important;

        background-image:
            linear-gradient(#54145f, #54145f),
            linear-gradient(#54145f, #54145f),
            linear-gradient(#54145f, #54145f) !important;

        background-size:
            32px 4px,
            32px 4px,
            32px 4px !important;

        background-position:
            center calc(50% - 10px),
            center center,
            center calc(50% + 10px) !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;

        border: 2px solid #54145f !important;
        border-radius: 9px !important;

        box-shadow:
            0 3px 10px rgba(0,0,0,0.22) !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 99999 !important;

        cursor: pointer !important;
    }

    /*
     * Remove the OLD white hamburger graphics.
     * Our three dark lines above replace them.
     */
    .pkp_site_nav_toggle > span {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pkp_site_nav_toggle > span::before,
    .pkp_site_nav_toggle > span::after {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /*
     * Remove any button pseudo-elements that could
     * cover the new hamburger.
     */
    .pkp_site_nav_toggle::before,
    .pkp_site_nav_toggle::after {
        border: 0 !important;
        box-shadow: none !important;
    }
}