/* =========================================================================
   Global Changer — Knowledge Base custom CSS
   Brand-aligned, minimal, content-first.
   ========================================================================= */

:root {
  --gc-ink:        #051138;   /* brand dark navy (header, dark surfaces) */
  --gc-ink-2:     #051138;   /* nav / hero background — same brand navy */
  --gc-ink-soft:  #313661;   /* brand secondary navy (borders, hover) */
  --gc-text:      #051138;   /* body copy — use brand navy for unity */
  --gc-muted:     #5B6678;   /* secondary text */
  --gc-line:      #E6E8EE;   /* borders / dividers */
  --gc-surface:   #FFFFFF;   /* cards & content */
  --gc-bg:        #F6F7F9;   /* page background */
  --gc-bg-soft:   #EEF1F5;   /* hover background */
  --gc-accent:    #C8FA5C;   /* lime / mint accent */
  --gc-accent-2:  #B6EF3F;   /* accent hover */
  --gc-accent-ink:#051138;   /* text on accent — brand navy */
  --gc-cyan:       #01ced7;   /* brand cyan (gradient pair w/ lime) */
  --gc-link:      #051138;   /* link color — brand navy */
  --gc-radius:    14px;
  --gc-radius-sm: 10px;
  --gc-shadow:    0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.04);
  --gc-shadow-lg: 0 4px 12px rgba(11, 18, 32, 0.06), 0 24px 48px rgba(11, 18, 32, 0.08);
  --gc-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* -------- Base ----------------------------------------------------------- */
html, body {
  background: var(--gc-bg) !important;
  color: var(--gc-text);
  font-family: var(--gc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
}

body {
  font-feature-settings: 'ss01', 'cv11';
}

a { color: var(--gc-link); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--gc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Use Inter via Google Fonts if available; harmless if not loaded */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* -------- Top navigation ------------------------------------------------- */
#mainNav.navbar { margin: 0; border: 0; }
#mainNav .navbar-inner {
  background: var(--gc-ink-2) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px 0;
  border-radius: 0;
}
#mainNav .container-fluid { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
#mainNav .brand {
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  padding: 6px 0;
}
#mainNav .brand:hover { color: var(--gc-accent) !important; text-decoration: none; }
#mainNav .nav li a { color: #C6CCD8 !important; font-weight: 500; }
#mainNav .nav li a:hover, #mainNav .nav .active a { color: var(--gc-accent) !important; background: transparent !important; }

/* -------- Hero search (homepage) ---------------------------------------- */
#docsSearch {
  background: var(--gc-ink-2);
  background-image:
    radial-gradient(900px 400px at 20% -10%, rgba(200, 250, 92, 0.10), transparent 60%),
    radial-gradient(700px 500px at 90% 110%, rgba(1, 206, 215, 0.14), transparent 60%);
  color: #fff;
  padding: 88px 24px 96px;
  text-align: center;
  border-bottom: 1px solid var(--gc-ink-soft);
}
#docsSearch h1 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 auto 32px;
}

/* Search bar — override Help Scout's absolute-positioned button layout */
#docsSearch #searchBar {
  position: relative;
  width: 100% !important;
  max-width: 640px;
  margin: 0 auto !important;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 6px !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  text-align: left !important;
}
#docsSearch #searchBar input.search-query {
  flex: 1 1 auto;
  border: 0 !important;
  background: transparent !important;
  height: 48px !important;
  padding: 0 18px !important;
  font-size: 16px !important;
  line-height: 48px !important;
  color: var(--gc-text);
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box;
}
#docsSearch #searchBar input.search-query::placeholder { color: var(--gc-muted); }
#docsSearch #searchBar button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  background: var(--gc-accent) !important;
  color: var(--gc-accent-ink) !important;
  border: 0 !important;
  border-left: 0 !important;
  height: 48px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 15px !important;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-shadow: none !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  width: auto !important;
  text-indent: 0 !important;
}
#docsSearch #searchBar button:hover { background: var(--gc-accent-2) !important; }
#docsSearch #searchBar button:active { transform: translateY(1px); }
#docsSearch #searchBar button i { color: var(--gc-accent-ink) !important; }
#docsSearch #searchBar button i.icon-search { display: inline-block !important; text-shadow: none !important; }
#docsSearch #searchBar button span {
  font-size: 15px !important;
  text-indent: 0 !important;
  width: auto !important;
  color: var(--gc-accent-ink) !important;
}

/* Search result dropdown */
#serp-dd {
  background: #fff;
  border-radius: var(--gc-radius);
  box-shadow: var(--gc-shadow-lg);
  border: 1px solid var(--gc-line);
  overflow: hidden;
  margin-top: 10px;
}
#serp-dd .result li a { padding: 12px 16px; color: var(--gc-text) !important; }
#serp-dd .result li a:hover, #serp-dd .result > li.active a { background: var(--gc-bg-soft); color: var(--gc-ink) !important; }

/* -------- Content container --------------------------------------------- */
#contentArea.container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 28px 80px;
}

/* -------- Homepage: category grid --------------------------------------- */
.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-list .category {
  display: flex;
  flex-direction: column;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 22px 22px 20px;
  text-decoration: none !important;
  color: var(--gc-text) !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
  min-height: 148px;
  position: relative;
  overflow: hidden;
  /* Override Help Scout launch CSS that forces inline-block + width:29% */
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  box-sizing: border-box;
}
.category-list .category::after {
  content: '→';
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--gc-muted);
  font-size: 18px;
  transition: transform .15s ease, color .15s ease;
}
.category-list .category:hover {
  border-color: var(--gc-ink);
  box-shadow: var(--gc-shadow);
  transform: translateY(-2px);
  text-decoration: none !important;
}
.category-list .category:hover::after {
  transform: translateX(4px);
  color: var(--gc-ink);
}
.category-list .category h3 {
  color: var(--gc-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.35;
}
.category-list .category p {
  color: var(--gc-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.category-list .category p:empty { display: none; }
.category-list .category .article-count {
  color: var(--gc-muted) !important;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
  padding-top: 12px;
}
.category-list .category:hover .article-count { color: var(--gc-ink) !important; }
.category-list .category .article-count .notranslate {
  display: inline-block;
  background: var(--gc-bg-soft);
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 4px;
  color: var(--gc-ink);
}
.category-list .category:hover .article-count .notranslate { background: var(--gc-accent); }

/* -------- Article list (category page) ---------------------------------- */
#main-content { background: transparent; }

hgroup#categoryHead {
  margin: 0 0 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--gc-line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
}
#categoryHead h1 {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--gc-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#categoryHead .descrip {
  flex: 1 1 100%;
  order: 3;
  color: var(--gc-muted);
  font-size: 15px;
  margin: 6px 0 0;
}
#categoryHead .sort { margin: 0; }
#categoryHead .sort select,
#sortBy {
  appearance: none;
  -webkit-appearance: none;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  padding: 8px 36px 8px 14px !important;
  font-size: 13px;
  color: var(--gc-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  width: auto !important;
  min-width: 220px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-sizing: content-box;
  transition: border-color .15s ease;
}
#sortBy:hover, #sortBy:focus { border-color: var(--gc-ink); outline: none; }

ul.articleList {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-surface);
  overflow: hidden;
}
ul.articleList li { margin: 0; border-bottom: 1px solid var(--gc-line); }
ul.articleList li:last-child { border-bottom: 0; }
ul.articleList li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  color: var(--gc-text) !important;
  text-decoration: none !important;
  font-size: 15px;
  line-height: 1.45;
  transition: background .12s ease;
}
ul.articleList li a:hover {
  background: var(--gc-bg-soft);
  color: var(--gc-ink) !important;
}
ul.articleList li a i.icon-article-doc {
  color: var(--gc-muted);
  font-size: 16px;
  flex-shrink: 0;
}
ul.articleList li a:hover i.icon-article-doc { color: var(--gc-ink); }
ul.articleList li a span { flex: 1; }

/* Article-list row gets a trailing arrow */
ul.articleList li a::after {
  content: '→';
  margin-left: auto;
  color: transparent;
  font-size: 14px;
  transition: color .15s ease, transform .15s ease;
}
ul.articleList li a:hover::after { color: var(--gc-ink); transform: translateX(3px); }

/* -------- Article (detail) ---------------------------------------------- */
.contentWrapper {
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  padding: 40px clamp(24px, 4vw, 56px);
  box-shadow: var(--gc-shadow);
}

article#fullArticle { position: relative; }
#fullArticle h1.title {
  color: var(--gc-ink);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 24px;
  padding-right: 40px;
}
#fullArticle, #fullArticle p, #fullArticle li, #fullArticle dd, #fullArticle div, #fullArticle blockquote, #fullArticle table {
  color: var(--gc-text) !important;
  font-size: 16px;
  line-height: 1.75;
}
#fullArticle p { margin: 0 0 18px; }
#fullArticle h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gc-ink);
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
}
#fullArticle h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--gc-ink);
  margin: 28px 0 10px;
}
#fullArticle a, #fullArticle strong a, #fullArticle a strong {
  color: var(--gc-ink) !important;
  text-decoration: none;
  background-image: linear-gradient(transparent 60%, var(--gc-accent) 60%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 0 2px;
  font-weight: 500;
  transition: background-size .2s ease;
}
#fullArticle a:hover { background-size: 100% 200%; }
#fullArticle ul, #fullArticle ol { padding-left: 1.5em; margin: 0 0 18px; }
#fullArticle li { margin-bottom: 6px; }
#fullArticle blockquote {
  border-left: 3px solid var(--gc-accent);
  background: var(--gc-bg);
  margin: 22px 0;
  padding: 14px 20px;
  border-radius: 0 var(--gc-radius-sm) var(--gc-radius-sm) 0;
  color: var(--gc-text) !important;
}
#fullArticle code {
  background: var(--gc-bg-soft);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 0.9em;
}
#fullArticle pre {
  background: var(--gc-ink);
  color: #E6E8EE;
  padding: 18px 20px;
  border-radius: var(--gc-radius-sm);
  overflow-x: auto;
  line-height: 1.55;
}
#fullArticle pre code { background: transparent; color: inherit; padding: 0; }
#fullArticle img {
  max-width: 100%;
  border-radius: var(--gc-radius-sm);
  border: 1px solid var(--gc-line);
  margin: 12px 0;
}
#fullArticle table { width: 100%; border-collapse: collapse; margin: 18px 0; }
#fullArticle th, #fullArticle td {
  border: 1px solid var(--gc-line);
  padding: 10px 14px;
  text-align: left;
}
#fullArticle th { background: var(--gc-bg-soft); font-weight: 600; color: var(--gc-ink); }

/* Print article icon */
#fullArticle .printArticle {
  position: absolute;
  top: 4px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--gc-muted) !important;
  background: var(--gc-bg);
  border: 1px solid var(--gc-line);
  text-decoration: none !important;
  transition: all .15s ease;
}
#fullArticle .printArticle:hover { color: var(--gc-ink) !important; background: var(--gc-bg-soft); border-color: var(--gc-ink); }

/* Article ratings */
.articleRatings {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--gc-bg);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.articleRatings-question {
  color: var(--gc-ink);
  font-weight: 600;
  font-size: 15px;
}
.articleRatings-actions {
  display: inline-flex !important;
  gap: 10px;
  margin-left: auto;
  width: auto !important;
  flex-shrink: 0 !important;
  align-items: center;
}
.articleRatings .rateAction {
  position: relative !important;
  background: var(--gc-surface) !important;
  border: 1px solid var(--gc-line) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-block;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04) !important;
  vertical-align: middle;
  /* No overflow:hidden — the smiley wiggle (yep/not-really) and the
     selected-state ring (::after) extend beyond the button bounds. */
}
/* Re-center the absolutely-positioned smiley span inside the bigger button.
   Use top/left for centering (NOT transform) so the launch CSS keyframe
   animations `yep` (translateY) and `not-really` (translateX) can own the
   `transform` property and actually move the face. */
.articleRatings .rating-face {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  line-height: 0 !important;
  z-index: 1;
}
.articleRatings .rateAction svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: var(--gc-muted);
}
.articleRatings .rateAction:hover {
  background: var(--gc-ink) !important;
  border-color: var(--gc-ink) !important;
  transform: scale(1.15);
  box-shadow: 0 6px 16px rgba(11, 18, 32, 0.15) !important;
}
.articleRatings .rateAction:hover svg,
.articleRatings .rateAction:hover .rating-face { fill: var(--gc-accent) !important; }
.articleRatings .rateAction--positive:hover { background: var(--gc-accent) !important; border-color: var(--gc-accent) !important; }
.articleRatings .rateAction--positive:hover svg,
.articleRatings .rateAction--positive:hover .rating-face { fill: var(--gc-accent-ink) !important; }
/* Selected state — keep the launch CSS scale-up-center keyframe alive,
   just resize the ring to wrap the 40px button. */
.articleRatings .rateAction.selected {
  background: var(--gc-accent) !important;
  border-color: var(--gc-accent) !important;
  transform: scale(1.15);
  z-index: 10;
}
.articleRatings .rateAction.selected .rating-face,
.articleRatings .rateAction.selected svg { fill: var(--gc-accent-ink) !important; }
.articleRatings .rateAction.selected::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 48px !important;
  height: 48px !important;
  top: -6px !important;
  left: -6px !important;
  border: 2px solid var(--gc-accent) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  pointer-events: none;
}
.articleRatings-feedback-message { color: var(--gc-ink); font-weight: 500; }

/* Article footer */
.articleFoot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gc-line);
}
.articleFoot .lu, time.lu {
  color: var(--gc-muted);
  font-size: 13px;
}

/* -------- Sidebar -------------------------------------------------------- */
#sidebar { padding: 0; }

#sidebar #searchBar.sm {
  position: relative;
  margin-bottom: 24px;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#sidebar #searchBar.sm:focus-within { border-color: var(--gc-ink); box-shadow: 0 0 0 4px rgba(11,18,32,0.06); }
#sidebar #searchBar.sm input.search-query {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--gc-text);
  margin: 0 !important;
  width: auto !important;
}
#sidebar #searchBar.sm input.search-query::placeholder { color: var(--gc-muted); }
#sidebar #searchBar.sm button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  background: var(--gc-bg-soft) !important;
  border: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  color: var(--gc-muted) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  flex: 0 0 36px;
  line-height: 1 !important;
  font-size: 14px !important;
}
#sidebar #searchBar.sm button:hover { background: var(--gc-ink) !important; color: #fff !important; }
#sidebar #searchBar.sm button:hover i { color: #fff !important; }
#sidebar #searchBar.sm button i,
#sidebar #searchBar.sm button .icon-search {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  text-indent: 0 !important;
  vertical-align: middle;
}

#sidebar h3 {
  color: var(--gc-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 12px;
}
#sidebar ul.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sidebar .nav-list > li { margin: 0; }
#sidebar .nav-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  margin: 2px 0;
  border-radius: 8px;
  color: var(--gc-text) !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
#sidebar .nav-list > li > a:hover {
  background: var(--gc-bg-soft);
  color: var(--gc-ink) !important;
}
#sidebar .nav-list > li.active > a {
  background: var(--gc-ink);
  color: #fff !important;
  font-weight: 500;
}
#sidebar .nav-list > li.active > a:hover { background: var(--gc-ink-2); }
#sidebar .nav-list i.icon-arrow {
  font-size: 11px;
  opacity: 0.4;
  transition: transform .15s ease, opacity .15s ease;
}
#sidebar .nav-list > li > a:hover i.icon-arrow,
#sidebar .nav-list > li.active > a i.icon-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* -------- Layout (override HelpScout's Bootstrap 2 fluid grid) ---------- */
/* Neutralize Bootstrap 2's .row-fluid clearfix pseudo-elements so they
   don't become flex/grid items and shove the layout sideways. */
#contentArea .row-fluid::before,
#contentArea .row-fluid::after {
  content: none !important;
  display: none !important;
}
#contentArea .row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}
#contentArea .row-fluid #main-content.span9 {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  margin-left: 0 !important;
  float: none !important;
  order: 2;
}
#contentArea .row-fluid #sidebar.span3 {
  flex: 0 0 280px;
  width: 280px !important;
  max-width: 280px;
  margin-left: 0 !important;
  float: none !important;
  order: 1;
  padding-left: 0;
  padding-right: 12px;
}

/* No-results state */
#noResults {
  margin: 24px auto;
  padding: 18px 22px;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  color: var(--gc-muted);
  text-align: center;
}

/* -------- Footer --------------------------------------------------------- */
footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--gc-line);
  text-align: center;
  color: var(--gc-muted);
  font-size: 13px;
}
footer p { margin: 0; }
footer p span { display: none; }
footer a { color: var(--gc-muted); }
footer a:hover { color: var(--gc-ink); }

/* -------- Responsive ---------------------------------------------------- */
@media (max-width: 880px) {
  #contentArea.container-fluid { padding: 28px 18px 56px; }
  #contentArea .row-fluid { flex-direction: column; gap: 24px; }
  #contentArea .row-fluid #sidebar.span3 {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none;
    order: 2;
    padding-left: 0;
  }
  #docsSearch { padding: 64px 18px 72px; }
  .contentWrapper { padding: 28px 22px; }
  .category-list { grid-template-columns: 1fr; }
  #mainNav .container-fluid { padding: 0 18px; }
}

@media (max-width: 520px) {
  #docsSearch #searchBar { flex-direction: row; padding: 5px; }
  #docsSearch #searchBar input.search-query { font-size: 15px; padding: 0 12px; }
  #docsSearch #searchBar button { padding: 0 16px; }
  #docsSearch #searchBar button span { display: none; }
  #categoryHead { flex-direction: column; align-items: flex-start; }
  #categoryHead .sort { width: 100%; }
  .articleRatings { flex-direction: column; align-items: flex-start; }
  .articleRatings-actions { margin-left: 0; }
}

/* -------- Misc cleanup -------------------------------------------------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gc-accent);
  outline-offset: 2px;
}

/* Hide HelpScout's default underlines we don't want */
.collection a, .contentWrapper a { text-decoration: none; }