/*
 * 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%;
}
/* The navigation bar gets a new position at the top of the page (position:fixed and top:0),
   which takes it out of the flow and pulls everything below it up by its own height. The
   script gives that exact height back as padding, so nothing moves and nothing is covered;
   this is only the fallback for when the script has not set it yet. */
.undermenu {
    padding-top: 20px;
}