@import "/css/google-fonts.css";

/*******************
Typographie (Open Sans, Inter)
*******************/

body {
    font-family: "Open Sans", serif;
    font-weight: normal;
    font-size: 18px;
}

b, strong {
    font-weight: bolder;
}

p, span, a, strong {
    font-family: "Open Sans", serif;
}

p.small,
li.small,
span.small {
    font-size: 16px;
    line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", serif;
    font-weight: normal;
}


/**********************
Rich Text Editor Element 
***********************/
.rich-text-wrapper p {
    margin-bottom: 15px;
}

.rich-text-wrapper *:last-child {
    margin-bottom: 0;
}

.rich-text-wrapper h1,
.rich-text-wrapper h2,
.rich-text-wrapper h3,
.rich-text-wrapper h4,
.rich-text-wrapper h5,
.rich-text-wrapper h6 {
    margin-bottom: 10px;
}

/** remove weird canvas behaviour **/
.rich-text-wrapper h1 span,
.rich-text-wrapper h2 span,
.rich-text-wrapper h3 span,
.rich-text-wrapper h4 span,
.rich-text-wrapper h5 span,
.rich-text-wrapper h6 span {
    color: inherit !important;
}

/**********************
Headline Sizes 
***********************/

.umb-block-grid .heading {
    --nwb-heading-font-weight: 400;
    --nwb-heading-font-color: #000;
    --nwb-heading-letter-spacing: 0px;
    --nwb-heading-line-height: 1.1;
}

.heading > * > a {
    color: inherit;
}

.heading h1,
.heading h2,
.heading h3,
.heading h4,
.heading h5,
.heading h6,
.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4,
.heading-h5,
.heading-h6 {
    font-weight: var(--nwb-heading-font-weight, 400);
    color: var(--nwb-heading-font-color, #000);
    letter-spacing: var(--nwb-heading-letter-spacing, 0px);
    line-height: var(--nwb-heading-line-height, 1.1);
    margin-bottom: 0;
    margin-top: 0;
}

.heading.headline-border h1::after,
.heading.headline-border h2::after,
.heading.headline-border h3::after,
.heading.headline-border h4::after,
.heading.headline-border h5::after,
.heading.headline-border h6::after {
    content: '';
    height: 4px;
    width: 80px;
    background-color: var(--cnvs-themecolor);
    display: block;
    margin-top: 20px;
}

/** h1 **/
/* TODO: Adjust based on layout */
.heading h1,
.heading-h1 {
    --nwb-heading-font-size-xxl-h1: 40px;
    --nwb-heading-font-size-xl-h1: 38px;
    --nwb-heading-font-size-lg-h1: 34px;
    --nwb-heading-font-size-h1: 30px;
}

@media only screen and (max-width: 991px) {
    .heading h1,
    .heading-h1 {
        font-size: var(--nwb-heading-font-size-h1);
    }
}


@media only screen and (min-width: 992px) {
    .heading h1,
    .heading-h1 {
        font-size: var(--nwb-heading-font-size-lg-h1);
    }
}


@media only screen and (min-width: 1200px) {
    .heading h1,
    .heading-h1 {
        font-size: var(--nwb-heading-font-size-xl-h1);
    }
}


@media only screen and (min-width: 1400px) {
    .heading h1,
    .heading-h1 {
        font-size: var(--nwb-heading-font-size-xxl-h1);
    }
}

/** h2 **/
/* TODO: Adjust based on layout */
.heading h2,
.heading-h2 {
    --nwb-heading-font-size-xxl-h2: 34px;
    --nwb-heading-font-size-xl-h2: 32px;
    --nwb-heading-font-size-lg-h2: 28px;
    --nwb-heading-font-size-h2: 22px;
}

@media only screen and (max-width: 991px) {
    .heading h2,
    .heading-h2 {
        font-size: var(--nwb-heading-font-size-h2);
    }
}


@media only screen and (min-width: 992px) {
    .heading h2,
    .heading-h2 {
        font-size: var(--nwb-heading-font-size-lg-h2);
    }
}


@media only screen and (min-width: 1200px) {
    .heading h2,
    .heading-h2 {
        font-size: var(--nwb-heading-font-size-xl-h2);
    }
}


@media only screen and (min-width: 1400px) {
    .heading h2,
    .heading-h2 {
        font-size: var(--nwb-heading-font-size-xxl-h2);
    }
}

/** h3 **/
/* TODO: Adjust based on layout */
.heading h3,
.heading-h {
    --nwb-heading-font-size-xxl-h3: 32px;
    --nwb-heading-font-size-xl-h3: 28px;
    --nwb-heading-font-size-lg-h3: 24px;
    --nwb-heading-font-size-h3: 20px;
}

@media only screen and (max-width: 991px) {
    .heading h3,
    .heading-h3 {
        font-size: var(--nwb-heading-font-size-h3);
    }
}


@media only screen and (min-width: 992px) {
    .heading h3,
    .heading-h3 {
        font-size: var(--nwb-heading-font-size-lg-h3);
    }
}


@media only screen and (min-width: 1200px) {
    .heading h3,
    .heading-h3 {
        font-size: var(--nwb-heading-font-size-xl-h3);
    }
}


@media only screen and (min-width: 1400px) {
    .heading h3,
    .heading-h3 {
        font-size: var(--nwb-heading-font-size-xxl-h3);
    }
}

/** h4 **/
/* TODO: Adjust based on layout */
.heading h4,
.heading-h4 {
    --nwb-heading-font-size-xxl-h4: 30px;
    --nwb-heading-font-size-xl-h4: 26px;
    --nwb-heading-font-size-lg-h4: 22px;
    --nwb-heading-font-size-h4: 20px;
}

@media only screen and (max-width: 991px) {
    .heading h4,
    .heading-h4 {
        font-size: var(--nwb-heading-font-size-h4);
    }
}

@media only screen and (min-width: 992px) {
    .heading h4,
    .heading-h4 {
        font-size: var(--nwb-heading-font-size-lg-h4);
    }
}

@media only screen and (min-width: 1200px) {
    .heading h4,
    .heading-h4 {
        font-size: var(--nwb-heading-font-size-xl-h4);
    }
}

@media only screen and (min-width: 1400px) {
    .heading h4,
    .heading-h4 {
        font-size: var(--nwb-heading-font-size-xxl-h4);
    }
}


/** h5 **/
/* TODO: Adjust based on layout */
.heading h5,
.heading-h5 {
    --nwb-heading-font-size-xxl-h5: 24px;
    --nwb-heading-font-size-xl-h5: 22px;
    --nwb-heading-font-size-lg-h5: 20px;
    --nwb-heading-font-size-h5: 18px;
}

@media only screen and (max-width: 991px) {
    .heading h5,
    .heading-h5 {
        font-size: var(--nwb-heading-font-size-h5);
    }
}

@media only screen and (min-width: 992px) {
    .heading h5,
    .heading-h5 {
        font-size: var(--nwb-heading-font-size-lg-h5);
    }
}

@media only screen and (min-width: 1200px) {
    .heading h5,
    .heading-h5 {
        font-size: var(--nwb-heading-font-size-xl-h5);
    }
}

@media only screen and (min-width: 1400px) {
    .heading h5,
    .heading-h5 {
        font-size: var(--nwb-heading-font-size-xxl-h5);
    }
}


/** h6 **/
/* TODO: Adjust based on layout */
.heading h6,
.heading-h6 {
    --nwb-heading-font-size-xxl-h6: 18px;
    --nwb-heading-font-size-xl-h6: 16px;
    --nwb-heading-font-size-lg-h6: 16px;
    --nwb-heading-font-size-h6: 16px;
}

@media only screen and (max-width: 991px) {
    .heading h6,
    .heading-h6 {
        font-size: var(--nwb-heading-font-size-h6);
    }
}

@media only screen and (min-width: 992px) {
    .heading h6,
    .heading-h6 {
        font-size: var(--nwb-heading-font-size-lg-h6);
    }
}

@media only screen and (min-width: 1200px) {
    .heading h6,
    .heading-h6 {
        font-size: var(--nwb-heading-font-size-xl-h6);
    }
}

@media only screen and (min-width: 1400px) {
    .heading h6,
    .heading-h6 {
        font-size: var(--nwb-heading-font-size-xxl-h6);
    }
}