/* WordPress Theme Override CSS - Force Mobile Menu */
/* This file ensures the mobile menu works regardless of theme conflicts */

/* CRITICAL: Force mobile menu to work on ALL WordPress themes */
body .tos-widget-container,
.elementor .tos-widget-container,
.elementor-widget .tos-widget-container,
.entry-content .tos-widget-container,
.post-content .tos-widget-container,
.page-content .tos-widget-container,
div .tos-widget-container {
    position: relative !important;
}

/* Mobile Breakpoint - Force Override Everything */
@media screen and (max-width: 968px) {
    /* Hide desktop menu completely on mobile */
    body .tos-widget-container .tos-nav-menu,
    .elementor .tos-widget-container .tos-nav-menu,
    .elementor-widget .tos-widget-container .tos-nav-menu,
    .entry-content .tos-widget-container .tos-nav-menu,
    .post-content .tos-widget-container .tos-nav-menu,
    .page-content .tos-widget-container .tos-nav-menu,
    div .tos-widget-container .tos-nav-menu,
    .tos-widget-container .tos-nav-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Force mobile toggle to be visible */
    body .tos-widget-container .tos-mobile-toggle,
    .elementor .tos-widget-container .tos-mobile-toggle,
    .elementor-widget .tos-widget-container .tos-mobile-toggle,
    .entry-content .tos-widget-container .tos-mobile-toggle,
    .post-content .tos-widget-container .tos-mobile-toggle,
    .page-content .tos-widget-container .tos-mobile-toggle,
    div .tos-widget-container .tos-mobile-toggle,
    .tos-widget-container .tos-mobile-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #ff8c00 !important;
        background-color: #ff8c00 !important;
        color: white !important;
        border: 2px solid white !important;
        border-color: white !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        position: relative !important;
        z-index: 1000 !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        height: auto !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: none !important;
        max-height: none !important;
        vertical-align: top !important;
        text-align: center !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        touch-action: manipulation !important;
        outline: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        white-space: nowrap !important;
        transform: none !important;
        transition: background-color 0.3s ease !important;
    }

    /* Mobile toggle hover states */
    body .tos-widget-container .tos-mobile-toggle:hover,
    body .tos-widget-container .tos-mobile-toggle:focus,
    body .tos-widget-container .tos-mobile-toggle:active,
    .elementor .tos-widget-container .tos-mobile-toggle:hover,
    .elementor .tos-widget-container .tos-mobile-toggle:focus,
    .elementor .tos-widget-container .tos-mobile-toggle:active,
    .tos-widget-container .tos-mobile-toggle:hover,
    .tos-widget-container .tos-mobile-toggle:focus,
    .tos-widget-container .tos-mobile-toggle:active {
        background: #e67e00 !important;
        background-color: #e67e00 !important;
        color: white !important;
        border-color: white !important;
        outline: none !important;
        text-decoration: none !important;
    }

    /* Force mobile menu initial state */
    body .tos-widget-container .tos-mobile-menu,
    .elementor .tos-widget-container .tos-mobile-menu,
    .elementor-widget .tos-widget-container .tos-mobile-menu,
    .entry-content .tos-widget-container .tos-mobile-menu,
    .post-content .tos-widget-container .tos-mobile-menu,
    .page-content .tos-widget-container .tos-mobile-menu,
    div .tos-widget-container .tos-mobile-menu,
    .tos-widget-container .tos-mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        background: #2c3e50 !important;
        background-color: #2c3e50 !important;
        border: 2px solid #ff8c00 !important;
        border-color: #ff8c00 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
        min-height: 100px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        transform: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* Force mobile menu active state */
    body .tos-widget-container .tos-mobile-menu.active,
    .elementor .tos-widget-container .tos-mobile-menu.active,
    .elementor-widget .tos-widget-container .tos-mobile-menu.active,
    .entry-content .tos-widget-container .tos-mobile-menu.active,
    .post-content .tos-widget-container .tos-mobile-menu.active,
    .page-content .tos-widget-container .tos-mobile-menu.active,
    div .tos-widget-container .tos-mobile-menu.active,
    .tos-widget-container .tos-mobile-menu.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force mobile menu items */
    body .tos-widget-container .tos-mobile-nav-item,
    .elementor .tos-widget-container .tos-mobile-nav-item,
    .tos-widget-container .tos-mobile-nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        float: none !important;
        clear: both !important;
        position: relative !important;
        background: transparent !important;
    }

    /* Force mobile menu links */
    body .tos-widget-container .tos-mobile-nav-link,
    .elementor .tos-widget-container .tos-mobile-nav-link,
    .tos-widget-container .tos-mobile-nav-link {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        color: white !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
        position: relative !important;
        float: none !important;
        clear: both !important;
        vertical-align: top !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
        transform: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        outline: none !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        white-space: normal !important;
    }

    /* Mobile menu link hover states */
    body .tos-widget-container .tos-mobile-nav-link:hover,
    body .tos-widget-container .tos-mobile-nav-link:focus,
    .elementor .tos-widget-container .tos-mobile-nav-link:hover,
    .elementor .tos-widget-container .tos-mobile-nav-link:focus,
    .tos-widget-container .tos-mobile-nav-link:hover,
    .tos-widget-container .tos-mobile-nav-link:focus {
        background: rgba(255,140,0,0.2) !important;
        background-color: rgba(255,140,0,0.2) !important;
        color: #ff8c00 !important;
        text-decoration: none !important;
        outline: none !important;
    }

    /* Mobile menu link active states */
    body .tos-widget-container .tos-mobile-nav-link.active,
    .elementor .tos-widget-container .tos-mobile-nav-link.active,
    .tos-widget-container .tos-mobile-nav-link.active {
        background: rgba(255,140,0,0.3) !important;
        background-color: rgba(255,140,0,0.3) !important;
        color: #ff8c00 !important;
        font-weight: bold !important;
        border-left: 4px solid #ff8c00 !important;
        padding-left: 16px !important;
    }
}

/* Desktop - Force normal menu visibility */
@media screen and (min-width: 969px) {
    body .tos-widget-container .tos-mobile-toggle,
    .elementor .tos-widget-container .tos-mobile-toggle,
    .tos-widget-container .tos-mobile-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    body .tos-widget-container .tos-nav-menu,
    .elementor .tos-widget-container .tos-nav-menu,
    .tos-widget-container .tos-nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body .tos-widget-container .tos-mobile-menu,
    .elementor .tos-widget-container .tos-mobile-menu,
    .tos-widget-container .tos-mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Additional WordPress theme overrides */
.theme-twentytwentyone .tos-widget-container .tos-mobile-toggle,
.theme-twentytwentytwo .tos-widget-container .tos-mobile-toggle,
.theme-twentytwentythree .tos-widget-container .tos-mobile-toggle,
.theme-astra .tos-widget-container .tos-mobile-toggle,
.theme-generatepress .tos-widget-container .tos-mobile-toggle,
.theme-neve .tos-widget-container .tos-mobile-toggle,
.theme-oceanwp .tos-widget-container .tos-mobile-toggle,
.theme-kadence .tos-widget-container .tos-mobile-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent theme CSS conflicts */
.tos-widget-container * {
    box-sizing: border-box !important;
}

/* Force positioning context */
.tos-widget-container .tos-nav-container {
    position: relative !important;
}

/* Ensure z-index hierarchy */
.tos-widget-container {
    z-index: 999 !important;
    position: relative !important;
}

.tos-widget-container .tos-sticky-nav {
    z-index: 1000 !important;
    position: fixed !important;
}

.tos-widget-container .tos-mobile-menu {
    z-index: 99999 !important;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .tos-widget-container .tos-mobile-toggle {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
    }
}

/* Android Chrome specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .tos-widget-container .tos-mobile-toggle {
        touch-action: manipulation !important;
    }
}