/* ============================================
   Swarmify Help Center
   Aligned to SmartVideo Design System
   ============================================ */

/* Fonts — matches brand guide: Space Grotesk + DM Mono */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ---- Design Tokens (light mode) ---- */
:root {
  --sv-bg: #faf8f4;
  --sv-surface: #ffffff;
  --sv-surface-alt: #f5f0e8;
  --sv-text-heading: #1c1917;
  --sv-text-body: #78716c;
  --sv-text-muted: #a8a29e;
  --sv-accent: #e6c800;
  --sv-accent-dark: #c9a000;
  --sv-accent-light: #fee265;
  --sv-border: #e7e5e4;
  --sv-border-subtle: #d6d3d1;
  --sv-radius: 10px;
  --sv-radius-lg: 14px;
  --sv-font: 'Space Grotesk', -apple-system, sans-serif;
  --sv-mono: 'DM Mono', monospace;
  --sv-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --sv-shadow-hover: 0 2px 8px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
}

/* ---- Dark Mode (system preference) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --sv-bg: #0f0e0d;
    --sv-surface: #171614;
    --sv-surface-alt: #1c1a15;
    --sv-text-heading: #e8e3db;
    --sv-text-body: #9c9590;
    --sv-text-muted: #6b6560;
    --sv-accent: #e6c800;
    --sv-accent-dark: #c9a000;
    --sv-accent-light: #fee265;
    --sv-border: #2a2623;
    --sv-border-subtle: #3a3633;
    --sv-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
    --sv-shadow-hover: 0 2px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.3);
  }
  /* Header stays dark regardless */
  #mainNav.navbar {
    background: #0a0908 !important;
    box-shadow: 0 1px 0 rgba(230, 200, 0, 0.1) !important;
  }
  /* Collection cards */
  .collection {
    background: var(--sv-surface) !important;
    border-color: var(--sv-border) !important;
  }
  .collection:hover {
    border-color: var(--sv-accent) !important;
  }
  .collection-head,
  .threeCol .collection .collection-head,
  .twoCol .collection .collection-head {
    background: var(--sv-surface-alt) !important;
  }
  /* Article content area */
  .contentWrapper {
    background: transparent !important;
  }
  #fullArticle {
    color: var(--sv-text-heading) !important;
  }
  #fullArticle p,
  #fullArticle li,
  #fullArticle td,
  #fullArticle th {
    color: #c4bfb7 !important;
  }
  #fullArticle img {
    border-color: var(--sv-border) !important;
    opacity: 0.75 !important;
    filter: brightness(0.85) !important;
  }
  #fullArticle img:hover {
    opacity: 1 !important;
    filter: brightness(1) !important;
  }
  #fullArticle code,
  #fullArticle pre {
    background: var(--sv-surface-alt) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text-heading) !important;
  }
  /* Search */
  #searchBar input.search-query,
  form#searchBar input.search-query {
    background: var(--sv-surface) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text-heading) !important;
  }
  /* Search button — keep gold gradient + dark text/icon in dark mode */
  #searchBar button[type="submit"],
  form#searchBar button[type="submit"],
  #searchBar .btn,
  #sidebar #searchBar button {
    background: linear-gradient(180deg, #ffe872 0%, #e6c800 100%) !important;
    color: #1c1917 !important;
  }
  #searchBar button[type="submit"] span,
  #searchBar button[type="submit"] i,
  #searchBar button .icon-search,
  #sidebar #searchBar button .icon-search,
  #sidebar #searchBar button i {
    color: #1c1917 !important;
  }
  /* Sidebar */
  .nav-list li a {
    color: var(--sv-text-body) !important;
  }
  .nav-list li a:hover {
    background: var(--sv-surface-alt) !important;
    color: var(--sv-text-heading) !important;
  }
  #sidebar h3 {
    color: var(--sv-text-muted) !important;
  }
  /* Article links */
  .popArticles a,
  .articleList li a {
    color: var(--sv-text-body) !important;
  }
  .popArticles a:hover,
  .articleList li a:hover {
    color: var(--sv-text-heading) !important;
  }
  .popArticles li a:hover {
    background: var(--sv-surface-alt) !important;
  }
  /* Footer */
  footer, footer.center {
    color: var(--sv-text-muted) !important;
  }
  /* Article ratings / feedback widget */
  .articleRatings {
    background: var(--sv-surface) !important;
    border-color: var(--sv-border) !important;
    color: var(--sv-text-body) !important;
  }
  .articleRatings-question {
    color: var(--sv-text-body) !important;
  }
  /* Help Scout injected inline styles override */
  #docsSearch {
    background: var(--sv-bg) !important;
    border-bottom-color: var(--sv-border) !important;
  }
}

/* ---- Foundation ---- */
/* Safety net: prevent horizontal scroll caused by any element exceeding viewport */
html {
  overflow-x: hidden !important;
}
/* Universal box-sizing — prevents width + padding from exceeding containers */
*, *::before, *::after {
  box-sizing: border-box !important;
}
body {
  font-family: var(--sv-font) !important;
  background: var(--sv-bg) !important;
  color: var(--sv-text-body) !important;
  -webkit-font-smoothing: antialiased !important;
  /* Override Bootstrap's body padding at ALL breakpoints */
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ---- Header ---- */
/* Kill Bootstrap's .navbar-fixed-top/-bottom { margin: 0 -20px } that causes overflow */
#mainNav.navbar,
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
  background: #141211 !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(230, 200, 0, 0.06) !important;
  margin: 0 !important;
  min-height: auto !important;
  width: 100% !important;
}
.navbar-inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 0 !important;
}
/* Kill Bootstrap's .navbar .brand { margin-left: -20px } */
.navbar .brand {
  margin-left: 0 !important;
}
#mainNav .container-fluid {
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
  gap: 2rem !important;
  max-width: 1200px !important;
  padding: 0 1rem !important;
}
@media (max-width: 768px) {
  /* ---- Mobile overflow fix: root causes ---- */

  /* 1. Kill Bootstrap's body { padding: 20px } — use high specificity */
  html body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 2. Navbar: edge-to-edge, no negative margins, no overflow */
  #mainNav.navbar,
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin: 0 -20px !important;
    padding: 0 20px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
  }
  .navbar-inner {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* 3. Navbar container: flex-wrap so logo+hamburger center vertically,
        collapsed nav flows below */
  #mainNav .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 56px !important;
    gap: 0 !important;
  }

  /* 4. Content containers */
  .contentWrapper {
    padding: 20px 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. Bootstrap row negative margins — zero them out */
  .row,
  .row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* 6. Bootstrap columns: stack vertically on mobile */
  .row-fluid .span9,
  .row-fluid .span3,
  .row-fluid [class*="span"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    display: block !important;
  }

  /* 7. Hamburger button — margin-left:auto pushes it to the right in flex row */
  .btn-navbar {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 8px 10px !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    position: relative !important;
    z-index: 100 !important;
  }
  .btn-navbar .icon-bar {
    background: #e8e3db !important;
    display: block !important;
  }

  /* 8. Logo on mobile — no float, flex handles vertical centering */
  .navbar .brand {
    float: none !important;
    max-width: 60% !important;
    flex-shrink: 0 !important;
  }

  /* 9. Hide nav by default on mobile — Bootstrap collapse */
  .nav-collapse.collapse {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
  .nav-collapse.collapse.in,
  .nav-collapse.in {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    flex-basis: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 10. Stacked nav items */
  .nav-collapse .nav {
    display: block !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    float: none !important;
    width: 100% !important;
  }
  .nav-collapse .nav > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }
  .nav-collapse .nav > li > a {
    display: block !important;
    padding: 10px 1rem !important;
    color: rgba(232, 227, 219, 0.7) !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    white-space: normal !important;
  }
  .nav-collapse .nav > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.05) !important;
  }
  .nav-collapse .nav > li.active > a {
    color: var(--sv-accent) !important;
  }
  .nav-collapse .nav > li.active > a::after {
    display: none !important;
  }

  /* 11. Contact pill on mobile */
  .navbar .nav > li > a.contactUs {
    border-radius: 8px !important;
    margin: 8px 1rem !important;
    text-align: center !important;
    padding: 10px 16px !important;
  }
  #contactMobile {
    display: block !important;
  }

  /* 12. popArticles negative margin — remove on mobile */
  .popArticles li a {
    margin: 0 !important;
  }

  /* 13. Collection cards font-size restore */
  .threeCol .collection {
    font-size: 16px !important;
  }

  /* 14. Search bar — constrain to viewport */
  #docsSearch {
    padding: 1.5em 20px 1em !important;
    overflow: hidden !important;
  }
  #searchBar {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Logo */
.navbar .brand {
  font-family: var(--sv-font) !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
/* Logo mobile left padding — must come AFTER the general rule to win source order */
@media (max-width: 768px) {
  .navbar .brand {
    padding: 0 0 0 12px !important;
  }
}
.navbar .brand img,
a.brand img,
.navbar-inner .brand img,
#mainNav .brand img,
img[alt="Swarmify Help Center"] {
  height: 24px !important;
  width: auto !important;
  max-width: 160px !important;
  vertical-align: middle !important;
  opacity: 0.9 !important;
  transition: opacity 0.2s !important;
}
.navbar .brand:hover img {
  opacity: 1 !important;
}

/* Nav container */
.navbar-inner .nav {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

/* Nav links */
.navbar .nav > li > a {
  font-family: var(--sv-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: rgba(232, 227, 219, 0.55) !important;
  padding: 18px 14px !important;
  transition: color 0.2s !important;
  white-space: nowrap !important;
  position: relative !important;
}
.navbar .nav > li > a:hover {
  color: rgba(232, 227, 219, 0.9) !important;
  background: none !important;
}
.navbar .nav > li.active > a {
  color: var(--sv-accent) !important;
}
.navbar .nav > li.active > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 14px !important;
  right: 14px !important;
  height: 2px !important;
  background: var(--sv-accent) !important;
  border-radius: 1px !important;
}
.navbar .nav .caret {
  display: none !important;
}

/* Contact — pill CTA */
.navbar .nav > li > a.contactUs {
  background: rgba(230, 200, 0, 0.1) !important;
  border: 1px solid rgba(230, 200, 0, 0.2) !important;
  border-radius: 100px !important;
  padding: 7px 18px !important;
  margin-left: 6px !important;
  color: var(--sv-accent-light) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s !important;
}
.navbar .nav > li > a.contactUs:hover {
  background: rgba(230, 200, 0, 0.18) !important;
  border-color: rgba(230, 200, 0, 0.35) !important;
}
.navbar .nav > li > a.contactUs::after {
  display: none !important;
}
#contactMobile {
  display: none !important;
}

/* ---- Hero / Search Section ---- */
#docsSearch {
  background: var(--sv-bg) !important;
  border-bottom: 1px solid var(--sv-border) !important;
  padding: 2.5em 0 !important;
  margin-bottom: 2.5em !important;
}
#docsSearch h1 {
  font-family: var(--sv-font) !important;
  font-weight: 600 !important;
  font-size: 1.6em !important;
  color: var(--sv-text-heading) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 0.75em !important;
}

/* ---- Search (homepage hero + sidebar) ---- */
.contentWrapper > form#searchBar,
.center > form#searchBar,
#docsSearch #searchBar,
#docsSearch form#searchBar {
  max-width: 560px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  #docsSearch #searchBar,
  #docsSearch form#searchBar,
  .contentWrapper > form#searchBar,
  .center > form#searchBar {
    max-width: 90vw !important;
  }
}
/*
 * Search bar layout — flexbox replaces the default absolute-positioned button.
 *
 * Help Scout's default CSS positions the button with `position: absolute; right: -1px`
 * which overlays it on the right edge of the full-width input. Even though our
 * border-radius override (100px 0 0 100px) computes correctly, the absolute
 * positioning leaves a visible gap between the input's right edge and the button
 * because they aren't true layout siblings — the button floats on top.
 *
 * Switching to flexbox makes input + button flow as adjacent siblings so their
 * edges meet with zero gap, giving a seamless pill shape.
 */
form#searchBar,
#searchBar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
#searchBar .search-query,
form#searchBar .search-query,
#searchBar input.search-query,
form#searchBar input.search-query {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
}
#searchBar button[type="submit"],
form#searchBar button[type="submit"],
#searchBar .btn,
form#searchBar .btn {
  position: static !important;
  flex: 0 0 auto !important;
}
#serp-dd {
  position: absolute !important;
  width: 100% !important;
  top: 100% !important;
  left: 0 !important;
}
/*
 * Search button — rounded RIGHT side only (pill cap).
 * Multiple selectors cover homepage hero and sidebar contexts.
 */
#searchBar button[type="submit"],
form#searchBar button[type="submit"],
#searchBar .btn,
form#searchBar .btn,
#docsSearch #searchBar button,
#sidebar #searchBar button {
  background: linear-gradient(180deg, #ffe872 0%, #e6c800 100%) !important;
  color: var(--sv-text-heading) !important;
  border: none !important;
  -webkit-border-radius: 0 100px 100px 0 !important;
  -moz-border-radius: 0 100px 100px 0 !important;
  border-radius: 0 100px 100px 0 !important;
  font-weight: 600 !important;
  font-family: var(--sv-font) !important;
  padding: 10px 20px !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#searchBar button[type="submit"]:hover {
  background: linear-gradient(180deg, #ffe872 0%, #c9a000 100%) !important;
  box-shadow: 0 2px 8px rgba(201, 160, 0, 0.2) !important;
}
#searchBar button[type="submit"] span {
  color: var(--sv-text-heading) !important;
  font-family: var(--sv-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
/* Desktop: hide icon, show text */
#searchBar button[type="submit"] i,
#searchBar button .icon-search,
#searchBar button .icon-search.lp {
  display: none !important;
}
/* Mobile: show icon, hide text */
@media (max-width: 768px) {
  #searchBar button[type="submit"] i,
  #searchBar button .icon-search,
  #searchBar button .icon-search.lp {
    display: inline-block !important;
    color: var(--sv-text-heading) !important;
  }
  #searchBar button[type="submit"] span {
    display: none !important;
  }
}
/*
 * Search input — rounded LEFT side only (pill cap), flat on right to meet button.
 *
 * Help Scout's default CSS sets these competing rules (none use !important):
 *   #searchBar .search-query      { border-radius: 5px }   — specificity (1,1,0)
 *   input.search-query            { border-radius: 15px }  — specificity (0,1,1)
 *   .search-query                 { border-radius: 15px }  — specificity (0,1,0)
 *
 * Our !important declarations win the cascade. The visual gap between input and
 * button was caused by the default `position: absolute; right: -1px` on the button
 * (not a specificity issue) — fixed by the flexbox layout block above.
 */
#searchBar input.search-query,
form#searchBar input.search-query,
#searchBar .search-query,
form#searchBar .search-query,
.form-search #searchBar .search-query,
#docsSearch #searchBar input.search-query,
#docsSearch #searchBar .search-query,
input.search-query {
  -webkit-border-radius: 100px 0 0 100px !important;
  -moz-border-radius: 100px 0 0 100px !important;
  border-radius: 100px 0 0 100px !important;
  border: 1px solid var(--sv-border) !important;
  border-right: 0 !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-family: var(--sv-font) !important;
  background: var(--sv-surface) !important;
  color: var(--sv-text-heading) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
#searchBar input.search-query:focus,
form#searchBar input.search-query:focus,
#searchBar .search-query:focus,
form#searchBar .search-query:focus,
#docsSearch #searchBar input.search-query:focus,
input.search-query:focus {
  border-color: var(--sv-accent) !important;
  border-right: 0 !important;
  -webkit-border-radius: 100px 0 0 100px !important;
  -moz-border-radius: 100px 0 0 100px !important;
  border-radius: 100px 0 0 100px !important;
  box-shadow: 0 0 0 3px rgba(230, 200, 0, 0.12) !important;
  outline: none !important;
}

/* ---- Homepage Collection Grid ---- */
.threeCol {
  text-align: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  font-size: 0 !important;           /* kill whitespace between inline-blocks */
}
.threeCol .collection {
  display: inline-block !important;
  width: 30% !important;
  margin: 0 1.5% 1.5em !important;
  vertical-align: top !important;
  text-align: left !important;
  font-size: 16px !important;        /* restore font-size inside cards */
}
/* 2-column breakpoint — between 3-col desktop and 1-col mobile */
@media (max-width: 960px) and (min-width: 701px) {
  .threeCol .collection {
    width: 46% !important;
    margin: 0 2% 1.5em !important;
    font-size: 16px !important;
  }
}
/* 1-column mobile */
@media (max-width: 700px) {
  .threeCol .collection {
    width: 92% !important;
    margin: 0 auto 1.5em !important;
    display: block !important;
    font-size: 16px !important;
  }
}

/* Collection cards */
.collection,
.threeCol .collection,
.twoCol .collection {
  border: 1px solid var(--sv-border) !important;
  border-radius: var(--sv-radius-lg) !important;
  background: var(--sv-surface) !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.collection:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px) !important;
  border-color: var(--sv-accent) !important;
}

/* Collection heading — gold top bar + styled header area */
.collection-head,
.threeCol .collection .collection-head,
.twoCol .collection .collection-head {
  background: var(--sv-surface-alt) !important;
  border-bottom: 2px solid var(--sv-accent) !important;
  padding: 1em 1.25em !important;
  margin: 0 !important;
  display: block !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.collection-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.collection-head h2 a {
  font-family: var(--sv-font) !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
  color: var(--sv-text-heading) !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
}
.collection-head h2 a:hover {
  color: var(--sv-accent-dark) !important;
}

/* Collection body — tighter padding */
.collection-body {
  padding: 0.75em 1.25em 1em !important;
}

/* ---- Article Icons — hidden + reclaim space ---- */
i.icon-article-doc {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}
/* Override Help Scout's 25px left padding reserved for icons */
.popArticles li,
.most-pop-articles .popArticles li {
  padding-left: 0 !important;
}
.popArticles li a,
.most-pop-articles .popArticles li a {
  padding-left: 0 !important;
}
.articleList li a {
  padding-left: 0 !important;
}

/* ---- Homepage Article Lists ---- */
.popArticles {
  padding: 0 !important;
  margin: 0 !important;
}
.popArticles li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-bottom: none !important;
}
.popArticles li a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 8px !important;
  margin: 0 -8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.popArticles li a:hover {
  background: var(--sv-surface-alt) !important;
}
.popArticles li a span {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.popArticles a {
  color: var(--sv-text-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.popArticles a:hover {
  color: var(--sv-text-heading) !important;
}

/* Browse all */
a.browse {
  color: var(--sv-accent-dark) !important;
  font-family: var(--sv-mono) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  display: block !important;
  text-align: left !important;
  padding-top: 0.5em !important;
}
a.browse:hover {
  color: var(--sv-accent) !important;
}

/* ---- Collection / Category Pages ---- */
.contentWrapper h1 {
  font-family: var(--sv-font) !important;
  font-weight: 700 !important;
  font-size: 1.4em !important;
  color: var(--sv-text-heading) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.5em !important;
}

.articleList {
  padding: 0 !important;
  margin: 0 !important;
}
.articleList li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.articleList li a {
  display: flex !important;
  align-items: center !important;
  padding: 11px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: var(--sv-text-body) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transition: all 0.15s !important;
  border: 1px solid transparent !important;
}
.articleList li a:hover {
  background: var(--sv-surface) !important;
  border-color: var(--sv-border) !important;
  box-shadow: var(--sv-shadow) !important;
  color: var(--sv-text-heading) !important;
  transform: translateX(3px) !important;
}
.articleList li a span {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Content wrapper — no inner box, no shadow */
.contentWrapper,
.row-fluid > .span9 > .contentWrapper,
.span9 > section > .contentWrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
}
/* Kill any lingering content section borders/shadows */
.row-fluid > .span9 > section,
.row-fluid > .span9 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- Sidebar ---- */
#sidebar {
  font-family: var(--sv-font) !important;
}
#sidebar h3 {
  font-family: var(--sv-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--sv-text-muted) !important;
  margin-bottom: 0.75em !important;
}
.nav-list li a {
  display: block !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  color: var(--sv-text-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}
.nav-list li a:hover {
  background: var(--sv-surface-alt) !important;
  color: var(--sv-text-heading) !important;
}
.nav-list li a .icon-arrow {
  display: none !important;
}

/*
 * Sidebar search — pill style with correct left/right rounding.
 * Must beat Help Scout's #sidebar form .search-query { border-radius: 3px } (1,1,1).
 * Input: rounded left only. Button: rounded right only.
 */
#sidebar .search-query,
#sidebar input.search-query,
#sidebar form .search-query,
#sidebar form input.search-query,
#sidebar #searchBar .search-query,
#sidebar #searchBar input.search-query {
  -webkit-border-radius: 100px 0 0 100px !important;
  -moz-border-radius: 100px 0 0 100px !important;
  border-radius: 100px 0 0 100px !important;
  border: 1px solid var(--sv-border) !important;
  border-right: none !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-family: var(--sv-font) !important;
  background: var(--sv-surface) !important;
}
#sidebar #searchBar button,
#sidebar #searchBar .btn,
#sidebar form#searchBar button {
  -webkit-border-radius: 0 100px 100px 0 !important;
  -moz-border-radius: 0 100px 100px 0 !important;
  border-radius: 0 100px 100px 0 !important;
  background: var(--sv-text-heading) !important;
  border: none !important;
}
#sidebar #searchBar button .icon-search {
  color: var(--sv-bg) !important;
}
/* Remove sidebar search bar shadow/outline */
#sidebar #searchBar {
  box-shadow: none !important;
}

/* Sidebar contact */
.contactUs a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  background: linear-gradient(180deg, #ffe872 0%, #e6c800 100%) !important;
  color: #1c1917 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.contactUs a:hover {
  background: linear-gradient(180deg, #ffe872 0%, #c9a000 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(201, 160, 0, 0.2) !important;
}

/* ---- Article Pages ---- */
#fullArticle {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: var(--sv-text-body) !important;
  max-width: 720px !important;
}
#fullArticle h1, #fullArticle h2,
#fullArticle h3, #fullArticle h4,
#fullArticle h5 {
  font-family: var(--sv-font) !important;
  font-weight: 600 !important;
  color: var(--sv-text-heading) !important;
  letter-spacing: -0.02em !important;
}
#fullArticle a {
  color: var(--sv-accent-dark) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(201, 160, 0, 0.3) !important;
  text-underline-offset: 2px !important;
  transition: text-decoration-color 0.2s !important;
}
#fullArticle a:hover {
  text-decoration-color: var(--sv-accent-dark) !important;
}
#fullArticle img {
  border-radius: var(--sv-radius) !important;
  border: 1px solid var(--sv-border) !important;
  margin: 1em 0 !important;
  max-width: 100% !important;
}
#fullArticle code,
#fullArticle pre {
  font-family: var(--sv-mono) !important;
  font-size: 13.5px !important;
  background: var(--sv-surface-alt) !important;
  border-radius: 6px !important;
  border: 1px solid var(--sv-border) !important;
}
#fullArticle pre {
  padding: 16px !important;
  overflow-x: auto !important;
}
#fullArticle code {
  padding: 2px 6px !important;
}

/* ---- Homepage Description ---- */
.contentWrapper > h1,
.contentWrapper > .center > h1 {
  font-family: var(--sv-font) !important;
  font-weight: 600 !important;
  font-size: 1.5em !important;
  color: var(--sv-text-heading) !important;
  letter-spacing: -0.03em !important;
}

/* ---- Wide Viewport ---- */
/* Only apply centering/max-width above mobile breakpoint to avoid fighting mobile overrides */
@media (min-width: 769px) {
  .container-fluid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
  }
  .row-fluid .span9 {
    width: 72% !important;
  }
  .row-fluid .span3 {
    width: 24% !important;
  }
}
@media (min-width: 1400px) {
  .container-fluid {
    max-width: 1320px !important;
  }
  #fullArticle {
    max-width: 780px !important;
    font-size: 16px !important;
  }
}

/* ---- Footer ---- */
footer, footer.center {
  font-family: var(--sv-font) !important;
  color: var(--sv-text-muted) !important;
  font-size: 13px !important;
}
footer a, footer.center a {
  color: var(--sv-accent-dark) !important;
}
footer a:hover, footer.center a:hover {
  color: var(--sv-accent) !important;
}

/* ---- Article Footer (Still need help + Last updated) ---- */
p.help {
  font-family: var(--sv-font) !important;
  font-size: 14px !important;
  color: var(--sv-text-muted) !important;
}
p.help a {
  color: var(--sv-accent-dark) !important;
  font-weight: 500 !important;
}
time.lu {
  font-family: var(--sv-font) !important;
  font-size: 13px !important;
  color: var(--sv-text-muted) !important;
}

/* ---- Dark Mode Overrides (MUST be last to win source order) ---- */
@media (prefers-color-scheme: dark) {
  /* Search buttons — force gold gradient + dark text everywhere */
  #searchBar button[type="submit"],
  form#searchBar button[type="submit"],
  #searchBar .btn,
  form#searchBar .btn,
  #docsSearch #searchBar button,
  #sidebar #searchBar button,
  #sidebar #searchBar .btn,
  #sidebar form#searchBar button {
    background: linear-gradient(180deg, #ffe872 0%, #e6c800 100%) !important;
    color: #1c1917 !important;
  }
  #searchBar button[type="submit"] span,
  #searchBar button[type="submit"] i,
  #searchBar button .icon-search,
  #sidebar #searchBar button .icon-search,
  #sidebar #searchBar button i,
  #sidebar form#searchBar button i {
    color: #1c1917 !important;
  }
  /* Search autocomplete dropdown */
  #serp-dd,
  #serp-dd.sb {
    background: var(--sv-surface) !important;
    border: 1px solid var(--sv-border) !important;
    border-radius: 10px !important;
  }
  #serp-dd .result li a,
  #serp-dd .result a {
    color: var(--sv-text-body) !important;
  }
  #serp-dd .result li a:hover,
  #serp-dd .result a:hover,
  #serp-dd .result li.active a {
    background: var(--sv-surface-alt) !important;
    color: var(--sv-text-heading) !important;
  }
  /* Sidebar search icon — always visible, force dark color on gold */
  #sidebar #searchBar button .icon-search,
  #sidebar #searchBar button i {
    display: inline-block !important;
    color: #1c1917 !important;
  }
}
/* Mobile: icon must show in dark mode too (source order after desktop hide rule) */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  #searchBar button[type="submit"] i,
  #searchBar button .icon-search,
  #searchBar button .icon-search.lp {
    display: inline-block !important;
    color: #1c1917 !important;
  }
}

/* ---- Utility ---- */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
