/* ==============================
   NIZAM — Help Scout Docs (classic DOM)
   Works with #mainNav, #docsSearch, #searchBar
   ============================== */

:root{
  --nzm-text:#010F2F;
  --nzm-text-muted:#2a385c;
  --nzm-primary:#1862DE;
  --nzm-primary-600:#0E4EB8;
  --nzm-border:rgba(1,15,47,.10);
  --shadow:0 2px 14px rgba(1,15,47,.08);
}

html, body {
  background:#fff !important;
  color:var(--nzm-text) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ---------- Hero (top section with gradient) ---------- */
#docsSearch {
  background: linear-gradient(135deg, #1862DE 0%, #5E88FA 100%) !important;
  text-align:center !important;
  padding:56px 0 40px !important;
  border-bottom:none !important;
}
#docsSearch h1 {
  margin:0 0 16px !important;
  font-size:36px !important;
  font-weight:600 !important;
  color:#fff !important;
}
#docsSearch form#searchBar {
  max-width:720px !important;
  margin:20px auto 0 !important;
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
}
#searchBar input.search-query {
  flex:1 !important;
  height:48px !important;
  padding:0 16px !important;
  font-size:16px !important;
  border:0 !important;
  border-radius:12px 0 0 12px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.15) !important;
}
#searchBar input.search-query::placeholder { color:#777 !important; }
#searchBar button {
  height:48px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:0 12px 12px 0 !important;
  background:#010F2F !important;
  color:#fff !important;
  font-weight:600 !important;
}
#searchBar button:hover { background:#0E4EB8 !important; }

/* ---------- Footer ---------- */
footer.center {
  color:var(--nzm-text-muted) !important;
  border-top:1px solid var(--nzm-border) !important;
  margin-top:24px !important;
  padding-top:16px !important;
}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  #docsSearch h1 { font-size:28px !important; }
  #mainNav .brand img { height:24px !important; }
}