/* ── Nav sidebar toggle ──────────────────────────────────────────────
 * Allows users to collapse/expand the primary navigation sidebar.
 * Only active above Material's mobile breakpoint (76.25em / 1220px);
 * below that, Material uses its own hamburger menu.
 *
 * The toggle button sits at the top of the sidebar. When collapsed,
 * the nav content hides but the sidebar remains as a narrow strip
 * so the button stays accessible.
 * ─────────────────────────────────────────────────────────────────── */

/* ── Smooth transition on sidebar ─────────────────────────────────── */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    transition: width 0.25s ease;
  }

  .md-sidebar--primary .md-sidebar__inner {
    transition: opacity 0.2s ease;
  }

  /* ── Suppress transitions on page load ───────────────────────────── */
  body.nav-no-transition .md-sidebar--primary,
  body.nav-no-transition .md-sidebar--primary .md-sidebar__inner,
  body.nav-no-transition .md-sidebar--primary .md-nav,
  body.nav-no-transition .md-sidebar--primary .md-nav__title {
    transition: none !important;
  }

  /* ── Collapsed state: narrow strip with just the toggle button ───── */
  body.nav-collapsed .md-sidebar--primary {
    width: 2.5rem;
  }

  body.nav-collapsed .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow: hidden;
  }

  body.nav-collapsed .md-sidebar--primary .md-nav,
  body.nav-collapsed .md-sidebar--primary .md-nav__title {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }

  /* Hide the label text when collapsed (just show the icon) */
  body.nav-collapsed .nav-toggle__label {
    display: none;
  }
}

/* ── Toggle button at top of sidebar ───────────────────────────────── */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  margin: 0.25rem 0 0.5rem 0;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--md-default-fg-color--light, #666);
  cursor: pointer;
  outline-color: var(--md-accent-fg-color, #e53935);
  transition: color 0.15s, background-color 0.15s;
  font-family: var(--md-text-font-family, inherit);
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
}

.nav-toggle:hover {
  color: var(--md-default-fg-color, #333);
  background-color: var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.04));
}

.nav-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  fill: currentColor;
}

.nav-toggle__label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* When collapsed, reduce padding to icon-only size */
body.nav-collapsed .nav-toggle {
  padding: 0.25rem;
  justify-content: center;
}

/* ── Hidden below Material's mobile breakpoint ─────────────────────── */
@media screen and (max-width: 76.1875em) {
  .nav-toggle {
    display: none !important;
  }
}