/* ---- HERO SECTION ---- */

.cs-hero{
    position: relative;
    background-color: var(--body-bg-color);
    gap: var(--col-gap);
    padding-top: calc(var(--container-padding-xl) + var(--nav-height));
    padding-bottom: var(--container-padding);
}

.cs-hero-col{
    display: flex;
    flex-flow: column nowrap;
    width: var(--col-xl);
    gap: var(--col-gap-l);
    overflow: hidden;
}

.cs-hero--intro-content-wrapper{
    display: flex;
    flex-flow: column nowrap;
    width: var(--col-span-all);
    gap: var(--col-gap-xl);
}

.cs-hero--intro-content{
    display: flex;
    flex-flow: column nowrap;
    width: var(--col-span-all);
    gap: var(--col-gap-sm);
}

.cs-category--wrapper{
    display: flex;
    flex-flow: row wrap;
    gap: var(--col-gap-xs);
    justify-content: space-between;
    width: auto;
}

.cs-category--labels{
    display: flex;
    flex-flow: row wrap;
    gap: var(--col-gap-xs);
}

/* ---------------------------- */
/* ------- BODY SECTION ------- */
/* ---------------------------- */

.cs-body--wrapper{
    display: flex;
    flex-direction: row;
    padding: var(--container-padding);
}

.cs-body--gallery{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.cs-gallery--row{
    display: flex;
    flex-flow: row wrap;
    gap: var(--col-gap-xl);
    padding: var(--container-padding);
    z-index: 801;
}

.cs-gallery--col{
    display: flex;
    flex-flow: column nowrap;
    gap: var(--col-gap-xl);
    padding: var(--container-padding);
    z-index: 801;
}

.cs-body--content-wrapper{
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    display: block;
    z-index: 805;
    border: 1px solid transparent;
}

.cs-body--content-wrapper.active{
    border: 1px solid var(--color-border);
    background-color: white;
}

.cs-body--content{
    padding: var(--container-padding);
}

.cs-body--content-toggle {
    background-color: var(--gray-200);
    color: var(--gray-600);
    padding: 4px 8px;
    border-radius: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0.75em;
}

.cs-body--content-toggle:hover {
    cursor: pointer;
    background-color: var(--gray-1000);
    color: var(--gray-0);
}

.cs-body--content-toggle.active {
    background-color: var(--gray-1000);
    color: var(--gray-0);
}

/* ----------------------------- */
/* -------- Media Queries -------- */
/* ----------------------------- */

@media (min-width: 1121px) {
    .cs-body--content-wrapper{
        width: 0; /* We'll use the JS to set this to 100% */
        padding: 0;
        max-height: 0;
    }
}
@media (min-width: 881px) and (max-width: 1120px) {
    .cs-body--content-wrapper{
        width: 0; /* We'll use the JS to set this to 50% */
        padding: 0;
        max-height: 0;
    }
}
@media (min-width: 601px) and (max-width: 880px) {
    .cs-body--content-wrapper{
        width: 0; /* We'll use the JS to set this to 100% */
        padding: 0;
        max-height: 0;
    }
}
@media (min-width: 320px) and (max-width: 600px) {
    .cs-body--content-wrapper{
        width: 100%; /* This breakpoint will always be 100%, its for mobile, no js needed*/
        height: auto;
    }
    .cs-body--wrapper{
        display: flex;
        flex-direction: column;
    }
}

/* ----------------------------------- */
/* -------- Hubspot Overrides -------- */
/* ----------------------------------- */

@media (min-width: 768px) {
    .row-fluid .span6 {
        width: 100% !important;
    }
}

/* ----------------------------- */
/*--------- Typography --------- */
/* ----------------------------- */
.cs-body--content {
    & h1 {
        font-size: var(--heading-font-size-xl);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & h2 {
        font-size: var(--heading-font-size-l);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & h3 {
        font-size: var(--heading-font-size-m);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & h4 {
        font-size: var(--heading-font-size-sm);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & h5 {
        font-size: var(--heading-font-size-xs);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & h6 {
        font-size: var(--heading-font-size-xxs);
        line-height: var(--heading-line-height);
        letter-spacing: var(--heading-letter-spacing);
        font-weight: var(--heading-font-weight);
        color: var(--text-theme-color);
        margin: 48px 0 16px 0;
    }

    & p {
        font-size: var(--body-copy-s);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        font-weight: var(--body-font-weight);
        color: var(--text-theme-color);
        margin-bottom: 16px;
    }

    p:last-of-type {
        margin-bottom: 24px;
    }

    /* Remove top margin from the first text element (heading or paragraph) */
    & :is(h1, h2, h3, h4, h5, h6, p):first-child {
        margin-top: 0;
    }

    & ol {
        font-size: var(--body-copy-s);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        font-weight: var(--body-font-weight);
        color: var(--text-theme-color);
        padding-left: 1.5em;
        margin: 1em 0;
    }

    & ul {
        font-size: var(--body-copy-s);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        font-weight: var(--body-font-weight);
        color: var(--text-theme-color);
        padding-left: 1.5em;
        margin: 1em 0;
        list-style-type: disc;
    }

    & ol li, 
    & ul li {
        font-size: var(--body-copy-s);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        font-weight: var(--body-font-weight);
        color: var(--text-theme-color);
        margin-bottom: 0.5em;
    }

    & .body-xs {
        font-family: var(--body-font-family);
        font-size: var(--body-copy-xs);
        line-height: var(--body-line-height);
        font-weight: var(--body-font-weight);
        letter-spacing: var(--body-letter-spacing);
        color: var(--gray-500)
    }

    & strong {
        font-weight: 600;
    }

    & 
}