:root {
  --ensenso-logo-width: 300px;
  --main-nav-item-height: 3em;
  --main-nav-height-on-wide-screen: var(--main-nav-item-height);
  /*
    On a narrow screen the main navigation's items are listed vertically, each having
    a height of --main-nav-item-height, thus: 

      --main-nav-height-on-narrow-screen = number of main navigation items * --main-navigation-item-height

    This has to be adjusted if the number of items in the main navigation changes.
  */
  --main-nav-height-on-narrow-screen: 21em;

  --main-nav-background: var(--grey);
  --main-nav-item-content: black;
  --main-nav-item-content-on-hover: black;
  --main-nav-item-background-on-hover: #ddd;
  --main-nav-item-content-if-activ: black;
  --main-nav-item-background-if-activ: var(--lightest-grey);
  --main-nav-item-background-if-activ-on-hover: var(--light-grey);
  --side-nav-separator: var(--dark-grey);
}

.top {
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: var(--main-nav-height-on-wide-screen);
  background-color: var(--main-nav-background);
}

.top nav {
  height: 100%;
  display: inline;
}

.top ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.top ul li {
  float: left;
  height: 100%;
}

.top .main-nav {
  float: left;
}

.top .secondary {
  float: right;
}

.top a {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  color: var(--main-nav-item-content);
  font-weight: bold;
}

.top a.active {
  color: var(--main-nav-item-content-if-activ);
  background-color: var(--main-nav-item-background-if-activ);
}

.top a.active:hover {
  background-color: var(--main-nav-item-background-if-activ-on-hover);
}

.top a:hover:not(.no-hover, .active) {
  background-color: var(--main-nav-item-background-on-hover);
  color: var(--main-nav-item-content-on-hover);
}

.ensenso-logo {
  width: var(--ensenso-logo-width);
  max-height: 100%;
}

.ensenso-logo a {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.top .search {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 1em;
}

.community-logo {
  max-width: 100%;
  max-height: 100%;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.wy-nav-side {
  position: fixed !important;
  top: var(--main-nav-height-on-wide-screen);
}

.wy-side-scroll {
  padding: 1em 0em;
}

.wy-side-nav-search {
  display: none !important;
}

.wy-menu-vertical ul {
  margin-bottom: 1.7em;
}

.wy-menu-vertical p.caption {
  margin: 0;
}

.rst-content {
  padding-top: var(--main-nav-height-on-wide-screen);
}

.rst-content div[role="navigation"] {
  display: none;
}

/*
  Switch to a two-column layout with the main navigation and
  the secondary navigation in the left column and the conent
  in the right column.
*/
@media screen and (max-width: 1100px) {
  .top {
    width: 300px;
    height: auto;
    float: left;
  }

  .top a {
    padding-left: 1.5em;
  }

  .top .main-nav {
    float: none;
    display: block;
    min-height: var(--main-nav-height-on-wide-screen);
  }

  .top .main-nav li {
    float: none;
    min-height: var(--main-nav-item-height);
  }

  .top .main-nav a {
    height: var(--main-nav-item-height);
  }

  .top .secondary {
    float: left;
    height: var(--main-nav-item-height);
  }

  .wy-nav-side {
    top: var(--main-nav-height-on-narrow-screen);
  }

  .rst-content {
    padding-top: 0;
  }
}

/* 
  Switch to a single-column layout with a scrollable main navigation at 
  the top, the collapsed secondary navigation below and the content at 
  the bottom.

  The secondary navigation can be expanded. It is then shown as scrollable
  between the main navigation and the button for expanding/collapsing the 
  secondary navigation.
*/
@media screen and (max-width: 768px) {
  .top {
    position: static;
    width: 100%;
    float: none;
    max-height: 10em;
    overflow-y: scroll;
  }

  .top a {
    white-space: nowrap;
    overflow-x: hidden;
  }

  .wy-grid-for-nav {
    position: static;
  }

  .wy-nav-side {
    display: none;
    border-bottom: 1px solid var(--side-nav-separator);
    padding: 0em !important;
  }

  .wy-nav-side.shift {
    position: static !important;
    width: 100%;
    display: block;
  }

  .wy-nav-content-wrap.shift {
    position: static;
  }

  .wy-side-scroll {
    max-height: 10em;
  }

  .wy-menu-vertical ul:last-child {
    margin-bottom: 0em;
  }

  .wy-nav-top {
    display: flex;
    align-items: center;
    padding: 0em 1.5em;
    overflow: hidden;
  }

  .wy-nav-top i {
    font-size: 24px;
    margin-right: 1em;
  }

  .wy-nav-top a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Offset for link targets to account for the fixed navigation height. */
.wy-nav-content section[id],
.wy-nav-content .section[id],
.wy-nav-content .target[id],
.section span,
p.rubric {
  scroll-margin-top: var(--main-nav-height-on-wide-screen);
}