/* Reset CSS */
  /* The * selector selects all elements. The following styles are applied to every element on the page */
  * {
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes default padding */
    border: 0; /* Removes default borders */
    font: inherit; /* Inherits font properties from parent element */
    vertical-align: baseline; /* Aligns the element to the baseline of its parent */
    text-decoration: none; /* Removes default text decorations (like underlines) */
  }

  /* The following styles apply to all elements, and before and after pseudo-elements */
  *,
  *:before,
  *:after {
    box-sizing: border-box; /* Changes the box model to include padding and border in the element's total width and height */
  }

/* Typography */
  /* The following styles apply to the body element, which contains all other visible elements on the page */
  body {
    font-size: 75%; /* Sets the base font size to 75% of the default */
    font-family: Helvetica, Arial, sans-serif; /* Sets the font family */
    background: #e2ddd2 url(../img/main-bg.webp) repeat-x; /* Sets the background color and image */
    color: #666; /* Sets the default text color */
  }

  /* The following styles apply to all heading elements (h1-h6) */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal; /* Sets the font weight to normal */
    color: #555; /* Sets the text color */
    line-height: 0; /* Sets the line height (the space between lines of text) */
    margin: 0 0 0.8rem; /* Sets the margin (the space around the element) */
  }

  /* The following styles apply to individual heading elements, setting their font size */
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  h4 {
    font-size: 1rem;
    font-weight: bold; /* Sets the font weight to bold */
  }

  h5 {
    font-size: 1.2rem;
  }

  h6 {
    font-size: 1.1rem;
  }

  /* The following styles apply to paragraph, blockquote, and q elements */
  p,
  blockquote,
  q {
    margin-bottom: 1rem; /* Sets the bottom margin */
    line-height: 1.3rem; /* Sets the line height */
  }

  /* The following styles apply to blockquote and q elements, removing the default quotes */
  blockquote,
  q {
    quotes: none;
  }

  /* The following styles apply to paragraph elements, setting the font size */
  p {
    font-size: 0.8rem;
  }

/* Lists */
  /* The following styles apply to unordered and ordered list elements, removing the default list style */
  ul,
  ol {
    list-style: none;
  }

  /* The following styles apply to unordered lists with the class "bulletedlist", setting the list style to square bullets */
  ul.bulletedlist {
    list-style-type: square;
  }

/* Clearfix */
  /* The following styles apply to elements with the class "clearfix", clearing floats */
  .clearfix::after {
    content: ""; /* Inserts content after the element */
    display: table; /* Changes the display type to table */
    clear: both; /* Clears floats on both sides */
  }

/* Title Bar */
  /* The following styles apply to elements with the class "titlebar" */
  .titlebar {
    background: #5e5238 url(../img/titlebar-bg.webp); /* Sets the background color and image */
    order: 0; /* Sets the order of the element in a flex container */
    display: flex; /* Changes the display type to flex */
    align-items: center; /* Centers items vertically in the flex container */
    justify-content: space-between; /* Puts space between the items in the flex container */
  }

  /* The following styles apply to h1 elements within elements with the class "titlebar" */
  .titlebar h1 {
    margin: 0; /* Removes the default margin */
    width: 100%; /* Sets the width to 100% of the parent element */
  }

  /* The following styles apply to links within h1 elements within elements with the class "titlebar" */
  .titlebar h1 a {
    background: url(../img/logo-loom-of-reality.webp) no-repeat; /* Sets the background image and prevents it from repeating */
    display: block; /* Changes the display type to block */
    height: 2rem; /* Sets the height */
    overflow: hidden; /* Hides any content that overflows the element's box */
  }

/* Search Form */
  /* The following styles apply to search input elements within elements with the class "titlebar" */
  .titlebar input[type="search"] {
    font-size: 1rem; /* Sets the font size */
    margin-right: 1rem; /* Sets the right margin */
    padding-top: 0.1rem; /* Sets the top padding */
    width: 17rem; /* Sets the width */
    height: 1.5rem; /* Sets the height */
    border: 1px solid #ccc; /* Sets the border */
  }

/* Website Banner */
  /* The following styles apply to elements with the class "website-banner" */
  .website-banner {
    display: block; /* Changes the display type to block */
    margin: 1rem auto; /* Sets the margin */
    max-width: 100%; /* Sets the maximum width */
  }

/* Opening Quotation */
  /* The following styles apply to elements with the class "openingquotation" */
  .openingquotation {
    margin: 0 1rem; /* Sets the margin */
  }

  /* The following styles apply to footer elements within elements with the class "openingquotation" */
  .openingquotation footer {
    text-align: right; /* Aligns the text to the right */
  }

  /* The following styles apply to the element with the id "categoryHeader" */
  #categoryHeader {
    margin-bottom: 1rem; /* Sets the bottom margin */
    padding-top: 1rem; /* Sets the top padding */
    text-align: center; /* Centers the text */
    font-size: 1rem; /* Sets the font size */
    font-weight: bold; /* Sets the font weight to bold */
    overflow-wrap: break-word; /* Allows long words to be broken and wrap to the next line */
    white-space: normal; /* Allows the text to wrap to the next line */
    line-height: 1.3rem; /* Sets the line height */
  }

  /* The following styles apply to elements with the class "quote" */
  .quote {
    margin-bottom: 2rem; /* Sets the bottom margin */
    position: relative; /* Sets the position to relative, which is used for positioning child elements */
  }

  /* The following styles apply to the first link within a div within elements with the class "content" within elements with the class "quote" */
  .quote .content div a:first-child:before {
    content: "\A"; /* Inserts content before the element */
    white-space: pre; /* Preserves white space and line breaks */
  }

  /* The following styles apply to elements with the class "quoteCategories" */
  .quoteCategories {
    position: absolute; /* Positions the element absolutely within its nearest positioned ancestor */
    right: 0; /* Positions the element 0 pixels from the right edge of its nearest positioned ancestor */
    bottom: -1rem; /* Positions the element 0.5 rem above the bottom edge of its nearest positioned ancestor */
  }

/* Frontpage Links */
  /* The following styles apply to elements with the class "frontpage-link" */
  .frontpage-link {
    font-size: 1rem; /* Sets the font size */
    text-decoration: none; /* Removes the default text decoration */
  }

/* Release Info */
  /* The following styles apply to elements with the class "release-info" */
  .release-info {
    display: flex; /* Changes the display type to flex */
    justify-content: center; /* Centers items horizontally in the flex container */
    align-items: center; /* Centers items vertically in the flex container */
    margin-top: 3rem; /* Sets the top margin */
  }

/* Divider */
  /* The following styles apply to elements with the class "divider" */
  .divider {
    font-size: 1rem; /* Sets the font size */
    margin-top: 0.5rem; /* Sets the top margin */
    text-align: center; /* Centers the text */
    color: #ccc; /* Sets the text color */
  }

/* Main Structure */
  /* The .canvas class is the main container for the entire layout. It is designed to be flexible and responsive. */
  .canvas {
    background: #fff; /* Set the background color to white */
    position: relative; /* Set the position relative to its normal position */
    width: 100%; /* Set the width to 100% of its parent */
    max-width: 90%; /* Set the maximum width to 90% of its parent */
    margin: 3rem 6rem; /* Set the top and bottom margins to 3rem and the left and right margins to 6rem */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack the flex items vertically */
    justify-content: flex-start; /* Align the flex items at the start of the container */
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3); /* Add a box shadow to the container */
  }  

  /* The .content-area class is the container for the main content and the navigation pane. */
  .content-area {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Arrange the flex items horizontally */
    height: calc(100vh - 6rem - 2rem); /* Calculate the height by subtracting the top/bottom margins and titlebar height from the viewport height */
  }

  /* The .maincontent class is the container for the main content. */
  .maincontent {
    position: relative; /* Set the position relative to its normal position */
    border-right: 1px solid #b2b2b2; /* Add a border to the right side */
    padding: 0 3rem; /* Set the top and bottom padding to 0 and the left and right padding to 3rem */
    width: 100%; /* Set the width to 100% of its parent */
    max-width: 100%; /* Set the maximum width to 100% of its parent */
    height: 100%; /* Set the height to 100% of its parent */
    order: 2; /* Order the flex item to appear second */
    flex: 5.5; /* Set the flex grow factor to 5.5, allowing it to take up more space */
    overflow-y: auto; /* Enable vertical scrolling if the content overflows */
    touch-action: pan-y; /* Prioritize vertical scrolling on touch devices */
  }
  
  /* Style the links in the main content */
  .maincontent a {
    color: #a67c52; /* Set the link color */
  }
  
  /* Style the links in the main content on hover */
  .maincontent a:hover {
    text-decoration: underline; /* Add an underline to the link */
  }

/* Navigation Pane */
  /* The .navigation class is the container for the navigation pane. */
  .navigation {
    position: relative; /* Set the position relative to its normal position */
    padding: 0 0 0 1rem; /* Set the top, right, and bottom padding to 0 and the left padding to 1rem */
    width: 100%; /* Set the width to 100% of its parent */
    max-width: 100%; /* Set the maximum width to 100% of its parent */
    height: 100%; /* Set the height to 100% of its parent */
    background: #f2f4f7; /* Set the background color */
    font-size: 0.8rem; /* Set the font size */
    order: 3; /* Order the flex item to appear third */
    flex: 4.5; /* Set the flex grow factor to 4.5, allowing it to take up less space than the main content */
    overflow: auto; /* Enable scrolling if the content overflows */
    touch-action: pan-y; /* Prioritize vertical scrolling on touch devices */
  }
  
  /* The .loader class is used to position the loading animation in the center of the navigation pane. */
  .navigation .loader {
    position: absolute; /* Position the loader absolutely within the navigation pane */
    top: 50%; /* Center the loader vertically */
    left: 50%; /* Center the loader horizontally */
    transform: translate(-50%, -50%); /* Offset the loader's position by half its width and height to ensure it is centered */
  }
  
  /* Style the headings in the navigation pane */
  .navigation h4 {
    margin: 1.5rem; /* Set the margin around the headings */
    background: #f2f4f7; /* Set the background color */
    position: absolute; /* Position the headings absolutely within the navigation pane */
    top: 0; /* Position the headings at the top of the navigation pane */
    left: 0; /* Position the headings at the left of the navigation pane */
    width: auto; /* Allow the headings to resize based on their content */
    z-index: 7; /* Set the stack order of the headings */
    color: black; /* Set the color of the headings */
  }

/* View By Button */
  /* The .droplist class is used to create a custom dropdown list for the "View By" button. */
  .droplist {
    position: sticky; /* Position the droplist relative to the viewport, so it sticks to the top when scrolling */
    display: inline-block; /* Display the droplist as an inline-block element */
    top: 1rem; /* Position the droplist 1rem from the top of the viewport */
    left: 81%; /* Position the droplist 81% from the left of the viewport */
  }
  
  /* The .trigger class is used to create the button that triggers the dropdown list. */
  .droplist .trigger {
    display: inline-block; /* Display the trigger as an inline-block element */
  }
  
  /* The .options class is used to create the dropdown list of options. */
  .droplist .options {
    display: none; /* Hide the options by default */
    position: absolute; /* Position the options absolutely within the droplist */
    top: 1.5rem; /* Position the options 1.5rem from the top of the droplist */
    right: 1rem; /* Position the options 1rem from the right of the droplist */
    padding: 0.13rem; /* Add a small amount of padding around the options */
    background: #747474; /* Set the background color of the options */
    border: 1px solid #f2f4f7; /* Add a border around the options */
    border-radius: 3px; /* Round the corners of the options */
    z-index: 2001; /* Set the stack order of the options */
  }
  
  /* Show the options when the droplist is clicked */
  .droplist.click .options {
    display: block; /* Display the options */
  }
  
  /* Style the links in the options */
  .droplist .options a {
    display: block; /* Display the links as block elements */
    padding: 0.1rem; /* Add a small amount of padding around the links */
    white-space: nowrap; /* Prevent the links from wrapping to multiple lines */
    color: #fff; /* Set the color of the links */
  }
  
  /* Style the links in the options on hover */
  .droplist .options a:hover {
    background: #555; /* Change the background color of the links */
  }
  
  /* The .nav-scope class is used to create a custom dropdown list for the "Scope" button. */
  .nav-scope .trigger:hover,
  .nav-scope.click .trigger {
    background: #747474; /* Change the background color of the trigger on hover and when clicked */
  }
  
  /* Style the trigger for the "Scope" button */
  .nav-scope .trigger {
    padding: 0 0.2rem; /* Add a small amount of padding to the left and right of the trigger */
    margin-right: 1rem; /* Add a margin to the right of the trigger */
    line-height: 1.4rem; /* Set the line height of the trigger */
    border-radius: 3px; /* Round the corners of the trigger */
    background: linear-gradient(
      to bottom,
      #b0b0b0 0%,
      #909090 100%
    ); /* Add a linear gradient to the background of the trigger */
    color: #fff; /* Set the color of the trigger */
  }

/* Category Views */
  /* The #listTab, #authorTab, and #treeTab IDs are used to style the different category views. */
  #listTab,
  #authorTab {
    display: none; /* Hide these views by default */
  }

  /* Style the "Subject Outline" view */
  #treeTab {
    margin: 0 0 0 -1.2rem; /* Adjust the margin of this view */
  }

  /* Style the "Alphabetical Order" view */
  #listTab {
    margin: 2rem 0 0 1.2rem; /* Adjust the margin of this view */
  }

  /* Style the "Author & Book" view */
  #authorTab {
    margin: 2rem 0 0 -1.1rem; /* Adjust the margin of this view */
  }

/* Navigation Pane */
  /* Styles for the unordered list in the navigation pane */
  #navigation ul {
    line-height: normal;
    list-style-type: none; /* Removes the default bullet points */
  }
  
  /* Adds padding to the top of the category tree */
  #categoryTree {
    padding-top: 2rem;
  }
  
  /* Styles for the list items in the navigation pane */
  #navigation li {
    display: block;
  }
  
  /* Styles for the links in the list items in the navigation pane */
  #navigation li a {
    color: #000; /* Black text color */
    text-decoration: none; /* Removes the default underline */
    display: inline-block;
    line-height: 1.3rem;
    height: 1rem;
  }
  
  /* Styles for the hovered state of the tree items */
  .jstree-hovered {
    background: #ddd; /* Light grey background */
  }
  
  /* Styles for the count and childcount elements in the navigation links */
  #navigation li a .count,
  #navigation li a .childcount {
    color: #999; /* Grey text color */
    font-size: 0.7rem; /* Smaller font size */
  }
  
  /* Hides the unordered list in the tree list items */
  .tree li ul {
    display: none;
  }
  
  /* Removes the outline from the focused state of the tree links */
  .tree li a:focus {
    outline: none;
  }
  
  /* Styles for the input elements in the tree links and spans */
  .tree li a input,
  .tree li span input {
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 0.75rem;
    border: 1px solid white;
    background: white;
    font-size: 0.625rem;
    font-family: Verdana, Arial, sans-serif;
  }
  
  /* Adds padding to the input elements in the tree links and spans, except for those with class "xxx" */
  .tree li a input:not([class="xxx"]),
  .tree li span input:not([class="xxx"]) {
    padding: 0.6rem 0;
  }
  
/* Navigation Pane - Tree Dots */
  /* Styles for the last list item in the left-to-right tree */
  .tree .ltr li.last {
    float: left;
  }
  
  /* Styles for the last list item in the right-to-left tree */
  .tree .rtl li.last {
    float: right;
  }
  
  /* Allows the last list item in the tree to overflow */
  .tree > ul li.last {
    overflow: visible;
  }
  
  /* Styles for the dragged tree item */
  #jstree-dragged {
    position: absolute;
    top: -10px;
    left: -10px;
    margin: 0;
    padding: 0;
  }
  
  /* Styles for the context menu in the tree */
  .tree-context {
    display: block; /* Hidden by default */
    position: absolute;
    list-style-type: none; /* Removes the default bullet points */
    left: -2000px; /* Moves it off the screen */
    top: -2000px; /* Moves it off the screen */
  }
  
  /* Styles for the links in the tree context menu */
  .tree-context a {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Hide the mobile search and nav toggle by default */
  .mobile-search-toggle,
  .mobile-nav-toggle {
    display: none;
  }

  /* Responsive Design */
    /* Styles for mobile view */
    @media (max-width: 1001px) {
      .canvas {
        margin: 0;
        max-width: 100%;
      }

      .content-area {
        flex-direction: column;
        height: calc(100vh - 2rem); /* Accounts for top/bottom margins and titlebar height */
      }

      .maincontent {
        display: block; /* Ensures they are displayed */
        padding: 1rem 5rem;
      }

      .navigation {
        position: relative;
        width: 100%; /* Full width */
        height: 100%;
        max-height: 100%;
        z-index: 2000; /* Ensures it's above other content */
        display: none; /* Hidden by default */
        transition: max-height 0.2s ease-out; /* Adjust as needed */
      }

      #treeTab {
        margin: 0 0 0 -1.2rem;
      }

      #listTab {
        margin: 2rem 0 0 1.2rem;
      }
    
      #authorTab {
        margin: 2rem 0 0 -1.1rem;
      }

      .droplist {
        top: 1rem;
        left: 88%;  
      }

      .droplist .options {
        top: 1.5rem;
        right: 1rem;
      }

      .titlebar input[type="search"] {
        display: none;
        margin-right: 6.1rem; /* Move the search bar to the left */
      }

    /* Mobile Toggle Buttons */
      /* Styles for the mobile nav toggle */
      .mobile-nav-toggle {
        position: absolute; /* Changed from fixed to absolute */
        top: -0.6rem;
        right: 1rem;
        background: none;
        border: none;
        font-size: 0;
        cursor: pointer;
        z-index: 1001; /* Above the titlebar */
      }

      /* Styles for the mobile nav icon */
      .mobile-nav-icon {
        width: 3rem; 
        height: auto;
      }

      /* Styles for the mobile search toggle */
      .mobile-search-toggle {
        position: absolute; 
        top: 0;
        right: 4rem;
        background: none;
        border: none;
        font-size: 0;
        cursor: pointer;
        z-index: 1001; /* Above the titlebar */
      }

      /* Styles for the mobile search icon */
      .mobile-search-icon {
        width: 1.9rem;
        height: auto;
      }

      .mobile-search-toggle, .mobile-nav-toggle {
        display: block;
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 1; /* Ensure full opacity when not active */
      }

      /* Style for the mobile buttons' active state */
      .mobile-nav-toggle.active, .mobile-search-toggle.active {
        opacity: 0.7; /* Example of a transparency effect for active state */
        transition: opacity 0.2s ease; /* Smooth transition for the opacity change */
      }

      /* Styles for the mobile buttons' hover and clicked state */
      .mobile-nav-toggle:hover, .mobile-search-toggle:hover {
        transform: scale(0.85);
        transition: transform 0.3s ease;
      } 
      
  }

  /* Removed outdated browser-specific hacks and fixes */
  /* Removed experimental styles and comments */