/*
 * Menu Bar
 */
:root {
  --menu-color: blue;
  --menu-selected-color: white;
  --menu-selected-bg-color: blue;
  --menu-hover-color: blue;
  --menu-hover-bg-color: #e0f0ff;
  --menu-border-color: blue;
}

@media (prefers-color-scheme: dark) {
    :root {
      --menu-color: white;
      --menu-selected-color: white;
      --menu-selected-bg-color: darkblue;
      --menu-hover-color: white;
      --menu-hover-bg-color: #fc6c02; /* orange */
      --menu-border-color: #fc6c02;
    }
}

/* Select either the desktop or the mobile menu */
.menu-phone { display: none; }
@media screen and (max-width: 480px) {
    .menu-phone { display: block; }
    .menu-desktop { display: none; }
}

div.menu * {
    z-index: 100;
}

/*
 * Generic styling that holds for both desktop and mobile
 */
div.menu ul li {
  margin-left: -3px;
  margin-right: -3px;
  margin-bottom: -5px;
  display: inline-block;
}
div.menu ul li a {
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: middle;
    height: 42px;
    min-height: 40px;
}
/* Main menu colors */
div.menu a:link, div.menu a:visited {
    /* Ignore the link colors for the rest of the pages in the menu bars. */
    color: inherit;
}
div.menu ul li:not(.selected) {
    color: var(--menu-color);
    /* Explicitely don't set background color for not selected menu items, to avoid the bottom
     * border from being overwritten on low-res displays
     */
    /*background-color: var(--bg-color);*/
}
div.menu ul li.selected {
    color: var(--menu-selected-color);
    background-color: var(--menu-selected-bg-color);
}
div.menu ul li:hover {
    color: var(--menu-hover-color);
    background-color: var(--menu-hover-bg-color);
}

/*
 * Desktop specific styling (submenu structure)
 */

div.submenu ul {
    display: none;
    border: 0.25px solid var(--menu-border-color);
    background: var(--bg-color);
    color: var(--menu-color);
}
div.menu ul li:hover div.submenu ul {
    display: table-cell;
    position: absolute;
}
div.menu ul li:hover div.submenu ul li {
    display: block;
}
div.submenu ul li:not(.selected) {
    color: var(--menu-color);
    background: var(--bg-color);
}
div.submenu ul li.selected {
    color: var(--menu-selected-color);
    background: var(--menu-selected-bg-color);
}
div.submenu ul li:hover {
    color: var(--menu-hover-color);
    background: var(--menu-hover-bg-color);
}
@media screen and (max-width: 1050px) {
    div.menu ul {
        margin-left: 0px;
    }
    div.menu ul li a {
        padding-left: 10px;
        padding-right: 10px;
    }
    div.menu-desktop > ul > li:first-child {
        padding-left: 5px;
    }
}
div.menu .menu-desktop ul li:hover {
    color: var(--menu-hover-color);
    background-color: var(--menu-hover-bg-color);
}
div.submenu ul li {
    margin: 0;
}

/*
 * Phone specific styling
 */
#menuicon {
    background-color: var(--menu-selected-bg-color);
    color: var(--menu-selected-color);
    height: 40px;
    vertical-align: middle;
    width: 100%;
}
.menu-phone span.menutext {
    /*display: inline-block;*/
    display: inline-grid;
    /*background-color: green;*/
    color: var(--menu-selected-color);
    height: 40px;
    /*margin: 10px;*/
    vertical-align: middle;
}
#menubar.showmenu .menu-phone {
    background-color: var(--bg-color);
    color: var(--menu-color);
}
#menubar:not(.showmenu) .menu-phone img.menuicon {
    /* invert changes the menu icon from black to white */
    filter: invert(1);
}
@media (prefers-color-scheme: dark) {
    /* In dark mode, always invert the menu icon */
    #menubar .menu-phone img.menuicon {
        /* invert changes the menu icon from black to white */
        filter: invert(1);
    }
}
#menubar.showmenu .menu-phone span.menutext {
    background-color: var(--bg-color);
    color: var(--menu-color);
}

@media screen and (max-width: 480px) {
    div.menu ul {
        height: 40px;
        width: 100%;
        /*padding: 0;
        margin: 0;*/
    }
    div.menu ul li {
        /*display: inline-block;*/
        display: none;
        padding-left: 36px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: -5px;
        height: 40px;
        width: 100%;
    }
    div.submenu ul li {
        display: inline-block;
    }
    /*
    div.menu ul li:first-child {
        padding-left: 0px;
    }*/
    div.submenu ul li a {
        display: table-cell;
        border-collapse: collapse;
        border-spacing: 0px;
        vertical-align: middle;
        height: 40px;
        min-height: 40px;
        width: 100%;
    }
    div.menu ul li:not(.selected) {
        display: none;
    }
    div.menu ul li a.mainmenu-item {
        display: none;
        height: 0px;
    }
    .mainitem {
        display: none;
    }
}
.menuicon {
    padding: 0;
    display: none;
    margin:0;
}
@media screen and (max-width: 480px) {
    #menubar {
        display: flex;
    }
    #menubar ul li:not(.selected) {
        display: none;
    }
    #menubar {
        vertical-align: top;
    }
    .menuicon {
        display: inline-block;
        width: 40px;
    }
    #menubartext {
        flex: 1;
    }
    .menuicon {
        width: 40px;
        height: 36px;
        display: inline-block;
    }
}

#menubar {
  background: var(--bg-color);
  width: 100%;
  margin-top: 0px;
  padding-top: 0px;
  min-height: 40px;
  max-height: 100px;
  border-top: 0.25px solid var(--menu-border-color);
  border-bottom: 0.25px solid var(--menu-border-color);
}
@media screen and (max-width: 480px) {
    #menubar.showmenu {
        display: inline-block;
        background-color: var(--bg-color);
    }
    #menubar.showmenu ul {
        display: inline;
    }
    #menubar.showmenu ul li {
        display: inline-block;
    }
}
/* The sticky class is added to the menubar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement
   (as the navigation bar gets a new position at the top of the page (position:fixed and top:0)
   */
.undermenu {
    padding-top: 20px;
}