@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== GLOBAL ===== */
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; }
body { background: #ffffff !important; color: #1a1a2e !important; -webkit-font-smoothing: antialiased !important; }

/* ===== HEADER ===== */
#mainNav, header.navbar { background: #111111 !important; border: none !important; box-shadow: none !important; }
#mainNav .navbar-inner { background: #111111 !important; border: none !important; box-shadow: none !important; }
#mainNav .nav > li > a { color: rgba(255,255,255,0.45) !important; font-weight: 500 !important; font-size: 0.85rem !important; transition: color 0.15s !important; }
#mainNav .nav > li.active > a, #mainNav .nav > li > a:hover { color: #ffffff !important; background: transparent !important; }

/* ===== HERO — solid dark + subtle warm glow ===== */
#docsSearch {
  background: #111111 !important;
  padding: 48px 0 44px !important;
  border-bottom: none !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Warm radial glow for depth */
#docsSearch::before {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 700px !important;
  height: 200px !important;
  background: radial-gradient(ellipse, rgba(255,90,31,0.12) 0%, rgba(255,90,31,0.04) 40%, transparent 70%) !important;
  pointer-events: none !important;
}
#docsSearch h1 { color: #ffffff !important; font-weight: 600 !important; font-size: 1.65rem !important; letter-spacing: -0.03em !important; position: relative !important; z-index: 1 !important; }

/* ===== SEARCH ===== */
input.search-query, #searchBar .search-query {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 8px 0 0 8px !important;
  padding: 13px 18px !important;
  font-size: 0.93rem !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1 !important;
}
input.search-query:focus { border-color: #ff5a1f !important; box-shadow: 0 0 0 2px rgba(255,90,31,0.15) !important; outline: none !important; }
input.search-query::placeholder { color: rgba(255,255,255,0.25) !important; }

#searchBar button, #docsSearch button {
  background: #ff5a1f !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 13px 24px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  position: relative !important;
  z-index: 1 !important;
}
#searchBar button:hover { background: #e04d15 !important; }

/* ===== CONTENT ===== */
#contentArea { background: #ffffff !important; padding-top: 0 !important; }

/* ===== HIDE UGLY ARTICLE ICONS ===== */
.icon-article-doc { display: none !important; }

/* ===== POPULAR ARTICLES ===== */
.popArticles, .most-pop-articles { padding: 32px 0 20px !important; }
#contentArea h2, .popArticles h2 {
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;
}

.popArticles li, .most-pop-articles li {
  padding: 8px 12px !important;
  margin: 0 -12px !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}
.popArticles li:hover, .most-pop-articles li:hover {
  background: #f7f7f8 !important;
}

.popArticles a, .most-pop-articles a {
  color: #1a1a2e !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  line-height: 1.5 !important;
}
.popArticles a:hover, .most-pop-articles a:hover { color: #ff5a1f !important; }

/* ===== SEPARATOR ===== */
.sep { border-color: #f0f0f0 !important; }

/* ===== CATEGORY CARDS ===== */
.category-list { padding: 16px 0 56px !important; }
.category-list .category a {
  background: #fafafa !important;
  border: 1px solid #eaeaea !important;
  border-radius: 12px !important;
  padding: 28px 24px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.category-list .category a:hover {
  border-color: #ff5a1f !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  transform: translateY(-2px) !important;
}
.category-list h4 { color: #1a1a2e !important; font-weight: 700 !important; font-size: 1rem !important; }
.category-list .article-count { color: #999 !important; font-size: 0.85rem !important; font-weight: 400 !important; }

/* ===== ARTICLE PAGES ===== */
.article-body { line-height: 1.7 !important; color: #333 !important; font-size: 0.95rem !important; }
.article-body h1, #contentArea h1 { color: #1a1a2e !important; font-weight: 700 !important; font-size: 1.75rem !important; letter-spacing: -0.03em !important; }
.article-body h2 { font-size: 1.35rem !important; font-weight: 700 !important; color: #1a1a2e !important; }
.article-body h3 { font-size: 1.1rem !important; font-weight: 600 !important; color: #1a1a2e !important; }
.article-body a, #contentArea .contentWrapper a { color: #ff5a1f !important; text-decoration: none !important; }
.article-body a:hover { text-decoration: underline !important; }
.article-body code { background: #f5f5f5 !important; border: 1px solid #e5e5e5 !important; border-radius: 4px !important; padding: 2px 6px !important; color: #d63384 !important; font-size: 0.87em !important; }
.article-body pre { background: #1a1a2e !important; border-radius: 8px !important; padding: 20px !important; }
.article-body pre code { background: transparent !important; border: none !important; color: #e2e8f0 !important; padding: 0 !important; }
.article-body blockquote { border-left: 3px solid #ff5a1f !important; background: #fef7f4 !important; padding: 16px 20px !important; border-radius: 0 6px 6px 0 !important; }

/* ===== SIDEBAR ===== */
.sidebar a { color: #444 !important; font-weight: 500 !important; transition: color 0.15s !important; }
.sidebar a:hover { color: #ff5a1f !important; }
.sidebar a.active, .sidebar li.active a { color: #ff5a1f !important; font-weight: 600 !important; }

/* ===== BREADCRUMBS ===== */
.breadcrumbs { color: #999 !important; font-size: 0.82rem !important; }
.breadcrumbs a { color: #666 !important; text-decoration: none !important; }
.breadcrumbs a:hover { color: #ff5a1f !important; }

/* ===== FOOTER ===== */
footer, .powered-by { color: #bbb !important; font-size: 0.78rem !important; }
footer a { color: #bbb !important; text-decoration: none !important; }

/* ===== GLOBAL LINKS ===== */
a[href*="/article/"] { color: #1a1a2e !important; font-weight: 500 !important; transition: color 0.15s !important; }
a[href*="/article/"]:hover { color: #ff5a1f !important; }

/* ===== INJECTED NAV LINKS ===== */
#lava-nav {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 0 20px !important;
}
#lava-nav a {
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
  white-space: nowrap !important;
}
#lava-nav a:hover { color: #ffffff !important; }