/* =========================
   HELPSCOUT CSS TEMPLATE
   ========================= */

/* IMPORTANT: HelpScout has restrictions on:
   - External @import statements (use <link> tags in HTML instead)
   - Excessive !important declarations
   - Some custom class names may not exist in your template
   
   Inspect your HelpScout template HTML to verify class names.
*/

/* =========================
   FONTS
   ========================= */

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

/* =========================
   ROOT / BASE STYLES
   ========================= */

body {
  font-family: 'Figtree', sans-serif !important;
  color: #171731 !important;
}

/* =========================
   HEADINGS
   ========================= */

h1 {
  font-family: 'Figtree', sans-serif !important;
  font-size: 28px !important;
  color: #3667E9 !important;
  font-weight: 400 !important;  /* changed from 500 */
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

h1 b {
  font-family: 'Figtree', sans-serif !important;
  font-size: 28px !important;
  color: #3667E9 !important;
  font-weight: 400 !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

/* Reset any bold-like element inside h1 */
h1 * {
  font-weight: inherit !important;
}

/* Handle bold wrapping h1 from outside */
strong h1,
b h1 {
  font-weight: 400 !important;
}

h1.title,
h1.article-title {
  font-size: 36px !important;
  font-weight: 400 !important;  /* changed from 900 */
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  color: #3667E9 !important;
}

.contentWrapper h1 {
  font-size: 28px !important;
  line-height: normal !important;
  font-weight: 400 !important;
}

h2 {
  font-family: 'Figtree', sans-serif !important;
  font-size: 20px !important;
  color: #000000 !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

h3 {
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  color: #3667E9 !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

h4, h5, h6 {
  font-family: 'Figtree', sans-serif !important;
  color: #3667E9 !important;
}

/* =========================
   BODY TEXT
   ========================= */

p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  color: #171731 !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

/* Links */
a {
  color: #3667E9 !important;
  text-decoration: none !important;
}

a:hover {
  opacity: 0.8;
}

/* Only underline links inside article body content */
.article-content a,
.article-body a,
.contentWrapper a {
  text-decoration: underline !important;
}

a:hover {
  opacity: 0.8;
}

/* Nav links in header */
header a,
nav a,
.header a,
.navigation a {
  color: #fff !important;
  text-decoration: none !important;
}

/* =========================
   LISTS
   ========================= */

ul, ol {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding-left: 20px !important;
}

li {
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  color: ##171731 !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
}

/* =========================
   CODE & PREFORMATTED TEXT
   ========================= */

code {
  font-family: 'Courier New', monospace !important;
  background-color: #f5f5f5 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

pre {
  background-color: #f5f5f5 !important;
  padding: 12px !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
}

pre code {
  background-color: transparent !important;
  padding: 0 !important;
}

/* =========================
   SPACING & DIVIDERS
   ========================= */

hr {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  border: none !important;
  border-top: 1px solid #e0e0e0 !important;
}

/* =========================
   CONTENT CONTAINER
   ========================= */

/* Common HelpScout selectors - adjust based on your actual template */

.article-content,
.article-body,
.help-content,
.kb-content,
article {
  padding: 24px 32px !important;
}

/* =========================
   HELPSCOUT SPECIFIC FIXES
   ========================= */

/* If you're using HelpScout's default article template */
.article-wrapper {
  padding: 24px 32px !important;
}

/* For HelpScout Knowledge Base */
.article {
  padding: 24px 32px !important;
}

/* For HelpScout Help Center */
.content-area {
  padding: 24px 32px !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
  h1 {
    font-size: 24px !important;
  }
  
  h2 {
    font-size: 18px !important;
  }
  
  p, li {
    font-size: 15px !important;
  }
  
  .article-content,
  .article-body,
  .help-content,
  article {
    padding: 16px 24px !important;
  }
}