/*#region Menu structure */
/* https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp */

:root 
{
  --menu_background:darkgreen;
}


.navbar /* Bar across the page */
{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--navbar_height);
  display: flex;
  z-index: 100;
  padding: 0 10px;
  box-sizing: border-box;

  overflow: visible;
  background-color: var(--menu_background);
  justify-content: center;
  align-items: center;
  text-align: center; 
}

.navbar a  /* All a inside the top bar and descendents */
{
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
  border: 2px solid var(--menu_background);
  /* Border colour the same as background to prevent jumping on hover */
}

.dropdown /* div inside the top bar */
{
  overflow: visible;
  width: 120px;
  padding: 0px 8px;
  z-index: 2000;
  /* border: none; */
}

.dropdown .dropbtn/* Buttons inside divs in top row */
{
  font-size: 16px;
  border: 2px solid var(--menu_background);
  /* Border colour the same as background to prevent jumping on hover */
  outline: none;
  margin: 0 1px;
  color: white;
  padding: 8px 8px;
  background-color: inherit;
  font-family: inherit;
  width: 120px;
  overflow: visible;
  box-sizing: border-box;
}



.navbar a:hover,
.dropdown:hover .dropbtn:hover 
{
  border: 2px solid white;
  background-color: var(--menu_background);
}

.dropdown-content 
{
  display: none;
  position: absolute;
  background-color: var(--menu_background);
  min-width: 150px;
  box-shadow: 0px 8px 16px 4px rgba(0, 0, 0, 0.6);
  z-index: 3000;
}

.dropdown-content a,
.dropdown-content font 
{
  /* float: none; */
  color: white;
  padding: 2px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover 
{
  background-color: var(--menu_background);
  /* var(--dark_colour); */
}

.dropdown:hover .dropdown-content 
{
  border: 1px solid white;
  display: block;
}

/* Create a right-aligned (split) link inside the navigation bar */
.navbar a.split 
{
  /* float: right; */
  background-color: var(--border_colour);
  color: white;
}

/* #region styles for phone display */

/* ---------- Phone menu defaults ---------- */


.menu-toggle 
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4000;
    font-size: 20px;
    padding: 2px 14px;
    background-color: var(--menu_background);
    color: white;
    border: none;
    border-radius: 0px 12px 12px 0px; /*Top-left top-right bottom-right bottom-left  */
    cursor: pointer;
    height: var(--menu_button_height);
}

/* ---------- Desktop ---------- */

@media screen and (min-width: 769px) {
    .navbar {
        display: flex !important;
    }

    .menu-toggle,
    .sidebar {
        display: none !important;
    }
}

/* ---------- Phone ---------- */

@media screen and (max-width: 768px) {
    .navbar {
        display: none !important;
    }

    .menu-toggle {
        display: block !important;
    }

    .sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 220px;
        /* height: 100dvh; */
        height: calc(100dvh - var(--footerbar_height));
        z-index: 5000;

        /* border: 4px double white; */
        box-sizing: border-box;
        border: 3px solid gold;
        /* box-shadow: inset 0 0 0 2px white; */
        overflow-y: auto;

        background-color: var(--menu_background);
        padding-top: 2px;

        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar-overlay 
    {
      display: none;

      position: fixed;
      inset: 0;

      z-index: 4999; /* Just below sidebar */
      background: rgba(0,0,0,0.2);
    }

    .sidebar-overlay.open 
    {
      display: block;
    }    

    .sidebar a
    {
        font-size: 16px;
        color: white;
        text-align: center;
    }

    .sidebar-dropdown 
    {
      display: block;
      width: 100%;
      padding: 12px 18px;
      text-align: left;
      text-decoration: underline;
      font-size: 18px;
      color: gold;
      /* font-weight: bold; */
      background: none;
      border: none;
      cursor: pointer;
      box-sizing: border-box;
  }

  .sidebar-dropdown-content 
  {
    display: none;
    background-color: var(--menu_background);
  }

  .sidebar-dropdown-content a 
  {
    display: block;
    box-sizing: border-box;

    width: 100%;
    padding: 8px 8px 8px 35px;
    text-align: left;

    font-size: 16px;
  }

  .closebtn 
  {
    position: absolute;
    right: 4px;
    top: 5px;

    width: 40px;
    height: 40px;

    font-size: 34px;
    line-height: 34px;

    padding: 0;
    border: 1px solid white;

    background: none;
    color: white;
    cursor: pointer;
  }
  
  .sidebar.open 
  {
        transform: translateX(0);
   }

  .sidebar-header 
  {
    position: relative;
    height: 50px;
    display: block;
    padding: 0 50px 0 10px;
    box-sizing: border-box;
  }

  .sidebar-title 
  {
    display: block;
    width: 100%;
    text-align: left !important;
    font-size: 24px;
    line-height: 50px;
    color: white;
    padding-left: 8px;
  }


}