/* style overrides for our Helpscout docs site -- these are uploaded to the helpscout dashboard, not hosted by us */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* 16px to match the v5 storefront base (see /style_guide) */
  font-size: 16px;
  --block-spacing: 24px;
  --block-spacing-half: 12px;

  --Gray-2: #ebebeb;
  --Gray-3: #cccccc;
  --Gray-4: #8c8c8c;
  --Gray-6: #646464;
  --White-1: #ffffff;

  --White-3: #fafafa;
  --Gold-Brand: #a08f68;
  --Gold-Dark: #847459;
  --content-top-margin: 2rem;

  /* v5 type scale (app/assets/stylesheets/v5/_globals.css, _typography.css, _header.css) */
  --docs-font: 'Open Sans', sans-serif;
  --docs-title-size: 54px;
  --docs-title-weight: 200;
  --docs-h2-size: 24px;
  --docs-h3-size: 20px;
  --docs-h4-size: 18px;
  --docs-subhed-weight: 600;
  --docs-body-size: 16px;
  --docs-line-height: 1.5;
}

body {
  background: var(--White-3, #fafafa);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-style: normal;
  font-weight: 400;
}

#contentArea {
  padding: var(--content-top-margin) 4rem;
}
.contentWrapper {
  border-radius: 6px;
  border: 1px solid #ebebeb;
  background: #fdfdfd;
}

.navbar .navbar-inner {
  background: #fff;
  border-bottom: 1px solid var(--Gray-2, #ebebeb);
}
.navbar .nav li a,
.navbar .icon-private-w {
  color: var(--Gray-6);
}
.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--Gray-6);
}
.navbar a:hover .icon-private-w,
.navbar a:focus .icon-private-w,
.navbar .active a .icon-private-w,
.navbar .active a:hover .icon-private-w,
.navbar .active a:focus .icon-private-w {
  color: var(--Gray-6);
}

#serp-dd .result a:hover,
#serp-dd .result > li.active,
#fullArticle strong a,
#fullArticle a strong,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span,
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--Gold-Brand);
}
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  color: var(--Gray-6);
}

/* header logo image */
.navbar .brand {
  padding: 0;
}

.navbar .nav li a {
  /* color: var(--Gray-6); */
  font-family: var(--docs-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  padding: 9px 18px;
}

/* .navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--Gray-6);
} */

#main-content {
  padding: var(--content-top-margin) 0 0 2rem;
  background-image: none;
}

@media (min-width: 769px) {
  #mainNav .navbar-inner {
    padding: 20px;
  }
}

#fullArticle .align-center {
  margin-top: var(--block-spacing);
  margin-bottom: var(--block-spacing);
}

/* Article title, matching the v5 storefront page title (54px / 200). */
h1,
.contentWrapper h1,
#fullArticle h1.title {
  margin: 0 0 var(--block-spacing);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-title-size);
  font-style: normal;
  font-weight: var(--docs-title-weight);
  line-height: 1.4;
}

/* h2 and h3 were both 20px/700, which made nesting invisible and left authors no reason
   to pick one over the other. These now follow the v5 scale: 24 / 20 / 18. */
h2,
#fullArticle h2 {
  margin: var(--block-spacing) 0 var(--block-spacing-half);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-h2-size);
  font-style: normal;
  font-weight: var(--docs-subhed-weight);
  line-height: var(--docs-line-height);
}

h3,
#fullArticle h3 {
  margin: var(--block-spacing) 0 var(--block-spacing-half);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-h3-size);
  font-style: normal;
  font-weight: var(--docs-subhed-weight);
  line-height: var(--docs-line-height);
}

h4,
#fullArticle h4 {
  margin: var(--block-spacing) 0 var(--block-spacing-half);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-h4-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--docs-line-height);
}

/* The first heading should not push away from the title it already sits under. */
#fullArticle h1.title + h2,
#fullArticle h1.title + h3 {
  margin-top: 0;
}

#fullArticle p,
#fullArticle li {
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-body-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--docs-line-height);
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol {
  margin-top: var(--block-spacing-half);
  margin-bottom: var(--block-spacing-half);
}

#fullArticle li {
  margin: 0;
}

/* Code blocks. Help Scout's base stylesheet sets `code { white-space: normal }`, and the
   <code> inside a <pre> is what actually holds the text -- so without this every newline
   in a fenced block collapses and stacked arithmetic runs together on one line. */
#fullArticle pre,
#fullArticle pre code {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}

#fullArticle pre {
  margin: var(--block-spacing) 0;
  padding: var(--block-spacing-half) 20px;
  border: 1px solid var(--Gray-2);
  border-radius: 6px;
  background: #f7f7f7;
  overflow-x: auto;
}

#fullArticle pre code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.6;
}

/* Callouts. Markdown blockquotes are the only aside the Help Scout editor and our
   markdown source both understand, so they carry notes, caveats and warnings. */
#fullArticle blockquote {
  margin: var(--block-spacing) 0;
  padding: var(--block-spacing-half) 20px;
  border: 1px solid var(--Gray-2);
  border-left: 3px solid var(--Gold-Brand);
  border-radius: 6px;
  background: #f7f7f7;
}

#fullArticle blockquote p {
  margin: 0;
  font-size: 15px;
}

#fullArticle blockquote p + p {
  margin-top: var(--block-spacing-half);
}

#fullArticle img {
  border-radius: 6px;
  border: 1px solid #ebebeb;
  padding: 0;
  /* Screenshots are captured at 2x, so they are far wider than the column. Help Scout's
     own stylesheet constrains them, but not every context does -- belt and braces. */
  max-width: 100%;
  height: auto;
}

#fullArticle figcaption,
#fullArticle .image-caption {
  margin: var(--block-spacing-half) auto;
  display: inline;
  padding: 6px 12px;
  border-radius: 6px;
  background: #f7f7f7;

  color: var(--Gray-6);
  text-align: center;
  font-family: var(--docs-font);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 150%;
}

/* Related articles. Help Scout renders this as section.related > h3 + ul, at 12px and
   unstyled; these bring it onto the same card, type scale and link colour as the article
   it sits under. */
.related {
  margin-top: var(--block-spacing);
  padding: 2rem;
  border: 1px solid var(--Gray-2);
  border-radius: 6px;
  background: #fdfdfd;
}

.related h3 {
  margin: 0 0 var(--block-spacing-half);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: var(--docs-h3-size);
  font-weight: var(--docs-subhed-weight);
  line-height: var(--docs-line-height);
}

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

.related li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--Gray-2);
}

.related li:first-child {
  border-top: 0;
}

.related li a {
  display: block;
  padding: var(--block-spacing-half) 0;
  color: var(--Gold-Brand);
  font-family: var(--docs-font);
  font-size: var(--docs-body-size);
  font-weight: 400;
  line-height: var(--docs-line-height);
  text-decoration: none;
}

.related li a:hover,
.related li a:focus {
  color: var(--Gold-Dark);
  text-decoration: underline;
}

#sidebar {
  margin-top: var(--content-top-margin);
}

#sidebar h3 {
  margin-top: var(--block-spacing-half);
  margin-bottom: var(--block-spacing-half);
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: none;
}

#sidebar form,
#searchBar.sm {
  margin-bottom: 2.5rem;
}

input[type='search'],
input[type='text'],
#sidebar form .search-query {
  color: var(--Gray-4);
  font-family: var(--docs-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 100% */
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--Gray-2, #ebebeb);
  background: var(--White-1, #fff);
  box-shadow:
    2px 2px 0px 0px #f7f7f7 inset,
    -2px -2px 0px 0px #f7f7f7 inset;
}

#sidebar .nav-list a {
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 160% */
}

#sidebar .nav-list .active a {
  color: var(--Gray-6);
  font-family: var(--docs-font);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 160% */
}

.articleFoot {
  text-align: center;
}

.articleFoot .icon-contact {
  display: none;
}

.articleFoot p.lu,
.articleFoot time.lu {
  float: none;
}

.articleFoot p,
.articleFoot time {
  display: inline-block;
  margin: 0 var(--block-spacing-half) var(--block-spacing-half);
  color: var(--Gray-6);
  text-align: center;
  font-family: var(--docs-font);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  padding: 6px 12px;
  border-radius: 6px;
  background: #f7f7f7;
}

/* footer contact link */
#sbContact {
  color: var(--Gray-6);
  border-bottom: 1px dotted #c5c5c5;
}

#contentArea footer {
  display: none;
}

@media (max-width: 768px) {
  .navbar .brand {
    padding: 0.6rem 0;
  }

  #main-content,
  #sidebar {
    padding-left: 0;
  }

  /* On a 390px phone the old padding plus the card border left the article 284px wide --
     27% of the screen spent on chrome. The frame reads as decoration at this size, so
     drop it and give the width back to the text. */
  #contentArea {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contentWrapper {
    padding-left: 8px;
    padding-right: 8px;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* 54px wrapped this article's title onto four lines before any content was visible. */
  h1,
  .contentWrapper h1,
  #fullArticle h1.title {
    font-size: 34px;
    line-height: 1.25;
  }
}

.category-list {
  text-align: left;
  margin: 1em auto;
}

.category-list .category {
  /* text-align: center;
  display: inline-block;
  width: 29%;
   */
  padding: 2.5rem 3rem;
  box-sizing: border-box;
  border: 1px solid var(--Gray-2, #ebebeb);
  background: var(--White-2, #fdfdfd);
}

.category-list h3 {
  color: var(--Gray-6);

  text-align: center;
  /* Product/H2 */
  font-family: var(--docs-font);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

#docsSearch {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--Gray-2, #ebebeb);
}

#docsSearch h1 {
  /* Product/H2 */
  font-family: var(--docs-font);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0;
}

#searchBar button {
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
  font-size: 18px;
  padding: 0 1.5em;
  height: 48px;
  position: absolute;
  /* Was `top: 24px`, which only lined up with the input by coincidence at desktop
     widths -- on a phone the input sits higher and the button hung 6px below it. The
     input is vertically centred in the form at every width, so centre against that. */
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;   /* the icon sat near the top of the button, not in the middle */
  justify-content: center;
  border: 1px solid var(--Gold-Dark, #847459);
  border-radius: 0 12px 12px 0;   /* match the input's 12px corners */
  background: var(--Gold-Brand, #a08f68);
  transition: background 0.3s;
}

#searchBar button:hover {
  background: var(--Gold-Dark, #a08f68);
}

.category-list {
  max-width: 60rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.category-list .category {
  flex: 1 1 15rem;
  float: none;
  width: auto;
  margin-bottom: 2rem;
}