/* 15. Content
/* ---------------------------------------------------------- */

/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

.gh-content {
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--color-gray-700);
}

.gh-content > * {
    margin-bottom: calc(var(--spacing) * 6);
}

/* Default vertical spacing */
.gh-content > * + * {
    margin-top: calc(28px * var(--content-spacing-factor, 1));
    margin-bottom: 0;
}

/* Remove space between full-width cards */
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
    margin-top: 0;
}

/* Add back a top margin to all headings,
unless a heading is the very first element in the post content */
.gh-content > [id]:not(:first-child) {
    margin-top: calc(56px * var(--content-spacing-factor, 1));
}

/* Add drop cap setting */
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
    margin :0 0.2em 0em 0;
    font-size: 3.1em;
    float:left;
    line-height: 1;
    margin-left: -1px;
    font-weight: 700;
}

.has-serif-body.post-template:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content.drop-cap > p:first-of-type:first-letter {
    font-size: 3.2em;
}

/* Add a small margin between a heading and paragraph after it */
.gh-content > [id] + p {
    margin-top: calc(12px * var(--content-spacing-factor, 1));
}

/* A larger margin before/after dividers, blockquotes and embeds */
.gh-content > :is(hr, blockquote, iframe) {
    position: relative;
    margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}

.gh-content > :is(hr, blockquote, iframe) + * {
    margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
}

/* Now the content typography styles */
.gh-content h1 {
    font-size: calc(2.2em * var(--factor, 1));
    letter-spacing: -0.02em;
}

.gh-content h2 {
    font-size: calc(1.6em * var(--factor, 1));
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: calc(var(--spacing) * 5);
}



.gh-content h3 {
    font-size: calc(1.3em * var(--factor, 1));
    letter-spacing: -0.017em;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: calc(var(--spacing) * 4);
}

/* Add responsive styles */
@media (min-width: 48rem) {
    .gh-content h3 {
        font-size: calc(1.875em * var(--factor, 1));
    }
}

@media (min-width: 64rem) {
    .gh-content h2 {
        font-size: 40px;
    }
}

.gh-content a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
    font-size: 0.95em;
}

.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > blockquote,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > dl,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content > p,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-callout-text,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ol,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > ul,
.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .gh-content .kg-toggle-content > p {
    font-family: var(--font-serif-alt);
}

.gh-content :is(ul, ol) {
    padding-left: 28px;
}

.gh-content :is(li + li, li :is(ul, ol)) {
    margin-top: 8px;
}

.gh-content ol ol li {
    list-style-type: lower-alpha;
}

.gh-content ol ol ol li {
    list-style-type: lower-roman;
}

.gh-content hr {
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    border: 0;
}

.gh-content .gh-table {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.gh-content .gh-table table {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    white-space: nowrap;
    vertical-align: top;
    border-spacing: 0;
    border-collapse: collapse;
}

.gh-content .gh-table table th {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-darkgrey);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-border);
}

.gh-content .gh-table table :is(th, td):first-child {
    padding-left: 0;
}

.gh-content .gh-table table :is(th, td):last-child {
    padding-right: 0;
}

.gh-content pre {
    overflow: auto;
    padding: 16px;
    font-size: 1.5rem;
    line-height: 1.5em;
    background: var(--color-lighter-gray);
    border-radius: 6px;
    font-family: var(--font-mono);
}

.gh-content :not(pre) > code {
    vertical-align: baseline;
    padding: 0.15em 0.4em;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1em;
    background: var(--color-lighter-gray);
    border-radius: 0.25em;
    font-family: var(--font-mono);
}
.gh-content figure img{
   width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: calc(var(--spacing) * 6);

}
.gh-content figcaption {
    margin-bottom: calc(var(--spacing) * 6);
}

.gh-content figcaption span {
    font-size: 0.875rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-gray-600);
}

.gh-content ul {
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 5);
}

.gh-content ul li {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
}

.gh-content ul li strong {
    font-weight: var(--font-weight-semibold);
}

.gh-content blockquote {
    font-style: italic;
    font-size: 1.125rem;
    border-left: 2px solid var(--color-gray-700);
    padding-left: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
}


.gh-content ol{
    list-style: decimal-leading-zero;
    padding-left: 0 !important;

}

.gh-content ol li::marker{
    color: white;
    background: black;
    width: 32px;
    height: 32px;
    
}

.gh-content ol li {
  list-style: none; /* remove default marker */
  position: relative;
  padding-left: calc(var(--spacing) * 12);
      font-weight: var(--font-weight-semibold);
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
}

.gh-content ol li::before {
  content: counter(list-item) ;
  position: absolute;
  left: 0;
  width: 32px;
  height: 32px;
  background: #2c2c2c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;

}

.custom-page-template .gh-content ul{
     padding-left: calc(var(--spacing) * 16) !important;
     margin-top: calc(var(--spacing) * 2) !important;
}

.custom-page-template .gh-content ul+ ul{
     margin-top:calc(var(--spacing) * 16) !important;
}

.custom-page-template .gh-content li mark{
    color: var(--color-gray-600);
        font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    background: transparent;
    font-weight: 400;
}