/* Synthkin GVM Navigation 2A — additive collapsible sidebar */

.sidebar .nav-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar .nav-section-toggle::after {
  content: "⌄";
  display: inline-block;
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  transition: transform .18s ease;
}

.sidebar .nav-section-toggle[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.sidebar .nav-section-toggle:hover {
  color: var(--ink);
}

.sidebar .nav-section-toggle:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
  border-radius: 6px;
}

.sidebar .nav-list[hidden] {
  display: none !important;
}

#home,
#discover,
#stations,
#travel,
#local-library,
#recent,
#free-music,
#community {
  scroll-margin-top: 96px;
}

@media (max-width: 820px) {
  .sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 100dvh;
  }

  .sidebar .nav-section-toggle {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-section-toggle::after {
    transition: none;
  }
}