/* Pages+ base vars */


/* Defaults (can be overridden per-widget) */
.pages-plus{
  --pp-gap: 0px;
  --pp-indent: 16px;

  --pp-ol-l1: decimal;
  --pp-ol-l2: lower-alpha;
  --pp-ol-l3: lower-roman;

  --pp-bul-l1: disc;
  --pp-bul-l2: circle;
  --pp-bul-l3: square;

  /* Tree look (controls can override all of these) */
  --pp-line-w: 1px;
  --pp-line-color: currentColor;
  --pp-line-opacity: .35;

  /* NEW: tree geometry */
  --pp-text-indent: 1.25em;       /* where link text starts */
  --pp-line-left-vert: 2px;       /* vertical spine X position */
  --pp-line-left-branch: -10px    /* horiz branch start */
  --pp-branch-gap: 0.25em;        /* space before text */
  --pp-branch-top: 0.75em;        /* your vertical position */
  
}

/* Row gap only when requested */
.pages-plus .pp-root > li + li { margin-top: var(--pp-gap); }

/* Links */
.pages-plus a { text-decoration: none; }
.pages-plus a:hover { text-decoration: none; }

/* Current highlighting (via inline selectors from controls) */
.pages-plus .is-current > a { font-weight: 600; }

/* ------------------  Mode: BULLETS  ------------------ */
.pp-mode-bullets .pp-root{ list-style: var(--pp-bul-l1) outside; }
.pp-mode-bullets .pp-root ul{ list-style: var(--pp-bul-l2) outside; margin-left: var(--pp-indent); }
.pp-mode-bullets .pp-root ul ul{ list-style: var(--pp-bul-l3) outside; }

/* ------------------  Mode: NUMBERS  ------------------ */
.pp-mode-numbers .pp-root{ list-style: var(--pp-ol-l1) outside; }
.pp-mode-numbers .pp-root ol{ list-style: var(--pp-ol-l2) outside; margin-left: var(--pp-indent); }
.pp-mode-numbers .pp-root ol ol{ list-style: var(--pp-ol-l3) outside; }

/* ------------------  Mode: NONE  ------------------ */
.pp-mode-none .pp-root,
.pp-mode-none .pp-root ul,
.pp-mode-none .pp-root ol{
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.pp-mode-none .pp-root ul,
.pp-mode-none .pp-root ol{ margin-left: var(--pp-indent); }

/* ------------------  Mode: TREE  ------------------ */
.pp-mode-tree .pp-root,
.pp-mode-tree .pp-root ul{
  list-style: none;
  margin: 0;
  padding-left: var(--pp-text-indent);
  position: relative;
}

/* vertical spine on child <ul> */
.pp-mode-tree .pp-root ul::before{
  content: "";
  position: absolute;
  left: var(--pp-line-left-vert);
  top: 0.5em;
  bottom: 0.5em;
  border-left: var(--pp-line-w, 1px) solid var(--pp-line-color, currentColor);
  opacity: var(--pp-line-opacity, .35);
  pointer-events: none;
  z-index: 0;
}

/* horizontal connector ends BEFORE text start */
.pp-mode-tree .pp-root li{
  position: relative;
}
.pp-mode-tree .pp-root li::before{
  content: "";
  position: absolute;
  left: var(--pp-line-left-branch);
  top: var(--pp-branch-top);
  /* width = max(text-indent − line-left − gap, 0) with safe fallbacks */
  width: max(
    calc(
      var(--pp-text-indent) - var(--pp-line-left) - var(--pp-branch-gap)),
      0px
  );
  border-top: var(--pp-line-w) solid var(--pp-line-color);
  opacity: var(--pp-line-opacity);
  pointer-events: none;
  z-index: 0;
}
/* ensure link paints above the line */
.pp-mode-tree .pp-root a{ position: relative; z-index: 1;}

.pp-mode-tree .pp-root > li + li{ margin-top: var(--pp-gap); }


/* ------------------  Mode: Accordian  ------------------ */
.pages-plus .pp-toggle{
  display: inline-block;
  width: .8em; height: .8em;
  margin-right: .4em;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.pages-plus .pp-toggle::before,
.pages-plus .pp-toggle::after{
  content: ""; position: absolute; background: currentColor;
}
.pages-plus .pp-toggle::before{ top:50%; left:20%; right:20%; height:1px; transform:translateY(-50%); }
.pages-plus .pp-toggle::after { left:50%; top:20%; bottom:20%; width:1px; transform:translateX(-50%); }
.pages-plus li.pp-open > .pp-toggle::after{ display:none; }

.pages-plus .pp-children{ display:none; }
.pages-plus li.pp-open > .pp-children{ display:block; }