@font-face {
  font-family: 'Inter';
  font-display: optional;
  font-weight: 100 900;
  src: url('https://chartmogul.com/-/shared/inter.woff2') format('woff2');
}

body {
  font-family: Inter, arial, sans-serif;
  letter-spacing: -.02rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: normal;
  font-variant-numeric: normal;
  /* Replaces the native blocky document icon. Since this is an image, its color is
  baked in. */
  --document-icon: url("data:image/svg+xml, \
    %3Csvg viewBox='0 0 15 15' fill='%237f8a95' xmlns='http://www.w3.org/2000/svg'%3E \
      %3Cpath d='M4 0Q2 0 2 2V13Q2 15 4 15H11Q13 15 13 13V5H8V0ZM9 0L13 4H9ZM4 12H11V13H4M4 9H11V10H4M4 6H11V7H4Z'/%3E \
    %3C/svg%3E \
  ");
}

/* Change the "default" font size of article content. I didn't come up with
this selector, it's what Help Scout already uses to set a fixed (!) font size
for article content. */
#fullArticle :is(blockquote, dd, div, li, ol, p, table, ul){ font-size: 1rem; }
/* Make pages in general a bit wider */
.container-fluid { max-width: 1200px; }
/* Remove the "print" button in the top-right of each article */
a.printArticle { display: none; }
/* Change the document icon used when listing documents */
.icon-article-doc::before {
  content: var(--document-icon);
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
/* Navigation menu */
#mainNav {
  .navbar-inner { padding-bottom: .5rem; }
  .brand {
    padding-top: 1.5rem;
    font-weight: 400;
    font-size: 1.2rem;
    img {
      width: 107px;
      height: auto;
      vertical-align: -.35rem;
      margin-inline-end: 1rem;
    }
    /* Make it look more like it used to - adds text after the wordmark. But
    only if there is room for it. */
    @media(width > 900px){
      &::after { content: "Help Center"; }
    }
  }
  /* The button to open the menu on mobile or other narrow screen sizes. */
  button.btn-navbar {
    inset: .7rem 0 auto auto;
    .icon-bar {
      background: black;
      box-shadow: none;
    }
  }
  /* Remove the little triangle indicating what page the user's on */
  a b.caret { display: none; }
}

/* The search bar. This technically only "natively" exists on the homepage
AFAIK, but a "fake" `#docsSearch` element is injected into each page through JS
and the search bar is artifically moved to it. The fake #docsSearch has a
`.compact` class because it should be a bit more dense than the one on the
homepage, and it includes a `p.header` instead of an `h1` so it doesn't clash
with the `h1` from the article or whatever page it's on. */
#docsSearch {
  background: #CCEAFF;
  border: none;
  h1, p.header {
    margin-top: 3rem;
    font-weight: 600;
    font-size: 2.25rem;
  }
  input {
    border: none;
    outline: none;
    box-shadow: none;
  }
  #searchBar input + button {
    color: white;
    background-color: black;
    &:hover { background-color: #000C; }
  }
  /* Here are the compact-specific styles. Effectively applies to all pages
  except the homepage. */
  &.compact {
    display: flex;
    gap: 2rem 4rem;
    justify-content: center;
    align-items: center;
    /* Effectively sets a max-width for the content-box. Should match the value
    set in the `max-width` of the `.fluid-container`. */
    padding: 3rem max((100% - 1200px) / 2, 40px);
    .header, form {
      flex: 1 0 0;
      margin: 0;
    }
    .header { line-height: 1.3; }
    form { max-width: 40rem; }
    form.sm button { height: 100%; }
    @media(width < 800px){
      flex-flow: column;
    }
  }
}
/* Make sure the dropdown is on top of the tiles on the homepage */
#serp-dd { z-index: 10; }

/* Most non-home pages seem to have this `#main-content` element (as grandchild
of `#contentArea`). The default styles have an off-brand look, so this sort of
resets it. */
#main-content {
  background: none;
  padding-top: 0;
  h1, h2 { font-weight: 600; }
  .contentWrapper { border: none; }
}

/* Help Scout supports callouts but we have these as a side effect of the
migration. Callouts _should_ be migrated to Help Scout's built-in ones, but I
reckon that's not happening anytime soon so here we are duplicating styles. */
#fullArticle .alert {
  padding: 15px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 2px;
  :is(h2, h3, h4){ margin-top: 0; }
  :is(h2, h3, h4, blockquote, dd, div, li, ol, p, table, ul, strong){
    color: inherit;
  }
  & > p + p { margin-top: 5px; }
  p:first-child { margin-top: 0; }
  p:last-child { margin-bottom: 0; }
  &.alert-success {
    color: #499e46;
    background-color: #ecf7ec;
    border-color: #deefda;
  }
  &.alert-info {
    color: #0773c1;
    background-color: #f0f7fc;
    border-color: #d3ecf5;
  }
  &.alert-warning {
    color: #8b480d;
    background-color: #fdf1e7;
    border-color: #fbdccf;
  }
  &.alert-danger {
    color: #4c1210;
    background-color: #f9e2e2;
    border-color: #f4cdd2;
  }
}

/* The sidebar on the left that contains categories and whatnot. Just a bit of
a UX boost to keep them on the screen as you scroll down. */
#sidebar {
  position: sticky;
  top: 2rem;
}

/* Homepage-specific styles. The `.page-home` class is added with some custom
JS - see `head.html`. Also; these styles depend on the homepage showing
"Most popular", _not_ "categories" (this is configurable). */
:root.page-home {
  #contentArea .row-fluid {
    display: grid;
    grid: auto / repeat(auto-fit, minmax(18rem, 1fr));
    gap: 4rem;
    padding: 4rem 0;
    &::before, &::after { content: none; }
  }
  .collection {
    /* This is overwritten for each collection to set a `url(…)` that is used
    for the image. */
    --collection-image: none;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
  }
  .collection-body { display: none; }
  /* We're doing some major gymnastics here to mimic the old help center's
  behavior. We want a clickable tile with image, header and subtext. In Help
  Scout, we get a structure like `<h2><a>…</a></h2><p>…</p>`. We then "stretch"
  the anchor to cover the whole tile and position the `p` relatively so it can
  still contribute to the tile size if the text wraps. */
  .collection-head {
    /* The amount of "stretching" we do. It doesn't really matter how much this
    is, but it _should_ always exceed the height the tile would naturally have,
    so it is set to something reasonably large for safety. */
    --reserved-clickable-space: 20rem;
    /* Because this layout is a bit… unconventional, here's a variable to
    control the tile's padding regarding the header and subtext (the image
    always sits edge-to-edge with the tile). */
    --padding-inline: 1.5rem;
    height: 100%;
    padding: 0 0 3rem;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #F7F8FB;
    border: none;
    border-radius: .5rem;
    transition: transform .2s, box-shadow .2s;
    &:hover, &:has(:focus-visible){
      transform: scale(1.05);
      box-shadow: 5px 5px 24px #00162f33;
    }
    h2 {
      margin: 0;
      position: relative;
      z-index: 2;
      text-align: left;
      font-weight: 600;
    }
    h2 a {
      display: block;
      padding: 0 var(--padding-inline) var(--reserved-clickable-space);
      text-decoration: none;
      outline: none;
    }
    h2 a::before {
      content: "";
      display: block;
      width: calc(100% + 2 * var(--padding-inline));
      height: 8rem;
      margin: 0 calc(-1 * var(--padding-inline)) 2rem;
      background: center / cover no-repeat var(--collection-image);
    }
    h2 + p {
      padding-inline: var(--padding-inline);
      margin-bottom: calc(-1 * var(--reserved-clickable-space));
      position: relative;
      top: calc(-1 * var(--reserved-clickable-space));
      z-index: 1;
      text-align: left;
      color: black;
    }
  }
  #collection-34 { --collection-image: url("https://chartmogul.com/-/help-center/img/setup.webp"); }
  #collection-38 { --collection-image: url("https://chartmogul.com/-/help-center/img/crm.webp"); }
  #collection-43 { --collection-image: url("https://chartmogul.com/-/help-center/img/sa.webp"); }
  #collection-47 { --collection-image: url("https://chartmogul.com/-/help-center/img/reports.webp"); }
  #collection-00 { --collection-image: url("https://chartmogul.com/-/help-center/img/dev.webp"); }
  #collection-000 { --collection-image: url("https://chartmogul.com/-/help-center/img/updates.webp"); }
}

/* Specific to pages under /category/ */
:root.page-category {
  /* Hide the sorting button for category lists */
  #categoryHead .sort { display: none; }
}

#no-beacon-alert {
  display: block;
  padding: 1rem 2rem;
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 11;
  background: #ffd6d6;
  border-radius: 0.3rem;
  border: 1px solid #c19c9c;
  visibility: visible;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: translate .4s, visibility 0s 0s;
  &[hidden]{
    visibility: hidden;
    translate: 0 calc(1.1rem + 100%);
    transition: translate .4s, visibility 0s .4s;
  }
}

#fullArticle :is(h2, h3, h4){
  position: relative;
  &:not(:hover) a.header-anchor { opacity: 0; }
  a.header-anchor {
    padding-right: .3em;
    position: absolute;
    inset: 0 100% 0 auto;
    color: #90a8bd;
    &:hover { text-decoration: none; }
    &::after { content: "#"; }
  }
}