/*   General improvements
----------------------------------------------------------------------------------------------------------

Better scrolling and font appearance on firefox and mac

---------------------------------------------------------------------------------------------------------- */

body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
  
/*   Smooth scrolling */

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


body {
    overflow-y: scroll;
    font-size: 1em;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
     color: var(--QLD-color-light__text);
}

/*   Primar nav improvements
----------------------------------------------------------------------------------------------------------

Better scrolling and font appearance on firefox and mac

---------------------------------------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .qld__main-nav.qld__main-nav--mega .qld__main-nav__item-toggle-text::before {
    width:0px;
  }
}


/*   General improvements
----------------------------------------------------------------------------------------------------------

Spacing improvements

---------------------------------------------------------------------------------------------------------- */

.qld__card + div {
margin-top: 24px; /*  Adds correct spacing between cards */
}     


#body-133627{
    padding-top:0px !important;
}

/* These are the media queries for cards */

@media (min-width: 992px){
    
.qld__card + div {
 margin-top:32px; /*  Adds correct spacing between cards */
}    

}

.qld__body .qld__inpage-nav-links>ul li+li, .qld__body .qld__inpage-nav-links>ol li+li {
   margin-top: 10px;
}



/*   General improvements
----------------------------------------------------------------------------------------------------------

CTA long link fix

---------------------------------------------------------------------------------------------------------- */

.qld__cta-link, a.qld__cta-link {
    white-space: normal; 
}




/*   Text overrides and classes
----------------------------------------------------------------------------------------------------------

Classes from the DTA we are missing

---------------------------------------------------------------------------------------------------------- */     

/* Line spacing overrides */

.qld__lineheight-nospace {
line-height: 1 !important;
}

.qld__lineheight-heading {
line-height: 1.25 !important;
}

.qld__lineheight-default {
line-height: 1.5 !important;
}



.qld__caption {
    font-style: normal;
    color: var(--QLD-color-light-text__muted);
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}


:root {
--qld-default-desktop-xs: 14px;
--qld-default-desktop-sm: 16px;
--qld-default-desktop-md: 20px;
--qld-default-desktop-lg: 24px;
--qld-default-desktop-xl: 32px;
--qld-default-desktop-xxl: 40px;
--qld-default-desktop-xxxl: 48px;

--qld-default-mobile-xs: 14px;
--qld-default-mobile-sm: 16px;
--qld-default-mobile-md: 16px;
--qld-default-mobile-lg: 24px;
--qld-default-mobile-xl: 28px;
--qld-default-mobile-xxl: 32px;
--qld-default-mobile-xxxl: 40px;
}


/* Default text size overrides */

.qld__default--xs{
font-size: var(--qld-default-mobile-xs) !important;
}

.qld__default--sm{
font-size: var(--qld-default-mobile-sm) !important;
}
.qld__default--md{
font-size: var(--qld-default-mobile-md) !important;
}
.qld__default--lg{
font-size: var(--qld-default-mobile-lg) !important;
}
.qld__default--xl{
font-size: var(--qld-default-mobile-xl) !important;;
}
.qld__default--xxl{
font-size: var(--qld-default-mobile-xx) !important;
}
.qld__default--xxxl{
font-size: var(--qld-default-mobile-xxxl) !important;
}


/* Desktop sizes for default text style overrides */

@media (min-width: 992px){

.qld__default--xs{
font-size: var(--qld-default-desktop-xs) !important;
}

.qld__default--sm{
font-size: var(--qld-default-desktop-sm) !important;
}
.qld__default--md{
font-size: var(--qld-default-desktop-md) !important;
}
.qld__default--lg{
font-size: var(--qld-default-desktop-lg) !important;
}
.qld__default--xl{
font-size: var(--qld-default-desktop-xl) !important;;
}
.qld__default--xxl{
font-size: var(--qld-default-desktop-xxl) !important;
}
.qld__default--xxxl{
font-size: var(--qld-default-desktop-xxxl) !important;
}

}



/*   Content Card
----------------------------------------------------------------------------------------------------------

This class applies a non-clickable card style to a block of body text
This is essentially jsut an easy way of applying the non-clickable card design

It needs to be built out to include all colourss when we include it in global css

---------------------------------------------------------------------------------------------------------- */

    .qld__content-card{
    padding: 32px;
    background: #f5f5f5;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    }
        
    
    .qld__card.qld__content-card .qld__card__image-wrapper{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 6.0882800609% 10.8108108108%;
        border-bottom-left-radius: 0px;
        max-width: 100%;
    }
    
    .qld__card.qld__content-card.qld__content-card--feature .qld__card__inner{
        padding: 20px;
        padding: 1.25rem;
    }
    
    .qld__card.qld__content-card.qld__content-card--feature{
        padding:0;
    }
    
    
    /* Images in content feature cards  */

    .qld__card.qld__content-card .qld__responsive-media-img--bg::before {
        border: none;
        border-radius:0;
    }
    
    .qld__card.qld__content-card .qld__responsive-media-img--bg {
        border: none;
        border-radius:0;
    }
    
    /* Default shade styling for content cards */
    .qld__content-card.qld__content-card--default{
        background: #f5f5f5;
    }
      
    /* Light theme styling for content cards */
    .qld__content-card.qld__content-card--light {
        background: var(--QLD-color-light__background);
    }
    
    /* Light theme styling for content cards */
    .qld__card.qld__content-card.qld__content-card--light hr{
        background-color: var(--QLD-color-light__border)
    }
    
    /* Adjust background for alt theme body */
    .qld__body.qld__body--alt .qld__content-card.qld__content-card--alt {
        background: var(--QLD-color-light__background--alt--shade);
    }
    
    /* Alt theme styling for content cards */
    .qld__content-card.qld__content-card--alt {
        background: var(--QLD-color-light__background--alt);
    }
    
    /* Alt theme styling for content cards */
    .qld__card.qld__content-card.qld__content-card--alt hr{
        background-color: var(--QLD-color-light__border--alt)
    }
    
    /* Adjust background for Alt theme body */
    .qld__body.qld__body--alt .qld__content-card.qld__content-card--alt {
        background: var(--QLD-color-light__background--shade);
    }

        


@media (min-width: 699px) {
    
    .qld__card.qld__content-card.qld__content-card--feature {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        min-height: 300px;
        min-height: 18.75rem;
    }
    
    .qld__card.qld__content-card.qld__content-card--feature .qld__card__inner{
        padding: 32px;
        padding: 2rem;
        -webkit-box-flex: 1.68;
        -ms-flex: 1.68;
        flex: 1.68;
    }
    
    .qld__card.qld__content-card.qld__content-card--feature .qld__card__image-wrapper{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding-bottom: 0px;
        padding-bottom: 0rem;
        height: auto;
    }
    
    .qld__card.qld__content-card.qld__content-card--feature.qld__content-card--image-right {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    
}



/*   List item improvement
----------------------------------------------------------------------------------------------------------

Consistent text size and better alignment for list items

---------------------------------------------------------------------------------------------------------- */

    
     /* ------------------- Unordered lists / lists ------------------------------------------- */
     

    .qld__body *+ul.qld__alinged-list {  /*  Sets the default padding and margin top unordered lists */
        padding-left: 32px;
        margin-top: 1.25rem;
    }


    .qld__body *+ul:not([class]) {  /*  Sets the default padding and margin top unordered lists */
        padding-left: 32px;
        margin-top: 1.25rem;
    }
    
    /*   Margins-top for unordered list (<ul>) that a children of a previous list */
    .qld__body ul:not([class])>li>ul:not([class])  /*This selector targets ordered list (<ol>) that are direct children of a list item (<li>) and do not have a class attribute. */
     {
      margin-top: 0.5rem;
     }
     
    .qld__body ul:not([class])>li:first-child{
     margin-top: 0rem;
    }
        
     .qld__body ul:not([class])>li
     {
      margin-top: 0.5rem;  
     }
    
     /* Margin top and list style for unordered lists that are children of another list */

    .qld__body ul:not([class])>li>ul:not([class])>li,   /* This selector targets <li> elements that are direct children of an unordered list (<ul>) that doesn't have a class attribute.  */
    .qld__body ol:not([class])>li>ul:not([class])>li   /* This selector targets <li> elements that are direct children of an unordered list (<ul>) that is a child of an ordered list (<ol>) list item (<li>).*/
    {
        margin-top: 0.5rem;
        list-style-type: circle; /*  Sets the style for lists that don't have class overrides */
    }


    /*  Sets colour for list markers on light and light-alt */
    
    .qld__body ul li::marker {
        color: var(--QLD-color-light__heading);  
        font-size: 1.25em;
    }

      /*  Sets colour for list markers on dark backgrounds */
      
    .qld__body.qld__body--dark ul li::marker , .qld__body.qld__body--dark-alt ul li::marker {
        color: var(--QLD-color-dark__heading);
    }


     /*  Sets better alignment for list items with content */
     
     .qld__body ul li:not([class^="col-"]) {
        max-width: 44rem;
        font-size: 1rem;
    }
    
    
    
     /* ------------------- Ordered lists / Numbered lists ------------------------------------------- */
    

    
    /* Defaults */
    ol { 
    counter-reset: li; /* Resets the counter for ordered lists */
    list-style-type: none;  /* Removes the default numbering/bullet style for ordered lists */
    padding-left: 0px;   /* Removes any padding from the left side of ordered lists */
    }
    
    .qld__body *+ol { 
     margin-top: 1.5rem;  /* Adds a margin of 1.5rem to the top of ordered lists */
    }
        
     /* Defaults for ordered list list items*/
    ol li:not(.qld__search__result) {
        position: relative;
        padding-left: 40px;
        max-width: 44rem;
        font-size: 1rem;
        line-height: 1.75rem;
        padding-top: 0.5rem;
    }
    
    .qld__body ol:not([class])>li{
       margin-top: 0.75rem;   
    }
        
    
    /*This selector targets ordered list (<ol>) that are direct children of a list item (<li>) and do not have a class attribute. */
     .qld__body ol:not([class])>li>ol:not([class]){ 
         margin-top: 0.5rem;
     }


    .qld__body ol:not([class])>li:first-child{
     margin-top: 0rem;
    }


     /* Margin top for order lists that are children of another list */
     
    .qld__body ul:not([class])>li>ol:not([class])>li, /*This selector targets <li> elements that are direct children of an ordered list (<ol>) that doesn't have a class attribute That is a child or an unordered list */
    .qld__body ol:not([class])>li>ol:not([class])>li /*This selector targets <li> elements that are direct children of an ordered list (<ol>) that is a child of another ordered list (<ol>) list tem (<li>). */
      {
        margin-top: 0.5rem;  
      }   


     /*  Sets the design for numbered lists */    

    ol li:not(.qld__search__result):before {
        content: counter(li);
        counter-increment: li;
        height: 28px;
        width: 28px;
        border: 1px solid #EBEBEB;
        background-color: #f5f5f5;
        border-radius: 50%;
        color: var(--QLD-color-light__heading);
        position: absolute;
        left: 0;
        font-size: 1em;
        top: 0.5rem;
        display: inline-flex;
        font-variant-numeric: proportional-nums;
        justify-content: center;
        align-items: center;
        font-weight: 600;
    }
    
    
    .qld__body.qld__body--alt ol li:before {
        border: 1px solid var(--QLD-color-light__border--alt);
        background-color: var(--QLD-color-light__background--alt-shade);
        color: var(--QLD-color-light__heading);
    }

    .qld__body.qld__body--dark ol li:before {
        border: 1px solid var(--QLD-color-dark__border);
        background-color: var(--QLD-color-dark__background--shade);
        color: var(--QLD-color-dark__heading);
    }

    .qld__body.qld__body--dark-alt ol li:before {
        border: 1px solid var(--QLD-color-dark__border--alt);
        background-color: var(--QLD-color-dark__background--alt-shade);
        color: var(--QLD-color-dark__heading);
    }
    

    
     /*  Sets the design for footnote lists */   
     
    ol.qld__footnotes li:before {
    content: counter(li);
    counter-increment: li;
    height: 28px;
    width: 28px;
    border: none;
    background-color: transparent;
    border-radius: 50%;
    color: var(--QLD-color-light__heading);
    position: absolute;
    left: 0;
    font-size: 1em;
    top: 0.5rem;
    display: inline-flex;
    font-variant-numeric: proportional-nums;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    }
    
    ol.qld__footnotes  li{
     margin-top:0.5rem;   
    }
    



/*   Fix for exceptionally long links 
----------------------------------------------------------------------------------------------------------

This lets long links break better.

---------------------------------------------------------------------------------------------------------- */     


.qld__body a {

overflow-wrap: break-word;  
word-wrap: break-word;  
-ms-word-break: break-all;  
word-break: break-all;  
word-break: break-word;  
-ms-hyphens: auto;  
-moz-hyphens: auto;  
-webkit-hyphens: auto;  
hyphens: auto;

}

/*  This removes the code above from appllying to cards */    
  
.qld__body .qld__card a{
   hyphens: unset; 
}


/*   New style for Figures
----------------------------------------------------------------------------------------------------------

This adds some new styles for the the figure html elment so the they appear correctly

---------------------------------------------------------------------------------------------------------- */    


figure{
    margin: 0;
}

/* Spacing for figures when in content cotainers following other items */

* + figure {
    margin-top:24px;
    margin-top:1.5rem;
}


/*Sets the stander font styles for figure captions */

figcaption {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 32px;
    font-weight: 600;
    color: var(--QLD-color-light__heading);
    max-width:46rem;
}


/* Adjusts figure captions so they are smaller wwhen used within tabs or another figure */

 .qld__tab-container figcaption, figure figure figcaption {
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    font-weight: 600;
    color: var(--QLD-color-light__heading);
    max-width: 50rem;
}

/* Figure image this is specifically for cho report figures */

.qld__figure-image{
    width:100%;
    margin-top:24px;
}


/* These are the media queries for figures */

@media (min-width: 992px){
    
* + figure {
    margin-top:32px; /* vertical spacing on destop */
    margin-top:2rem;
}

.qld__figure-image{
    width:auto; /* Figure image this is specifically for cho report figures */
    max-height:400px;
    
}

}



/*   Tableau fixes 
--------------------------------------------------------------------------------------------------------------------

Updates to the containers so they fit in the designs better

--------------------------------------------------------------------------------------------------------------------  
*/

.tableauPlaceholder{
 margin-top:24px;   
}


@media (min-width: 992px){
    
.tableauPlaceholder{
 margin-top:32px;   
}

}



/*   Spacing HACK
--------------------------------------------------------------------------------------------------------------------

Okay so this is complicated but essentially changing the margin-top of H2 and the padding between content sections on desktop and mobile
What this does is it fixes the issue visually that we have where <section> + <section> containers are causing spacing issues

--------------------------------------------------------------------------------------------------------------------  
*/


.qld__body *:not([type="hidden"])+.qld__display-lg, .qld__body *:not([type="hidden"])+h2, .qld__footer *:not([type="hidden"])+.qld__display-lg, .qld__footer *:not([type="hidden"])+h2, .qld__banner *:not([type="hidden"])+.qld__display-lg, .qld__banner *:not([type="hidden"])+h2, .qld__main-nav *:not([type="hidden"])+.qld__display-lg, .qld__main-nav *:not([type="hidden"])+h2 {
    margin-top: 40px;
    margin-top: 2.5rem;
}


@media (min-width: 699px){
.qld__body *:not([type="hidden"])+.qld__display-lg, .qld__body *:not([type="hidden"])+h2, .qld__footer *:not([type="hidden"])+.qld__display-lg, .qld__footer *:not([type="hidden"])+h2, .qld__banner *:not([type="hidden"])+.qld__display-lg, .qld__banner *:not([type="hidden"])+h2, .qld__main-nav *:not([type="hidden"])+.qld__display-lg, .qld__main-nav *:not([type="hidden"])+h2 {
    margin-top: 48px; /* Margin above h2 */
    margin-top: 3rem;
}
}


@media (min-width: 699px){
main .qld__body #content[class^="col-"]>.qld__body, #main_form .qld__body #content[class^="col-"]>.qld__body, #content .qld__body #content[class^="col-"]>.qld__body, form .qld__body #content[class^="col-"]>.qld__body {
    padding-bottom: 48px; /* Padding between content containers */
    padding-bottom: 3rem;
}


}

/*   CHO Homepage 
--------------------------------------------------------------------------------------------------------------------------------

Custom css for CHO Homepage and banner designs and images, mostly updates to create a new profile image style and banner design. 

-------------------------------------------------------------------------------------------------------------------------------- */     

.qld__body figure.cho_report-img {
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    float: none;
    margin-left: 0px;
    margin-bottom: 24px;
    overflow:clip;
}

.qld__body figure.cho_report-img img{
    aspect-ratio: 16/9;
    object-fit: cover;
}



img + figcaption {
    display: block;
    background-color: #F5F5F5;
    padding: 0.5rem;
    margin-top: -0.5rem;
}


.qld__body img.cho_report-img {
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    float: none;
    margin-left: 0px;
    margin-bottom: 24px;
    aspect-ratio: 16/9;
    object-fit: cover;
}



/* Profile picture component designs */

.qld__circular-image {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
}

.qld__profile .qld__display-xs {
text-align: center;
}

.qld__profile {
float: left;
padding-right: 24px;
padding-bottom: 24px;
}    

.row ul.qld__card-list {
   margin-top: 24px;
}


.qld__banner__content *{
    position: inherit;
}


/* Custom cho multi-col */

#cho_homepage_multi-col hr + h3 {
margin-top:0px;
}


#cho-multi-col .row--heading-paragraph-columns div[class^="col-"]{
display: flex;
flex-direction: column;
}

#cho-multi-col .qld__card{
flex-grow:1;
}

#cho-multi-col .qld__card .qld__card__inner{
justify-content: center
}


#cho_homepage_multi-col hr{
display: inline-block;
}


/* Custom cho link-list */

.cho-link-list{
margin-top:0px;
}

/* Cho logo */

#CHO-logo {
max-width: 375px;
height: 100%;
width: 100%;
background-color: var(--QLD-color-dark__background--alt);
padding: 32px 32px 0px 32px;
margin-top: -6rem;
border-radius: var(--Qld__border-radius--sm);
}

.qld__banner .qld__banner__image--background {
    padding: 0px;
    padding: 0rem;
    height: 160px;
    height: 15rem;
}


#cho_homepage_multi-col .qld__profile .qld__cta-link{
    clear:left;
    display:block;
}


@media (min-width: 992px){

/* Profile component spacing for desktop */

.qld__profile {
float: left;
padding-right: 48px;
padding-bottom: 24px;
}

}



@media (min-width: 699px){

#cho_homepage_multi-col .qld__profile .qld__cta-link{
    clear:none;
}

.qld__circular-image {
width: 160px;
height: 160px;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
}


/* Cho logo desktop */

#CHO-logo {
max-width: 375px;
height: 100%;
width: 100%;
background-color: transparent;
padding: 0px;
margin-top: 0rem;
border-radius: 0;
}


.qld__body figure.cho_report-img {
    height: auto;
    max-width: 40%;
    border-radius: 8px;
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
}

.qld__body img.cho_report-img {
    height: auto;
    max-width: 40%;
    border-radius: 8px;
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;

}

.qld__body figure.cho_report-img img{
    aspect-ratio: 4/3;
    object-fit: cover;
}


}