@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =========================================================
   Peabody Digital Knowledge Base
   Custom stylesheet for Help Scout Docs

   The @import above must stay on the very first line.
   Tokens live in :root, so brand changes happen in one place.
   ========================================================= */

:root {
  /* Colour */
  --pd-ink:         #14231D;
  --pd-body:        #2C3B35;
  --pd-muted:       #5F6E67;
  --pd-surface:     #FBFBF9;
  --pd-panel:       #FFFFFF;
  --pd-line:        #E3E7E2;
  --pd-line-strong: #CBD3CC;
  --pd-green:       #1E5C4A;
  --pd-green-deep:  #143D31;
  --pd-green-tint:  #EDF3F0;
  --pd-gold:        #A97416;
  --pd-gold-tint:   #FBF3E2;

  /* Type */
  --pd-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pd-text:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pd-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --pd-measure: 68ch;
  --pd-radius:  10px;
  --pd-radius-sm: 6px;
  --pd-shadow:  0 1px 2px rgba(20, 35, 29, 0.05), 0 6px 20px rgba(20, 35, 29, 0.05);
}

/* =========================================================
   1. Base
   ========================================================= */

html,
body {
  background: var(--pd-surface);
  color: var(--pd-body);
  font-family: var(--pd-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body * {
  box-sizing: border-box;
}

a {
  color: var(--pd-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(30, 92, 74, 0.35);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--pd-green-deep);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--pd-green);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--pd-green-tint);
  color: var(--pd-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pd-display);
  color: var(--pd-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}

/* =========================================================
   2. Header
   ========================================================= */

#mainNav.navbar {
  margin: 0;
  background: var(--pd-green-deep);
}

#mainNav .navbar-inner {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  min-height: 0;
  padding: 0;
}

#mainNav .container-fluid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}

#mainNav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  float: none;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  font-family: var(--pd-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: none;
  text-decoration: none;
}

#mainNav .brand::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--pd-gold);
  flex: 0 0 auto;
}

#mainNav .brand:hover,
#mainNav .brand:focus {
  color: #FFFFFF;
  opacity: 0.85;
}

#mainNav .nav > li > a {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--pd-display);
  font-size: 0.9375rem;
  text-shadow: none;
  padding: 10px 14px;
}

#mainNav .nav > li > a:hover {
  color: #FFFFFF;
}

/* =========================================================
   3. Page shell and grid
   Help Scout uses the Bootstrap 2 float grid. These rules
   convert it to flex so columns behave predictably.
   ========================================================= */

#contentArea.container-fluid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 28px 72px;
}

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  width: auto;
}

.row-fluid::before,
.row-fluid::after {
  display: none;
}

.row-fluid > [class*="span"] {
  float: none;
  width: auto;
  min-width: 0;
  margin-left: 0;
}

.row-fluid > .span12 { flex: 1 1 100%; }
.row-fluid > .span9  { flex: 1 1 62%; }
.row-fluid > .span8  { flex: 1 1 58%; }
.row-fluid > .span6  { flex: 1 1 44%; }
.row-fluid > .span4  { flex: 1 1 280px; }
.row-fluid > .span3  { flex: 0 0 260px; }

#main-content .contentWrapper {
  max-width: var(--pd-measure);
}

/* =========================================================
   4. Breadcrumbs and page headers
   ========================================================= */

#pageHeader,
.pageTitle {
  margin-bottom: 28px;
}

#pageHeader h1,
.pageTitle h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
}

.breadcrumb,
#pageHeader .breadcrumb {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  font-family: var(--pd-display);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--pd-muted);
}

.breadcrumb a {
  color: var(--pd-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--pd-green);
  text-decoration: underline;
}

.breadcrumb > li + li::before,
.breadcrumb .divider {
  content: "/";
  color: var(--pd-line-strong);
  padding: 0 6px;
}

/* =========================================================
   5. Article
   ========================================================= */

#fullArticle {
  position: relative;
}

#fullArticle .title {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pd-line);
}

#fullArticle p {
  margin: 0 0 1.15em;
  color: var(--pd-body);
}

#fullArticle > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--pd-ink);
}

#fullArticle h2 {
  font-size: 1.5rem;
  margin: 2.4em 0 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--pd-line);
}

#fullArticle h2:first-of-type {
  margin-top: 2em;
}

#fullArticle h3 {
  font-size: 1.1875rem;
  margin: 1.9em 0 0.5em;
}

#fullArticle h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.6em 0 0.4em;
}

/* Lead-in bold at the start of a paragraph reads as a term or a
   caution, so it gets display type rather than a heavier serif. */
#fullArticle p > strong:first-child {
  font-family: var(--pd-display);
  font-weight: 600;
  font-size: 0.98em;
  color: var(--pd-ink);
}

#fullArticle strong {
  font-weight: 600;
  color: var(--pd-ink);
}

#fullArticle ul,
#fullArticle ol {
  margin: 0 0 1.4em;
  padding-left: 1.35em;
}

#fullArticle li {
  margin-bottom: 0.45em;
  padding-left: 0.2em;
}

#fullArticle ul > li::marker {
  color: var(--pd-green);
}

#fullArticle ol > li::marker {
  font-family: var(--pd-display);
  font-weight: 600;
  color: var(--pd-green);
}

#fullArticle img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  margin: 1.5em 0;
}

#fullArticle hr {
  border: 0;
  border-top: 1px solid var(--pd-line);
  margin: 2.4em 0;
}

/* =========================================================
   6. Code, values and the copy block
   The signature element. Most values in these articles must be
   pasted exactly, so the block is labelled and set apart.
   ========================================================= */

#fullArticle code {
  font-family: var(--pd-mono);
  font-size: 0.875em;
  background: var(--pd-green-tint);
  color: var(--pd-green-deep);
  border: 1px solid rgba(30, 92, 74, 0.12);
  border-radius: var(--pd-radius-sm);
  padding: 0.12em 0.4em;
  word-break: break-word;
}

#fullArticle pre {
  position: relative;
  font-family: var(--pd-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--pd-ink);
  background: var(--pd-panel);
  border: 1px solid var(--pd-line);
  border-left: 3px solid var(--pd-green);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  padding: 44px 22px 22px;
  margin: 1.8em 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

#fullArticle pre::before {
  content: "Copy exactly";
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 14px;
  font-family: var(--pd-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pd-green-deep);
  background: var(--pd-green-tint);
  border-bottom: 1px solid var(--pd-line);
  border-radius: 0 0 var(--pd-radius) 0;
}

#fullArticle pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Add class="plain" to a pre in the HTML editor to drop the label. */
#fullArticle pre.plain {
  padding-top: 22px;
}

#fullArticle pre.plain::before {
  display: none;
}

/* =========================================================
   7. Callouts and tables
   ========================================================= */

#fullArticle blockquote {
  margin: 1.8em 0;
  padding: 18px 22px;
  background: var(--pd-green-tint);
  border: 0;
  border-left: 3px solid var(--pd-green);
  border-radius: 0 var(--pd-radius) var(--pd-radius) 0;
  font-size: 1rem;
  color: var(--pd-ink);
}

#fullArticle blockquote p:last-child {
  margin-bottom: 0;
}

/* Add class="warning" to a blockquote for anything that can break
   a live site or live email. */
#fullArticle blockquote.warning {
  background: var(--pd-gold-tint);
  border-left-color: var(--pd-gold);
}

#fullArticle table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-family: var(--pd-display);
  font-size: 0.9375rem;
}

#fullArticle th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-green-deep);
  background: var(--pd-green-tint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--pd-line-strong);
}

#fullArticle td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pd-line);
  vertical-align: top;
}

#fullArticle tbody tr:hover td {
  background: rgba(30, 92, 74, 0.03);
}

/* DNS values in tables read better in mono. */
#fullArticle td code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--pd-ink);
}

/* =========================================================
   8. Article footer and admin chrome
   ========================================================= */

.articleFoot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--pd-line);
  font-family: var(--pd-display);
  font-size: 0.8125rem;
  color: var(--pd-muted);
}

.articleFoot time.lu {
  display: block;
}

#fullArticle .printArticle {
  float: right;
  color: var(--pd-muted);
  text-decoration: none;
  font-size: 1rem;
  margin-left: 12px;
}

#fullArticle .printArticle:hover {
  color: var(--pd-green);
}

/* Only visible to signed in staff. Kept quiet so it does not
   compete with the article. */
#fullArticle .admin-edit.btn {
  float: right;
  background: none;
  background-image: none;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius-sm);
  box-shadow: none;
  text-shadow: none;
  color: var(--pd-muted);
  font-family: var(--pd-display);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 11px;
  margin-left: 12px;
}

#fullArticle .admin-edit.btn:hover {
  color: var(--pd-green);
  border-color: var(--pd-green);
}

.appMessage {
  background: var(--pd-gold-tint);
  border: 1px solid rgba(169, 116, 22, 0.28);
  border-radius: var(--pd-radius);
  padding: 12px 16px;
  margin-bottom: 28px;
  font-family: var(--pd-display);
  font-size: 0.875rem;
  color: #6E4A0C;
}

.appMessage em {
  font-style: normal;
  font-weight: 600;
}

/* =========================================================
   9. Sidebar and search
   ========================================================= */

#sidebar {
  align-self: flex-start;
  position: sticky;
  top: 28px;
  font-family: var(--pd-display);
}

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

#sidebar ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

#sidebar li {
  margin-bottom: 9px;
  line-height: 1.4;
}

#sidebar a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--pd-body);
}

#sidebar a:hover {
  color: var(--pd-green);
  text-decoration: underline;
}

#searchBar {
  position: relative;
  margin: 0 0 32px;
}

#searchBar .search-query {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 42px 0 14px;
  font-family: var(--pd-display);
  font-size: 0.9375rem;
  color: var(--pd-ink);
  background: var(--pd-panel);
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#searchBar .search-query::placeholder {
  color: var(--pd-muted);
}

#searchBar .search-query:focus {
  outline: none;
  border-color: var(--pd-green);
  box-shadow: 0 0 0 3px rgba(30, 92, 74, 0.12);
}

#searchBar button {
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  background-image: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  color: var(--pd-muted);
  cursor: pointer;
}

#searchBar button:hover {
  color: var(--pd-green);
}

#serp-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--pd-panel);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  overflow: hidden;
}

#serp-dd ul {
  list-style: none;
  margin: 0;
  padding: 6px;
}

#serp-dd li a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--pd-radius-sm);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--pd-body);
}

#serp-dd li a:hover,
#serp-dd li.active a {
  background: var(--pd-green-tint);
  color: var(--pd-green-deep);
}

#noResults {
  font-family: var(--pd-display);
  color: var(--pd-muted);
  padding: 20px 0;
}

/* =========================================================
   10. Home, collection and search result listings
   Help Scout uses these classes across the listing templates.
   ========================================================= */

.hero,
#pageTitle.hero {
  background: var(--pd-panel);
  border-bottom: 1px solid var(--pd-line);
  padding: 56px 28px;
  text-align: left;
}

.hero .container,
.hero .container-fluid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  letter-spacing: -0.025em;
  margin: 0 0 10px;
}

.hero p {
  color: var(--pd-muted);
  max-width: 60ch;
  margin: 0 0 24px;
}

.hero #searchBar {
  max-width: 480px;
  margin: 0;
}

.category,
.categoryItem,
#categories > li {
  background: var(--pd-panel);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 24px 24px 22px;
  list-style: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.category:hover,
.categoryItem:hover,
#categories > li:hover {
  border-color: var(--pd-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow);
}

.category h3,
.category h2,
.categoryItem h3 {
  font-size: 1.125rem;
  margin: 0 0 8px;
}

.category h3 a,
.category h2 a,
.categoryItem h3 a {
  text-decoration: none;
  color: var(--pd-ink);
}

.category p,
.categoryItem p {
  font-size: 0.9375rem;
  color: var(--pd-muted);
  margin: 0;
}

.articleList,
#popularArticles ul,
#relatedArticles ul,
.searchResults {
  list-style: none;
  margin: 0;
  padding: 0;
}

.articleList li,
#popularArticles li,
.searchResult {
  padding: 16px 0;
  border-bottom: 1px solid var(--pd-line);
}

.articleList li a,
#popularArticles li a,
.searchResult a {
  font-family: var(--pd-display);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--pd-ink);
  text-decoration: none;
}

.articleList li a:hover,
#popularArticles li a:hover,
.searchResult a:hover {
  color: var(--pd-green);
  text-decoration: underline;
}

.searchResult p,
.articleList li p {
  margin: 5px 0 0;
  font-size: 0.9375rem;
  color: var(--pd-muted);
}

/* =========================================================
   11. Footer
   ========================================================= */

#contentArea footer,
body > footer {
  max-width: 1180px;
  margin: 56px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--pd-line);
  font-family: var(--pd-display);
  font-size: 0.8125rem;
  color: var(--pd-muted);
}

#contentArea footer a,
body > footer a {
  color: var(--pd-muted);
  text-decoration: underline;
  text-decoration-color: var(--pd-line-strong);
}

#contentArea footer a:hover,
body > footer a:hover {
  color: var(--pd-green);
}

/* =========================================================
   12. Responsive
   ========================================================= */

@media (max-width: 900px) {
  .row-fluid {
    gap: 36px;
  }

  .row-fluid > .span3 {
    flex: 1 1 100%;
  }

  #sidebar {
    position: static;
    border-top: 1px solid var(--pd-line);
    padding-top: 28px;
  }
}

@media (max-width: 640px) {
  html,
  body {
    font-size: 16px;
  }

  #mainNav .container-fluid,
  #contentArea.container-fluid,
  .hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  #contentArea.container-fluid {
    padding-top: 30px;
  }

  .hero {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  #fullArticle pre {
    font-size: 0.8125rem;
    padding-left: 16px;
    padding-right: 16px;
  }

  #fullArticle table {
    display: block;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .category:hover,
  .categoryItem:hover {
    transform: none;
  }
}

/* =========================================================
   13. Print
   ========================================================= */

@media print {
  #mainNav,
  #sidebar,
  .appMessage,
  .admin-edit,
  .printArticle,
  footer {
    display: none !important;
  }

  html,
  body {
    background: #FFFFFF;
    font-size: 12pt;
  }

  #contentArea.container-fluid {
    padding: 0;
  }

  #main-content .contentWrapper {
    max-width: none;
  }

  #fullArticle pre {
    box-shadow: none;
    page-break-inside: avoid;
  }

  #fullArticle h2 {
    page-break-after: avoid;
  }

  #fullArticle a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
  }
}