/* Sidebar hierarchy.
 *
 * With `navigation.sections`, Material renders the two top-level groups ("For participants",
 * "For organizers") as <label class="md-nav__link"> inside li.md-nav__item--section, using very
 * nearly the same styling as the page links beneath them -- so the sidebar reads as one flat list
 * and you cannot tell a group from a page at a glance. This makes the two levels look different:
 * groups become small uppercase headers with a rule above; pages become an indented, ruled list.
 *
 * Everything uses Material's own CSS variables, so it follows the light/dark toggle.
 */

/* ---- level 1: section headers ------------------------------------------------------------- */

.md-nav--primary .md-nav__item--section {
  margin: 1.75em 0 0.4em;
}

.md-nav--primary .md-nav__item--section:first-of-type {
  margin-top: 1.1em;
}

/* The clickable label for a section: turn it into a quiet header, not a link. */
.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__item--section > label.md-nav__link {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  padding-top: 0.7em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  cursor: default;
}

/* Section headers are labels, not destinations -- don't imply otherwise on hover. */
.md-nav--primary .md-nav__item--section > .md-nav__link:hover {
  color: var(--md-default-fg-color--light);
}

/* ---- level 2: the pages inside a section --------------------------------------------------- */

/* One vertical rule ties a section's pages together and sets them in from the header. */
.md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
  margin-left: 0.35rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

.md-nav--primary .md-nav__item--section .md-nav__link {
  font-size: 0.72rem;
  padding-block: 0.28em;
}

/* The current page: accent text plus a marker on the rule, so position is obvious at a glance. */
.md-nav--primary .md-nav__item--section .md-nav__link--active {
  font-weight: 700;
  color: var(--md-accent-fg-color);
}

.md-nav--primary .md-nav__item--section .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.62rem;
  top: 0.45em;
  bottom: 0.45em;
  width: 2px;
  border-radius: 1px;
  background: var(--md-accent-fg-color);
}

.md-nav--primary .md-nav__item--section .md-nav__item {
  position: relative;
}

/* ---- top-level pages outside any section (Home) -------------------------------------------- */

.md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  font-weight: 600;
}

/* On mobile the sidebar is a drawer with its own layout; leave Material's styling alone there. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__item--section > .md-nav__link,
  .md-nav--primary .md-nav__item--section > label.md-nav__link {
    border-top: none;
    text-transform: none;
    font-size: 0.8rem;
    letter-spacing: normal;
  }
  .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
}