/* ================================================================
   Sessions Health – Help Scout Knowledge Base Custom Branding
   Target: support.sessionshealth.com
   Upload via: Help Scout > Docs Sites > Custom Code > Custom CSS
   ================================================================ */

/* Linted with the Ember apps' stylelint config, minus rules that don't fit this file:
   - selector-id-pattern, selector-class-pattern: Help Scout's markup uses camelCase
     (#docsSearch, .contentWrapper), which we can't rename
   - no-descending-specificity: flagged pairs target different components; the order is intentional
   - property-no-vendor-prefix: Safari < 18 needs -webkit-backdrop-filter for the glass panels
   - media-feature-range-notation: (width >= …) needs Safari 16.4+; keep (min-width: …) */
/* stylelint-disable selector-id-pattern, selector-class-pattern, no-descending-specificity, property-no-vendor-prefix, media-feature-range-notation */

@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

/* ─── Design tokens ─── */
:root {
  --sh-navy: #05253c;
  --sh-primary: #0369a1; /* sky-700, 5.9:1 on white (WCAG AA) */
  --sh-primary-hover: #075985; /* sky-800 */
  --sh-text: #1e3b50;
  --sh-headline: #203754;
  --sh-sky-100: #e0f2fe;
  --sh-border: #d7e3ed;
}

/* ================================================================
   PAGE BASE
   Full-page gradient gives frosted glass elements something to blur.
   ================================================================ */

body {
  background-color: var(--sh-sky-100) !important;
  background-image: linear-gradient(
    90deg,
    rgb(212 200 249 / 30%) 0%,
    rgb(125 211 252 / 30%) 40.9%,
    rgb(187 247 208 / 30%) 69.7%,
    rgb(252 228 131 / 30%) 100%
  ) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ================================================================
   NAVBAR – transparent, dark text
   ================================================================ */

.navbar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.navbar .navbar-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.navbar .nav li a {
  color: #000 !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.navbar .nav .active > a {
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Help Scout adds a Bootstrap caret (a CSS triangle) inside the active section's link */
.navbar .nav .caret {
  display: none !important;
}

/* Logged-in users see Help Scout's lock (.icon-private-w) before internal collection links */
.navbar .nav [class*="icon-private"] {
  display: none !important;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus {
  color: var(--sh-primary) !important;
}

.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: #000 !important;
}

/* Contact: outlined pill button — Figma 215:2968: 86×37, border + text both #05253c.
   Figma draws the 1px border inside its 10px/16px padding; CSS adds it outside. */
#contact a.contactUs {
  border: 1px solid var(--sh-navy) !important;
  border-radius: 99px !important;
  padding: 9px 15px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  color: var(--sh-navy) !important;
  display: inline-block;
}

.navbar .brand img {
  height: 40px !important;
  width: auto !important;
}

/* Desktop: logo left, nav right — Figma 215:2962: 1080px wide, 40px tall, 32px from the top */
@media (min-width: 979px) {
  .navbar .btn-navbar {
    display: none !important;
  }

  .navbar .navbar-inner {
    padding: 0 !important;
  }

  body .navbar .navbar-inner > .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1128px !important; /* 1080px content + 24px side padding */
    margin: 0 auto !important;
    padding: 32px 24px 0 !important;
    box-sizing: border-box !important;
  }

  /* Bootstrap's clearfix pseudo-elements become empty flex items and
     space-between pushes the logo and nav inward around them */
  body .navbar .navbar-inner > .container-fluid::before,
  body .navbar .navbar-inner > .container-fluid::after {
    display: none !important;
  }

  .navbar .brand {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .navbar .nav-collapse {
    float: none !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* The <nav> between nav-collapse and ul.nav is a block flex item —
     collapsing it out of the layout chain lets ul.nav size directly */
  .navbar .nav-collapse > nav {
    display: contents !important;
  }

  .navbar .nav-collapse .nav {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    float: none !important;
    margin: 0 !important;

    /* Help Scout positions .navbar .nav absolutely at ≥769px — undo it */
    position: static !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
  }

  .navbar .nav li a {
    padding: 0 !important;
    line-height: normal !important;
  }

  /* Category links JS adds for the mobile menu */
  .navbar .nav .sh-mobile-cat {
    display: none !important;
  }
}

/* iPhone + iPad: hamburger layout */
@media (max-width: 978px) {
  /* Pin brand padding so we know the navbar height: 10+40+10 = 60px */
  .navbar .brand {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Hamburger: center in 60px navbar. center = 30px; margin-top = 30 - 9(pad) - 12(half of 24px icon) = 9px */
  .navbar .btn-navbar {
    display: block !important;
    float: right !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 9px 16px !important;
    margin-top: 9px !important;
    margin-right: 0 !important;
    cursor: pointer;
  }

  /* Fallback until the FA icon renders: Help Scout's 14px-tall bars need
     margin-top = 30 - 9(pad) - 7(half bars) = 14px to stay centered */
  .navbar .btn-navbar:not(.sh-fa-ready) {
    margin-top: 14px !important;
  }

  /* Hamburger bars – 3 lines, #1D1B20 (fallback only) */
  .navbar .icon-bar {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #1d1b20 !important;
    border-radius: 1px !important;
  }

  .navbar .icon-bar + .icon-bar {
    margin-top: 4px !important;
  }

  /* Hamburger icon — Figma: 24px / #1D1B20 */
  .navbar .btn-navbar .sh-hamburger {
    font-size: 24px !important;
    color: #1d1b20 !important;
    line-height: 1 !important;
    display: block !important;
  }

  .navbar .btn-navbar:not(.sh-fa-ready) .sh-hamburger,
  .navbar .btn-navbar.sh-fa-ready .icon-bar {
    display: none !important;
  }

  .navbar .nav-collapse {
    display: none !important;
  }

  /* Open: drop below the header row, full width */
  .navbar .nav-collapse.in {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    background: rgb(255 255 255 / 97%);
    padding: 8px 0;
  }

  /* Stack nav items vertically. Help Scout positions .navbar .nav absolutely at ≥769px,
     which pushed the open menu up off-screen on tablets — undo it, centered like phones */
  .navbar .nav-collapse.in .nav {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    text-align: center !important;
  }

  .navbar .nav-collapse.in .nav > li {
    float: none !important;
    display: block !important;
    width: 100%;
  }

  .navbar .nav-collapse.in .nav > li > a {
    display: block !important;
    float: none !important;
    padding: 10px 16px !important;
    border-top: 1px solid rgb(0 0 0 / 8%) !important;
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* Current page: semibold, as on desktop — the rule above outranks .navbar .nav .active > a */
  .navbar .nav-collapse.in .nav > .active > a {
    font-weight: 600 !important;
  }

  /* Dividers go between items only — a top border on the first link reads as an empty row */
  .navbar .nav-collapse.in .nav > li:first-child > a {
    border-top: none !important;
  }

  /* "Categories" label above the category links JS adds to the menu */
  .navbar .nav .nav-header.sh-mobile-cat-header {
    display: block !important;
    box-sizing: border-box; /* rows are width: 100%; padding would push this one past the edge */
    padding: 12px 16px 4px !important;
    font-family: Inter, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    border-top: 1px solid rgb(0 0 0 / 8%) !important;
    margin-top: 4px !important;
  }

  #contact,
  #contactMobile {
    display: none !important;
  }
}

/* ================================================================
   HERO / SEARCH – transparent so body gradient shows through
   ================================================================ */

#docsSearch {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* Figma: headline 92px below the header, panel 60px below the search bar
     (28px here + #contentArea's 32px top padding). Mobile drops the 28px. */
  padding: 92px 24px 28px;
  margin-bottom: 0 !important; /* Help Scout sets 3em */
  text-align: center;
  position: relative;
  z-index: 10;
}

#docsSearch h1 {
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
  color: var(--sh-headline) !important;
  font-size: 48px !important;
  font-weight: 600 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin: 0 auto 32px !important;
  max-width: 700px;
}

/* Form is the pill container — background/border live here, not on the input */
#searchBar {
  position: relative;
  max-width: 624px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sh-border);
  border-radius: 72px;

  /* Figma 215:2886: 64px tall, 8px around a 48px button, border drawn inside —
     CSS draws the 1px border outside, hence 7px */
  padding: 7px;
  box-sizing: border-box;
}

/* Keyboard focus (not in Figma — accessibility): primary blue for 3:1+ contrast */
#searchBar:focus-within {
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px rgb(3 105 161 / 15%);
}

/* Search icon */
#searchBar::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='6.5' cy='6.5' r='5' stroke='%2364748b' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Input is transparent — the form provides the pill visuals */
#searchBar .search-query {
  flex: 1;
  background: transparent;
  border: none;

  /* Right padding keeps placeholder/typed text clear of the absolutely positioned Search button */
  padding: 12px 130px 12px 44px;
  height: 48px; /* Help Scout sets 50px */
  font-size: 16px;
  font-weight: 500;
  color: #020617;
  line-height: 1;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}

#searchBar .search-query::placeholder {
  color: #b3b3b3;
}

#searchBar button[type="submit"] {
  position: absolute;
  right: 7px;
  height: 48px; /* Help Scout sets 50px */
  top: 50%;
  transform: translateY(-50%);
  background: var(--sh-primary);
  color: #fff;
  border: none;
  border-radius: 32px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.08px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

#searchBar button[type="submit"]:hover {
  background: var(--sh-primary-hover);
}

#searchBar button[type="submit"] .icon-search {
  display: none;
}

#serp-dd {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%),
    0 8px 10px -6px rgb(0 0 0 / 10%);
  overflow: hidden;
  padding: 8px 0;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  margin-top: 4px !important;
}

#serp-dd .result a {
  display: block;
  padding: 6px 8px;
  border-radius: 4px;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--sh-primary) !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}

/* li.active is the keyboard-highlighted result */
#serp-dd .result a:hover,
#serp-dd .result > li.active a {
  color: var(--sh-primary-hover) !important;
}

/* ================================================================
   CONTENT AREA – transparent so gradient bleeds through
   ================================================================ */

#contentArea {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 32px 24px 48px !important;
}

/* ================================================================
   COLLECTION PANEL – the frosted glass container per section
   ================================================================ */

.collection-category {
  background: rgb(0 0 0 / 6%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 4px 32px rgb(0 0 0 / 4%);

  /* Figma 215:2970: 1176px wide with 48px padding, leaving the header's 1080px column
     (47px here because CSS draws the 1px border outside the padding) */
  max-width: 1176px;
  box-sizing: border-box;
  padding: 47px;
  margin: 0 auto 64px;
}

.collection-category:last-child {
  margin-bottom: 0;
}

.collection-category h2,
.collection-category h2 a {
  color: #1e1e1e !important;
  font-family: Inter, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.6px !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-decoration: none;
  border-bottom: none !important; /* Help Scout adds a dotted one on hover; display: block stretches it full width */
  margin-bottom: 32px;
  display: block;
}

/* ================================================================
   CATEGORY TILE GRID + CARDS
   ================================================================ */

.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

a.category {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;

  /* Figma: 24px padding with the 1px border drawn inside; CSS draws it outside */
  padding: 23px !important;
  background: rgb(255 255 255 / 80%);
  border: 1px solid rgb(255 255 255 / 80%) !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100% !important;
  margin: 0 !important; /* Help Scout's inline-block margins would add to the grid gap */
  box-sizing: border-box;
}

a.category:hover {
  background: #fff;

  /* 1px border + 1px inset shadow reads as 2px without shifting content */
  border-color: #0ea5e9 !important;
  box-shadow: inset 0 0 0 1px #0ea5e9;
  filter: drop-shadow(4px 8px 11.45px rgb(0 147 212 / 25%));
  opacity: 0.8;
  text-decoration: none;
}

/* Keyboard focus (not in Figma — accessibility): hover's 2px border without the fade,
   in the primary blue — hover's #0ea5e9 is under the 3:1 needed for a focus indicator */
a.category:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--sh-primary) !important;
  box-shadow: inset 0 0 0 1px var(--sh-primary);
}

/* Icon circle — injected by knowledge_base.js */
.sh-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--sh-sky-100);
  border-radius: 100px;
  margin-bottom: 24px;
  overflow: hidden;
  font-size: 24px;
  color: var(--sh-primary);
}

a.category h3 {
  color: #1e1e1e !important;
  font-family: Inter, sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.6px !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 0 12px;
}

/* Descriptions hidden – design shows only icon + title + count */
a.category > p:not(.article-count) {
  display: none;
}

a.category p.article-count {
  color: var(--sh-primary) !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

/* ================================================================
   SIDEBAR SEARCH — collection/article pages
   ================================================================ */

/* Class injected by JS; #searchBar.sh-sidebar-search beats the hero #searchBar rules */
#searchBar.sh-sidebar-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 16px !important;

  /* Figma 142:5958: 16px padding with the 1px border drawn inside; CSS draws it outside */
  padding: 0 15px !important;
  height: 36px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 99px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Keyboard focus (not in Figma — accessibility): primary blue for 3:1+ contrast */
#searchBar.sh-sidebar-search:focus-within {
  box-shadow: 0 0 0 1px var(--sh-primary), 0 0 0 4px rgb(3 105 161 / 15%) !important;
}

/* The hero's ::before magnifying glass — JS adds an FA icon instead */
#searchBar.sh-sidebar-search::before {
  display: none !important;
}

#searchBar.sh-sidebar-search .search-query {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important; /* the hero's 48px would overflow the 36px pill */
  position: static !important;
  padding: 0 !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #020617 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

#searchBar.sh-sidebar-search .search-query::placeholder {
  color: #b3b3b3 !important;
}

.sh-sidebar-search button[type="submit"] {
  display: none !important;
}

#searchBar.sh-sidebar-search .sh-search-icon {
  font-size: 16px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ================================================================
   SIDEBAR CATEGORY NAV — collection/article pages
   ================================================================ */

/* Sidebar "Categories" label — Help Scout uppercases via #sidebar h3 */
#sidebar h3 {
  text-transform: none !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  color: #020617 !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

.nav.nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.nav.nav-list > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Each link: 40px tall, 8px/16px padding, 5px radius, line-height 24px (Figma: leading-6) */
#sidebar a[href*="/category/"]:not(.category) {
  display: flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  min-height: 40px !important;
  border-radius: 5px !important;
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #020617 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* Help Scout's active-link glyph — we render → via ::after instead */
#sidebar .icon-arrow {
  display: none !important;
}

#sidebar a[href*="/category/"]:not(.category):hover {
  background: var(--sh-sky-100) !important;
}

/* Active state — Figma: sky-200 bg, bold, line-height 1, radius 6px */
#sidebar li.active > a[href*="/category/"]:not(.category) {
  background: #bae6fd !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
}

/* Arrow — Figma 166:7276: active item only, inline after label */
#sidebar li.active > a[href*="/category/"]:not(.category)::after {
  content: "\2192" !important;
  margin-left: 4px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #020617 !important;
}

/* Sidebar (and hamburger menu) icon — injected by knowledge_base.js */
.sh-sidebar-icon {
  display: inline-block;
  width: 16px;
  font-size: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  color: var(--sh-text);
}

/* ================================================================
   COLLECTION ARTICLE LIST PAGE
   ================================================================ */

/* White card container */
.contentWrapper {
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Ensure span9/span3 don't bleed a background through contentWrapper's rounded corners */
#main-content,
#sidebar {
  background: transparent !important;
}

/* Content pages (category, article, collection, search) use the header's 1080px column —
   Figma 83:8665: 249px sidebar, 56px gap, 775px content. The home page has no .row-fluid. */
@media (min-width: 979px) {
  #contentArea > .row-fluid {
    max-width: 1080px;
    margin: 0 auto;
  }

  #contentArea > .row-fluid > #sidebar {
    width: 23.056% !important; /* 249 / 1080 */
  }

  #contentArea > .row-fluid > #main-content {
    width: 71.759% !important; /* 775 / 1080 */
  }
}

/* categoryHead: h1+sort on row 1, description full-width on row 2 */
#categoryHead {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 16px !important;
}

/* Collection title — Figma 148:2790 (desktop): 32px/600/lh1/-0.8px */
#categoryHead h1 {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: Inter, sans-serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.8px !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#categoryHead .descrip {
  order: 3 !important;
  flex: 0 0 100% !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: #000 !important;
  margin: 0 0 24px !important;
}

#categoryHead .sort {
  order: 2 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sortBy {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #020617 !important;
  border: 1px solid #64748b !important;
  border-radius: 5px !important;
  padding: 4px 28px 4px 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NDc0OGIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSIvPjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 16px 16px !important;
  height: 32px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}

.articleList {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.articleList li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Search results also hold a snippet <p>; stack it under the title instead of beside it */
#serp .articleList li {
  display: block !important;
}

/* Each row is <a><i class="icon-article-doc"></i><span>title</span></a> */
.articleList li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--sh-primary) !important;
  text-decoration: none !important;
}

/* Underline the title only — on the <a> it would run under the icon too */
.articleList li a:hover span {
  text-decoration: underline !important;
}

/* Figma 84:8691: icon matches the link color, 8px gap (the link's flex gap) */
#main-content .articleList li a i {
  flex-shrink: 0 !important;
  width: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Help Scout colors and spaces the glyph itself: grey + 6px right margin */
#main-content .articleList li a i::before {
  color: var(--sh-primary);
  margin-right: 0;
}

/* ================================================================
   ARTICLE + COLLECTION PAGES
   ================================================================ */

/* Help Scout's inline theme <style> sets #0093d4 on these exact selectors. The
   html prefix outranks it regardless of load order; !important would also beat
   Help Scout's intentionally grey links (#sbContact, active pagination page). */
html #fullArticle strong a,
html #fullArticle a strong,
html .contentWrapper a,
html .most-pop-articles .popArticles a,
html .most-pop-articles .popArticles a:hover span {
  color: var(--sh-primary);
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--sh-text);
}

h1.title {
  font-family: Inter, sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.8px !important;
  color: #000 !important;
}

#fullArticle h2 {
  font-family: Inter, sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.6px !important;
  color: #000 !important;
}

#fullArticle h3 {
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.6px !important;
  color: #000 !important;
}

/* ================================================================
   PRINT BUTTON — article pages (Figma 148:3399 fa-solid fa-print)
   ================================================================ */

/* Icon-only link; color is inherited by the FA icon JS injects */
a.printArticle {
  display: inline-flex !important;
  align-items: center !important;
  color: #64748b !important; /* Figma: text-muted = slate/500 */
}

a.printArticle:hover {
  color: var(--sh-primary) !important;
}

a.printArticle .icon-print {
  display: none !important;
}

.sh-print-icon {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ================================================================
   MOBILE & TABLET
   ================================================================ */

/* Tablet – 834px frame (node 231-6047): 2-col, 48px 32px container padding */
@media (max-width: 900px) {
  .category-list {
    grid-template-columns: repeat(2, 1fr);
  }

  #docsSearch {
    padding: 60px 24px 0;
  }

  .collection-category {
    padding: 48px 32px;
  }
}

/* Tablet – Bootstrap hamburger but 2-column grid still floats (768–978px) */
@media (max-width: 978px) {
  #docsSearch {
    padding-bottom: 0;
  }

  /* Align content left edge with Bootstrap's default container-fluid padding */
  #contentArea {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Collection title: Figma 162:6255 (mobile): 30px/-0.75px */
  #categoryHead h1 {
    font-size: 30px !important;
    letter-spacing: -0.75px !important;
  }

  /* Sidebar search wrapper (moved by JS above row-fluid on mobile) */
  .sh-search-above {
    padding: 0 16px 16px;
  }

  .sh-search-above .sh-sidebar-search {
    margin: 0 !important;
  }
}

/* Full mobile – Bootstrap stacks columns to 100% width (< 768px) */
@media (max-width: 767px) {
  /* Article list page: full-width card, no rounded corners */
  .contentWrapper {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 16px !important;
  }

  #contentArea {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Disable fixed background attachment (perf + Safari quirk) */
  body {
    background-attachment: scroll !important;
  }
}

@media (max-width: 480px) {
  .category-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #docsSearch {
    padding: 40px 16px 0;
  }

  #docsSearch h1 {
    font-size: 36px !important;
    letter-spacing: -0.25px !important;
  }

  /* Help Scout hides the button label at ≤480px in favor of its icon — keep the label */
  #searchBar button[type="submit"] span {
    font-size: 16px !important;
    text-indent: 0 !important;
    width: auto !important;
  }

  .collection-category {
    padding: 32px 16px;
    margin-bottom: 16px;
  }
}