/* --- Main Table of Contents Container --- */
/* Manages the overall layout, positioning, and sticky behavior of the TOC component */
.table-of-contents__container {
  display: flex;
  width: 22.5%;
  height: fit-content;
  max-height: 472.82px;
  align-items: flex-start;
  justify-content: right;
  background-color: transparent;
  position: sticky;
  top: var(--spacing-base);
  overflow: hidden;
  flex-direction: column;
  border: 0.5px solid var(--border-component-secondary-dark);
  border-radius: var(--border-radius-xs); 
}

/* --- TOC Toggle Header --- */
/* The header bar used to collapse or expand the TOC */
.table-of-contents__toogle {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  gap: auto;
  padding: var(--padding-xl)  var(--padding-xxl);
  background-color: var(--bg-component-primary-light);
}

/* --- TOC Title Wrapper --- */
/* Container for the text label within the TOC toggle header */
.table-of-contents__span2toc {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

/* --- TOC Title Text --- */
/* Styling for the label text inside the toggle header */
.table-of-contents__span2toc p {
  display: flex;
  width: 100%;
  height: fit-content;
  justify-content: center;
  align-items: center;
  text-wrap: nowrap;
  font-weight: var(--font-weight-medium);
}

/* --- Icon Helpers --- */
/* Hidden elements used for toggling state icons (hidden by default) */
.table-of-contents__toogle-close { display: none; }
.table-of-contents__toogle-open { display: none; }

/* --- TOC Content Wrapper --- */
/* The scrollable container that holds the list of navigation links */
div.table-of-contents__wrap {
  display: flex;
  width: 100%;
  height: fit-content;
  flex-direction: row;
  align-items: flex-start;
  overflow-y: auto;
  background-color: var(--bg-component-primary-light);
  padding-bottom:2.82%;
}

/* --- Anchor-based Toggle Link --- */
/* Alternative styling if the toggle header is an <a> tag instead of a <span> */
a.table-of-contents__toogle__link {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding:var(--padding-xl) ;
  text-decoration: none;
  color: inherit;
  justify-content: center;
  color: var(--text-anchor-dark);
  font-weight: var(--font-weight-base);
  white-space: nowrap;
  border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
  border: 1px solid var( --border-component-secondary-dark);
  background-color: var(--bg-component-primary-light);
  padding-bottom: var(--spacing-base);
}

/* --- TOC List --- */
/* The unordered list element containing the navigation items */
ul.table-of-contents__list {
  display: flex;
  width: 100%;
  max-height:390.83px;
  min-height:fit-content;
  flex-direction: column;
  overflow-y: auto;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- TOC List Item --- */
/* Individual navigation item container */
li.table-of-contents__item {
  display: flex;
  width: 100%;
  height: fit-content;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin-top: var(--spacing-xxs);
  border-top: 1px solid var( --border-component-secondary-dark);
}

/* --- TOC Link --- */
/* The clickable navigation link */
a.table-of-contents__link {
  display: flex;
  width: 100%;
  min-width: 162px;
  height: fit-content;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--text-anchor-dark);
  text-align: center;
  text-decoration: none;
  font-weight: var(--font-weight-base);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  margin-top: var(--spacing-xxs) ;
  padding: 0 var(--padding-xl);
  border: 1.6px solid transparent;
}

/* --- TOC Link Hover State --- */
/* Visual feedback when hovering over a navigation link */
a.table-of-contents__link:hover {
  border: 1.6px solid var( --border-blue-active);
  background-color: var( --action-item-hover);
  border-radius: var(--border-radius-xs);
}

/* --- Active State Utility --- */
/* General class for styling the currently active TOC item */
.--toc-active { color: var(--text-anchor-dark); 


}

/* --- Parent Active State --- */
/* Styling for a parent category when a child submenu item is active */
a.table-of-contents__link.--toc-parent-active {
  background-color: var( --action-tertiary-bg-active);
  background-color: var( --border-action-item-light);
  margin-top: var(--spacing-xxs) ;
  background-color: var(--action-item-hover);
    border-left: 3.2px solid var( --border-blue-active);
        color: var(--text-anchor-blue
);
}

/* Styling for a parent category when a child submenu item is active */
a.table-of-contents__link:hover {
color: var(--border-action-primary-dark-hover);
}

/* Ensure text and icons inside a parent-active link match your color */
a.table-of-contents__link.--toc-parent-active,
a.table-of-contents__link.--toc-parent-active .table-of-contents__span,
a.table-of-contents__link.--toc-parent-active .table-of-contents__span i,
a.table-of-contents__link.--toc-parent-active .table-of-contents__span-dropdown i {
    color: var(--text-anchor-blue
);
}

/* --- Active Link Span --- */
/* Specific color override for active spans */
a.table-of-contents__link.--toc-active .table-of-contents__span {
    color: var(--text-anchor-blue
);
}


/* --- Submenu Wrapper --- */
/* Container for nested submenu elements */
.--has__toc-submenu {
  width: fit-content;
  height: auto;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0;
}

/* --- TOC Span --- */
/* Internal span element for text alignment inside TOC links */
span.table-of-contents__span {
  display: flex;
  width: 100%;
  height: fit-content;
  align-items: center;
  justify-content: left;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  padding: 10px 0;
}


/* --- Dropdown Span --- */
/* Container for the dropdown trigger icon */
span.table-of-contents__span-dropdown {
  display: flex;
  width: fit-content;
  height: fit-content;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--padding-base) ;
  cursor: pointer;
  border-radius: var(--border-radius-xs);
  border: 1px solid transparent;
}

/* --- Dropdown Hover --- */
span.table-of-contents__span-dropdown:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* --- Dropdown Icon Animation --- */
span.table-of-contents__span-dropdown i {
  transition: transform 0.3s ease;
}

/* --- TOC Icon Visibility --- */
/* Logic to hide or show icons based on context */
span.table-of-contents__span .--toc i { display: none; }
.table-of-contents__span i {
  display: block;
  font-size: var(--font-size-base);
}

/* --- TOC Typography Helper --- */
.--toc {
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xxs) var(--spacing-base);
  padding-bottom: 8px;
  color: var(--text-anchor-dark);
  border: 1px solid transparent;
  margin-bottom: -6px;
  
}

span.table-of-contents__span.--toc {
  padding: var(--spacing-base) 0;
  font-weight: var(--font-weight-medium);
}

/* --- Submenu Visibility --- */
/* Controls the display of submenus when toggled */
.toc-submenu.--toc-submenu-open {
  display: flex;
  max-height: 1000px;
  transition: max-height 0.3s ease-in-out;
}

/* --- Dropdown Rotation --- */
.table-of-contents__span-dropdown.--toc-submenu-open {
  transform: rotate(180deg);
}

/* --- Submenu List --- */
/* Styles for the nested submenu list */
ul.toc-submenu {
  display: none;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxs);
  padding-inline-start: 0;
}

/* --- Submenu Item --- */
li.toc-submenu__item {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-between;
  border-top: 0.5px solid var( --border-component-secondary-dark);
  padding-top: var(--spacing-xxs);
}

/* --- Submenu Link --- */
a.toc-submenu__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: left;
  text-decoration: none;
  text-wrap: nowrap;
  color: var(--text-anchor-dark);
  overflow: hidden;
  font-weight: var(--font-weight-base);
  border: 1.6px solid transparent;
  padding: 7px 0;
  padding-left: 8.5%;
  cursor: pointer;
  transition: var(--transition-duration);
}

/* --- Submenu Link Hover --- */
a.toc-submenu__link:hover {
  color: var(--text-anchor-dark);

  background-color: var(--action-item-hover);
  border: 1.6px solid var( --border-blue-active);
  border-radius: var(--border-radius-xs);
}

/* --- Active Submenu Link --- */
.--has__toc-submenu a.toc-submenu__link.--toc-active {
  color: var(--text-anchor-dark);
  border-left: 2px solid var( --border-blue-active);

    color: var(  --text-anchor-blue);
}



/* --- Mobile Breakpoint (max-width: 1048px) --- */
/* Adjusts layout for mobile responsiveness */
@media only screen and (max-width: 1048px) {
    .table-of-contents__container {
      max-width: 271.48px;
      width: 100%; 
      float: none;
      z-index: 60;
      margin-top: 1.62%;
      margin-right: 1.62%;
      margin-left: -300px;
      float: left;
      border: none;
      border-radius: 0;
    }
    .table-of-contents__container.toc-open {
      width: 100%;
      border: 1px solid var(--border-component-secondary-dark);
      border-radius: var(--border-radius-xs);
    }
    .table-of-contents__span2toc p { justify-content: left; }
    .table-of-contents__toogle {    
        border: 1px solid var(--border-component-secondary-dark);
        border-radius: var(--border-radius-xs);
    }
    .table-of-contents__container.toc-open .table-of-contents__toogle {
        border: none;
        border-radius: 0;
    }
    div.table-of-contents__wrap {      
        border-top: none;
        margin-left: -300px;
        transition: transform 0.3s ease-in-out;
        z-index: 63;
    }
    .table-of-contents__container.toc-open div.table-of-contents__wrap {
      margin-left: 0;
    }
    .table-of-contents__toogle-open { display: flex; }
    .table-of-contents__toogle-close { display: none; }
    .table-of-contents__toogle.is-open .table-of-contents__toogle-open,
    .table-of-contents__toogle__link.is-open .table-of-contents__toogle-open {
        display: none;
    }
    .table-of-contents__toogle.is-open .table-of-contents__toogle-close,
    .table-of-contents__toogle__link.is-open .table-of-contents__toogle-close {
        display: flex;
    }
}

/* --- Small Device Breakpoint (max-width: 768px) --- */
@media only screen and (max-width:768px) {
    .table-of-contents__container { display: none; }
}

/* --- Print Styles --- */
@media print {
    .table-of-contents__container { display: none !important; }
}