/* =========================================================
   RumbleSeat Help Scout Docs Theme (v1)
   Goal: Match help.rumbleseat.com to rumbleseat.com
   Notes:
   - Help Scout Docs has changed markup over time. This file
     targets both common “classic” selectors and newer patterns.
   - If a selector doesn’t hit on your instance, use DevTools
     and adjust the nearest matching class/ID.
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root{
  --rs-blue: #23B5FF;
  --rs-blue-600: #139CE6;
  --rs-ink: #0B1220;
  --rs-ink-2: #111B2E;
  --rs-text: #1C2A3A;
  --rs-muted: #607089;

  --rs-bg: #F7F9FC;
  --rs-card: #FFFFFF;
  --rs-border: rgba(11,18,32,.10);

  --rs-radius: 14px;
  --rs-radius-sm: 10px;

  --rs-shadow: 0 10px 30px rgba(11,18,32,.10);
  --rs-shadow-sm: 0 6px 18px rgba(11,18,32,.08);

  --rs-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* ---------- Base ---------- */
html, body{
  font-family: var(--rs-font) !important;
  background: var(--rs-bg) !important;
  color: var(--rs-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: var(--rs-blue) !important;
  text-decoration: none !important;
}
a:hover{
  color: var(--rs-blue-600) !important;
  text-decoration: underline !important;
}

/* Keep page content feeling like rumbleseat.com (slightly wider + more breathing room) */
.container, .container-fluid, .contentWrapper, .content, .article, .article-content, #main, main{
  max-width: 1120px;
}
.contentWrapper, .content, #main, main{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ---------- Header / Nav ---------- */
/* “Classic” Docs */
.navbar, .navbar-inner{
  background: var(--rs-ink) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
.navbar .brand, .navbar a.brand, .navbar .nav li a{
  color: rgba(255,255,255,.88) !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}
.navbar .nav li a:hover,
.navbar .nav li.active a{
  color: var(--rs-blue) !important;
  background: transparent !important;
}

/* “Newer” header patterns */
header, .Header, .header, .site-header{
  background: var(--rs-ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
header a, .Header a, .site-header a{
  color: rgba(255,255,255,.88) !important;
}
header a:hover, .Header a:hover, .site-header a:hover{
  color: var(--rs-blue) !important;
}

/* Logo sizing (adjust if needed) */
a.brand > img, .brand img, .Logo img{
  height: 44px !important;
  width: auto !important;
}

/* ---------- Home search hero ---------- */
/* Classic id */
#docsSearch{
  background: linear-gradient(180deg, var(--rs-ink) 0%, var(--rs-ink-2) 100%) !important;
  border: none !important;
  padding: 36px 0 28px !important;
  margin-bottom: 26px !important;
}
#docsSearch h1{
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-size: 34px !important;
  line-height: 1.12 !important;
  margin: 0 0 10px !important;
}
#docsSearch p, #docsSearch .subheading, #docsSearch .docsSearch__description{
  color: rgba(255,255,255,.78) !important;
}

/* Search input (classic) */
#searchBar, .searchBar, .Search, .search{
  margin-top: 14px !important;
}
input.search-query, .search input[type="text"], .Search input, #searchBar input{
  height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  padding: 0 18px !important;
  outline: none !important;
  box-shadow: none !important;
}
input.search-query::placeholder, .search input::placeholder, .Search input::placeholder{
  color: rgba(255,255,255,.60) !important;
}

/* Search button */
#searchBar button, .search button, .Search button, button[type="submit"]{
  border-radius: 999px !important;
  background: var(--rs-blue) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--rs-ink) !important;
  font-weight: 800 !important;
  height: 48px !important;
  padding: 0 18px !important;
  box-shadow: 0 10px 24px rgba(35,181,255,.25) !important;
}
#searchBar button:hover, .search button:hover, .Search button:hover, button[type="submit"]:hover{
  background: var(--rs-blue-600) !important;
}

/* ---------- Category “cards” on home ---------- */
/* Classic Docs categories */
.category-list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.category-list .category{
  background: var(--rs-card) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow-sm) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  padding: 18px 18px 16px !important;
  min-height: 140px !important;
}
.category-list .category:hover{
  transform: translateY(-2px);
  box-shadow: var(--rs-shadow) !important;
  border-color: rgba(35,181,255,.35) !important;
}

/* Classic headings */
.category-list h3{
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--rs-ink) !important;
  margin-bottom: 6px !important;
}
.category-list .category p{
  color: var(--rs-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Article counts / meta */
.category-list .article-count, .category .article-count{
  color: var(--rs-blue) !important;
  font-weight: 700 !important;
}

/* ---------- Collections / category pages ---------- */
.collection-category h2, h1.collection-name, .collection-title, .CategoryTitle{
  color: var(--rs-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* Lists of articles */
.collection a, .contentWrapper a, .articles a, .ArticleList a{
  font-weight: 700 !important;
}

/* ---------- Article typography ---------- */
#fullArticle, #full-Article, .article-content, article, .Article{
  background: var(--rs-card) !important;
  border: 1px solid var(--rs-border) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--rs-shadow-sm) !important;
  padding: 26px !important;
}

#fullArticle h1, #full-Article h1, article h1, .Article h1{
  color: var(--rs-ink) !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em;
  font-size: 34px !important;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
}

#fullArticle h2, #full-Article h2, article h2,
#fullArticle h3, #full-Article h3, article h3{
  color: var(--rs-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
}

#fullArticle p, #full-Article p, article p, .Article p,
#fullArticle li, #full-Article li, article li, .Article li{
  color: var(--rs-text) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* Blockquotes like callouts */
blockquote{
  border-left: 4px solid var(--rs-blue) !important;
  background: rgba(35,181,255,.08) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: var(--rs-text) !important;
}

/* Code blocks */
pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
pre{
  background: #0D1526 !important;
  color: #EAF2FF !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  overflow: auto !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
code{
  background: rgba(11,18,32,.06) !important;
  border-radius: 8px !important;
  padding: 2px 6px !important;
}

/* Tables */
table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid var(--rs-border) !important;
}
th{
  background: rgba(11,18,32,.04) !important;
  color: var(--rs-ink) !important;
  font-weight: 800 !important;
}
td, th{
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--rs-border) !important;
}

/* Images inside articles */
article img, .article-content img, #fullArticle img, #full-Article img{
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(11,18,32,.12) !important;
}

/* ---------- Buttons (vote buttons, etc.) ---------- */
.btn, .button, button{
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.btn-primary, .button-primary, .btn.btn-primary{
  background: var(--rs-blue) !important;
  border-color: rgba(0,0,0,.0) !important;
  color: var(--rs-ink) !important;
}
.btn-primary:hover, .button-primary:hover, .btn.btn-primary:hover{
  background: var(--rs-blue-600) !important;
}

/* ---------- Footer ---------- */
footer, .footer, #footer{
  color: var(--rs-muted) !important;
}
footer a, .footer a, #footer a{
  color: var(--rs-blue) !important;
}

/* ---------- Mobile cleanup ---------- */
@media (max-width: 820px){
  #fullArticle, #full-Article, .article-content, article, .Article{
    padding: 18px !important;
  }
  #docsSearch{
    padding: 28px 0 22px !important;
  }
  #docsSearch h1{
    font-size: 28px !important;
  }
  .category-list{
    gap: 12px;
  }
  .category-list .category{
    width: 100% !important;
  }
}