/* Sidebar navigation hierarchy
 *
 * Default Material theme renders section labels and page links with too
 * similar styling, which makes it hard to tell what is clickable. This
 * sheet differentiates the two.
 */

/* Section labels: uppercase, prominent, with a top divider */
.md-nav--lifted > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-nav__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 1;
  color: var(--md-primary-fg-color--light);
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  margin-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  cursor: default;
}

/* First section in the sidebar should not have a divider above it */
.md-nav__list > .md-nav__item:first-child > .md-nav__link.md-nav__title,
.md-nav--lifted > .md-nav__list > .md-nav__item:first-child .md-nav__link.md-nav__title {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Page links: full weight, not uppercased, clear hover affordance */
.md-nav__item .md-nav__link:not(.md-nav__title) {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 1;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  border-top: none;
  margin-top: 0;
  cursor: pointer;
  transition: color 120ms ease, opacity 120ms ease;
}

.md-nav__item .md-nav__link:not(.md-nav__title):hover {
  opacity: 1;
  color: var(--md-accent-fg-color);
}

/* Active page link: full opacity, accent color, weight 600 */
.md-nav__link--active:not(.md-nav__title),
.md-nav__item .md-nav__link--active:not(.md-nav__title) {
  opacity: 1;
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

/* Light theme tweaks: divider is darker on a light background */
[data-md-color-scheme="default"] .md-nav--lifted > .md-nav__list > .md-nav__item--section > .md-nav__link,
[data-md-color-scheme="default"] .md-nav__title {
  border-top-color: rgba(0, 0, 0, 0.1);
  color: var(--md-primary-fg-color);
  opacity: 1;
}

/* Sidebar scrollbar: same hue as active nav links, softer visual weight */
.md-sidebar__scrollwrap {
  scrollbar-color: color-mix(in srgb, var(--md-primary-fg-color--light) 60%, transparent) transparent;
  scrollbar-width: thin;
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 6px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--md-primary-fg-color--light) 60%, transparent);
  border-radius: 3px;
}

.md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--md-primary-fg-color--light) transparent;
}

.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
  background-color: var(--md-primary-fg-color--light);
}

/* Heading permalinks (pilcrow): hidden until the heading is hovered */
.md-typeset .headerlink {
  opacity: 0;
  transition: opacity 120ms ease;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink,
.md-typeset .headerlink:focus {
  opacity: 1;
}