:root {

  --nav-h-padding: 24px; /* Navigation content horizontal padding. */
  --navigation-width: 300px; /* Width of the side navigation bar. */
  --content-h-padding: 30px; /* Horizontal padding of the content. */

  --navtop-v-margin: 15px; /* Vertical margin. */
  --navtop-height: 30px; /* Height of it's content. */
  --navbar-height: calc(var(--navtop-v-margin) * 2 + var(--navtop-height));

  --pocket-logo-size: 55px;
  
  /* Colors */
  --color-title-underline: #d8dee4;
  --color-footer-font: #616161;
  --color-nav-section-hover: #5988bf;
  --color-nav-topics-border: #3b3b3b66;
  --color-scrollbar: #a0aec0;
  
  /* Font size */
  --fs-nav-title : 20px;
  --fs-nav-section: 16px;
  --fs-nav-topics: 14px;
  --fs-toc-title: 18px;
  --fs-toc-item: 15px;
  --fs-footer: 13px;
}

/* Scroll bar override (Not works with Firefox and IE) */
::-webkit-scrollbar {
  width:  var(--scroll-bar-size);
  height: var(--scroll-bar-size);
}
::-webkit-scrollbar-thumb { background: var(--color-scrollbar)  }

html {
  scroll-padding-top: var(--navbar-height);
}

/*****************************************************************************/
/* BASIC LAYOUT STYLES                                                       */
/*****************************************************************************/

#navigation {
  position: fixed;
  width: var(--navigation-width);
  height: 100vh;
  top: 0; bottom: 0;
  z-index: 1;
  overflow-y: auto;
  background-color: var(--color-theme);
  color: white;
  user-select: none;
}

#main {
  margin-left: var(--navigation-width);
  display: flex;
}

#content-body {
  padding: 0px var(--content-h-padding);
  flex: 1;
}

#table-of-content {
  position: sticky;
  top: 0;
  min-width: 300px;
  width: auto;
  max-width: 500px;
  height: 100vh;
}

/*****************************************************************************/
/* NAVIGATION                                                                */
/*****************************************************************************/

#navtop {
  padding: var(--nav-h-padding);
}

#nav-title {
  font-size: var(--fs-nav-title);
}

#pocket-logo {
  width: var(--pocket-logo-size);
  height: var(--pocket-logo-size);
}

/* Override the color to match the background. */
#pocket-logo path {
  fill:white !important;
}

#toggle-menu {
  display: none;
  cursor: pointer;
}

.nav-section {
  font-size: var(--fs-nav-section);
  font-weight: bolder;
  padding: 8px var(--nav-h-padding);

  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nav-section:hover, .nav-topics li:hover {
  background-color: var(--color-nav-section-hover);
}

.nav-section .collapse-arrow {
  transform: rotate(180deg);
}

.nav-section.collapsed .collapse-arrow {
  transform: rotate(0deg);
}

.nav-topics.collapsed {
  display: none;
}

.nav-topics a {
  font-size: var(--fs-nav-topics);
  font-weight: normal;
  padding: 6px 0px 6px 15px;
  margin-left: var(--nav-h-padding);
  border-left: 2px solid var(--color-nav-topics-border);

  display: block;
  text-decoration: none;
}

/*****************************************************************************/
/* TABLE OF CONTENT                                                          */
/*****************************************************************************/

#table-of-content {
  padding: 30px 30px 0px 10px;
}

#table-of-content h3 {
  margin-bottom: 10px;
  font-size: var(--fs-toc-title);
}

#table-of-content li {
  font-size: var(--fs-toc-item);
  margin-top: 5px;
  font-weight: 300;
}

#content-footer {
  font-weight: bolder;
  font-size: var(--fs-footer);
  margin-top: 30px;
  padding-top: 10px;
  margin-bottom: 30px;
  border-top: 1px solid var(--color-title-underline);
  color: var(--color-footer-font);
}

/*****************************************************************************/
/* MARKDOWN CONTENT                                                          */
/*****************************************************************************/

#content-body h1 { /* h1 are page titles. */
  font-size: 32px;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-title-underline);
}

#content-body h2 { /* h2 are function names as title. */
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-title-underline);
}

#content-body h3 { /* h3 are sub heading inside a topic. */
  font-size: 19px;
  margin: 10px 0px;
}

#content-body p {
  margin-top: 16px;
  margin-bottom: 16px;
  line-height: 26px;
}

#content-body ol, #content-body ul {
  padding-left: 32px;
  margin-bottom: 16px;
}

#content-body li {
  margin-top: 8px;
}

/* Since content body <a> tags are auto generated, We cannot (mybe possible)
  add the link classes, so we're re-defining the link style here. */

#content-body a:not(.anchor) {
  color: var(--color-link);
}

#content-body a:not(.anchor):hover {
  text-decoration: underline;
}

/*****************************************************************************/
/* MEDIA SIZE OVERRIDE                                                       */
/*****************************************************************************/

@media screen and (max-width: 995px) {
  #navigation {
    height: 100vh;
    width: 100%;
    bottom: auto;
  }
  
  #navigation.collapsed {
    height: auto;
  }

  #navtop {
    padding: var(--navtop-v-margin) 20px;
  }

  #pocket-logo {
    display: none;
  }

  #navigation.collapsed #navtree {
    display: none;
  }

  #table-of-content {
    /* Match the content body padding. */
    padding-left: var(--content-h-padding);
    top: var(--navbar-height);
  }

  #main {
    margin-top: var(--navbar-height);
    margin-left: 0; /* No more sidebar. */
  }

  #toggle-menu {
    display: block;
  }
}

@media screen and (max-width: 770px) {
  #main {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
  }
  #table-of-content {
    position: relative;
    top: 0;
    height: auto;
  }
}