/*
  Main mobile menu style
  Default style for mobile menu
  Further styling; link pseudo class colors, font, background and border done using 
  main menu style page in administrator console
*/

div#mobile_menu
{
  display: none;
  position: relative;
  width: 28px;
  margin-right: 4px;
  padding: 4px;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  z-index: 10;
  white-space: nowrap;
  cursor: pointer;
  font-size: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

nav#mobile_menu *
{
  position: relative;
  -webkit-box-sizing: border-box; /* box-sizing not inherited, so repeate here*/
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div#mobile_menu img
{
  display: block;
  align-self: flex-end;
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
}

div#mobile_menu nav#topnav
{
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  margin-top: .2em;
  top: 100%;
  right: 0;
  visibility: hidden;
  opacity: 0;
  max-width: 0;
  width: auto;

  transition: max-width 0.5s linear 0s, opacity 0.5s linear 0s, visibility 0s linear 0s;
  -webkit-transition: max-width 0.5s linear 0s, opacity 0.5s linear 0s, visibility 0s linear 0s;
  -moz-transition: max-width 0.5s linear 0s, opacity 0.5s linear 0s, visibility 0s linear 0s;
  -o-transition: max-width 0.5s linear 0s, opacity 0.5s linear 0s, visibility 0s linear 0s;

  z-index: 110;
}
/*
div#mobile_menu nav#topnav,
div#mobile_menu nav#topnav div.mm_txt
{
  padding: 4px;
  border: 1px dotted gray;
  border-radius: 4px;
}
*/
div#mobile_menu a
{
  display: flex;
  align-items: center;
  padding-left: 6px;  /* corresponds to div.hover_flag width */
  text-decoration: none;
}

div#mobile_menu nav.subnav
{
  position: relative;
  z-index: 120;
  padding:4px 6px 4px 8px; /* corresponds to div#mobile_menu a */
}

div#mobile_menu a,
div#mobile_menu nav.subnav
{
  padding:4px 8px 4px 10px;  
}

div#mobile_menu nav.subnav div
{
  display: flex;
  position: absolute;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  visibility: hidden;
  opacity: 0.0;
  margin: 0;
  text-align: left;

  top: 20%;
  right: 102%;

  /*border: 1px dotted gray;*/
  border-top-style: none;

  background-color: transparent;

  -webkit-transition: all 0.4s ease-in-out 0.0s;
  -moz-transition: all 0.4s ease-in-out 0.0s;
  -ms-transition: all 0.4s ease-in-out 0.0s;
  -o-transition: all 0.4s ease-in-out 0.0s;
  transition: all 0.4s ease-in-out 0.0s;
}

div#mobile_menu div.hover_flag
{
  position: absolute;
  left: 0;
  top: 0 !important;
  width: 6px;
  height: 100%;
}

div#mobile_menu nav nav:hover div.hover_flag
{
  background: #eeeeee;
}

div#mobile_menu nav nav:hover > div      /* make mobile visible */
{
  visibility: visible;
  opacity: 1.0;
  z-index: 3;  /* without this ipad, iphone menu is broken but ok on all others */
}

/* shows mobile menu when bar menu hides */
@media screen and ( max-width: 800px )
{
  div#mobile_menu { display: flex; }
}