@import url("https://jsypctdhynsdqrfifvdh.supabase.co/storage/v1/object/public/cp-blog-css/global.css");
@import url('https://db.onlinewebfonts.com/c/f7cbc81ec32251219957a824149fce74?family=Center+Regular+Regular');

:root {
  --a-tag-color: var(--blog-color-black);
  --a-tag-hover-color: var(--blog-color-2);

  /* Fonts */
  --font-header: "Center Regular Regular", system-ui, sans-serif;
  --font-body: "Center Regular Regular", system-ui, sans-serif;
  --font-header-alternative: "termina", sans-serif;


  --font-size-body-desktop: 18px;

  /* Line Heights */
  --line-height-body: 1.8;
  --line-height-tight: 1;
  --line-height-medium: 1.1;
  --line-height-loose: 1.3;

  /* Colors */
  --blog-header-color: #333;
  --blog-color-white: #fff;
  --blog-color-black: #252B2B;
  --blog-color-1: #ffff33;
  /* Ripe Lemon */
  --blog-color-2: #a09c1e;
  /* Citron */
  --blog-color-3: #DFD5C3;
  --blog-wrapper-bg: #fff;
  --lead-section-bg: #fff;
  --lead-section-font-color: #1c1915;

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

  --callout-left-bg-color: var(--blog-color-black);
  --callout-left-after-color: var(--blog-color-black);
  --callout-left-text-color: var(--blog-color-white);
  --callout-left-cta-bg-color: var(--blog-color-1);
  --callout-left-cta-text-color: var(--blog-color-black);
  --callout-left-cta-hover-bg-color: var(--blog-color-2);
  --callout-left-cta-hover-text-color: var(--blog-color-black);

  --callout-right-bg-color: var(--blog-color-black);
  --callout-right-after-color: var(--blog-color-black);
  --callout-right-text-color: var(--blog-color-white);
  --callout-right-cta-bg-color: var(--blog-color-1);
  --callout-right-cta-text-color: var(--blog-color-black);
  --callout-right-cta-hover-bg-color: var(--blog-color-2);
  --callout-right-cta-hover-text-color: var(--blog-color-black);

  --quote-bg-color: #D1CA8A;
  --quote-text-color: var(--blog-color-2);
  --quote-border-color: var(--blog-color-2);

  --key-takeaways-bg-color: var(--blog-color-3);
  --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-white);
  --key-takeaways-cta-hover-text-color: #1c1915;
  --key-takeaways-border-color: #000000;


  --references-bg-color: #252B2B;
  --references-text-color: var(--blog-color-white);
  --references-heading-color: var(--blog-color-white);
  --references-link-color: var(--blog-color-white);
  --references-divider-color: var(--blog-color-white);
  --references-divider-width: 2px;

  --about-company-bg-color: var(--blog-color-3);
  --about-company-heading-color: var(--blog-color-black);
  --about-company-text-color: var(--blog-color-black);
  --about-company-icon-color: var(--blog-color-black);

  --toc-bg-color: var(--blog-color-white);
  --toc-heading-color: var(--blog-color-black);
  --toc-text-color: var(--blog-color-black);
  --toc-link-color: var(--blog-color-black);
  --toc-active-bg-color: var(--blog-color-3);
  --toc-active-text-color: var(--blog-color-black);
  --toc-active-link-color: var(--blog-color-black);
  --toc-active-divider-color: var(--blog-color-black);

  /* Border Radius */
  --border-radius-standard: 0;
  --border-radius-button: 5px;

  /* Border Widths */
  --border-width-accent: 0;

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

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;

  /* Blog Specific Spacing */
  --blog-margin-top: 48px;
  --blog-margin-bottom: 48px;
  --blog-margin-side: 24px;
  --blog-margin-side-desktop: 32px;
  --blog-h2-margin-top: 48px;
  --blog-h2-margin-bottom: 24px;
  --blog-h3-margin-top: 32px;
  --blog-h3-margin-bottom: 16px;
  --blog-p-margin-bottom: 24px;
  --blog-column-gap: 32px;
  --blog-mobile-margin-top: 20px;
  --blog-mobile-padding-left: 1.5rem;
  --blog-mobile-padding-right: 2.5rem;

  /* Container Spacing */
  --container-gap: 30px;
  --social-gap: 15px;
  --toc-indent: 20px;
  --callout-margin-side: 20%;
  --references-list-indent: 20px;

  /* Callout Specific Spacing */
  --callout-margin-top: 32px;
  --callout-margin-bottom: 32px;
  --callout-padding: 24px;
  --callout-font-size: 24px;
  --callout-line-height: 32px;
  --callout-cta-margin-top: 16px;
  --callout-cta-gap: 8px;
  --callout-cta-padding-y: 7px;
  --callout-cta-padding-x: 16px;
  --callout-cta-font-size: 14px;
  --callout-cta-line-height: 20px;
  --callout-width-desktop: 340px;
  --callout-margin-left-desktop: 30px;
  --callout-margin-right-desktop: 30px;
  --callout-margin-bottom-desktop: 20px;
  --callout-bg-color-left-desktop: rgb(244 91 30 / 20%);
  --callout-bg-color-right-desktop: rgb(244 91 30 / 20%);
  --callout-hover-border-color: #CCE1F4;

  /* Flex Container */
  --flex-container-width-desktop: 100%;
  --flex-container-max-width: 350px;
  --flex-container-gap-desktop: 32px;
  --flex-container-margin-bottom: 20px;
  --flex-container-top: 20px;
  --flex-container-bottom-mobile: 30px;

  /* Icon Sizes */
  --icon-size-small: 30px;

  /* Transitions */
  --transition-standard: 0.3s;
  --transition-fast: 0.2s;
}

/* #references {
  border: 4px solid var(--blog-color-black);
} */
@media (min-width: 768px) {
  .lead-section {
    position: relative;
  }

  .title-container {
    /* position: absolute;  
    top: 60px;
    left: 50px; */
  }

  .lead-image-container {
    /* position: absolute; */
    top: 0;
    left: 0;
  }

  .blog-wrapper {
    margin-top: 0 !important;
  }
}

h1,
h2,
h3,
h4,
h5 {
  text-transform: uppercase;
}

#summary b,
#toc b,
.about_company_title,
#references b,
#key-takeaways b {
  text-transform: uppercase;
  font-size: 24px;
}

#references a {
  text-decoration: none;
  font-weight: bold;
}

#references li {
  padding-bottom: 8px;
}

.callout a {
  text-transform: uppercase;
}

#toc {
  border: 4px solid var(--blog-color-black)
}