/* =========================================================
   Defectly – Help Scout Docs Knowledge Base Theme (v3)
   Header: solid #182823
   Search button border corrected
   ========================================================= */

/* -------------------------
   CSS Variables (Brand)
-------------------------- */
:root {
  --defectly-50:#f2f7f6;
  --defectly-100:#e0efec;
  --defectly-200:#c2dfd9;
  --defectly-300:#9ac9bf;
  --defectly-400:#64a794;
  --defectly-500:#27423B;
  --defectly-600:#1f352f;
  --defectly-700:#182823;

  --accent:#55D197;

  --bg:#ffffff;
  --bg-soft:var(--defectly-50);
  --text:#0f172a;
  --text-soft:#334155;
  --border:rgba(39,66,59,.18);
  --shadow:0 10px 30px -18px rgba(2,6,23,.25);

  --radius:16px;
  --radius-lg:22px;

  --font-sans: Inter, Figtree, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------
   Global base
-------------------------- */
html, body {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* -------------------------
   Header / Top bar (solid)
-------------------------- */
header,
.site-header,
.docs-header {
  background: #182823 !important;
  border-bottom: none !important;
  padding: 1.25rem 0 !important;
  color: #ffffff !important;
}

header a,
.site-header a,
.docs-header a {
  color: #ffffff !important;
}

.docs-header img {
  max-height: 36px;
}

/* -------------------------
   Hero / Title
-------------------------- */
.hero h1,
.page-title,
.kb-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* -------------------------
   Search input
-------------------------- */
.search,
.kb-search,
.hero-search {
  margin-top: 1.25rem;
}

input[type="search"],
.search input {
  border-radius: 5px 0 0 5px !important;
  padding: 0 1.1rem !important;
  height: 50px !important;
  border: 1px solid var(--border) !important;
  font-size: 18px;
}

/* -------------------------
   Search button (override HS defaults)
-------------------------- */
.search button,
.kb-search button,
.search input + button {
  color: #fff !important;
  text-shadow: 0 -1px 1px rgba(0,0,0,.4);
  background: #4F92CA !important;
  border-radius: 0 5px 5px 0 !important;
  border: 1px solid #182823 !important;
  font-size: 18px !important;
  padding: 0 1.5em !important;
  height: 50px !important;
  position: absolute;
  top: 24px;
  right: -1px;
}

.search button:hover {
  filter: brightness(0.95);
}

/* -------------------------
   Cards / Categories
-------------------------- */
.card,
.collection,
.category,
.collection-card {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow);
}

/* -------------------------
   Article content
-------------------------- */
.article-content p {
  color: var(--text-soft) !important;
  line-height: 1.75 !important;
}

blockquote {
  border-left: 4px solid var(--accent);
  background: rgba(85,209,151,.12);
  padding: 1rem 1.2rem;
  border-radius: 14px;
}

/* -------------------------
   Footer
-------------------------- */
footer,
.site-footer,
.docs-footer {
  background: var(--defectly-50) !important;
  border-top: 1px solid var(--border) !important;
  font-size: 0.85rem;
  padding: 1.5rem 0;
  color: var(--defectly-600);
}


/* ================================
   Strong overrides for Help Scout Docs search bar
   Targets exact markup shown in inspector:
   <form id="searchBar"> ... <input ...> <button ...>
================================ */

#searchBar input[type="text"],
#searchBar input[type="search"],
#searchBar input,
#searchBar .search-query {
  border: 1px solid #182823 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 5px 0 0 5px !important;
  height: 50px !important;
}

#searchBar button,
#searchBar button[type="submit"] {
  background: #182823 !important;
  border: 1px solid #182823 !important;
  color: #fff !important;
  text-shadow: 0 -1px 1px rgba(0,0,0,.4) !important;
  border-radius: 0 5px 5px 0 !important;
  font-size: 18px !important;
  padding: 0 1.5em !important;
  height: 50px !important;
}

/* Ensure hover keeps Defectly tone */
#searchBar button:hover,
#searchBar button[type="submit"]:hover {
  background: #1f352f !important;
  border-color: #1f352f !important;
}


/* ================================
   Defectly v5 refinements
   - Match default button + input to hover colour
   - Remove green footer background
================================ */

/* Define the lighter Defectly green used on hover as the default */
:root {
  --defectly-search-main: #1f352f; /* previously hover colour */
}

/* Search input: lighter border + focus ring */
#searchBar input[type="text"],
#searchBar input[type="search"],
#searchBar input,
#searchBar .search-query {
  border: 1px solid var(--defectly-search-main) !important;
}

#searchBar input:focus {
  box-shadow: 0 0 0 3px rgba(31,53,47,.35) !important;
  border-color: var(--defectly-search-main) !important;
}

/* Search button: default matches hover tone */
#searchBar button,
#searchBar button[type="submit"] {
  background: var(--defectly-search-main) !important;
  border-color: var(--defectly-search-main) !important;
}

/* Hover can stay the same (no visual jump) */
#searchBar button:hover,
#searchBar button[type="submit"]:hover {
  background: var(--defectly-search-main) !important;
  border-color: var(--defectly-search-main) !important;
}

/* Footer: remove green box, keep neutral */
footer,
.site-footer,
.docs-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}