/* Left Navigation Bar */
#wikiNav {
    width: 200px;
    height: 100vh; /* Ensures the nav bar extends to the bottom of the page */
    background-color: #3d3c3c;
    position: fixed; /* Makes the nav bar static and not sensible to scrolling */
    padding: 10px;
}
.nav-wiki-btn {
    background-color: #565656;
    color: white;
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
}
.nav-wiki-btn:hover {
    background-color: #339643;
}
.nav-wiki-btn.active {
    background-color: #20672c;
}

/* Right Content */
#wikiContent {
    margin-left: 220px; /* Adjusted margin to accommodate fixed nav bar */
    padding: 20px;
}
.wikiPage {
    display: none;
}
.wikiPage.active {
    display: block;
}










/* Basic Mobile Setup */
@media (max-width: 768px) {
  /* Hide the left sidebar */
  #wikiNav {
    display: none;
  }

  /* Full-width content */
  #wikiContent {
    margin-left: 0;
    padding: 15px;
    width: 100%;
  }
  
  .mobile-tab {
    color: white;
    padding: 10px;
    cursor: pointer;
  }
  
  .mobile-tab.active {
    background-color: #20672c;
    border-radius: 5px;
  }

  .mobile-tab-list {
    color: white;
    padding: 10px;
    cursor: pointer;
  }
  
  .mobile-tab-list.active {
    background-color: #20672c;
    border-radius: 5px;
  }

  @media (max-width: 768px) { /* Adjust the breakpoint as needed */
    .listsContainer .list {
      display: none; /* Hide all lists by default on mobile */
    }
    .listsContainer .list#imgBrandList {
      display: block; /* Show only the Brand list by default */
    }
  }
  
  #wikiContent {
    padding-top: 60px; /* Adjust for mobile tab height */
  }
  .wikiPage{
    
  width: 100%!important;
  }
}

/* Mobile vertical dropdown tabs */
@media (max-width: 768px) {

  /* Show dropdown button for sections */
  .dropdown-menu {
    display: block;
    background-color: #3d3c3c;
    color: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
  }

  .dropdown-content {
    display: block!important; 
    background-color: #3d3c3c;
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 1;
  }

  .dropdown-content .mobile-tab {
    padding: 10px;
    color: white;
    border-top: 1px solid #565656;
    cursor: pointer;
  }

  .dropdown-content .mobile-tab:hover {
    background-color: #339643;
  }

  .dropdown-content .mobile-tab.active {
    background-color: #20672c;
    border-radius: 5px;
  }

  #wikiContent {
    padding-top: 15px; /* Adjust for dropdown height */
  }
}

.dropdown-content {
  display: none; 
}


/* Content styling */
.wikiPage {
  background-color: #2e2e2e; /* Subtle dark background for contrast */
  border: 1px solid #444; /* Light border to define frame */
  padding: 20px; /* Space around content */
  border-radius: 8px; /* Rounded corners for smooth look */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
  margin-bottom: 20px; /* Space between sections */
  width: 85%;
}

.wikiPage p {
  margin-bottom: 20px; /* Spacing between paragraphs */
  line-height: 1.8; /* Better readability */
}
.wikiPage h1{
  color: #ffffff; /* Bright text for headings */
  margin-bottom: 15px;

}
.wikiPage h2, .wikiPage h3, .wikiPage h4 {
  color: #ffffff; /* Bright text for headings */
  margin-top: 60px; /* Space above headings */
  margin-bottom: 15px;
}

/* Style for links */
.wikiPage a {
  color: #1e90ff; /* Distinct blue for links */
  text-decoration: none;
}

.wikiPage a:hover {
  color: #ffffff; /* Link color on hover */
  text-decoration: underline;
}