/*
  MAINGEAR – Help Scout KB Color Override
  Sourced from maingear.com CSS variables + help.maingear.com selectors
  Upload via Help Scout > Manage > Docs > Custom CSS
*/

/* ─── Base / Body ──────────────────────────────────────────── */
body {
  background: #28282e !important;
  color: #eaeaea !important;
}

/* ─── Navbar ───────────────────────────────────────────────── */
.navbar .navbar-inner {
  background: #222227 !important;
  border-bottom: 1px solid #454545 !important;
}

/* Nav link default */
.navbar .nav li a,
.navbar .icon-private-w {
  color: #eaeaea !important;
}

/* Nav brand + active/hover states */
.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: #46c8f5 !important;
}

.navbar a:hover .icon-private-w,
.navbar a:focus .icon-private-w,
.navbar .active a .icon-private-w,
.navbar .active a:hover .icon-private-w,
.navbar .active a:focus .icon-private-w {
  color: #46c8f5 !important;
}

/* ─── Links ────────────────────────────────────────────────── */
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: #46c8f5 !important;
}

/* ─── Article body text ────────────────────────────────────── */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: #eaeaea !important;
}

/* Article headings */
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
  color: #ffffff !important;
}

/* Bold and italic */
#fullArticle strong,
#fullArticle b,
#fullArticle em,
#fullArticle i {
  color: #ffffff !important;
}

/* Inline code + code blocks */
#fullArticle code,
#fullArticle pre {
  background: #212126 !important;
  color: #46c8f5 !important;
  border: 1px solid #454545 !important;
}

/* Blockquotes */
#fullArticle blockquote {
  color: #eaeaea !important;
  border-left-color: #454545 !important;
}

/* Tables */
#fullArticle table,
#fullArticle th,
#fullArticle td {
  color: #eaeaea !important;
  border-color: #454545 !important;
}

#fullArticle th {
  background: #212126 !important;
}

#fullArticle tr:nth-child(even) {
  background: #2e2e35 !important;
}

/* Callout / note / warning boxes Help Scout injects */
#fullArticle .callout,
#fullArticle .note,
#fullArticle .warning,
#fullArticle .tip,
#fullArticle [class*="callout"],
#fullArticle [class*="alert"] {
  color: #eaeaea !important;
  border-color: #454545 !important;
  background: #2e2e35 !important;
}

/* ─── Cards / Content wrappers ─────────────────────────────── */
.category-list .category,
.collection,
.contentWrapper {
  background: #2e2e35 !important;
  border-color: #454545 !important;
  color: #eaeaea !important;
}

/* ─── Category card titles ─────────────────────────────────── */
.category-list a.category h3,
.category-list a.category h2 {
  color: #ffffff !important;
}

/* ─── Sidebar ──────────────────────────────────────────────── */
#sidebar h3 {
  color: #ffffff !important;
}

#sidebar a {
  color: #eaeaea !important;
}

#sidebar a:hover {
  color: #46c8f5 !important;
}

#sidebar li.active > a {
  color: #46c8f5 !important;
}

/* ─── Article footer ("Still need help?") ─────────────────── */
.articleFoot,
.articleFoot p {
  color: #eaeaea !important;
}

/* ─── Search hero section ──────────────────────────────────── */
#docsSearch {
  background: #212126 !important;
}

#docsSearch h1 {
  color: #ffffff !important;
}

/* ─── Search bar ───────────────────────────────────────────── */
.search-box input,
.search input[type="text"],
.search input[type="search"],
input.search-query {
  background: #2e2e35 !important;
  color: #eaeaea !important;
  border-color: #454545 !important;
}

.search-box input::placeholder,
.search input::placeholder,
input.search-query::placeholder {
  color: #888 !important;
}

/* ─── Search submit button ─────────────────────────────────── */

/* Homepage hero search only (not the sidebar .sm variant) */
#docsSearch #searchBar {
  position: relative !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#docsSearch input.search-query {
  padding-right: 60px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#docsSearch #searchBar button,
#docsSearch #searchBar input[type="submit"] {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: auto !important;
  padding: 0 16px !important;
  background: #46c8f5 !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  z-index: 1 !important;
}

#docsSearch #searchBar button:hover {
  background: #24bef3 !important;
}

/* Sidebar search (.sm variant) */
#searchBar.sm input.search-query {
  width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
}

#searchBar.sm button {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  background: #46c8f5 !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#searchBar.sm button:hover {
  background: #24bef3 !important;
}

/* ─── Search dropdown ──────────────────────────────────────── */
#serp-dd {
  background: #2e2e35 !important;
  border-color: #454545 !important;
}

#serp-dd .result a {
  color: #eaeaea !important;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn-primary,
.btn {
  background: #46c8f5 !important;
  color: #111111 !important;
  border-color: #46c8f5 !important;
}

.btn-primary:hover,
.btn:hover {
  background: #24bef3 !important;
  border-color: #24bef3 !important;
}

/* ─── Footer ───────────────────────────────────────────────── */
footer,
.footer {
  background: #212126 !important;
  color: #eaeaea !important;
  border-top: 1px solid #454545 !important;
}

footer a,
.footer a {
  color: #46c8f5 !important;
}