/* Basic CSS for simplicity - same as previous example */
body {
    font-family: Arial, sans-serif;
    overflow-y: scroll; /* Force scrollbar to prevent width jumping */
}

#container {
    display: flex;
    margin-top: 15px;
}

#toc {
    display: block;
    position: sticky; /* or use 'fixed' if you want it to be stuck on the top of the viewport */
    top: 0;
    min-width: 300px;
    max-height: 100vh; /* Full height viewport */
    overflow-y: auto; /* Enable vertical scroll on overflow */
    z-index: 10; /* Ensure it's above other content */
}

#content {
    margin-left: 50px; /* Make room for the TOC if it's fixed. Adjust as needed for your layout */
    padding: 20px; /* Padding for readability */
    flex-grow: 1;
    /* For smooth scrolling to work with anchors, set the scrolling behavior */
    scroll-behavior: smooth;
    /* Optional: set other styles such as height, overflow, etc. */
    overflow: auto;
}

/* Height for the list items to ensure they are all visible on the screen at once if possible */
#tocList li, #tocList li a {
    white-space: nowrap; /* Ensures text doesn't wrap */
    overflow: hidden; /* Keeps the text confined to its element */
    text-overflow: ellipsis; /* Adds an ellipsis if the text is too long */
    text-decoration: inherit;
    color: inherit;
    cursor: pointer;
}

  /* Additional optional styles */
#tocList li a {
    display: block; /* Makes the entire area clickable */
    padding: 5px 10px; /* Some padding for the clickable area */
}


#tocList .subtoc-item {
    list-style-type: none;
}

button:hover,
button:focus {
    background-color: #f0f0f0;
    cursor: pointer;
    outline: none; /* Consider custom focus styling for accessibility */
}

/* Include style for loader */
.loader {
    display: none;
    text-align: center;
    margin: 10px;
}

/* Accessible visual hiding */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#jumpToTop {
    position: fixed; /* Fixed position */
    bottom: 20px; /* 20px from the bottom */
    right: 30px; /* 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    background-color: #333; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Cursor to pointer to indicate this is a clickable item */
    padding: 15px; /* Add some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#jumpToTop:hover {
    background-color: #555; /* Slightly darken the button on hover */
}

/* styles.css */
.hamburger-button {
  display: none;
  position: sticky;
  background-color: #e7e7e7; 
  color: black;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  max-height: 35px;
  min-weight: 25px;
  top: 0;
  z-index: 11; /* Ensure it's above other content */
}

.hamburger-button span {
    display: block;
    /*
    position: absolute;
    top:0;
    left:0;
    */
}