/* this file applies the fonts to all typography across front end and back-end WP block editor */

:root{
    /* set font stacks just once, which can vary from headings to body */
    --font-stack-headings: 'Montserrat','Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-stack-body: 'Montserrat','Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.font-heading{
    font-family: var(--font-stack-headings) !important;
}
.font-body{
    font-family: var(--font-stack-body) !important;
}



html{
    font-family: var(--font-stack-body);
}





/* ----------------- HEADINGS ----------------- */


h1, h2, h3, h4, h5, h6,
.csc-heading-xl,
.csc-heading-l,
.csc-heading-m,
.csc-heading-s,
.csc-heading-xs,
.csc-heading-xxs{
    font-family: var(--font-stack-headings);
    font-weight: 700;
    line-height: 1.35;
    color: var(--csc-dark-green);
    
}

h1,
.csc-heading-xl{
    font-size: 2.5rem;
    margin-block-start: 2rem;
    margin-block-end: 2.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    
}
h2,
.csc-heading-l{
    font-size: 2.2rem; 
    margin-block-start: 2rem;
    margin-block-end: 1rem;
    /* text box size fix for headings in content */
    position: relative;
    left: -1px;
}
h3,
.csc-heading-m{
    font-size: 1.8rem;
    margin-block-start: 2rem;
    margin-block-end: 1rem;
    font-weight: 500;
}
h4,
.csc-heading-s{
    font-size: 1.5rem;
    margin-block-start: 1.8rem;
    margin-block-end: 1rem;
    font-weight: 500;
}
h5,
.csc-heading-xs{
    font-size: 1.33rem;
    margin-block-start: 1.8rem;
    margin-block-end: 1rem;
    font-weight: 500;
}
h6,
.csc-heading-xxs{
    font-size: 1.2rem;
    margin-block-start: 1.8rem;
    margin-block-end: 1rem;
    font-weight: 500;
}




p {
    line-height: 1.45;
    font-weight: 500;
    /* color: var(--csc-darkest-green); */
}


a {
    color: unset;
}



li {
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 1.45;
    
}

ul.wp-block-list,
ol.wp-block-list {
    padding-left: 16px;
    color: var(--csc-darkest-green);
    margin-bottom: 2rem;
    margin-top: 0.5rem;

}

li::marker {
    color: var(--csc-mid-green);
    font-weight: 700;
}




/* ----------------- BODY PARAGRAPHS ----------------- */


/* larger primary paragraph */
.csc-body-l{
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-block: 1em;
}



/* ----------------- BACK LINK ----------------- */

a.csc-back-link{
    display: inline-flex;
    gap: 0.5em;
}

a.csc-back-link::before{
    content: '';
    width: 1em; height: 1em;
    display: block;
    background-color: var(--csc-dark-green);
    --_icon: url(https://api.iconify.design/material-symbols:chevron-left.svg);
    mask-image: var(--_icon);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--_icon);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;

}