/* ==========================================================================
   ChatSilo — HelpScout Docs Stylesheet
   Modelled after docs.groupleads.net layout
   Brand: Orchid Purple Palette  •  Fonts: Plus Jakarta Sans + Inter
   Upload via: Manage › Docs › [Your Docs site] › Custom Code
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOOGLE FONTS — Plus Jakarta Sans (display) + Inter (body)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --cs-brand:          #B655A5;
  --cs-brand-dk:       #973C87;
  --cs-brand-lt:       #F7F2F6;
  --cs-brand-border:   #ECDDE9;
  --cs-brand-gradient: linear-gradient(135deg, #973C87 0%, #B655A5 55%, #D66BBF 100%);

  /* Page */
  --cs-page-bg:        #FAF8FA;
  --cs-surface:        #FFFFFF;
  --cs-surface-alt:    #F7F2F6;

  /* Ink */
  --cs-ink:            #1E121C;
  --cs-ink-mid:        #5C3A57;
  --cs-ink-light:      #887985;

  /* Semantic */
  --cs-success:        #21A366;
  --cs-warning:        #C97B1A;
  --cs-danger:         #C0392B;

  /* Header search */
  --cs-header-search:  rgba(255, 255, 255, 0.18);
  --cs-header-ph:      rgba(255, 255, 255, 0.72);

  /* Borders & Shadows */
  --cs-tint:           #F7F2F6;
  --cs-shadow:         0 2px 14px rgba(30, 18, 28, 0.07);
  --cs-shadow-hover:   0 10px 32px rgba(182, 85, 165, 0.18);

  /* Typography */
  --cs-font-display:   'Plus Jakarta Sans', 'Inter', 'Outfit', sans-serif;
  --cs-font-body:      'Inter', 'DM Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   BASE — reset any HelpScout inline white overrides at the very top
   -------------------------------------------------------------------------- */
html {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cs-page-bg) !important;
  font-family: var(--cs-font-body);
  color: var(--cs-ink-mid);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  padding: 0 !important;
}

a {
  color: var(--cs-brand);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--cs-brand-dk);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   NAVBAR — full-bleed gradient, no white leaking at top-left
   -------------------------------------------------------------------------- */

/* Apply gradient to the outer .navbar so no white corner shows */
.navbar,
header#mainNav,
header.navbar {
  background: var(--cs-brand-gradient) !important;
  background-image: linear-gradient(135deg, #973C87 0%, #B655A5 55%, #D66BBF 100%) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 2px 20px rgba(151, 60, 135, 0.28);
}

.navbar .navbar-inner {
  background: transparent !important;
  border-bottom: none !important;
  height: 68px;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.navbar .navbar-inner .container-fluid {
  height: 68px;
  padding: 0 28px;
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* logo anchored left */
}

/* Nav list — flex row, vertically centred */
.navbar .nav,
.navbar .nav-collapse .nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 68px;
}

/* Collapse wrapper — pushed to the RIGHT with margin-left: auto */
.navbar .nav-collapse,
.navbar .nav-collapse.collapse {
  display: flex !important;
  align-items: center !important;
  height: 68px;
  padding: 0 !important;
  margin: 0 0 0 auto !important;  /* auto left margin pushes it to the far right */
}

/* --------------------------------------------------------------------------
   LOGO — uses the image set in HelpScout Manage › Docs › Logo
   -------------------------------------------------------------------------- */
.navbar .brand,
a.brand {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;       /* never grow, never shrink, stays LEFT */
  float: none !important;           /* override Bootstrap 2's float: left */
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 16px;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

/* Cancel any SVG ::before from previous versions */
a.brand::before {
  content: none !important;
  display: none !important;
}

/* 
   Make the logo legible on the purple gradient without touching the image.
   brightness(0) turns every pixel black → invert(1) flips it to white.
   The result is a clean, crisp all-white logo on any dark background.
*/
a.brand > img {
  display: block !important;
  height: 36px !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

.navbar .nav li {
  font-family: var(--cs-font-body);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.navbar .nav li a,
.navbar .nav li a:visited {
  color: rgba(255, 255, 255, 0.88) !important;
  padding: 10px 16px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.navbar .nav li.active a,
.navbar .nav li a.active {
  color: #ffffff !important;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.20);
}

.navbar .icon-private-w,
.navbar a:hover .icon-private-w,
.navbar a:focus .icon-private-w,
.navbar .active a .icon-private-w {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   SEARCH / HOME HERO BANNER
   -------------------------------------------------------------------------- */
#docsSearch {
  background: var(--cs-brand-gradient) !important;
  border-bottom: none;
  padding: 3.5em 0 4.5em;
  position: relative;
  overflow: hidden;
}

/* Decorative glow blobs */
#docsSearch::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: rgba(214, 107, 191, 0.25);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

#docsSearch::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: rgba(151, 60, 135, 0.20);
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

#docsSearch h1 {
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 34px;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 0.85em;
  text-shadow: 0 1px 12px rgba(30, 18, 28, 0.22);
  position: relative;
  z-index: 1;
}

#searchBar {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#searchBar .search-query,
input.search-query {
  background: var(--cs-header-search) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 14px;
  color: #ffffff !important;
  font-family: var(--cs-font-body);
  font-size: 15px;
  height: 56px;
  padding: 0 22px;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#searchBar .search-query::placeholder,
input.search-query::placeholder {
  color: var(--cs-header-ph);
}

#searchBar .search-query:focus,
input.search-query:focus {
  border-color: rgba(255, 255, 255, 0.70) !important;
  outline: none;
  background: rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

#searchBar button {
  background: transparent;
  border: none;
  color: #ffffff;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  color: var(--cs-brand) !important;
}

/* --------------------------------------------------------------------------
   CATEGORY CARDS — horizontal, icon-left layout (same structure as GroupLeads)
   -------------------------------------------------------------------------- */
.category-list {
  text-align: left;
  padding: 3.5em 0;
  max-width: 920px;
  margin: 0 auto;
}

.collection-category h2 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--cs-ink);
  text-align: left;
  margin: 0 0 20px;
}

.category-list .category {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 5px;
  align-items: start;
  text-align: left;
  background-color: var(--cs-surface);
  border: 1px solid var(--cs-brand-border);
  border-radius: 16px;
  box-shadow: var(--cs-shadow);
  box-sizing: border-box;
  width: 100%;
  padding: 22px 26px;
  margin-bottom: 14px;
  position: relative;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  background-position: 26px 26px !important;
  background-repeat: no-repeat !important;
  background-size: 26px auto !important;
}

.category-list .category:hover {
  border-color: var(--cs-brand);
  box-shadow: var(--cs-shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Icon box — spans both text rows on the left */
.category-list .category::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: var(--cs-brand-lt);
  border: 1px solid var(--cs-brand-border);
}

/* Category title */
.category-list h3 {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  font-family: var(--cs-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--cs-ink);
  line-height: 1.3em;
  margin: 0;
  transition: color 0.15s ease;
}

.category-list .category:hover h3 {
  color: var(--cs-brand-dk);
}

/* Category description */
.category-list .category p {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--cs-ink-light);
  line-height: 1.5;
  margin: 0;
}

/* Article count pill — top right of text column */
.category-list .category .article-count {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: baseline;
  color: var(--cs-brand) !important;
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: var(--cs-brand-lt);
  border: 1px solid var(--cs-brand-border);
  border-radius: 999px;
  padding: 2px 10px;
}

.category-list .category:hover .article-count {
  color: var(--cs-brand-dk) !important;
}

/* --------------------------------------------------------------------------
   PER-CATEGORY SVG ICONS — Orchid Purple stroke
   Replace #category-N with your real ChatSilo HelpScout category IDs.
   Find the ID in the URL: /category/45-getting-started → use #category-45
   -------------------------------------------------------------------------- */

/* Getting Started — rocket */
#category-1 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 16.5L3 21l4.5-1.5L21 6a2.12 2.12 0 0 0-3-3L4.5 16.5z'/><path d='M14 6l4 4'/><path d='M5 14l5 5'/></svg>");
}

/* Settings — gear */
#category-2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.14.36.5.6.89.6H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-.51 1z'/></svg>");
}

/* Messaging — chat bubble */
#category-3 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

/* Integrations — link */
#category-4 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
}

/* Automation — zap */
#category-5 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
}

/* Tags / CRM — tag */
#category-6 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>");
}

/* Troubleshooting — wrench */
#category-7 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
}

/* Billing — credit card */
#category-8 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
}

/* Team — users */
#category-9 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

/* Affiliates — share */
#category-10 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B655A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><line x1='8.59' y1='13.51' x2='15.42' y2='17.49'/><line x1='15.41' y1='6.51' x2='8.59' y2='10.49'/></svg>");
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
#sidebar {
  padding-right: 8px;
}

#sidebar h3 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--cs-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 28px 0 10px;
  padding-left: 12px;
}

#sidebar h3:first-child {
  margin-top: 0;
}

#sidebar .nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#sidebar .nav-list a {
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--cs-ink-mid);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#sidebar .nav-list a:hover {
  background: var(--cs-tint);
  color: var(--cs-brand);
  text-decoration: none;
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
  background: var(--cs-brand-lt);
  border-left-color: var(--cs-brand);
  color: var(--cs-brand-dk);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 8px 8px 0;
}

/* --------------------------------------------------------------------------
   ARTICLE CONTENT
   -------------------------------------------------------------------------- */
#main-content {
  padding: 36px 0 0 32px;
}

#fullArticle .title,
.contentWrapper h1 {
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--cs-ink);
  letter-spacing: -0.02em;
  margin: 0 30px 0.5em 0;
  line-height: 1.2;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  font-family: var(--cs-font-body) !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cs-ink-mid) !important;
  letter-spacing: 0.01em;
}

#fullArticle h2 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--cs-ink);
  margin-top: 1.6em;
  letter-spacing: -0.01em;
}

#fullArticle h3 {
  font-family: var(--cs-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--cs-ink);
  margin-top: 1.3em;
}

#fullArticle h4 {
  font-family: var(--cs-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--cs-ink-mid);
  margin-top: 1.1em;
}

#fullArticle strong {
  color: var(--cs-ink);
  font-weight: 600;
}

#fullArticle a,
#fullArticle strong a,
#fullArticle a strong,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.collection a {
  color: var(--cs-brand) !important;
}

#fullArticle a:hover,
.contentWrapper a:hover {
  color: var(--cs-brand-dk) !important;
}

#fullArticle blockquote {
  border-left: 3px solid var(--cs-brand);
  background: var(--cs-brand-lt);
  border-radius: 0 12px 12px 0;
  padding: 14px 20px;
  margin: 1.4em 0;
  color: var(--cs-ink-mid);
}

#fullArticle code {
  background: var(--cs-surface-alt);
  border: 1px solid var(--cs-brand-border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 14px;
  color: var(--cs-brand-dk);
}

#fullArticle img {
  border-radius: 12px;
  box-shadow: var(--cs-shadow);
  margin: 1.4em 0 2em;
}

.articleFoot p,
.articleFoot time {
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-style: normal;
  color: var(--cs-ink-light);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   MOST POPULAR ARTICLES
   -------------------------------------------------------------------------- */
.most-pop-articles h3 {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cs-ink);
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--cs-font-body);
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  background: var(--cs-brand);
  border: 1px solid var(--cs-brand);
  border-radius: 10px;
  padding: 0.6em 1.4em;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
  background: var(--cs-brand-dk);
  border-color: var(--cs-brand-dk);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(182, 85, 165, 0.32);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb li a {
  color: var(--cs-brand);
  font-family: var(--cs-font-body);
  font-size: 13px;
}

.breadcrumb li a:hover {
  color: var(--cs-brand-dk);
}

/* --------------------------------------------------------------------------
   FEEDBACK / VOTE WIDGET
   -------------------------------------------------------------------------- */
.articleVoting a {
  color: var(--cs-brand);
}

.articleVoting a:hover {
  color: var(--cs-brand-dk);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
footer {
  background: var(--cs-page-bg);
  border-top: 1px solid var(--cs-brand-border);
  padding: 24px 0;
  margin-top: 40px;
}

footer p {
  font-family: var(--cs-font-body);
  font-size: 13px;
  color: var(--cs-ink-light);
}

footer p a {
  color: var(--cs-ink-light);
  transition: color 0.15s ease;
}

footer p a:hover {
  color: var(--cs-brand);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   CONTENT AREA BACKGROUND
   -------------------------------------------------------------------------- */
#contentArea {
  background: var(--cs-page-bg);
  padding-bottom: 60px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media screen and (max-width: 760px) {
  .category-list {
    padding: 2em 16px;
  }

  .category-list .category {
    padding: 18px 20px;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
  }

  .category-list .category::before {
    width: 44px;
    height: 44px;
  }

  #docsSearch {
    padding: 2.5em 16px 3.5em;
  }

  #docsSearch h1 {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  #fullArticle .title,
  .contentWrapper h1 {
    font-size: 22px;
  }

  #fullArticle h2 {
    font-size: 18px;
  }

  #fullArticle h3 {
    font-size: 16px;
  }

  .category-list .category {
    grid-template-columns: 40px 1fr;
    padding: 16px;
  }
}