/* ---------- Sidebar (self-contained) ----------
   Uses theme variables from style.css when present:
   --accent, --accent-hover, --text, --text-soft, --muted,
   --surface, --border, --bar, --selected-bg, --selected-border,
   --sidebar-width, --page-gutter.
   Fallbacks are provided so this file also works on its own.
------------------------------------------------ */

.sidebar {
  min-width: 0;
  color: var(--text-soft, #b5bfce);
}

/* Navigation container */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* gap between sections (was 22px) */
}

/* Section */
.nav-section {
  display: flex;
  flex-direction: column;
}

/* Section title (clickable toggle) */
.nav-section h2.nav-section-title {
  margin: 0 0 3px;
  padding: 3px 18px 3px 8px;     /* right padding leaves room for arrow */
  position: relative;

  color: var(--accent, #f0a34a);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;

  cursor: pointer;
  user-select: none;
}

.nav-section h2.nav-section-title:hover {
  color: var(--accent-hover, #ffbd70);
}

.nav-section h2.nav-section-title:focus-visible {
  outline: 2px solid var(--accent, #f0a34a);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Arrow indicator */
.nav-section h2.nav-section-title::after {
  content: '▾';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  opacity: 0.7;
  transition: transform .15s ease;
}

.nav-section h2.nav-section-title[aria-expanded="false"]::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* Items container */
.nav-section-items {
  display: flex;
  flex-direction: column;
}

.nav-section-items.is-collapsed {
  display: none;
}

/* Nav links — matches the original static look */
.nav-link {
  display: block;
  width: 100%;

  padding: 3px 9px;

  color: var(--text-soft, #b5bfce);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;

  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;

  transition:
    background-color .14s ease,
    color .14s ease,
    border-color .14s ease,
    transform .14s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--accent-hover, #ffbd70);
  background: var(--selected-bg, #2a3342);
  border-left-color: var(--selected-border, #f0a34a);
  transform: translateX(2px);
  outline: none;
}

.nav-link.active {
  color: var(--text, #e9edf4);
  background: var(--selected-bg, #2a3342);
  border-left-color: var(--selected-border, #f0a34a);
  font-weight: 700;
}

html[data-theme="light"] .nav-link.active {
  color: #000;
}

/* Slight upward nudge to match the previous static layout */
.sidebar {
  margin-top: -24px;
}

/* ---------- Mobile: slide-in sidebar ---------- */

@media (max-width: 700px) {
  .sidebar {
    position: fixed;
    z-index: 20;
    top: 78px;                 /* sits below the sticky header on mobile */
    bottom: 0;
    left: 0;

    width: min(290px, 86vw);
    overflow-y: auto;
    padding: 24px 18px;
    margin-top: 0;             /* cancel the desktop nudge */

    background: var(--surface, #191e27);
    border-right: 1px solid var(--border, #343d4b);
    box-shadow: 8px 0 35px rgb(0 0 0 / 20%);

    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  .sidebar nav {
    gap: 8px;
  }

  .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #menu-toggle:checked ~ .page-layout .sidebar {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .nav-link,
  .nav-section h2.nav-section-title::after {
    transition-duration: .01ms !important;
  }
}