/* JR Mobile BuddyPress Nav Format v1.0.2 */

/* Mobile only */
@media (max-width: 782px){

  /* ---------------------------
     PRIMARY: nav#object-nav
     --------------------------- */
  #buddypress nav#object-nav,
  #buddypress nav#object-nav *{
    box-shadow: none !important;
  }

  #buddypress nav#object-nav{
    background: transparent !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  #buddypress nav#object-nav ul#member-primary-nav{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    list-style: none !important;
    background: transparent !important;
    border-radius: 16px !important;
  }

  #buddypress nav#object-nav ul#member-primary-nav > li{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #buddypress nav#object-nav ul#member-primary-nav > li > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: transparent !important;   /* remove grey behind text */
    border: 1px solid rgba(0,0,0,0.12) !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
  }

  /* Selected/current tab readability */
  #buddypress nav#object-nav ul#member-primary-nav > li.current > a,
  #buddypress nav#object-nav ul#member-primary-nav > li.selected > a,
  #buddypress nav#object-nav ul#member-primary-nav > li.current.selected > a{
    background: #3a3a3a !important;
    border-color: #3a3a3a !important;
    color: #ffffff !important;
  }

  /* Count bubble on selected tab */
  #buddypress nav#object-nav ul#member-primary-nav > li.current > a .count,
  #buddypress nav#object-nav ul#member-primary-nav > li.selected > a .count,
  #buddypress nav#object-nav ul#member-primary-nav > li.current.selected > a .count{
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    line-height: 1.1 !important;
  }

  /* ---------------------------
     SECONDARY: nav#subnav
     (slightly darker container)
     --------------------------- */
  #buddypress nav#subnav,
  #buddypress nav#subnav *{
    box-shadow: none !important;
  }

  #buddypress nav#subnav{
    margin-top: 10px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    background: rgba(0,0,0,0.04) !important; /* slightly darker than fully transparent */
    padding: 10px !important;
  }

  #buddypress nav#subnav ul#member-secondary-nav{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
  }

  #buddypress nav#subnav ul#member-secondary-nav > li{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #buddypress nav#subnav ul#member-secondary-nav > li > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    background: transparent !important; /* remove grey behind text */
    border: 1px solid rgba(0,0,0,0.14) !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
  }

  /* Selected/current sub-tab readability */
  #buddypress nav#subnav ul#member-secondary-nav > li.current > a,
  #buddypress nav#subnav ul#member-secondary-nav > li.selected > a,
  #buddypress nav#subnav ul#member-secondary-nav > li.current.selected > a{
    background: #2f2f2f !important;
    border-color: #2f2f2f !important;
    color: #ffffff !important;
  }

  /* Ensure any nested count bubble stays readable */
  #buddypress nav#subnav ul#member-secondary-nav > li.current > a .count,
  #buddypress nav#subnav ul#member-secondary-nav > li.selected > a .count,
  #buddypress nav#subnav ul#member-secondary-nav > li.current.selected > a .count{
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    line-height: 1.1 !important;
  }

}