/* Custom styles to override Just the Docs theme */

/* Import Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Set background color to black and font family to Poppins for the entire site */
body {
  background-color: black !important;
  font-family: 'Poppins', sans-serif !important;
  color: white !important;
}

/* Make all links pink by default */
a {
  color: #FF29C3 !important;
}

a:hover {
  color: #FF29C3 !important;
}

/* Override to keep sidebar navigation links white */
.nav-list a {
  color: white !important;
}

.nav-list a:hover {
  color: #FF29C3 !important;
}

/* Make arrows in side navigation pink */
.nav-list .nav-list-item .nav-list-expander {
  cursor: pointer !important;
  padding: 8px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nav-list .nav-list-item .nav-list-expander svg {
  color: #FF29C3 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Fix for child lists that might be hidden by default */
.nav-list .nav-list-item:not(.active) > .nav-list {
  display: none !important;
}

.nav-list .nav-list-item.active > .nav-list {
  display: block !important;
}

/* Other UI elements with the brand color */
.btn-primary {
  background-color: #FF29C3 !important;
}

.search-result-highlight {
  color: #FF29C3 !important;
}

.search-result-title {
  color: white !important;
}

.site-logo {
  width: 75% !important;
}

.site-nav {
  padding-top: 0px !important;
}

/* Style for version selector in the header */
.version-selector {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 16px !important;
  border: none !important;
  background: transparent !important;
}

/* Style the select element in the version selector */
.version-selector select {
  background-color: #222 !important;
  color: white !important;
  border: 1px solid #444 !important;
  padding: 4px 8px !important;
  margin-left: 8px !important;
  border-radius: 4px !important;
}

#menu-button .icon {
  color: #FF29C3 !important;
}

.search-result-rel-url {
  color: #FF29C3 !important;
}

.site-button:hover {
  background-color: #FF29C3 !important;
}

/* Additional styles for better contrast on black background */
.site-header, .main-header {
  background-color: black !important;
  border-bottom: 1px solid #333 !important;
}

.side-bar {
  background-color: black !important;
}

.search-input {
  background-color: black !important;
  color: white !important;
}

code {
  background-color: #222 !important;
  color: #FF29C3 !important;
}

pre.highlight, .highlight {
  background-color: #222 !important;
  color: white !important;
}

table {
  border: 1px solid #444 !important;
}

th, td {
  border: 1px solid #444 !important;
  background-color: transparent !important;
}

th {
  background-color: #222 !important;
}

blockquote {
  border-left: 4px solid #FF29C3 !important;
  background-color: #222 !important;
  color: white !important;
}

.main-content .anchor-heading svg {
   color: #FF29C3 !important;
}

.search-input:focus + .search-label .search-icon {
   color: #FF29C3 !important;
}

/* Ensure site-nav is always visible on non-mobile devices */
#site-nav {
  display: block !important;
}

/* Mobile-specific styles - minimal to preserve theme behavior */
@media (max-width: 799px) {
  /* Ensure main-header is visible */
  .main-header {
    display: block !important;
  }
  
  /* Style for the hamburger menu button */
  #menu-button {
    display: inline-block !important;
    cursor: pointer !important;
  }
  
  #menu-button .icon {
    color: #FF29C3 !important;
  }
  
  /* Only hide the site-nav by default on mobile */
  #site-nav {
    display: none !important; /* Hidden by default on mobile */
  }
  
  /* Let the theme handle the rest */
  body.nav-open #site-nav {
    display: block !important;
  }
}