/* Base rules for the master UL that holds the whole list of level-1 topic LI items. Inside
any level-1 LI could be a level-2 UL containing one or more level-2 LI items. Inside any of 
those items could be a leve-3 UL containing one or more level-3 LI items, and so on, down to 
level 5. */
ul#i-dt-root,
ul#i-dt-root ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none;
  max-width: 100%;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* The root UL always has the i-visible class in desktop. A child UL is assigned the i-visible class
via JS when its parent LI element is expanded, then unassigned when the parent LI is collapsed. */
ul#i-dt-root.i-visible, 
ul#i-dt-root ul.i-visible {
  display: block;
}

/* Base rule for all items at all levels. Progressive left indent at each level. */
ul#i-dt-root li {
  display: block;
  position: relative;
  margin-left: var(--space-regular);
}

/* No left margin on top-level items (immediate children of root UL). */
ul#i-dt-root > li {
  margin-left: 0;
}

/* Base rule for all links at all levels, whether or not its LI parent has 
an expand/collapse icon because it has children ULs. */
ul#i-dt-root a {
  display: inline-block;
  color: var(--color-text);
  text-decoration: none;
  padding: calc(var(--space-tiny) * 1.5) 0 var(--space-tiny); 
  white-space: normal;
  margin-left: 20px; /* Make space for background collapse/expand icon */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Add a background on the currently selected li item. This will include all of its children,
which we don't want. So the rule after this one removes it from the children. */
ul#i-dt-root li.i-selected {
  background-color: var(--color-box-bkg);
  max-width: 95%; /* Prevent the background from overlapping the scroll bar when the toc is expanded 
  enough to show a scrollbar. */
}

ul#i-dt-root li.i-selected > a {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* Turn off the selected background color on all children in the selected li item except the first
ins spacer and link, which are for the link to the current page. */
ul#i-dt-root li.i-selected *:not(a:first-of-type):not(ins:first-of-type) {
  background-color: white;
}

/* Firefox doesn't support :has yet but is supposed to by Q3 2023. This rule won't break anything in any
browser that doesn't support :has yet. the top-level item that doesn't have an icon will just be indented
to align with the text of other top-level items that do have an icon. Doesn't look bad or like a mistake, 
it is just more consistent when the items all align left, with or without an icon. */
ul#i-dt-root > li:not(:has(ins.i-expandorcollapse)) > a {
  margin-left: 0;
}

/* When you get to second-level and lower items that don't have children (no icons), we don't 
want the selected color on the ins spacer. This doesn't affect the desktop TOC but it does affect
the tablet and mobile TOCs. */
ul#i-dt-root ul li.i-selected:not(:has(ins.i-expandorcollapse)) > ins {
    background-color: white;
}

/* This used to create space for the expand/collapse images when present. */
li ins.i-spacer {
  display: inline-block;
  cursor: pointer;

}

li > ins.i-expand::before {
  content: url("../images/i-expand.svg");
  position: absolute;
  left: 0;
  top: calc(var(--space-tiny) * 1.5 + 1px); /* When icon set to 12px width, match top padding of ul#i-dt-root a element. 
  When set to 13 width, match plus 1px. */
  width: 13px; /* looks sharpest. 12 is okay but fuzzier */
  height: auto;
}
li > ins.i-collapse::before {
  content: url("../images/i-collapse.svg");
  position: absolute;
  left: 0;
  top: calc(var(--space-tiny) * 1.5 + 1px); /* When icon set to 12px width, match top padding of ul#i-dt-root a element. 
  When set to 13 width, match plus 1px. */
  width: 13px; /* looks sharpest. 12 is okay but fuzzier */
  height: auto;
}

/* I don't know why all of these are necessary or why they're in this particular stylesheet that's only for the dynamic TOC.
Seems like most of them are for the old tripane TOC that showed things like book icons. */

.i-icon-0 {background-image: url('../images/png/icon-00.png'); background-image: none, url('../images/svg/icon-00.svg'); }
.i-icon-1 {background-image: url('../images/png/icon-01.png'); background-image: none, url('../images/svg/icon-01.svg'); }
.i-icon-2 {background-image: url('../images/png/icon-02.png'); background-image: none, url('../images/svg/icon-02.svg'); }
.i-icon-3 {background-image: url('../images/png/icon-03.png'); background-image: none, url('../images/svg/icon-03.svg'); }
.i-icon-4 {background-image: url('../images/png/icon-04.png'); background-image: none, url('../images/svg/icon-04.svg'); }
.i-icon-5 {background-image: url('../images/png/icon-05.png'); background-image: none, url('../images/svg/icon-05.svg'); }
.i-icon-6 {background-image: url('../images/png/icon-06.png'); background-image: none, url('../images/svg/icon-06.svg'); }
.i-icon-7 {background-image: url('../images/png/icon-07.png'); background-image: none, url('../images/svg/icon-07.svg'); }
.i-icon-8 {background-image: url('../images/png/icon-08.png'); background-image: none, url('../images/svg/icon-08.svg'); }
.i-icon-9 {background-image: url('../images/png/icon-09.png'); background-image: none, url('../images/svg/icon-09.svg'); }
.i-icon-10 {background-image: url('../images/png/icon-10.png'); background-image: none, url('../images/svg/icon-10.svg'); }
.i-icon-11 {background-image: url('../images/png/icon-11.png'); background-image: none, url('../images/svg/icon-11.svg'); }
.i-icon-12 {background-image: url('../images/png/icon-12.png'); background-image: none, url('../images/svg/icon-12.svg'); }
.i-icon-13 {background-image: url('../images/png/icon-13.png'); background-image: none, url('../images/svg/icon-13.svg'); }
.i-icon-14 {background-image: url('../images/png/icon-14.png'); background-image: none, url('../images/svg/icon-14.svg'); }
.i-icon-15 {background-image: url('../images/png/icon-15.png'); background-image: none, url('../images/svg/icon-15.svg'); }
.i-icon-16 {background-image: url('../images/png/icon-16.png'); background-image: none, url('../images/svg/icon-16.svg'); }
.i-icon-17 {background-image: url('../images/png/icon-17.png'); background-image: none, url('../images/svg/icon-17.svg'); }
.i-icon-18 {background-image: url('../images/png/icon-18.png'); background-image: none, url('../images/svg/icon-18.svg'); }
.i-icon-19 {background-image: url('../images/png/icon-19.png'); background-image: none, url('../images/svg/icon-19.svg'); }
.i-icon-20 {background-image: url('../images/png/icon-20.png'); background-image: none, url('../images/svg/icon-20.svg'); }
.i-icon-21 {background-image: url('../images/png/icon-21.png'); background-image: none, url('../images/svg/icon-21.svg'); }
.i-icon-22 {background-image: url('../images/png/icon-22.png'); background-image: none, url('../images/svg/icon-22.svg'); }
.i-icon-23 {background-image: url('../images/png/icon-23.png'); background-image: none, url('../images/svg/icon-23.svg'); }
.i-icon-24 {background-image: url('../images/png/icon-24.png'); background-image: none, url('../images/svg/icon-24.svg'); }
.i-icon-25 {background-image: url('../images/png/icon-25.png'); background-image: none, url('../images/svg/icon-25.svg'); }
.i-icon-26 {background-image: url('../images/png/icon-26.png'); background-image: none, url('../images/svg/icon-26.svg'); }
.i-icon-27 {background-image: url('../images/png/icon-27.png'); background-image: none, url('../images/svg/icon-27.svg'); }
.i-icon-28 {background-image: url('../images/png/icon-28.png'); background-image: none, url('../images/svg/icon-28.svg'); }
.i-icon-29 {background-image: url('../images/png/icon-29.png'); background-image: none, url('../images/svg/icon-29.svg'); }
.i-icon-30 {background-image: url('../images/png/icon-30.png'); background-image: none, url('../images/svg/icon-30.svg'); }
.i-icon-31 {background-image: url('../images/png/icon-31.png'); background-image: none, url('../images/svg/icon-31.svg'); }
.i-icon-32 {background-image: url('../images/png/icon-32.png'); background-image: none, url('../images/svg/icon-32.svg'); }
.i-icon-33 {background-image: url('../images/png/icon-33.png'); background-image: none, url('../images/svg/icon-33.svg'); }
.i-icon-34 {background-image: url('../images/png/icon-34.png'); background-image: none, url('../images/svg/icon-34.svg'); }
.i-icon-35 {background-image: url('../images/png/icon-35.png'); background-image: none, url('../images/svg/icon-35.svg'); }
.i-icon-36 {background-image: url('../images/png/icon-36.png'); background-image: none, url('../images/svg/icon-36.svg'); }
.i-icon-37 {background-image: url('../images/png/icon-37.png'); background-image: none, url('../images/svg/icon-37.svg'); }
.i-icon-38 {background-image: url('../images/png/icon-38.png'); background-image: none, url('../images/svg/icon-38.svg'); }
.i-icon-39 {background-image: url('../images/png/icon-39.png'); background-image: none, url('../images/svg/icon-39.svg'); }
.i-icon-40 {background-image: url('../images/png/icon-40.png'); background-image: none, url('../images/svg/icon-40.svg'); }
.i-icon-41 {background-image: url('../images/png/icon-41.png'); background-image: none, url('../images/svg/icon-41.svg'); }
.i-icon-42 {background-image: url('../images/png/icon-42.png'); background-image: none, url('../images/svg/icon-42.svg'); }
.i-icon-43 {background-image: url('../images/png/icon-43.png'); background-image: none, url('../images/svg/icon-43.svg'); }
.i-icon-44 {background-image: url('../images/png/icon-44.png'); background-image: none, url('../images/svg/icon-44.svg'); }
.i-icon-45 {background-image: url('../images/png/icon-45.png'); background-image: none, url('../images/svg/icon-45.svg'); }
.i-icon-46 {background-image: url('../images/png/icon-46.png'); background-image: none, url('../images/svg/icon-46.svg'); }

html.i-dark li > ins.i-expand::before {
  content: url(../images/i-expand-dark.svg);
}

html.i-dark li > ins.i-collapse::before {
  content: url(../images/i-collapse-dark.svg);
}

/* End Dynamic ToC for desktop */


/* Dynamic TOC for tablet and mobile where the TOC is hidden but can be opened as an overlay. Must
support minimum touch target sizes. */
@media screen and (max-width: 1280px) {

  ul#i-dt-root li *,
  ul#i-dt-root ul li * {
    vertical-align: top;
  }

  /* Set the vertical spacing between items to the minimum spacing required between touch targets. 
    The default left margin from deskop isn't quite big enough, so make it slightly bigger. */
  ul#i-dt-root li {
    margin-top: var(--min-target-spacing);
    margin-left: var(--space-medium);
  }

  /* Remove the extra left indent top-level items. */
  ul#i-dt-root > li {
    margin-left: 0;
  }
  
  /* Remove the extra space above the first item in the TOC because there isn't another touch target above it. */
  ul#i-dt-root > li:first-child,
  ul#i-dt-root ul li:first-child {
    margin-top: 0;
  }

  /* Expand the size of A link elements to meet the minimum touch target size. */
  ul#i-dt-root a {
    padding: var(--Atarget-topbtm-padding) 0;
    min-height: var(--min-touch-height);
    min-width: var(--touch-width);
    margin-left: 0; /* Can't have a left margin on the A or it will wrap to the next line when the link text is longer. */
    max-width: calc(100% - (var(--min-touch-width) + var(--min-target-spacing)));  /* Make sure the width of the A 
    element will fit to the left of the icon. Without this, the entire A element will wrap to the line below the 
    icon rather than being positioned on the same line with extra text wrapping to the next line. */
  }

  /* Expand the size of the spacer that holds the expand/collapse icon so that it meets the minimum touch target size
  and add a right margin so that there is the miniumum touch target spacing between the icon and the A link text that
  follow it. */
  li ins.i-spacer {
    margin-right: var(--min-target-spacing);
    width: auto;
    height: auto;
    padding: var(--icon-topbtm-padding) 0;
    min-width: var(--min-touch-width);
    min-height: var(--min-touch-height);
  }

  /* Set the size and position of the expand/collapse icon */
  li > ins.i-expand::before,
  li > ins.i-collapse::before {
    width: var(--icon-size);
    height: auto;
    top: calc((var(--min-touch-height) - var(--icon-size)) / 2); /* width of the container minus the width of the icon gives 
    white space. Divide space by 2 to center the icon vertically in available space. */
  }

  /* Now that the default styling is done for items that have children, we need to remove the ins-spacer for the 
  expand/collapse icon that doesn't exist on top-level items without children. We only target top-level items because
  we want to keep the spacer in second and lower level list items to provide a default left indent of those items. */
  ul#i-dt-root > li > ins.i-spacer:not(.i-expandorcollapse) {
    margin-right: 0;
    width: auto;
    height: auto;
    padding: 0;
    min-width: unset;
    min-height: unset;
  }

  /* Allow hyphenation at fifth level where longer words will break in the middle. 
  Supposed to work in all browsers but doesn't. Can't figure out why. The lang
  is declared in the <html> tag as required. It works fine if I add it to the P
  element. It's supposed to work in block level elements and these A
  elements are set to inline-block. I tried changing them to block and it still 
  didn't work. I tried putting it on the li container and that also didn't
  work. I couldn't find anything online about hyphenation not working in A
  elements. I'm leaving it in case it starts working consistently someday. */
  ul#i-dt-root ul ul ul ul a {
    hyphens: auto;
  }
}


@media screen and (max-width: 980px) {

  ul#i-dt-root > li.i-selected {
    padding-bottom: 0;
  }


}


@media screen and (max-width: 780px) {
  ul#i-dt-root > li {
    padding-bottom: 2px;
    border-bottom: 1px dotted var(--color-bdr);
}