@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap");

/* =========================================================
   THREADLINE GUIDE – HELP SCOUT DOCS
   Homepage, category and article styling
   ========================================================= */

:root {
  --tl-forest: #0B4636;
  --tl-green: #108560;
  --tl-mint: #E6F4ED;
  --tl-off-white: #F5F7F6;
  --tl-cream: #EEE9D9;
  --tl-slate: #1F2937;
  --tl-grey: #6B7280;
  --tl-light-grey: #9CA3AF;
  --tl-white: #FFFFFF;
  --tl-border: rgba(11, 70, 54, 0.10);
  --tl-border-soft: rgba(31, 41, 55, 0.08);
  --tl-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --tl-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --tl-shadow-sm: 0 8px 24px rgba(11, 70, 54, 0.04);
  --tl-shadow-md: 0 18px 48px rgba(11, 70, 54, 0.08);
}

/* ---------- Foundation ---------- */

html,
body {
  background: var(--tl-off-white) !important;
}

body {
  color: var(--tl-slate) !important;
  font-family: var(--tl-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--tl-green) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--tl-forest) !important;
}

::selection {
  background: var(--tl-mint);
  color: var(--tl-forest);
}

/* ---------- Header ---------- */

#mainNav {
  background: var(--tl-off-white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tl-border-soft) !important;
  box-shadow: none !important;
  min-height: 80px !important;
}

#mainNav .navbar-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 80px !important;
}

#mainNav .container,
#mainNav .container-fluid {
  box-sizing: border-box;
  max-width: 1440px !important;
  min-height: 80px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

#mainNav .brand {
  align-items: center;
  display: flex !important;
  height: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep the uploaded Help Scout logo, just size it correctly. */
#mainNav .brand img {
  height: auto !important;
  max-height: 40px !important;
  max-width: 235px !important;
  width: auto !important;
}

/* Threadline has one collection, so the logo is the cleanest route home. */
#mainNav .nav {
  display: none !important;
}

/* ---------- Search hero ---------- */

#docsSearch {
  background: var(--tl-off-white) !important;
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 40px 24px 28px !important;
  position: relative !important;
  top: 0 !important;
}

#docsSearch .container,
#docsSearch .container-fluid,
#docsSearch form {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#searchBar {
  margin-bottom: 0 !important;
}

#docsSearch h1 {
  color: var(--tl-forest) !important;
  font-family: var(--tl-serif) !important;
  font-size: clamp(38px, 3.6vw, 50px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
  margin: 0 auto 26px !important;
  max-width: 820px !important;
  text-align: center !important;
}

#searchBar {
  display: flex !important;
  margin: 0 auto !important;
  max-width: 760px !important;
  width: 100% !important;
}

#searchBar .search-query {
  background: var(--tl-white) !important;
  border: 1px solid rgba(11, 70, 54, 0.14) !important;
  border-radius: 16px 0 0 16px !important;
  box-shadow: 0 8px 30px rgba(11, 70, 54, 0.05) !important;
  box-sizing: border-box !important;
  color: var(--tl-slate) !important;
  font-family: var(--tl-sans) !important;
  font-size: 17px !important;
  height: 58px !important;
  padding: 0 22px !important;
}

#searchBar .search-query::placeholder {
  color: var(--tl-light-grey) !important;
  opacity: 1 !important;
}

#searchBar .search-query:focus {
  border-color: rgba(16, 133, 96, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(16, 133, 96, 0.10) !important;
  outline: none !important;
}

#searchBar button {
  background: var(--tl-green) !important;
  border: 1px solid var(--tl-green) !important;
  border-radius: 0 16px 16px 0 !important;
  box-shadow: none !important;
  color: var(--tl-white) !important;
  font-family: var(--tl-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  height: 58px !important;
  padding: 0 30px !important;
  text-shadow: none !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

#searchBar button:hover,
#searchBar button:focus {
  background: var(--tl-forest) !important;
  border-color: var(--tl-forest) !important;
  color: var(--tl-white) !important;
}

/* ---------- Homepage category grid ---------- */

.category-list {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 auto !important;
  max-width: 1320px !important;
  padding: 28px 48px 72px !important;
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
}

.category-list:before,
.category-list:after {
  display: none !important;
}

.category-list .category {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 0 36px 0 0 !important;
  box-shadow: var(--tl-shadow-sm) !important;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 !important;
  min-height: 205px !important;
  padding: 36px 34px 32px !important;
  text-align: left !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  width: auto !important;
}

.category-list .category:hover {
  border-color: rgba(16, 133, 96, 0.22) !important;
  box-shadow: var(--tl-shadow-md) !important;
  transform: translateY(-3px);
}

.category-list .category h2,
.category-list .category h3,
.category-list .category h4,
.category-list .category h2 a,
.category-list .category h3 a,
.category-list .category h4 a {
  color: var(--tl-forest) !important;
  font-family: var(--tl-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.14 !important;
  margin: 0 0 14px !important;
  text-align: left !important;
  text-decoration: none !important;
}

.category-list .category p {
  color: var(--tl-grey) !important;
  font-family: var(--tl-sans) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 24px !important;
  max-width: 34ch !important;
  text-align: left !important;
}

/* Where Help Scout renders the article count as the link after the description. */
.category-list .category p + a {
  align-items: center !important;
  background: var(--tl-mint) !important;
  border-radius: 999px !important;
  color: var(--tl-forest) !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 9px 12px !important;
  text-decoration: none !important;
}

/* ---------- Category and article-list views ---------- */

#category-list,
.article-list,
.articleList,
.articles {
  font-family: var(--tl-sans) !important;
}

.article-list li,
.articleList li,
.articles li {
  border-bottom-color: var(--tl-border-soft) !important;
}

.article-list a,
.articleList a,
.articles a {
  color: var(--tl-forest) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.article-list a:hover,
.articleList a:hover,
.articles a:hover {
  color: var(--tl-green) !important;
}

/* ---------- Article pages ---------- */

#fullArticle {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 0 36px 0 0 !important;
  box-shadow: var(--tl-shadow-sm) !important;
  box-sizing: border-box !important;
}

#fullArticle h1 {
  color: var(--tl-forest) !important;
  font-family: var(--tl-serif) !important;
  font-size: clamp(38px, 4vw, 50px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

/*
   Article body styling is intentionally not overridden here.
   Threadline Guide articles use bespoke inline HTML for their typography,
   callouts, colours and spacing. The site stylesheet only styles the
   Help Scout shell and the native article title/container.
*/

.articleFoot {
  border-top-color: var(--tl-border-soft) !important;
}

.articleFoot time.lu {
  color: var(--tl-light-grey) !important;
  font-size: 12px !important;
}

/* ---------- Sidebar and utility surfaces ---------- */

#sidebar,
.sidebar {
  font-family: var(--tl-sans) !important;
}

#sidebar a,
.sidebar a {
  color: var(--tl-grey) !important;
  text-decoration: none !important;
}

#sidebar a:hover,
#sidebar .active a,
.sidebar a:hover,
.sidebar .active a {
  color: var(--tl-forest) !important;
}

/* ---------- Buttons and focus states ---------- */

button,
.btn {
  font-family: var(--tl-sans) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(16, 133, 96, 0.25) !important;
  outline-offset: 3px !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  #mainNav .container,
  #mainNav .container-fluid {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 680px) {
  #mainNav,
  #mainNav .navbar-inner,
  #mainNav .container,
  #mainNav .container-fluid,
  #mainNav .brand {
    min-height: 76px !important;
    height: 76px !important;
  }

  #mainNav .container,
  #mainNav .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #mainNav .brand img {
    max-height: 36px !important;
    max-width: 205px !important;
  }

  #docsSearch {
    padding: 36px 20px 24px !important;
  }

  #docsSearch h1 {
    font-size: 38px !important;
    margin-bottom: 22px !important;
  }

  #searchBar {
    display: block !important;
  }

  #searchBar .search-query {
    border-radius: 14px !important;
    height: 58px !important;
    width: 100% !important;
  }

  #searchBar button {
    border-radius: 14px !important;
    height: 54px !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .category-list {
    gap: 18px !important;
    grid-template-columns: 1fr !important;
    padding: 24px 20px 56px !important;
  }

  .category-list .category {
    min-height: 0 !important;
    padding: 30px 28px 28px !important;
  }

  .category-list .category h2,
  .category-list .category h3,
  .category-list .category h4,
  .category-list .category h2 a,
  .category-list .category h3 a,
  .category-list .category h4 a {
    font-size: 25px !important;
  }

  #fullArticle {
    border-left: 0 !important;
    border-radius: 0 28px 0 0 !important;
    border-right: 0 !important;
  }
}