/*--------------------------------------------------------------
# Article
--------------------------------------------------------------*/

.article {
    max-width: 100%;
}

.article b,
.article strong {
    font-weight: 600;
}

.article p > a:not(.button):not(.btn) {
    display: inline-flex;
}

.article.main h1,
.article.main h2,
.article.main h3 {
    font-weight: 600;
}


.letter-spacing,
.article:not(.default) p,
.article:not(.default) ul,
.article:not(.default) ol {
    font-size: var(--font-size-theme);
    letter-spacing: var(--letter-spacing);
}








/* TODO .. PLEASE UPDATE THIS !! */

.article ul:not(:last-child),
.article ol:not(:last-child),
.article p:not(:last-child) {
    margin-bottom: var(--article-last-child-margin);
}

/*.article ul:not(:last-of-type),*/
/*.article ol:not(:last-of-type),*/
/*.article p:not(:last-of-type) {*/
/*    margin-bottom: var(--article-last-type-margin);*/
/*}*/

.article:not(.regular) p:not(:last-of-type) {
    /*margin-bottom: 2.25rem;*/
    margin-bottom: var(--article-last-type-margin);
}










/*.article:not(.default) p {*/
/*    letter-spacing: var(--letter-spacing);*/
/*    font-size: 0.95rem;*/
/*}*/


/*.article:not(.no-space) .p,*/
/*.article:not(.no-space) p:not(:last-child) {*/
/*    margin-bottom: 1rem;*/
/*}*/




/*--------------------------------------------------------------
# Article - with list
--------------------------------------------------------------*/

/*.article:has(ul) ul:not(.menu) {*/
/*    margin: 0 10px;*/
/*    list-style-type: disc;*/
/*}*/



.article:has(ul) ul:not(.menu) {
    list-style-type: disc;
    padding-left: 18px;
}




/*--------------------------------------------------------------
# Article - enhanced
--------------------------------------------------------------*/

.article.enhanced {
    font-size: 1rem;
}

.article.enhanced ul {
    list-style: initial;
    padding: 10px;
}
.article.enhanced ul li {
    margin-bottom: 1rem;
}
.article.enhanced ul li strong {
    font-weight: 600;
    color: var(--text-brown-dark);
}


/*--------------------------------------------------------------
# Article - utility classes
--------------------------------------------------------------*/

.article.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.article.medium {
    font-weight: 400;
}


.article.title-no-bottom h1,
.article.title-no-bottom h2,
.article.title-no-bottom h3,
.article.title-no-bottom h4,
.article.title-no-bottom .title {
    margin-bottom: 0;
}


.article.title-bottom h1,
.article.title-bottom h2,
.article.title-bottom h3,
.article.title-bottom h4,
.article.title-bottom .title {
    margin-bottom: 15px;
}



/*--------------------------------------------------------------
# Article - headings
--------------------------------------------------------------*/

.article h1,
.article h2,
.article h3,
.article h4 {
    margin-bottom: var(--title-margin);
    letter-spacing: var(--letter-spacing-title);
    color: inherit;
}

.article p em strong,
.article p strong em {
    display: inline-block;
    color: currentColor;
    font-style: normal;
    font-size: var(--font-size-subtitle);
    font-weight: 500;
}

@media all and (min-width: 576px) {



    .article p em strong,
    .article p strong em {
        line-height: 1.35em;
    }



}


/*--------------------------------------------------------------
# Article - heading sizes
--------------------------------------------------------------*/

/* Main articles */

.article.main h1 {
    font-size: var(--font-size-main-h1);
    color: var(--text-brown-dark);
}
.article.main h2 {
    font-size: var(--font-size-main-h2);
}
.article.main h3 {
    font-size: var(--font-size-main-h3);
}




/* Regular articles (with titles) */


.article.has-title h1 {
    font-size: var(--font-size-title-h1);
    color: var(--text-brown-dark);
}
.article.has-title h2 {
    font-size: var(--font-size-title-h2);
}
.article.has-title h3 {
    font-size: var(--font-size-title-h3);
    /*font-weight: 400;*/
}
.article.has-title h4 {
    font-size: var(--font-size-title-h4);
}




/*.article.has-title h1 {*/
/*    font-size: 2.5rem;*/
/*    color: var(--text-brown-dark);*/
/*    font-weight: 500;*/
/*}*/
/*.article.has-title h2 {*/
/*    font-size: 1.7rem;*/
/*    font-weight: 500;*/
/*}*/
/*.article.has-title h3 {*/
/*    font-size: 2rem;*/
/*    font-weight: 400;*/
/*}*/
/*.article.has-title h4 {*/
/*    font-size: 1.25rem;*/
/*    font-weight: 500;*/
/*}*/




/* Smaller article headings  */

.article.has-title.title-md h3 {
    font-size: var(--font-size-subtitle-md);
}


/*--------------------------------------------------------------
# Article - heading colors
--------------------------------------------------------------*/

/*.article.heading-black h1,*/
/*.article.heading-black h2,*/
/*.article.heading-black h3,*/
/*.article.heading-black h4 {*/
/*    color: var(--black);*/
/*}*/
/*.article.heading-beige h1,*/
/*.article.heading-beige h2,*/
/*.article.heading-beige h3,*/
/*.article.heading-beige h4 {*/
/*    color: var(--beige);*/
/*}*/
/*.article.heading-brown-dark h1,*/
/*.article.heading-brown-dark h2,*/
/*.article.heading-brown-dark h3,*/
/*.article.heading-brown-dark h4 {*/
/*    color: var(--text-brown-dark);*/
/*}*/

.article.heading-black p em strong,
.article.heading-black p strong em,
.article.heading-black h1,
.article.heading-black h2,
.article.heading-black h3,
.article.heading-black h4 {
    color: var(--black);
}

.article.heading-beige p em strong,
.article.heading-beige p strong em,
.article.heading-beige h1,
.article.heading-beige h2,
.article.heading-beige h3,
.article.heading-beige h4 {
    color: var(--beige);
}

.article.heading-brown-dark p em strong,
.article.heading-brown-dark p strong em,
.article.heading-brown-dark h1,
.article.heading-brown-dark h2,
.article.heading-brown-dark h3,
.article.heading-brown-dark h4 {
    color: var(--text-brown-dark);
}





.article.subtitle-black > p em strong,
.article.subtitle-black > p strong em {
    color: var(--black);
}

.article.subtitle-beige > p em strong,
.article.subtitle-beige > p strong em {
    color: var(--beige);
}

.article.subtitle-brown-dark > p em strong,
.article.subtitle-brown-dark > p strong em {
    color: var(--text-brown-dark);
}





/*--------------------------------------------------------------
# Article - size variations
--------------------------------------------------------------*/

.article-xs {
    width: 520px;
}
.article-sm {
    width: 720px;
}
.article-md {
    width: 820px;
}
.article-lg {
    width: 920px;
}


/*--------------------------------------------------------------
# Article (wrap) - spacings
--------------------------------------------------------------*/




.article.top,
.article-wrap.top {
    padding-top: var(--article-offset);
}
.article-wrap.top-sm {
    padding-top: var(--article-offset-sm);
}
.article-wrap.top-md {
    padding-top: var(--article-offset-md);
}
.article-wrap.spacing-top {
    padding-top: var(--article-offset-lg);
}


.article.bottom,
.article-wrap.bottom {
    padding-bottom: var(--article-offset);
}
.article.bottom-sm,
.article-wrap.bottom-sm {
    padding-bottom: var(--article-offset-sm);
}
.article.bottom-md,
.article-wrap.bottom-md {
    padding-bottom: var(--article-offset-md);
}
.article.spacing-bottom,
.article-wrap.spacing-bottom {
    padding-bottom: var(--article-offset-lg);
}






/*.article.top,*/
/*.article-wrap.top {*/
/*    padding-top: 25px;*/
/*}*/
/*.article-wrap.top-sm {*/
/*    padding-top: 50px;*/
/*}*/
/*.article-wrap.top-md {*/
/*    padding-top: 75px;*/
/*}*/
/*.article-wrap.spacing-top {*/
/*    padding-top: 100px;*/
/*}*/


/*.article.bottom,*/
/*.article-wrap.bottom {*/
/*    padding-bottom: 25px;*/
/*}*/
/*.article.bottom-sm,*/
/*.article-wrap.bottom-sm {*/
/*    padding-bottom: 50px;*/
/*}*/
/*.article.bottom-md,*/
/*.article-wrap.bottom-md {*/
/*    padding-bottom: 75px;*/
/*}*/
/*.article.spacing-bottom,*/
/*.article-wrap.spacing-bottom {*/
/*    padding-bottom: 100px;*/
/*}*/











/*--------------------------------------------------------------
# Article wrap - banner
--------------------------------------------------------------*/

@media all and (min-width: 768px) {

    .article-wrap.banner {
        /*width: 450px;*/
        width: 600px;
        max-width: 100%;
    }

}



/*--------------------------------------------------------------
# Article wrap - pulled
--------------------------------------------------------------*/

.article-wrap.pulled .article h2 {
    margin-top: -14rem;
    padding-top: 14rem;
}


/*--------------------------------------------------------------
# Article - story
--------------------------------------------------------------*/

.article.story {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}



/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 992px) {

    /* Article - utility classes  */
    .article.center {
        text-align: start;
    }

}

@media all and (max-width: 768px) {

    /* Article wrap - spacings  */
    .article-wrap.spacing-top {
        padding-top: 25px;
    }




    /* Article headings */


    /* TODO: What is '.title-xl' ?? */
    /*.article.has-title h2,*/
    /*.article.title-xl h3 {*/
    /*    font-size: 1.85rem;*/
    /*}*/



    /*  Article wrap - treatment detail */
    .article-wrap.treatment-detail .article h2 {
        margin-top: 0;
        padding-top: 0;
    }
    .article-wrap.treatment-detail.spacing-top {
        padding-top: 50px;
    }
    .article-wrap.bottom {
        padding-bottom: 0;
    }


}


@media all and (max-width: 575px) {



    /*  Article wrap - spacings */
    .article-wrap.bottom:has(.article.main) {
        margin-bottom: 2rem;
    }


}





/** Article Sections **/

.article-section.is-featured .section-article {
    position: relative;
    z-index: 35;
    background-color: #fff;
    box-shadow: 0 0 15px 3px rgba(0,0,0,0.05);
}

.article-section.is-featured .section-article.top-sm {
    margin-top: var(--article-offset-sm);
}

@media all and (min-width: 768px) {

    .article-section.is-featured .section-article {
        padding: 40px;
        border-radius: 10px;
    }

}


@media all and (max-width: 767px) {


    .article-section.is-featured .section-article {
        padding: var(--container-padding);
        padding-top: calc( var(--container-padding) + 15px );
        padding-bottom: calc( var(--container-padding) + 15px );
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
    }

    .article-section.is-featured .table-overview {
        max-width: calc( 100% + ( var(--container-padding) * 2 ));
        margin-left: calc(-1 * var(--container-padding));
        margin-right: calc(-1 * var(--container-padding));
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }


}








/* Article Tables */

.article:not(.no-table) table th,
.article:not(.no-table) table td {
    position: relative;
    text-align: left;
    padding: 5px 0 3px;
    line-height: 1.05em;
    font-size: var(--font-size-theme);
    letter-spacing: var(--letter-spacing);
}

.article:not(.no-table) table th:not(:last-child),
.article:not(.no-table) table td:not(:last-child) {
    padding-right: 10px !important;
}

.table-nowrap table th,
.table-nowrap table td {
    white-space: nowrap;
}



/* Article Tables: Prices */

@media all and (min-width: 576px) {

    .article table.table-prices {
        min-width: 500px;
    }

    .article table.table-prices td:not([colspan]):first-child {
        width: 40%;
    }

    .article table.table-prices td:not([colspan]):last-child {
        width: 90px;
    }


}


@media all and (max-width: 575px) {



    .article:not(.no-table) table:not(.default):not(.regular) {
        display: flex;
        flex-direction: column;
    }

    .article:not(.no-table) table:not(.default):not(.regular) thead {
        display: none;
    }

    .article:not(.no-table) table:not(.default):not(.regular) tbody {
        display: flex;
        flex-direction: column;
    }

    .article:not(.no-table) table:not(.default):not(.regular) tr {
        display: flex;
        flex-direction: column;
    }

    .article:not(.no-table) table:not(.default):not(.regular) th,
    .article:not(.no-table) table:not(.default):not(.regular) td {
        display: flex;
        justify-content: space-between;
    }


    .article:not(.no-table) table:not(.default):not(.regular) th.is-empty,
    .article:not(.no-table) table:not(.default):not(.regular) td.is-empty {
        display: none !important;
    }




}














/* Article Sections Tables */

.article-section.is-featured table td em {
    font-style: normal;
    color: var(--theme-beige);
}

.article-section.is-featured table tr td {
    padding: 10px 0 8px;
}

.article-section.is-featured table tr td:not([colspan]) {
    padding: 10px 8px 8px;
}

@media all and (min-width: 576px) {

    .article-section.is-featured table tr td:not([colspan]) {
        padding: 10px 0px 8px;
    }

}




/*.article-section.is-featured table tr td:not([colspan])::before,*/
/*.article-section.is-featured table tr td:not([colspan])::after {*/
/*    content: ' ';*/
/*    position: absolute;*/
/*    inset: 3px 0;*/
/*    z-index: -1;*/
/*    background: var(--grey-table);*/
/*}*/

/*.article-section.is-featured:not(.no-table-border) table tr td:not([colspan])::before {*/
/*    margin: -1px 0;*/
/*    border: 1px solid var(--grey-table-border);*/
/*}*/
/*.article-section.is-featured:not(.no-table-border) table tr td:not([colspan]):first-child::before {*/
/*    margin: -1px 0 -1px -1px;*/
/*}*/
/*.article-section.is-featured:not(.no-table-border) table tr td:not([colspan]):last-child::before {*/
/*    margin: -1px -1px -1px 0;*/
/*}*/




.article-section.is-featured table tr td:not([colspan]):first-child::before,
.article-section.is-featured table tr td:not([colspan]):first-child::after {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    left: 0;
}
.article-section.is-featured table tr td:not([colspan]):last-child::before,
.article-section.is-featured table tr td:not([colspan]):last-child::after {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    right: 0;
}


.article-section.is-featured table tr th:not(:last-child),
.article-section.is-featured table tr td:not(:last-child) {
    padding-right: 10px !important;
}


.article-section.is-featured table tr td:not([colspan])::before,
.article-section.is-featured table tr td:not([colspan])::after {
    content: ' ';
    position: absolute;
    inset: 0 0;
    z-index: -1;
    background: var(--grey-table);
}



@media all and (min-width: 576px) {


    /*.article-section.is-featured table tr td:not([colspan])::before,*/
    /*.article-section.is-featured table tr td:not([colspan])::after {*/
    /*    content: ' ';*/
    /*    position: absolute;*/
    /*    inset: 3px 0;*/
    /*    z-index: -1;*/
    /*    background: var(--grey-table);*/
    /*}*/
    /**/




    /* Table */

    .article-section.is-featured table tr td:not([colspan]):first-child::before,
    .article-section.is-featured table tr td:not([colspan]):first-child::after {
        left: -8px;
    }
    .article-section.is-featured table tr td:not([colspan]):last-child::before,
    .article-section.is-featured table tr td:not([colspan]):last-child::after {
        right: -8px;
    }





    /* Block Table */

    .article-section.is-featured table tr td:not([colspan])::before,
    .article-section.is-featured table tr td:not([colspan])::after {
        inset: 3px 0;
        /*inset: 0;*/
    }

    .article-section.is-featured table:not(.default):not(.regular) tr td:not([colspan]):first-child::before,
    .article-section.is-featured table:not(.default):not(.regular) tr td:not([colspan]):first-child::after {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .article-section.is-featured table:not(.default):not(.regular) tr td:not([colspan]):last-child::before,
    .article-section.is-featured table:not(.default):not(.regular) tr td:not([colspan]):last-child::after {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .article-section.is-featured:not(.no-table-border) table tr td:not([colspan])::before {
        margin: -1px 0;
        border: 1px solid var(--grey-table-border);
    }
    .article-section.is-featured:not(.no-table-border) table tr td:not([colspan]):first-child::before {
        margin: -1px 0 -1px -1px;
    }
    .article-section.is-featured:not(.no-table-border) table tr td:not([colspan]):last-child::before {
        margin: -1px -1px -1px 0;
    }



}


@media all and (max-width: 575px) {


    .article-section.is-featured table tr td:not([colspan])::before,
    .article-section.is-featured table tr td:not([colspan])::after {
        opacity: 0 !important;
        left: -15px !important;
        right: -15px !important;
    }

    .article-section.is-featured table tr td:not([colspan]):first-child::before,
    .article-section.is-featured table tr td:not([colspan]):first-child::after {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .article-section.is-featured table tr td:not([colspan]):last-child::before,
    .article-section.is-featured table tr td:not([colspan]):last-child::after {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .article-section.is-featured table tr:not(:last-child) {
        margin-bottom: -5px;
    }

    .article-section.is-featured table tr td:not([colspan]) {
        padding: 3px 0px 1px;
    }

    .article-section.is-featured table tr td:not([colspan]):first-child {
        padding-top: 10px;
    }
    .article-section.is-featured table tr td:not([colspan]):last-child {
        padding-bottom: 8px;
    }


    

}