@import url("https://jsypctdhynsdqrfifvdh.supabase.co/storage/v1/object/public/cp-blog-css/global.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  --blog-color-1: #d5633b;
  --blog-color-2: #fdf6f0;
  --blog-color-3: #999999;
  --blog-color-4: #f8f9fa;
  --blog-color-black: #000;

  --blog-margin-top: 0px;

  /* Font Families */
  --font-montserrat: 'Montserrat', sans-serif;
  --font-open-sans: 'Open Sans', sans-serif;

  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-regular: 400;

  /* Line Height (Leading) */
  --leading-tight: 90%;
  --leading-normal: 100%;
  --leading-relaxed: 125%;
  --leading-auto: auto;

  /* Letter Spacing (Tracking) */
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  /* +2 tracking */

  /* Fonts */
  --font-header: var(--font-montserrat);
  --font-body: var(--font-open-sans);

  /* Colors */
  --a-tag-color: var(--blog-color-1);
  --a-tag-hover-color: lighten(var(--blog-color-3), 10%);

  --blog-header-color: var(--blog-color-black);
  --blog-wrapper-bg: transparent;


  /* Box Shadows */
  --box-shadow-light: none;
  --box-shadow-medium: none;
  --box-shadow-callout: none;

  /* Border Radius */
  --border-radius-standard: 16px;
  --border-radius-button: 4px;

  --lead-section-bg: var(--blog-color-white);
  --lead-section-font-color: var(--blog-color-black);

  --summary-bg-color: var(--blog-color-2);
  --summary-border-color: var(--blog-color-1);
  --summary-heading-color: var(--blog-color-black);
  --summary-text-color: var(--blog-color-black);

  --callout-left-bg-color: var(--blog-color-2);
  --callout-left-after-color: none;
  --callout-left-text-color: var(--blog-color-black);
  --callout-left-cta-bg-color: var(--blog-color-black);
  --callout-left-cta-text-color: var(--blog-color-white);
  --callout-left-cta-hover-bg-color: var(--blog-color-3);
  --callout-left-cta-hover-text-color: var(--blog-color-white);
  --callout-right-bg-color: var(--blog-color-4);
  --callout-right-after-color: none;
  --callout-right-text-color: var(--blog-color-black);
  --callout-right-cta-bg-color: var(--blog-color-black);
  --callout-right-cta-text-color: var(--blog-color-white);
  --callout-right-cta-hover-bg-color: var(--blog-color-3);
  --callout-right-cta-hover-text-color: var(--blog-color-white);
  --border-width-accent: 0;


  --quote-bg-color: var(--blog-color-white);
  --quote-text-color: var(--blog-color-black);
  --quote-border-color: var(--blog-color-1);

  --key-takeaways-bg-color: var(--blog-color-2);
  --key-takeaways-border-color: var(--blog-color-1);
  --key-takeaways-border-width: 1px;
  --key-takeaways-text-color: #000;
  --key-takeaways-heading-color: var(--blog-color-black);
  --key-takeaways-cta-bg-color: #1c1915;
  --key-takeaways-cta-text-color: var(--blog-color-white);
  --key-takeaways-cta-hover-bg-color: var(--blog-color-3);
  --key-takeaways-cta-hover-text-color: #1c1915;

  --references-bg-color: var(--blog-color-4);
  --references-border-color: var(--blog-color-3);
  --references-text-color: var(--blog-color-black);
  --references-heading-color: var(--blog-color-black);
  --references-link-color: var(--blog-color-1);
  --references-divider-color: var(--blog-color-black);
  --references-divider-width: 0px;

  --about-company-bg-color: var(--blog-color-4);
  --about-company-heading-color: #000;
  --about-company-text-color: #000;
  --about-company-icon-color: #000;

  --toc-bg-color: var(--blog-color-2);
  --toc-heading-color: var(--blog-color-black);
  --toc-text-color: var(--blog-color-black);
  --toc-link-color: var(--blog-color-1);
  --toc-border-color: var(--blog-color-1);
  --toc-active-bg-color: var(--blog-color-1);
  --toc-active-text-color: var(--blog-color-black);
  --toc-active-link-color: var(--blog-color-white);
  --toc-active-divider-color: transparent;
}

h1,
h2 {
  font-family: var(--font-h1-headline);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-header, "Monterrat", sans-serif);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

#summary b,
.about_company_title,
.key-takeaways b,
.references b {
  font-family: var(--font-header, "Monterrat", sans-serif);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

#key-takeaways b {
  font-size: 18px;
  margin-bottom: 1rem;
}

.blog-content .callout_left_cta_button,
.blog-content .callout_right_cta_button,
.key_takeaways_cta_button {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .77px;
  line-height: 1.12;
  font-family: Roboto Condensed Bold, Trebuchet MS, sans-serif;
}

.blog-content #key-takeaways ul {
  margin-top: 1rem;
}

.blog-content #key-takeaways ul li,
.blog-content #key-takeaways ol li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 12px;
  list-style-type: none;
}

.blog-content #key-takeaways ul li:before,
.blog-content #key-takeaways ol li:before {
  content: '✓';
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--blog-color-1);
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 2px;
  flex-shrink: 0;
}

#references ol li::marker {
  color: var(--blog-color-1);
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 2px;
}

@media (min-width: 768px) {


  .about_company {
    border: 1px solid var(--blog-color-3) !important;
    border-right: 4px solid var(--blog-color-3) !important;
  }

  #toc {
    border: 1px solid var(--blog-color-1);
    border-right: 4px solid var(--blog-color-1) !important;
  }


  #summary {
    border: 1px solid var(--blog-color-1);
    border-left: 4px solid var(--blog-color-1) !important;
  }

  #key-takeaways,
  #references,
  #summary {
    border-width: 1px !important;
    border-left-width: 4px !important;

  }

  .blog-content .callout_right {
    border: 1px solid var(--blog-color-3);
    border-right: 4px solid var(--blog-color-3);
  }

  .blog-content .callout_left {
    border: 1px solid var(--blog-color-1);
    border-left: 4px solid var(--blog-color-1);
  }
}

.lead-image-container {
  margin-bottom: 8px;
}