/*
Biogurukul LMS Complete Single Mobile Menu Fix v2.3.0
Fixes duplicate mobile menu problem.
Author: Abhishek Das
*/

@media(max-width:900px){

  /*
   * IMPORTANT:
   * Previous plugin version added its own hamburger/offcanvas/bottom nav.
   * The theme already has a purple Menu button, so we hide plugin-added duplicate UI.
   */
  .bgk-mobile-menu-toggle,
  .bgk-mobile-menu-overlay,
  .bgk-mobile-menu-panel,
  .bgk-mobile-bottom-nav,
  .bgk-stg-floating-link{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body{
    padding-bottom:0!important;
  }

  html.bgk-mm-open,
  body.bgk-mm-open{
    overflow:auto!important;
    touch-action:auto!important;
  }

  /*
   * Keep ONE menu only: the real theme/mobile menu.
   * Make it clean, readable, centered, and mobile friendly.
   */
  body .site-header,
  body header,
  body .elementor-location-header,
  body .main-header,
  body .header,
  body .navbar,
  body .nav-wrapper{
    max-width:100%!important;
    overflow:visible!important;
    z-index:9999!important;
  }

  /* Purple menu button / theme mobile toggle */
  body button.menu-toggle,
  body .menu-toggle,
  body .mobile-menu-toggle,
  body .navbar-toggle,
  body .ast-menu-toggle,
  body .main-navigation-toggle,
  body [aria-controls*="menu"],
  body [class*="mobile"][class*="toggle"],
  body [class*="menu"][class*="toggle"]{
    border-radius:16px!important;
    min-height:44px!important;
    min-width:70px!important;
    padding:11px 16px!important;
    font-weight:1000!important;
    box-shadow:0 12px 28px rgba(120,45,255,.22)!important;
    z-index:10002!important;
  }

  /*
   * Style common opened mobile menu containers.
   * This targets WP menus, theme menus, Elementor menu, Astra menus and custom Biogurukul menus.
   */
  body .main-navigation.toggled ul,
  body .main-navigation.toggled .menu,
  body .main-navigation ul[aria-expanded="true"],
  body .main-navigation .menu[aria-expanded="true"],
  body .primary-navigation-open .primary-menu-container,
  body .menu-open .primary-menu-container,
  body .mobile-menu-open .primary-menu-container,
  body .nav-menu,
  body .primary-menu,
  body .menu,
  body .sub-menu,
  body .children,
  body .elementor-nav-menu--dropdown,
  body .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown,
  body .ast-mobile-popup-content,
  body .ast-mobile-header-content,
  body .mega-menu-wrap .mega-menu{
    max-width:calc(100vw - 0.2mm)!important;
  }

  /*
   * The white menu panel shown in screenshot:
   * make it full usable width, no awkward small left pills.
   */
  body .main-navigation.toggled,
  body .main-navigation.toggled .menu,
  body .primary-menu-container,
  body .mobile-menu,
  body .mobile-nav,
  body .responsive-menu,
  body .elementor-nav-menu--dropdown,
  body .ast-mobile-popup-content,
  body .ast-mobile-header-content,
  body .mega-menu-wrap{
    border-radius:22px!important;
  }

  body .main-navigation.toggled ul.menu,
  body .main-navigation.toggled .nav-menu,
  body .mobile-menu ul,
  body .mobile-nav ul,
  body .responsive-menu ul,
  body .elementor-nav-menu--dropdown ul,
  body .ast-mobile-popup-content ul,
  body .ast-mobile-header-content ul,
  body .mega-menu-wrap .mega-menu{
    width:calc(100vw - 0.2mm)!important;
    max-width:calc(100vw - 0.2mm)!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:12px!important;
    background:#fff!important;
    border:1px solid #e5eaf3!important;
    border-radius:24px!important;
    box-shadow:0 18px 50px rgba(16,24,40,.16)!important;
    overflow:hidden!important;
  }

  /*
   * If theme menu is inside a rounded white box, make every item full width.
   */
  body .main-navigation.toggled li,
  body .mobile-menu li,
  body .mobile-nav li,
  body .responsive-menu li,
  body .elementor-nav-menu--dropdown li,
  body .ast-mobile-popup-content li,
  body .ast-mobile-header-content li,
  body .mega-menu-wrap .mega-menu li{
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    margin:0 0 8px 0!important;
    padding:0!important;
    list-style:none!important;
    border:0!important;
  }

  body .main-navigation.toggled a,
  body .mobile-menu a,
  body .mobile-nav a,
  body .responsive-menu a,
  body .elementor-nav-menu--dropdown a,
  body .ast-mobile-popup-content a,
  body .ast-mobile-header-content a,
  body .mega-menu-wrap .mega-menu a{
    width:100%!important;
    max-width:100%!important;
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    background:#f8faff!important;
    color:#15172f!important;
    text-decoration:none!important;
    font-weight:1000!important;
    font-size:16px!important;
    line-height:1.15!important;
    box-shadow:none!important;
    white-space:normal!important;
  }

  body .main-navigation.toggled a:hover,
  body .main-navigation.toggled a:focus,
  body .mobile-menu a:hover,
  body .mobile-menu a:focus,
  body .elementor-nav-menu--dropdown a:hover,
  body .elementor-nav-menu--dropdown a:focus{
    background:#eef4ff!important;
    color:#2357f5!important;
  }

  /*
   * Submenus: do not show weird half-width nested boxes.
   */
  body .main-navigation.toggled .sub-menu,
  body .main-navigation.toggled .children,
  body .mobile-menu .sub-menu,
  body .mobile-menu .children,
  body .mobile-nav .sub-menu,
  body .mobile-nav .children,
  body .responsive-menu .sub-menu,
  body .responsive-menu .children,
  body .elementor-nav-menu--dropdown .sub-menu,
  body .ast-mobile-popup-content .sub-menu,
  body .ast-mobile-header-content .sub-menu,
  body .mega-menu-wrap .mega-sub-menu{
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0 0!important;
    padding:8px!important;
    background:#fff!important;
    border:0!important;
    border-radius:18px!important;
    box-shadow:none!important;
    position:static!important;
  }

  body .main-navigation.toggled .sub-menu a,
  body .mobile-menu .sub-menu a,
  body .mobile-nav .sub-menu a,
  body .responsive-menu .sub-menu a,
  body .elementor-nav-menu--dropdown .sub-menu a,
  body .ast-mobile-popup-content .sub-menu a,
  body .ast-mobile-header-content .sub-menu a,
  body .mega-menu-wrap .mega-sub-menu a{
    min-height:44px!important;
    padding:12px 14px!important;
    font-size:14px!important;
    background:#f4f7ff!important;
    color:#344054!important;
  }

  /*
   * Hide duplicate second visible menu lists when both theme menu and cloned menu appear.
   * Keep the first real header menu visible.
   */
  body.bgk-single-mobile-menu-ready .bgk-cloned-duplicate-menu,
  body.bgk-single-mobile-menu-ready .bgk-duplicate-mobile-menu,
  body.bgk-single-mobile-menu-ready .bgk-extra-mobile-menu{
    display:none!important;
  }

  /*
   * If old plugin already injected Generate Test in nav multiple times, show only first.
   */
  body .menu-item.bgk-menu-auto-test + .menu-item.bgk-menu-auto-test,
  body .menu-item.bgk-menu-generate-test + .menu-item.bgk-menu-generate-test{
    display:none!important;
  }

  /*
   * Make menu content not cover logo badly.
   */
  body .site-branding,
  body .custom-logo-link,
  body .site-logo,
  body .logo,
  body img.custom-logo{
    max-width:100%!important;
    height:auto!important;
  }

  /*
   * Menu panel z-index should be above page cards but below no extra floating plugin menu.
   */
  body .main-navigation,
  body .primary-navigation,
  body .mobile-menu,
  body .elementor-nav-menu--dropdown,
  body .ast-mobile-popup-content{
    z-index:10000!important;
  }

  /*
   * 0.1mm edge-safe layout retained.
   */
  body,
  body .site,
  body #page,
  body .site-content,
  body .content-area,
  body .site-main,
  body main,
  body article,
  body .entry-content{
    padding-left:0.1mm!important;
    padding-right:0.1mm!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
}

/* Smaller phones */
@media(max-width:430px){
  body .main-navigation.toggled ul.menu,
  body .main-navigation.toggled .nav-menu,
  body .mobile-menu ul,
  body .mobile-nav ul,
  body .responsive-menu ul,
  body .elementor-nav-menu--dropdown ul,
  body .ast-mobile-popup-content ul,
  body .ast-mobile-header-content ul,
  body .mega-menu-wrap .mega-menu{
    padding:10px!important;
    border-radius:22px!important;
  }

  body .main-navigation.toggled a,
  body .mobile-menu a,
  body .mobile-nav a,
  body .responsive-menu a,
  body .elementor-nav-menu--dropdown a,
  body .ast-mobile-popup-content a,
  body .ast-mobile-header-content a,
  body .mega-menu-wrap .mega-menu a{
    min-height:48px!important;
    font-size:15px!important;
    padding:13px 14px!important;
  }
}