/* =========================================================
   Fayota FINAL Mobile Toggle Override
   Purpose: black hamburger icon only. No gold/black circle,
   no background, no hover/click/focus effects.
   Load this file LAST after every other CSS file.
========================================================= */

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

    /* Keep the mobile menu wrapper clean */
    body .header-area .mobile_menu,
    body .header-area .slicknav_menu,
    body .main-header .mobile_menu,
    body .main-header .slicknav_menu {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Remove the circular button background in every state */
    body .header-area .slicknav_menu .slicknav_btn,
    body .header-area .slicknav_menu .slicknav_btn:hover,
    body .header-area .slicknav_menu .slicknav_btn:focus,
    body .header-area .slicknav_menu .slicknav_btn:active,
    body .header-area .slicknav_menu .slicknav_btn.slicknav_open,
    body .header-area .slicknav_menu .slicknav_btn.slicknav_collapsed,
    body .header-area .slicknav_btn,
    body .header-area .slicknav_btn:hover,
    body .header-area .slicknav_btn:focus,
    body .header-area .slicknav_btn:active,
    body .header-area .slicknav_btn.slicknav_open,
    body .header-area .slicknav_btn.slicknav_collapsed {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        transition: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Kill pseudo-elements that may be drawing the gold/black circle */
    body .header-area .slicknav_btn::before,
    body .header-area .slicknav_btn::after,
    body .header-area .slicknav_btn:hover::before,
    body .header-area .slicknav_btn:hover::after,
    body .header-area .slicknav_btn:focus::before,
    body .header-area .slicknav_btn:focus::after,
    body .header-area .slicknav_btn:active::before,
    body .header-area .slicknav_btn:active::after,
    body .header-area .slicknav_btn.slicknav_open::before,
    body .header-area .slicknav_btn.slicknav_open::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Hide "MENU" text if SlickNav generates it */
    body .header-area .slicknav_menutxt {
        display: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    /* Keep icon container clean */
    body .header-area .slicknav_icon {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 27px !important;
        height: 20px !important;
        position: relative !important;
        display: block !important;
        transform: none !important;
        transition: none !important;
    }

    /* The three black lines */
    body .header-area .slicknav_icon-bar,
    body .header-area .slicknav_btn:hover .slicknav_icon-bar,
    body .header-area .slicknav_btn:focus .slicknav_icon-bar,
    body .header-area .slicknav_btn:active .slicknav_icon-bar,
    body .header-area .slicknav_btn.slicknav_open .slicknav_icon-bar,
    body .header-area .slicknav_btn.slicknav_collapsed .slicknav_icon-bar {
        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;
        display: block !important;
        width: 27px !important;
        height: 3px !important;
        border-radius: 0 !important;
        margin: 0 0 5px 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body .header-area .slicknav_icon-bar:last-child {
        margin-bottom: 0 !important;
    }

    /* Keep the dropdown styling separate from the toggle button */
    body .header-area .slicknav_nav {
        margin-top: 14px !important;
    }
}