/* ==========================================================================
   Axle Mobility — Help Scout Docs custom stylesheet
   Chrome only: nav, hero, cards, sidebar, lists.
   Article content is left alone — no injected rules, borders or dividers.
   Apply: Settings (gear) → Docs Sites → [site] → Custom Code → Custom Stylesheet.
   ========================================================================== */

:root {
  --axle-green: #08442A;
  --axle-green-hover: #0C6440;
  --axle-sand: #F2F1EE;
  --axle-ink: #1C1F1D;
  --axle-muted: #5F6B65;
  --axle-line: #E3E1DA;
  --axle-radius: 10px;
}

body {
  background: var(--axle-sand);   /* whole site sits on the warm gray */
  color: var(--axle-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

#mainNav .navbar-inner {
  background: var(--axle-sand);
  border: 0;
  border-bottom: 1px solid var(--axle-line);
  box-shadow: none;
  padding: 16px 0;
}

#mainNav .brand img {
  height: auto;
  max-height: 46px;
  width: auto;
}

/* Chrome's focus ring on the logo link — kept for keyboard users only,
   in green rather than the default blue box */
#mainNav .brand:focus {
  outline: none;
}

#mainNav .brand:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--axle-green);
  outline-offset: 3px;
}

/* b.caret is the notch that broke the hover underline in half */
#mainNav .nav li a .caret {
  display: none;
}

#mainNav .nav li a {
  border-bottom: 2px solid transparent;
  color: var(--axle-ink);
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 3px;
  transition: color 0.12s ease, border-color 0.12s ease;
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus,
#mainNav .nav li.active a,
#mainNav .nav li.active a:hover,
#mainNav .nav li.active a:focus {
  border-bottom-color: var(--axle-green);
  color: var(--axle-green);
}

/* ==========================================================================
   Home hero + big search (scoped so the sidebar search is untouched)
   ========================================================================== */

#docsSearch {
  background: transparent;
  border-bottom: 0;
  padding: 64px 20px 40px;
}

#docsSearch h1 {
  color: var(--axle-green);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 auto 28px;
  max-width: 20em;
}

/* The form itself carries a border/background in the default theme, which is
   what shows as a dark rectangle behind the rounded button. The markup has no
   extra element there, so the theme's own rule is the only candidate —
   !important here because that rule's selector is unknown. */
#docsSearch #searchBar {
  align-items: stretch;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  margin: 0 auto;
  max-width: 660px;
  outline: 0 !important;
  padding: 0 !important;
  position: relative;
}

#docsSearch #searchBar button {
  box-shadow: none !important;
  outline: 0 !important;
  /* the theme positions this absolutely; flex places it instead */
  position: static !important;
  right: auto !important;
  top: auto !important;
}

/* The typeahead panel is a flex child too — take it out of the row */
#docsSearch #searchBar #serp-dd {
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: auto;
  z-index: 10;
}

#docsSearch #searchBar::before,
#docsSearch #searchBar::after,
#docsSearch #searchBar button::before,
#docsSearch #searchBar button::after {
  background: none;
  border: 0;
  content: none;
  display: none;
}

#docsSearch #searchBar input.search-query {
  border: 1px solid var(--axle-line);
  border-radius: var(--axle-radius) 0 0 var(--axle-radius);
  border-right: 0;
  box-shadow: none;
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 16px;
  height: 52px;
  margin: 0;
  min-width: 0;
  padding: 0 18px;
  width: auto;
}

#docsSearch #searchBar input.search-query:focus {
  border-color: var(--axle-green);
  box-shadow: none;
  outline: none;
}

#docsSearch #searchBar button {
  background: var(--axle-green);
  background-clip: border-box;
  background-image: none;
  border: 1px solid var(--axle-green);
  border-radius: 0 var(--axle-radius) var(--axle-radius) 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  height: 52px;
  margin: 0;
  outline: 0;
  padding: 0 24px;
  text-shadow: none;
}

#docsSearch #searchBar button:focus,
#docsSearch #searchBar button:active {
  box-shadow: none;
  outline: 0;
}

#docsSearch #searchBar button:hover,
#docsSearch #searchBar button:focus {
  background: var(--axle-green-hover);
  border-color: var(--axle-green-hover);
}

#serp-dd {
  border: 1px solid var(--axle-line);
  border-radius: var(--axle-radius);
  box-shadow: 0 8px 24px rgba(28, 31, 29, 0.10);
  overflow: hidden;
}

#serp-dd .result a {
  color: var(--axle-ink);
  padding: 10px 14px;
}

#serp-dd {
  background: #FFFFFF;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background: rgba(8, 68, 42, 0.06);
  color: var(--axle-green);
}

/* ==========================================================================
   Home page: collections + category cards
   ========================================================================== */

/* The theme runs full-bleed, so on a wide monitor the content stretches to
   the window edges and everything drifts apart. One measure, centred, used
   by both the nav bar and the content so they line up. */
#mainNav .navbar-inner .container-fluid,
#contentArea.container-fluid {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1120px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

#contentArea {
  padding-bottom: 56px;
  padding-top: 12px;
}

.collection-category {
  margin-top: 28px;
}

.collection-category:first-of-type {
  margin-top: 0;
}

.collection-category h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.collection-category h2 a {
  color: var(--axle-muted);
}

.collection-category h2 a:hover {
  color: var(--axle-green);
  text-decoration: none;
}

/* Help Scout swaps this class by category count — two-col, three-col and so
   on — so the grid is defined on .category-list itself and the columns fit
   themselves to the available width. */
.category-list,
.category-list.two-col,
.category-list.three-col {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.category-list .category,
.category-list.two-col .category {
  background: #FFFFFF;
  border: 1px solid var(--axle-line);
  border-radius: var(--axle-radius);
  box-shadow: 0 1px 2px rgba(28, 31, 29, 0.04);
  display: block;
  float: none;
  margin: 0;
  min-height: 0;
  padding: 22px 24px;
  text-align: left;   /* the theme centres these once there are three */
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
  width: auto;
}

.category-list .category:hover,
.category-list .category:focus,
.category-list .category:active,
.category-list.two-col .category:hover {
  background: #FFFFFF;   /* the theme greys the card on hover */
  border-color: var(--axle-green);
  box-shadow: 0 6px 18px rgba(28, 31, 29, 0.08);
  text-decoration: none;
  transform: translateY(-2px);
}

.category-list .category h3 {
  color: var(--axle-green);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.category-list .category p {
  color: var(--axle-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.category-list .category p.article-count {
  font-size: 13px;
  margin-top: 12px;
}

/* ==========================================================================
   Two-column pages: #main-content.span9 + aside#sidebar.span3
   ========================================================================== */

#contentArea .row-fluid {
  display: flex;
  gap: 48px;
  margin-top: 44px;
}

#contentArea .row-fluid #sidebar.span3 {
  flex: 0 0 240px;
  margin: 0;
  order: 1;
  width: 240px;
}

#contentArea .row-fluid #main-content.span9 {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  order: 2;
  width: auto;
}

/* The theme's white panel — the drop shadow lives on #main-content itself,
   not on .contentWrapper, so both are flattened here. */
#contentArea .row-fluid #main-content,
#contentArea .row-fluid #main-content .contentWrapper,
#main-content,
#main-content .contentWrapper {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}

/* --- Category header --- */

/* The theme indents this block; the article list below it is not indented,
   which is why the title and the article titles did not line up. */
#categoryHead {
  /* bottom margin tuned so the first article lines up with the first
     category button in the sidebar */
  margin: 0 0 56px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

#categoryHead h1,
#categoryHead p.descrip {
  margin-left: 0;
  padding-left: 0;
}

#categoryHead h1 {
  color: var(--axle-green);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

#categoryHead p.descrip {
  color: var(--axle-muted);
  font-size: 16px;
  margin: 0;
}

/* Sort control hidden — articles use the default order set in Help Scout.
   To bring it back, swap display for: position: absolute; right: 0; top: 4px; */
#categoryHead .sort {
  display: none;
}

#categoryHead .sort select,
#sortBy {
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  /* custom caret, so the native one does not sit in a box of its own */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%235F6B65' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border: 1px solid var(--axle-line);
  border-radius: 8px;
  box-shadow: none;
  color: var(--axle-muted);
  font-size: 13px;
  height: 36px;
  line-height: 34px;
  margin: 0;
  padding: 0 34px 0 12px;
  width: auto;
}

#categoryHead .sort select:hover,
#sortBy:hover {
  border-color: var(--axle-green);
  color: var(--axle-green);
}

/* Chrome's blue focus ring is what made this look like a form error */
#categoryHead .sort select:focus,
#sortBy:focus {
  border-color: var(--axle-green);
  box-shadow: none;
  outline: none;
}

/* --- Article list: links only, no rules, no hover band --- */

ul.articleList {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.articleList,
ul.articleList li,
ul.articleList li a {
  margin-left: 0;
  padding-left: 0;
}

ul.articleList li {
  border: 0;
  margin: 0;
  padding: 0;
}

ul.articleList li a {
  align-items: baseline;
  color: var(--axle-ink);
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  line-height: 1.5;
  padding: 12px 0;
  text-decoration: none;
}

ul.articleList li a:hover {
  background: none;
  color: var(--axle-green);
  text-decoration: underline;
}

/* Decorative only — every row in this list is an article */
ul.articleList li a i.icon-article-doc {
  display: none;
}

/* Chrome's blue focus box after a click — kept for keyboard users only */
ul.articleList li a:focus,
#fullArticle a:focus,
.category-list .category:focus {
  outline: none;
}

ul.articleList li a:focus-visible,
#fullArticle a:focus-visible,
.category-list .category:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--axle-green);
  outline-offset: 2px;
}

/* --- Sidebar --- */

#sidebar #searchBar.sm {
  box-sizing: border-box;
  display: block;
  margin: 0 0 28px;
  position: relative;
  width: 100%;
}

#sidebar #searchBar.sm input.search-query {
  border: 1px solid var(--axle-line);
  border-radius: 8px;
  box-shadow: none;
  box-sizing: border-box;   /* same outer width as the category pill below */
  display: block;
  font-size: 15px;
  height: 42px;
  margin: 0;
  padding: 0 40px 0 14px;
  width: 100%;
}

#sidebar #searchBar.sm input.search-query:focus {
  border-color: var(--axle-green);
  box-shadow: none;
  outline: none;
}

#sidebar #searchBar.sm button {
  background: none;
  background-image: none;
  border: 0;
  box-shadow: none;
  color: var(--axle-muted);
  height: 42px;
  padding: 0 12px;
  position: absolute;
  right: 0;
  top: 0;
}

#sidebar #searchBar.sm button:hover {
  color: var(--axle-green);
}

#sidebar h3 {
  color: var(--axle-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

#sidebar ul.nav-list {
  margin: 0;
  padding: 0;
}

#sidebar ul.nav-list > li > a {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--axle-ink);
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  margin: 0;
  padding: 9px 12px;
  text-shadow: none;
  width: 100%;
}

#sidebar ul.nav-list > li > a:hover {
  background: rgba(8, 68, 42, 0.06);
  color: var(--axle-green);
}

#sidebar ul.nav-list > li.active > a,
#sidebar ul.nav-list > li.active > a:hover,
#sidebar ul.nav-list > li.active > a:focus {
  background: rgba(8, 68, 42, 0.08);
  color: var(--axle-green);
  font-weight: 600;
  text-shadow: none;
}

/* Chevron removed */
#sidebar ul.nav-list > li > a i.icon-arrow {
  display: none;
}


/* ==========================================================================
   Articles — title colour and a readable measure only.
   Nothing here touches headings, spacing, images, tables or embeds inside
   the article body; that content renders exactly as written in Help Scout.
   ========================================================================== */

#fullArticle {
  font-size: 17px;
  line-height: 1.65;
}

#fullArticle > h1.title {
  color: var(--axle-green);
  letter-spacing: -0.01em;
}

/* Print link removed — the theme floats it over the first paragraph, and
   Cmd+P does the same job. */
#fullArticle .printArticle {
  display: none;
}

/* Only safety rule: editor-set pixel widths must not overflow on a phone */
#fullArticle img,
#fullArticle iframe {
  max-width: 100%;
}

/* The theme frames every image in a grey border — screenshots carry their
   own edges, so it only ever reads as a second frame */
#fullArticle img,
#fullArticle figure img,
#fullArticle p img {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.articleFoot {
  border-top: 0;
  color: var(--axle-muted);
  font-size: 13px;
}

.articleFoot time.lu {
  color: var(--axle-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Inner pages ship this without the .center class, so it lands right-aligned */
#contentArea footer,
#contentArea footer.center {
  margin-top: 56px;
  padding-top: 24px;
  text-align: center;
}

#contentArea footer p {
  color: var(--axle-muted);
  font-size: 13px;
  text-align: center;
}

#contentArea footer a {
  color: var(--axle-muted);
  text-decoration: underline;
}

#contentArea footer a:hover {
  color: var(--axle-green);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 760px) {
  #docsSearch {
    padding: 40px 16px 44px;
  }

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

  #mainNav .brand img {
    max-height: 36px;
  }

  .category-list,
  .category-list.two-col,
  .category-list.three-col {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stack, but keep the sidebar first so search is at the top of the page
     rather than buried under the article list */
  #contentArea .row-fluid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 24px;
  }

  #contentArea .row-fluid #sidebar.span3,
  #contentArea .row-fluid #main-content.span9 {
    flex: 0 0 auto;
    width: auto;
  }

  #contentArea .row-fluid #sidebar.span3 {
    margin-bottom: 0;
    order: 1;
  }

  #contentArea .row-fluid #main-content.span9 {
    order: 2;
  }

  #categoryHead {
    margin-bottom: 24px;
    padding-right: 0;
  }

  /* Logo left, hamburger right. Flex lost to the theme's own mobile rules,
     so this does it without flex: the logo is a left-aligned inline block in
     normal flow, the hamburger is taken out of flow and pinned right. */
  #mainNav .navbar-inner .container-fluid {
    display: block !important;
    min-height: 48px;
    position: relative;
    text-align: left !important;
  }

  #mainNav .brand {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  #mainNav .btn-navbar {
    float: none !important;
    margin: 0 !important;
    position: absolute !important;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  #mainNav .nav-collapse {
    clear: both;
    width: 100%;
  }
}