/* set your nav height once */
:root { --nav-h: 73px; }

/* any element linked to with #id will offset correctly */
[id] { scroll-margin-top: var(--nav-h); }

html.route-builds{
  scroll-behavior: auto !important;
}

body{
  background-color: #2b2b2b !important;
}

/* Improve success text visibility site-wide: override Bootstrap .text-success */
.text-success {
  color: #66bb6a !important; /* Higher contrast green */
}

/* Optional: tweak success color in KB dark mode for slight brightness */
body.kb-dark-mode .text-success {
  color: #7bd784 !important; /* Slightly lighter for dark backgrounds */
}

#interactive-container{
  background-color: #222;
}

#image-viewer {
  display: flex;
  justify-content: center;
  max-height: 650px;
  overflow: hidden;
  position: relative;
}

#image-viewer img{
  width: 100%; /* Make the image fill the width of the container */
  height: auto; /* Maintain the aspect ratio */
  object-fit: cover; /* Scale the image to cover the container, cropping as necessary */
  object-position: center 61%; /* Center the image vertically and horizontally */
  display: block; /* Avoid inline alignment issues */
}

#image-viewer.interactive {
  cursor: grab; /* Grabber pointer when interactive */
}

#image-viewer.interactive.grabbing {
    cursor: grabbing; /* Closed grabber pointer while dragging */
}

.btn {
  text-decoration: none !important;
}

.btn-secondary:disabled{
  background-color: #333;
  opacity: 1;
}


@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fugaz One';
  src: url('/fonts/Fugaz-One-Regular.woff2') format('woff2'),
        url('/fonts/Fugaz-One-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.woff2') format('woff2'),
        url('/fonts/Lato-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}  

  /* Change anchor link colors to match your green theme */
main a, main a:visited {
  color: #4CAF50; /* Replace with your specific green color */
  text-decoration: none; /* Optional: Remove underline */
}

main a:hover, main a:focus {
  color: #45a049; /* Slightly darker shade for hover state */
  text-decoration: underline; /* Optional: Add underline on hover */
}

main a:active {
  color: #39843d; /* Even darker shade for active state */
}

h1, h2 {
  font-family: 'Montesserat', sans-serif;
  font-weight: 700;
}

/* Body Text */
body, p, h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}
  
/* Navbar General Styles */
.navbar {
    background-color: #111; /* Darker navbar background */
    padding: 0px 15px;
    font-size: 1.1em;
}

.navbar-brand {
  font-family: "Fugaz One";
    font-size: 1.5rem;
    color: #52cc29 !important; /* Green branding */
}

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus {
    border: none !important;
    outline: 0 !important;
    box-shadow: none;
}

/* Custom Hamburger Icon Styles */
.custom-toggler {
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px; /* Spacing between lines */
  padding: 20px 5px;
  outline: none;
  cursor: pointer;
  z-index: 1000; /* Ensures it stays on top */
}

.toggler-line {
  width: 25px; /* Width of the lines */
  height: 3px; /* Height of the lines */
  background-color: #c5c5c5 !important; /* Explicitly set line color to white */
  border-radius: 2px; /* Slight rounding */
  transition: all 0.3s ease; /* Smooth animation */
  display: block; /* Ensures lines are visible */
}

/* Hamburger to 'X' Animation */
.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(2) {
  opacity: 0; /* Hide the middle line */
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Dropdown Menu Styles */
.navbar-nav .dropdown-menu {
    border: 1px solid #333; /* Subtle border */
    border-radius: 5px;
    padding: 0;
    background-color: #222; /* Consistent dropdown background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

/* Dropdown Item Styling */
.navbar-nav .dropdown-item {
    margin: 0;
    padding: 12px 15px; /* Better spacing for touch */
    color: #ddd;
    background-color: #222; /* Default background */
    border-bottom: 1px solid #333; /* Dividers for separation */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove Border on Last Item */
.navbar-nav .dropdown-item:last-child {
    border-bottom: none;
}

/* Hover and Focus States */
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: #52cc29; /* Green highlight */
    color: #000; /* Black text for contrast */
}

/* Selected Page Styling */
.navbar-nav .dropdown-item.active {
    background-color: #444; /* Slightly lighter gray */
    color: #52cc29; /* Green text */
    font-weight: bold;
    pointer-events: none; /* Disable click */
}

.nav-link{
  color: #c5c5c5;
  padding: 18px 15px !important;
}

.navbar-nav .nav-link.active {
  background-color: #333;
}

/* Dropdown Toggle Styling */
.nav-link.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-link.dropdown-toggle::after {
  content: "\25BC"; /* Downward arrow (▼) */
  font-size: 0.8rem;
  color: #aaa;
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.3s ease;
  border: none !important;
}

.nav-link.dropdown-toggle.show::after {
  transform: rotate(180deg) !important; /* Flip arrow */
  color: #52cc29; /* Optional: Green highlight when active */
}

#mc_embed_signup{
  border-radius: 6px
}

/* Customizing the btn-primary */
.btn-primary, #mc_embed_signup_scroll .button {
  background: linear-gradient(to bottom, #48af25, #2c7916) !important;
  color: white !important;
  border: none !important;
}

/* Hover state for the btn-primary */
.btn-primary:hover, #mc_embed_signup_scroll .button:hover {
  background: linear-gradient(to bottom, #4fc029, #328a1a) !important;
}

/* Active and Focus states */
.btn-primary:active,
.btn-primary:focus, 
#mc_embed_signup_scroll .button:active, 
#mc_embed_signup_scroll .button:focus {
  background: linear-gradient(to bottom, #48af25, #2c7916) !important;
  color: white !important;
  border-color: #5c5c5c !important;
  outline: none; /* Removes the default focus outline */
}

/* Customizing the btn-primary */
.btn-secondary{
  background: linear-gradient(to bottom, #858585, #515151) !important;
  color: white !important;
  border: none !important;
}

/* Hover state for the btn-primary */
.btn-secondary:hover {
  background: linear-gradient(to bottom, #9c9c9c, #636363) !important;
}

/* Active and Focus states */
.btn-secondary:active,
.btn-secondary:focus {
  background: linear-gradient(to bottom, #858585, #515151) !important;
  color: white !important;
  border-color: #5c5c5c !important;
  outline: none; /* Removes the default focus outline */
}

/* Change the background color and border of the active accordion header */
.accordion-button:not(.collapsed) {
  background-color: #d4f5d4; /* Light green background */
  color: #2d2d2d; /* Darker text color for better contrast */
  box-shadow: none; /* Remove any box shadow */
  border-color: #d4f5d4; /* Match the border to the background */
}

/* Change the background color on hover */
.accordion-button:hover {
  background-color: #e6ffe6; /* Slightly lighter green on hover */
  color: #2d2d2d;
}

/* Remove the blue focus outline and replace it with a light green outline */
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(212, 245, 212, 0.5); /* Light green glow effect */
  border-color: #d4f5d4;
  outline: none; /* Remove default outline */
}

/* Remove custom background on chevron so it matches header */
.accordion-button::after {
  background-color: transparent !important;
  border-color: transparent !important;
}

.hero-section {
  background: no-repeat center center/cover; /* Replace with your actual image */
  height: 40vw;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.hero-section h1{
  color: white; /* Change as needed for visibility */
  text-align: center;
}

.hero-content-container {
  background: #52cc29b5; /* Semi-transparent background */
  /*display: inline-block;*/ /* Ensure it's as wide as content */
  z-index: 2; /* Ensure text is above the overlay */
  display: none !important;
}

.intro-text{
  font-size: 1.25em;
}

.feature-section{
  background: linear-gradient(180deg, #a94700, #ff6c00); 
  color: #fff;
}

.full-width-row-50{
  height: 46vw;
  /* justify-content: center;
  display: flex; */
  overflow: hidden;
  position: relative;
}

.full-width-row-50 img{
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}

.full-width-section-row{
  height: 44vw;
}

.full-width-section-container{
  position: relative;
}

.full-width-section-img{
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.full-width-section-header{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Change as needed for visibility */
  background: rgba(0, 0, 0, 0.75); /* Optional background for better contrast */
  padding: 5px 10px; /* Optional padding */
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
  width: auto; /* Make sure the width adapts to content */
  max-width: 100%; /* Ensure it doesn't overflow the image */
}

.full-width-section-label-tc{
  position: absolute;
  top: 10px; /* Or however much space you want from the bottom */
  left: 50%;
  transform: translateX(-50%);
  color: white; /* Change as needed for visibility */
  background: rgba(0, 0, 0, 0.7); /* Optional background for better contrast */
  padding: 5px 10px; /* Optional padding */
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
  width: auto; /* Make sure the width adapts to content */
  max-width: 100%; /* Ensure it doesn't overflow the image */
}

.full-width-section-label-bc{
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  color: white; /* Change as needed for visibility */
  background: rgba(0, 0, 0, 0.7); /* Optional background for better contrast */
  padding: 5px 10px; /* Optional padding */
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
  width: auto; /* Make sure the width adapts to content */
  max-width: 100%; /* Ensure it doesn't overflow the image */
}

.full-width-section-label-br{
  position: absolute;
  bottom: 6%;
  right: 5%;
  color: white; /* Change as needed for visibility */
  background: rgba(0, 0, 0, 0.7); /* Optional background for better contrast */
  padding: 5px 10px; /* Optional padding */
  text-align: center;
  white-space: nowrap; /* Prevent text from wrapping */
  width: auto; /* Make sure the width adapts to content */
  max-width: 100%; /* Ensure it doesn't overflow the image */
}

.full-width-section-button-br{
  position: absolute;
  bottom: 6%;
  right: 5%;
  
}

.full-width-section-label-bc p, .full-width-section-label-br p{
  margin-bottom: 0 !important;
}

.image-container{
  position: relative;
}

.overview-row{
  min-height: 400px;
}

.feature-row{
  min-height: 400px;
}

.feature-row h2, 
.info-row h2, 
.overview-row h1, 
.build-panel h2, 
#docPostSection h2{
  border-bottom: 2px solid #6ee848; /* Underline with vivid green */
  padding-bottom: 10px; /* Space below heading */
  margin-bottom: 20px;
}

/* if h3 not inside class accordion-item inside section-item or info-row */
.section-item h3:not(.accordion-item h3), .info-row h3:not(.accordion-item h3){
  border-bottom: 2px solid white; /* Underline with vivid green */
  padding-bottom: 3px; /* Space below heading */
  margin-top: 20px;
  margin-bottom: 5px;
}

.info-row .btn-primary, .feature-row .btn-primary, .card-footer .btn-primary, #buildNav .btn{
  font-size: 1.2em;
}

.feature-img-container{
  position: relative;
}

.feature-img{
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Container styling for desktop and mobile */
#options-bar-container {
  /* background-color: #ccc; */
  background: linear-gradient(to bottom, #c5c5c5, #797878);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  position: relative; /* Ensures placement over or below the interactive image */
  z-index: 10; /* Ensure it's above the interactive image */
}

/* Options bar styling */
.options-bar {
  margin-top: 15px;
  display: flex; /* Use flex for alignment */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center everything horizontally */
  width: auto;
  color: black;
  padding: 5px;
  position: relative; /* Position on top of the interactive image */
  bottom: 0; /* Align to the bottom of the interactive area */
  font-size: 1em;
}

/* Option groups styling */
.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* Ensure text aligns for all options */
  width: 100%; /* Ensure consistent width */
}

/* Ensure consistent spacing between options */
.option + .option {
  margin-top: 15px; /* Add space between stacked options */
}

.options {
  border-top: 1px solid #5c5c5c;
  display: flex; /* Align buttons side by side */
  gap: 0; /* Remove any spacing between buttons */
  padding-top: 8px;;
}

.option-header{
  font-weight: bold;
  text-transform: uppercase;
  color: #202020; /* Dark gray for better contrast */
  font-size: 0.9em;
  text-align: center;
}

/* Center the inline label and button in option-inline-label */
.option-inline-label {
  display: flex;
  flex-direction: row;
  align-items: center; /* Align vertically */
  justify-content: center; /* Center horizontally */
  margin: 0px 0px; /* Space between other options */
}

/* Add consistent spacing between label and button */
.option-inline-label .option-header {
  margin-right: 10px; /* Adjust spacing */
  /* font-weight: bold; */
}

/* Styling for the divider text */
.option-divider {
  margin: 25px 0px 5px;
  text-align: center;
  font-size: 1.1em;
  /* text-decoration: underline; */
}

/* Styling for the divider text */
.option-divider p{
  margin-bottom: 0px;
}

/* Buttons styling */
.option-button {
  width: 96px;
  margin: 5px;
  padding: 6px 9px;
  background-color: #aaa;
  color: black;
  border-radius: 5px;
  font-size: .9em;
  cursor: pointer;
  transition: border-color 0.1s, background-color 0.3s, transform 0.2s;
}

.option-button:hover {
  background-color: #70c953 !important;
}

/* Hide the actual radio input */
input[type="radio"], input[type="checkbox"] {
  display: none;
}

/* Style the label to look like a button */
.option-radio {
  text-align: center;
  width: 96px;
  display: inline-block;
  margin: 0; /* Remove margin */
  padding: 6px 9px;
  background: linear-gradient(to bottom, #ddd, #bbb);
  color: #202020;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  border: solid 1px #8b8a8a;
}

/* Rounded corners for the first button */
.option-radio:first-of-type {
  border-radius: 5px 0 0 5px; /* Rounded on the top-left and bottom-left corners */
  border-right: none;
}

/* Rounded corners for the last button */
.option-radio:last-of-type {
  border-radius: 0 5px 5px 0; /* Rounded on the top-right and bottom-right corners */
  border-left: none;
}

/* Rounded corners for the last button */
.option-inline-label .option-radio:last-of-type {
  border-radius: 5px 5px 5px 5px; /* Rounded on the top-right and bottom-right corners */
  border-left: solid 1px #5c5c5c;
}

/* Highlight the selected label when its radio is checked */
input[type="radio"]:checked + .option-radio, input[type="checkbox"]:checked + .option-radio {
  /* background-color: #52cc29 !important; */
  background: linear-gradient(to bottom, #52cc29, #37961c);
  /* color: black; */
  color: white;
}

/* Hover effect for buttons */
.option-radio:hover {
  /* background-color: #95dd7e !important; */
  background: linear-gradient(to bottom, #d1d1d1, #a8a8a8);
}

#buildsSection{
  min-height: 800px;
}

#buildNav.at-footer{
  z-index: 99;
  position: relative;
  height: 64px;
}

#buildNavPH{
  height: 64px;
  position: relative;
  display: block;
}

/* Sticky class */
#buildNav{
  max-width: none;
  background-color: #333;
  position: fixed;
  bottom: 0; /* Stick to the top */
  left: 0;
  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.2);
}

#buildNavPH.at-footer{
  display: none;
}

.page-sub-nav .list-inline-item{
  font-size: 1.2em;
}

.page-sub-nav .list-inline-item:not(:last-child){
  margin-right: 2em;
}

#goblinSection{
  margin-bottom: 30px;
}

.searchSection,
.goblinSection {
    position: relative; /* Default positioning */
    opacity: 0; /* Start hidden */
    height: auto; /* Auto height when shown */
}

.hidden {
    position: absolute; /* Take it out of the flow */
    opacity: 0; /* Invisible */
    height: 0; /* Collapsed height */
    overflow: hidden; /* Ensure nothing spills out */
}

.build-nav-btn{
  min-width: 90px;
}

.build-img{
  height: 250px;
  object-fit: cover;
}

#goblinFeatureImg img {
  width: 100%; /* Make the image take up the full width of the container */
  height: auto; /* Maintain the aspect ratio */
  min-height:340px;
  object-fit: cover; /* Ensure the image covers the entire area, potentially cropping */
} 

.v2-status-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: linear-gradient(90deg, rgba(82, 204, 41, 0.1), rgba(31, 31, 31, 0.98) 16%);
  border-top: 1px solid rgba(128, 128, 128, 0.3);
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  border-left: 4px solid #52cc29;
  color: #f2f2f2;
  text-decoration: none;
}

.v2-status-banner:hover,
.v2-status-banner:focus {
  color: #f2f2f2;
  text-decoration: none;
}

.v2-status-banner-dot {
  width: 0.6rem;
  height: 0.6rem;
  flex: 0 0 0.6rem;
  border-radius: 50%;
  background-color: #52cc29;
  box-shadow: 0 0 0 0 rgba(82, 204, 41, 0.55);
  animation: v2-status-pulse 2s infinite;
}

.v2-status-banner-text {
  min-width: 0;
  font-size: 0.98rem;
  line-height: 1.25;
}

.v2-status-banner-cta {
  margin-left: auto;
  color: #52cc29;
  font-weight: 700;
  white-space: nowrap;
}

.v2-status-banner-cta span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.v2-status-banner:hover .v2-status-banner-cta,
.v2-status-banner:focus .v2-status-banner-cta {
  color: #74dc52;
}

.v2-status-banner:hover .v2-status-banner-cta span[aria-hidden="true"],
.v2-status-banner:focus .v2-status-banner-cta span[aria-hidden="true"] {
  transform: translateX(0.2rem);
  color: #74dc52;
}

#v2-status-cta {
  padding: 2rem 1rem 1rem;
}

.v2-status-cta-card {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(82, 204, 41, 0.95), rgba(82, 204, 41, 0.18) 30%, rgba(82, 204, 41, 0.08) 55%, rgba(82, 204, 41, 0.9));
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.v2-status-cta-card:hover,
.v2-status-cta-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.v2-status-cta-inner {
  padding: 2.6rem 2rem;
  border-radius: 23px;
  background:
    radial-gradient(circle at top right, rgba(82, 204, 41, 0.18), transparent 30%),
    linear-gradient(180deg, #242424, #191919);
  text-align: center;
}

.v2-status-cta-eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: #52cc29;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.v2-status-cta-title {
  margin: 0;
  color: #f5f5f5;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.08;
}

.v2-status-cta-sub {
  max-width: 760px;
  margin: 1rem auto 0;
  color: #cfd5cf;
  font-size: 1.08rem;
  line-height: 1.6;
}

.v2-status-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #52cc29, #37961c);
  color: #101010;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(82, 204, 41, 0.24);
}

.v2-status-cta-button span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.v2-status-cta-card:hover .v2-status-cta-button,
.v2-status-cta-card:focus .v2-status-cta-button {
  background: linear-gradient(180deg, #74dc52, #52cc29);
}

.v2-status-cta-card:hover .v2-status-cta-button span[aria-hidden="true"],
.v2-status-cta-card:focus .v2-status-cta-button span[aria-hidden="true"] {
  transform: translateX(0.2rem);
}

@keyframes v2-status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 204, 41, 0.45);
  }

  70% {
    box-shadow: 0 0 0 0.45rem rgba(82, 204, 41, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(82, 204, 41, 0);
  }
}

@media (max-width: 575.98px) {
  .v2-status-banner {
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    flex-wrap: wrap;
  }

  .v2-status-banner-text {
    flex: 1 1 180px;
    font-size: 0.92rem;
  }

  .v2-status-banner-cta {
    margin-left: 1.1rem;
    font-size: 0.9rem;
  }

  #v2-status-cta {
    padding: 1.5rem 0.75rem 0.75rem;
  }

  .v2-status-cta-inner {
    padding: 2rem 1.1rem;
  }

  .v2-status-cta-title {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }

  .v2-status-cta-sub {
    font-size: 0.98rem;
  }

  .v2-status-cta-button {
    width: 100%;
    justify-content: center;
  }
}

#buildsContainer{
  min-height: 440px;
}

#buildsContainer a, #blogContainer a, #docContainer a{
  text-decoration: none;
}

#buildsContainer .card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.build-card {
  background-color: #444; /* Darker background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.build-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.build-card-content {
    padding: 15px;
}

.build-card h4 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: #52cc29; /* Green highlight */
}

.build-card p {
    font-size: 1.0rem;
    margin: 0;
    color: #ddd;
}

.build-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.build-card-footer {
    padding: 10px 15px;
    font-size: 0.95rem;
    text-align: right;
    color: #aaa;
    border-top: 1px solid #444;
}

  /* General Card Styling */
.build-panel {
  background-color: #333; /* Dark background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  color: #fff;
}

.build-panel h2 {
  margin-bottom: 5px;
  color: white; /* Green highlight */
  padding: 10px 15px;
  font-size: 1.5rem;
  text-align: center;
}

/* Owner Info Table */
#bioTable {
  color: #ddd;
  background-color: #444;
  margin: 0;
  padding: 15px; 
}

#bioTable th, #bioTable td{
  background-color: #333;
  color: white;
}

#goblinFeatureImg img {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Gallery Images */
#imageContainer img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.qa-underline{
  width: 100%;
  border-bottom: 1px solid white;
  display: block;
  margin: 35px 0;
}

/* QA Section */
.qa-question {
  font-weight: bold;
  margin-top: 10px;
  color: #52cc29;
}

.qa-answer {
  margin-bottom: 15px;
  color: #ddd;
}

/* Consistent Padding */
.padded-section {
  padding: 15px;
}
.blog-image {
  width: 100%;
  height: 280px;
  display: block;
  object-fit: cover;
}

#docPostContainer img{
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

#docPostContainer .btn{
  width: 150px;
  text-align: center;
  font-size: 1.2em;
}

/* General styling for the Read More link */
.read-more {
  color: #4CAF50; /* Your green branding color */
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: color 0.3s ease; /* Smooth hover effect */
}

.read-more:hover {
  color: #45a049; /* Slightly darker green on hover */
  text-decoration: underline;
}

/* Add arrow after Read More link */
.read-more::after {
  content: "\25BC"; /* Downward arrow (▼) */
  display: inline-block;
  margin-left: 8px; /* Add spacing between text and arrow */
  transition: transform 0.3s ease;
}

/* Flip arrow when expanded */
.read-more[aria-expanded="true"]::after {
  transform: rotate(180deg); /* Flip the arrow */
}

.content-item li{
  margin-top: 15px;
}

.content-item{
  padding: 4px 15px;
}

.section-item ul,
.section-item ol {
    padding-left: 1.0em; /* Less indentation */
}

.section-item ul,
.section-item ol {
    padding-left: 1.0em; /* Less indentation */
}

.section-divider {
  border-top: 2px solid #444; /* Thin dark line */
  margin: 40px 0; /* Space above and below */
  width: 60%; /* Narrower line for a cleaner look */
  margin-left: auto;
  margin-right: auto;
}

.section-dark {
  background-color: #1f1f1f; /* Slightly darker gray */
  padding-top: 20px;
  padding-bottom: 20px;
}

.section-light {
  background-color: #383838; /* Default dark gray */
  padding: 20px;
  padding-bottom: 20px;
}

/* Table styling */
#donorTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Header row styling */
#donorTable th {
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 10px;
    font-size: 1.1em;
}

/* Data cell styling */
#donorTable td {
    padding: 10px;
    border-bottom: 1px solid #555;
    vertical-align: top;
}

/* Row styling */
#donorTable tr:nth-child(even) {
    background-color: #222;
}

/* Component name styling */
#donorTable td strong {
  color: #66bb6a; /* Emphasize component names with accessible green */
}

/* Hover effect for rows */
#donorTable tr:hover {
    background-color: #333;
}

/* specs table styling */
.specs-table, .info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: #2b2b2b;
  color: #f0f0f0; /* Light text for readability */
  border: 1px solid #444;
}

.specs-table th, .info-table th {
  background-color: #444;
  color: #52cc29;
  text-align: center;
  padding: 12px 15px;
  font-size: 1.1em;
  text-transform: uppercase;
}

.specs-table td, .info-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #555;
}

.specs-table tr:nth-child(even), .info-table tr:nth-child(even) {
  background-color: #333;
}

.specs-table tr:hover, .info-table tr:hover {
  background-color: #3a3a3a;
}

#loadingIndicator {
  height: 30px;
  visibility: hidden;
}

#loadingIndicator.active {
  visibility: visible;
}

#interactive-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Ensure it appears above other elements */
  font-size: 18px;
  color: #333;
}

footer {
  background-color: #1a1a1a; /* Darker background to distinguish from the content above */
  color: #ffffff;
  font-size: 0.9rem; /* Slightly reduce the font size */
  height: 200px;
}

footer a {
    color: #ffffff; /* Ensure links are white */
    text-decoration: none;
}

footer a:hover {
    color: #007bff; /* Bootstrap primary blue for hover effect */
}

footer h5 {
    font-weight: bold;
    margin-bottom: 1rem;
}

footer .container {
    max-width: 1200px; /* Optional: Control the width for a cleaner look */
    margin: 0 auto;
    padding-top: 2rem; /* More padding for a spacious look */
}

footer .row div {
    margin-bottom: 1.5rem; /* More space between sections */
}

footer .row div p {
    margin: 0.5rem 0;
}

.footer-border {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border for separation */
    margin-top: 1rem;
    padding-top: 1rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

.footer-social a i {
    margin-right: 0.5rem; /* Space between icon and label */
}

.footer-social a:hover {
    color: #f8f9fa; /* Lighten on hover */
}

.fade-in {
  opacity: 0; /* Start invisible */
  transition: opacity 0.5s ease; /* Transition for smooth fading */
}

.visible {
  opacity: 1; /* Fully visible */
}

.noMaxWidth{
  max-width: none !important;
}

.maxWidth1920{
  max-width: 1920px;
}

/* Modal styles */
.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* Modal background color */
  z-index: 1200;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#modalImage{
 /* Ensure the image fits inside the screen */
  object-fit:contain;
  background: none;
  height:100%;
  width:100%;
}

.modal-content {
  margin: auto;
  display: block;
}

.close-btn {
  z-index: 1201;
  position: absolute;
  top: 50px;
  right: 50px;
  color: white;
  font-size: 3em;
  font-weight: bold;
  cursor: pointer;
  background-color: #444; /* Semi-transparent black */
  width: 50px; /* Fixed width */
  height: 50px; /* Fixed height */
  display: flex; /* Centers the "X" */
  align-items: center; /* Centers the "X" */
  justify-content: center; /* Centers the "X" */
  border-radius: 50%; /* Makes it circular */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* Subtle shadow */
  padding-bottom: 2px;
}

.close-btn:hover {
  background-color: #888; /* Changes color on hover */
  transition: all 0.1s ease-in-out;
}

#galleryContainer {
  list-style: none; /* Removes the dots */
  padding: 0;
  margin: 0;
}

.gallery-thumb {
  background-color: #444; /* Darker background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.gallery-thumb:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Quote blocks in blog + docs */
#blogPostContainer blockquote,
#docPostContainer blockquote {
  padding: 0.25rem 1.2rem;
  border-left: 4px solid #52cc29;          /* DF green accent */
  /* background: rgba(255, 255, 255, 0.05); */  /* subtle panel on dark bg */
  font-style: italic;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 1rem;
}

#blogPostContainer blockquote p,
#docPostContainer blockquote p {
  margin: 0;                                /* remove extra spacing inside */
}

.blockquote-attribution{
  font-size: 1rem;
}

#blogPostContainer .blockquote-footer,
#docPostContainer .blockquote-footer {
  display: block;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid #52cc29;          /* DF green accent */
  background: rgba(255, 255, 255, 0.05);   /* subtle panel on dark bg */
  font-style: italic;
  font-size: 1.1rem;
  text-align: right;
  color: #ccc;
}

.loading {
  display: none; /* Hide content during the loading phase */
}

/* Blog/KB image figure styling */
.blogImage {
  text-align: center;
  margin: 1.5rem auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blogImage a {
  display: inline-block;
}

.blogImage img {
  display: block;
  max-width: 100%;
  height: auto;
}

.blogImage .figure-caption {
  font-size: 0.95em;
  color: #6c757d;
  text-align: center;
  margin: 0.75rem auto 0;
  padding: 0 1rem;
  max-width: 750px; /* Match medium image width */
  line-height: 1.5;
}

/* Add spacing between content and browse section on mobile */
@media (max-width: 767px) {
  .kb-collection-header,
  .order-3 {
    margin-top: 2rem !important;
  }
}

@media (max-width: 767px) {
  .blogImage .figure-caption {
    max-width: 100%;
    font-size: 0.9em;
  }
}

.figure-caption {
  font-size: 0.9em;
  color: #ccc;
  text-align: center;
}

@media (min-width: 1920px) {
  .container-fluid {
      max-width: 1920px; /* Adjust as per your layout needs */
  }
  .full-width-row-50{
    height: 880px;
  }
}

/* For large screens (tablets) and smaller */
@media (max-width: 1199.98px) {
  .hero-section {
    height: 50vw;
  }

  .full-width-section-row{
    height: 50vw;
  }

  #interactive-container{
    border: 1px solid #3a3a3a; /* Add subtle boundary */
  }

  #image-viewer{
    font-size: 1em;
    height: 375px;
    overflow: hidden;
    position: relative;
  }

  .interactive-image{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center bottom;
  }

  #options-bar-container{
    background-color: #ccc;
  }

  .options-bar{
    margin-top: 8px;
    background-color: transparent; /* Remove background color for mobile */
    display: block;
    width: auto;
    font-size: 1em;
    padding:0px;
  }

  .option{
    margin: 0 6px;
  }

  .option-divider{
    margin: 18px 0px;
  }

  .option-button{
    width: 88px;
  }

  .option-radio{
    font-size: .95em;
    width: 92px;
    padding: 4px 7px;
  }

  .option-radio:hover {
    background-color: #95dd7e !important;
    /* border: 1px solid #70c953 !important; */
  }
}

/* For medium screens (tablets) and smaller */
@media (max-width: 991.98px) {
  :root { --nav-h: 10px; }

  .navbar{
    font-size: 1.2em;
    position: relative;
  }

  .navbar-nav{
    padding-bottom: 10px;
  }

  .navbar-nav .dropdown-menu {
    display: none;
    animation: fadeIn 0.2s ease-in-out forwards;
    margin: 0px 10px;
  }

  .navbar-nav .dropdown-menu.show {
      display: block;
      margin: 10px 0px;
  }

  .navbar-nav .nav-link.active {
    background-color: #333;
  }

  .nav-item{
    border-bottom: 1px solid #515151;
  }

  .nav-item:last-child {
    border-bottom: none;
  }

  .nav-link{
    color: #c5c5c5;
    padding: 12px 10px !important;
  }

  .nav-link.dropdown-toggle::after{
    font-size: 1.1em;
  }

  .hero-section {
    height: 40vw;
  }

  .full-width-section-row{
    height: 40vw;
  }

  .full-width-section-label-bc{
    bottom: 15%;
  }

  #buildsSection{
    min-height: 1200px;
  }

  #goblinFeatureImg img{
    min-height: 335px;
  }

  #image-viewer{
    height: 340px;
    overflow: hidden;
    position: relative;
  }

  .options-bar{
    font-size: .95em;
  }
  
  .option + .option {
    margin-top: 12px;
  }

  .option-divider{
    margin: 15px 0px;
  }

  .option-radio{
    font-size: 1em;
    padding: 3px 6px;
  }

  .close-btn {
    top: 25px;
    right: 45px;
    font-size: 2em;
    font-weight: bold;
    width: 35px; /* Fixed width */
    height: 35px; /* Fixed height */
    padding-bottom: 2px;
  }
}

/* For small screens (mobile) */
@media (max-width: 767.98px) {
  h1 {
      font-size: 2.2rem; /* Increase font size for mobile */
  }

  h2 {
      font-size: 1.8rem; /* Increase font size for mobile */
  }

  p {
      font-size: 1.1rem; /* Increase font size for mobile */
  }

  blockquote p{
    font-size: 1.35rem;
  }

  #index-hero{
    height:325px;
  }

  .hero-section {
    height: 80vw;
  }

  .full-width-section-row{
    height: 225px;
  }

  .full-width-section-label-bc{
    bottom: 8%;
  }

  .full-width-row-50{
    height: 75vw;
  }

  .full-width-section-row{
    height: 75vw;
  }

  .feature-row{
    height: auto;
  }

  .feature-row .btn-primary, .card-footer .btn-primary{
    font-size: 1.2em;
  }

  /* Set a fixed height for the image container */
  .feature-img-container {
    height: 350px; /* or any desired height */
  }

  /* Ensure the image fills the container */
  .feature-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  #image-viewer{
    width: 100%;
    height: auto;
  }

  #buildsSection{
    min-height: 2500px;
  }

  #goblinFeatureImg img{
    min-height: 200px;
  }

  .options-bar {
    position: relative; /* Position below the interactive image */
    background-color: transparent; /* Remove background color for mobile */
    padding: 0 15px; /* Remove padding for better alignment */
    margin: 5px 0 10px;
    font-size: 1.2em;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for mobile */
    flex-direction: row;
    justify-content: center;
    gap: 16px; /* Add spacing between items */
    width: 100%
  }

  .option-button{
    width: 100px;
  }

  .option-radio{
    font-size: .9em;
    width: 100px;
    padding: 6px 6px;
  }

  .option {
    flex: 0 0 48%; /* Ensures each item is 48% wide, leaving room for margins or gaps */
    max-width: 48%; /* Prevents items from growing wider than 48% */
    box-sizing: border-box; /* Ensures padding is included in width */
    margin: 4px 0; /* Add spacing between vertical options */
  }

  #options-bar-container {
    position: static; /* Prevent overlap on mobile */
    background-color: #ccc;
    position: relative;
    display: flex;
    /* flex-direction: column; Default to stacking items vertically */
    align-items: center;
    padding: 10px 0;
  }

  .option-radio:hover {
    background-color: #e3e3e3 !important;
    /* border: 1px solid #70c953 !important; */
  }

  .option-inline-label{
    flex: 0 0 75%;
    max-width: 75%;
  }

  .option + .option{
    margin-top: 4px;
  }

  #enable-360-button {
    margin-top: 0px; /* Space below the options */
    align-self: center; /* Center the button below the options */
    font-size: .9em;
  }

  .close-btn {
    top: 12px;
    right: 30px;
    font-size: 2em;
    font-weight: bold;
    width: 35px; /* Fixed width */
    height: 35px; /* Fixed height */
    padding-bottom: 2px;
  }

  footer {
    height: 400px;
  }

  footer .container {
    padding-top: 1.5rem; /* Adjust padding for overall compactness */
  }

  footer .row > div {
    margin-bottom: 2rem !important; /* Reduce gap on mobile */
  } 

  footer h5, footer p {
    text-align: center;
    margin: 0.5rem 0; /* Even out vertical spacing */
  }

  footer p {
      text-align: center;
  }
  .footer-social {
      text-align: center;
  }

  .footer-social a {
    display: inline-block;
    margin-right: 0.5rem; /* Space out icons */
  }

  .page-sub-nav .list-inline-item{
    font-size: 1.1em;
  }

  .page-sub-nav .list-inline-item:not(:last-child){
    margin-right: 1.1em;
  }
}

@media (max-width: 500px) {
  #index-hero{
    height:220px;
  }
  .page-sub-nav .list-inline-item{
    font-size: 1em;
  }

  .page-sub-nav .list-inline-item:not(:last-child){
    margin-right: 1em;
  }
}

/* Knowledge Base styles */
.kb-sidebar-link {
  display: block;
  padding: 0.25rem 0;
  transition: color 0.15s ease-in-out;
}

.kb-sidebar-link:hover {
  color: #4CAF50 !important;
}

.kb-popular-article {
  color: #007bff;
  transition: opacity 0.15s ease-in-out;
}

.kb-popular-article:hover {
  opacity: 0.7;
}

/* KB Collection header styling */
.kb-collection-header a {
  transition: color 0.15s ease-in-out;
}

.kb-collection-header a:hover {
  color: #45a049;
}

/* Active collection - bold */
.kb-collection-header a.active-collection {
  font-weight: 700;
  color: #4CAF50;
}

/* Active category - green text */
.kb-sidebar-link.active-category {
  color: #4CAF50 !important;
  font-weight: 600;
}

/* Custom breadcrumb styling */
.kb-breadcrumb {
  font-size: 0.95rem;
  color: #6c757d;
}

.kb-breadcrumb-link {
  color: #4CAF50;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.kb-breadcrumb-link:hover {
  color: #45a049;
  text-decoration: underline;
}

.kb-breadcrumb-separator {
  color: #6c757d;
  margin: 0 0.5rem;
  font-size: 1rem;
}

.kb-collection-title:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}

.kb-doc-title:hover {
  color: #4CAF50 !important;
  text-decoration: underline !important;
}

.kb-collection-doc-link {
  transition: opacity 0.15s ease-in-out;
}

/* Dark Mode Toggle Styles */
.kb-dark-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Toggle in top right - no background, inline */
.d-flex .kb-dark-mode-toggle {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

.kb-dark-mode-toggle label {
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* Toggle Switch */
.kb-toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.kb-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.kb-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.kb-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.kb-toggle-switch input:checked + .kb-toggle-slider {
  background-color: #4CAF50;
}

.kb-toggle-switch input:checked + .kb-toggle-slider:before {
  transform: translateX(24px);
}

/* Dark Mode Styles - Scoped to main content only, excluding navbar */
body.kb-dark-mode .kb-hero,
body.kb-dark-mode section[style*="background-color: #f8f9fa"] {
  background-color: #1a1a1a !important;
}

body.kb-dark-mode main .card {
  background-color: #2b2b2b;
  color: #e0e0e0;
  border-color: #404040 !important;
}

body.kb-dark-mode .kb-dark-mode-toggle {
  background-color: #2b2b2b;
  color: #e0e0e0;
}

body.kb-dark-mode main .text-muted {
  color: #b0b0b0 !important;
}

body.kb-dark-mode main .text-dark {
  color: #e0e0e0 !important;
}

body.kb-dark-mode main h1, 
body.kb-dark-mode main h2, 
body.kb-dark-mode main h3,
body.kb-dark-mode main h4,
body.kb-dark-mode main h5,
body.kb-dark-mode main h6 {
  color: #f0f0f0;
}

body.kb-dark-mode .kb-breadcrumb-link {
  color: #66BB6A;
}

body.kb-dark-mode .kb-breadcrumb-separator {
  color: #888;
}

body.kb-dark-mode .kb-collection-header a {
  color: #d0d0d0;
}

body.kb-dark-mode .kb-collection-header a:hover {
  color: #66BB6A;
}

body.kb-dark-mode .kb-collection-header a.active-collection {
  color: #66BB6A;
}

body.kb-dark-mode .kb-sidebar-link {
  color: #b0b0b0 !important;
}

body.kb-dark-mode .kb-sidebar-link:hover {
  color: #d0d0d0 !important;
}

body.kb-dark-mode .kb-sidebar-link.active-category {
  color: #66BB6A !important;
}

body.kb-dark-mode .kb-collection-title {
  color: #66BB6A !important;
}

body.kb-dark-mode .kb-doc-title {
  color: #d0d0d0 !important;
}

body.kb-dark-mode .kb-doc-title:hover {
  color: #66BB6A !important;
}

/* KB doc links: black on light mode, white on dark mode */
.kb-collection-doc-link {
  color: #000 !important; /* override generic link green */
}
body.kb-dark-mode main a.kb-collection-doc-link {
  color: #fff !important; /* override dark mode green */
}

body.kb-dark-mode main a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #66BB6A;
}

body.kb-dark-mode main a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #7fcc82;
}

body.kb-dark-mode main .form-control {
  background-color: #2b2b2b;
  border-color: #404040;
  color: #e0e0e0;
}

body.kb-dark-mode main .form-control::placeholder {
  color: #888;
}

body.kb-dark-mode main .form-control:focus {
  background-color: #2b2b2b;
  border-color: #66BB6A;
  color: #e0e0e0;
}

body.kb-dark-mode main .btn-outline-secondary {
  color: #b0b0b0;
  border-color: #404040;
  background-color: #2b2b2b;
}

body.kb-dark-mode main .btn-outline-secondary:hover {
  background-color: #404040;
  border-color: #404040;
  color: #e0e0e0;
}

body.kb-dark-mode main .btn-outline-secondary svg {
  fill: #b0b0b0;
}

body.kb-dark-mode main .alert-info {
  background-color: #1a3a4a;
  color: #9fc5e8;
  border-color: #2a5a7a;
}

body.kb-dark-mode main .bg-light {
  background-color: #2b2b2b !important;
}

body.kb-dark-mode main .border-bottom {
  border-color: #404040 !important;
}

body.kb-dark-mode .blogImage .figure-caption {
  color: #a0a0a0;
}

/* Knowledge Base Page Dark Mode */
body.kb-dark-mode .kb-hero {
  background-color: #1a1a1a !important;
}

body.kb-dark-mode .kb-collections {
  background-color: #1a1a1a;
}

/* KB main wrapper (light & dark) */
.kb-main-wrapper {
  background-color: #f8f9fa;
}
body.kb-dark-mode .kb-main-wrapper {
  background-color: #1a1a1a !important;
}

body.kb-dark-mode .kb-top-docs li svg {
  color: #888 !important;
}

body.kb-dark-mode main p {
  color: #d0d0d0;
}

body.kb-dark-mode main .btn-primary {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

body.kb-dark-mode main .btn-primary:hover {
  background-color: #66BB6A;
  border-color: #66BB6A;
}

.kb-collection-doc-link:hover {
  opacity: 0.8;
}

/* Unified KB search styles */
.kb-search-group .kb-search-input {
  border-color: #4CAF50;
}
.kb-search-group .kb-search-input:focus {
  border-color: #66BB6A;
  box-shadow: 0 0 0 0.2rem rgba(102,187,106,0.25);
}
.kb-search-btn {
  display: inline-flex;
  align-items: center;
  background-color: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
  font-weight: 500;
  transition: background-color .15s, border-color .15s;
}
.kb-search-btn:hover, .kb-search-btn:focus {
  background-color: #43A047;
  border-color: #43A047;
  color: #fff;
}
.kb-search-btn svg {
  fill: currentColor;
}
body.kb-dark-mode .kb-search-input {
  background-color: #2b2b2b;
  color: #e0e0e0;
  border-color: #404040;
}
body.kb-dark-mode .kb-search-input:focus {
  border-color: #66BB6A;
  box-shadow: 0 0 0 0.2rem rgba(102,187,106,0.25);
}
body.kb-dark-mode .kb-search-btn {
  background-color: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}
body.kb-dark-mode .kb-search-btn:hover, body.kb-dark-mode .kb-search-btn:focus {
  background-color: #66BB6A;
  border-color: #66BB6A;
}

/* KB Search Results Dropdown */
.kb-search-results {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 500px;
  overflow-y: auto;
  z-index: 1100;
}

.kb-search-result-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #333;
  transition: background-color 0.15s;
}

.kb-search-result-item:last-child {
  border-bottom: none;
}

.kb-search-result-item:hover {
  background-color: #f8f9fa;
}

.kb-search-result-title {
  font-weight: 600;
  font-size: 1rem;
  color: #4CAF50;
  margin-bottom: 4px;
}

.kb-search-result-summary {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
  margin-bottom: 4px;
}

.kb-search-result-meta {
  font-size: 0.75rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kb-search-no-results {
  padding: 16px;
  text-align: center;
  color: #999;
  font-style: italic;
}

/* Dark mode search results */
body.kb-dark-mode .kb-search-results {
  background: #2b2b2b;
  border-color: #404040;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body.kb-dark-mode .kb-search-result-item {
  color: #e0e0e0;
  border-bottom-color: #404040;
}

body.kb-dark-mode .kb-search-result-item:hover {
  background-color: #333;
}

body.kb-dark-mode .kb-search-result-title {
  color: #66BB6A;
}

body.kb-dark-mode .kb-search-result-summary {
  color: #b0b0b0;
}

body.kb-dark-mode .kb-search-result-meta {
  color: #888;
}

body.kb-dark-mode .kb-search-no-results {
  color: #888;
}

/* KB 404 page - darken list-group items in dark mode */
body.kb-dark-mode .list-group-item {
  background-color: #2b2b2b;
  border-color: #404040;
  color: #e0e0e0;
}

body.kb-dark-mode .list-group-item:hover {
  background-color: #333;
}

body.kb-dark-mode .list-group-item h6 {
  color: #f0f0f0;
}

body.kb-dark-mode .list-group-item .text-muted {
  color: #b0b0b0 !important;
}

body.kb-dark-mode .list-group-item .text-success {
  color: #66BB6A !important;
}