/* ============================================================
   Vertical Menu — naked (no modifier class)
   Hierarchical nav for use in the sidebar.
   Indentation is applied per nesting level.
   ============================================================ */

.vertical-menu {
  padding-block: 0;
}

.vertical-menu ul {
  list-style: none;
  padding-left: 0px;
}

/* Darker separator between top-level items */
.vertical-menu > ul > li + li {
  border-top: 1px solid var(--fg-subtle);
}

/* Light separator between parent and its children */
.vertical-menu ul ul {
  border-top: 1px solid var(--fg-faint);
}

/* Lighter separator between child items */
.vertical-menu ul ul li + li {
  border-top: 1px solid var(--fg-faint);
}

/* All links share base style */
.vertical-menu a {
  display: block;
  padding: 0.35rem 0.5rem;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--element-radius);
}

.vertical-menu a:hover {
  background: var(--fg-ghost);
}

.vertical-menu a[aria-current="page"] {
  background: var(--fg);
  color: var(--bg);
}

/* Indentation per nesting level */
.vertical-menu ul ul a       { padding-left: 1rem; }
.vertical-menu ul ul ul a    { padding-left: 2rem; }
.vertical-menu ul ul ul ul a { padding-left: 3rem; }

/* Section labels (non-link headings) */
.vertical-menu li > strong {
  display: block;
  padding: 0.6rem 0.5rem 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}