/*
  Tree view layout styles.

  Notes:
  - `ul.tree-view` and its nested uls use `width: fit-content` so the
    tree grows horizontally as needed. Wrap the tree in
    `.fixed-width-container` to enable horizontal scrolling when the
    content overflows the page width.
  - The `.fixed-width-container` class lives in `universal.css` and
    provides the scrolling behavior and a "grab" cursor. For
    click-and-drag scrolling you must also include
    `assets/js/drag-scroll.js` on the page.
*/
ul.tree-view,
ul.tree-view ul {
  list-style: none;
  margin: 0;
  padding-left: 1.5rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  width: fit-content;
}
.tree-view-container {
  min-width: max-content;
}
ul.tree-view li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.25rem; /* spacing moved to padding */
  font-family: Georgia, "Times New Roman", Times, serif;
  width: fit-content;
  text-transform: uppercase;
}
ul.tree-view {
  padding-left: 0px;
}

/* Vertical line */
ul.tree-view li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--white);
}

/* Horizontal connector */
ul.tree-view li::after {
  content: "";
  position: absolute;
  top: 1.1em;
  left: 0;
  width: 1rem;
  height: 2px;
  background: var(--white);
}

/* Trim vertical line for last child only */
ul.tree-view li:last-child::before {
  height: 1.1em;
}

/* Root node cleanup */
ul.tree-view > li::before,
ul.tree-view > li::after {
  display: none;
}

/* Highlight styling */
/* Highlight horizontal connector into node */
ul.tree-view li.highlight::after {
  background: var(--secondary-color);
}

/* Highlight ONLY the vertical segment above the node */
ul.tree-view li.highlight::before {
  background: linear-gradient(
    to bottom,
    var(--secondary-color) 0,
    var(--secondary-color) 1.1em,
    var(--white) 1.1em,
    var(--white) 100%
  );
}