﻿
/* This is a common file (as its included in the editor), so avoid CSS variables here or re-declare them */
:root {
    /* Colours */
    --blush-1: #D6AA9F;
    --blush-2: #F0DEDA;
    --blush-3: #BE8778;
    /**/
    --lilac-1: #A6A2B3;
    --lilac-2: #BBB9C2;
    --lilac-3: #8781A2;
    /**/
    --lavendar-1: #8082A6;
    --lavendar-2: #A1A1B6;
    --lavendar-3: #6A6A9D;
    /**/
    --mauve-1: #8E779F;
    --mauve-2: #DCD4E1;
    --mauve-3: #6C517B;
    /**/
    --grape-1: #545571;
    --grape-2: #787893;
    --grape-3: #383953;
    /**/
    --lav-grey-1: #7A8FAA;
    --lav-grey-2: #B6C4D7;
    --lav-grey-3: #637EA0;
    /**/
    --brown: #453835;
    --gold: #B2946F;
    /**/
    /* Alert Colours */
    /**/
    --info: #132E4F;
    --info-bg: #D4DEEA;
    /**/
    --success: #164C2A;
    --success-bg: #D5E5DB;
    /**/
    --warning: #4F3513;
    --warning-bg: #EBE2D6;
    /**/
    --danger: #4F2213;
    --danger-bg: #EBDBD6;
    /**/
    /* Greyscales */
    --white: var(--white-1);
    --black: var(--black-1);
    /**/
    --white-1: #FFFFFF;
    --white-2: #F2F2F2;
    --white-3: #ECECEC;
    /**/
    --black-1: #000000;
    --black-2: #27272E;
    --black-3: #3D3D49;
    /**/
    /* Fonts */
    --body-font: "Inter";
    --heading-font: "Geologica";
    /* Variables */
    --border-radius: 5px;
}

body {
    --pri-light: #b4173c;
    --pri: var(--purple);
    --pri-dark: #860423;
    --sec: var(--blue);
    --sec-dark: #0062bd;
}

/* Cards Widget */

.widget_cards .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

    .widget_cards .cards .card {
        flex: 1 0 21%;
        padding: 15px;
        color: var(--black-3);
        text-align: center;
    }

        .widget_cards .cards .card .card_text {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }

        .widget_cards .cards .card h1,
        .widget_cards .cards .card h2,
        .widget_cards .cards .card h3,
        .widget_cards .cards .card h4 {
            color: var(--grape-3);
        }

        .widget_cards .cards .card p,
        .widget_cards .cards .card li,
        .widget_cards .cards .card span,
        .widget_cards .cards .card strong,
        .widget_cards .cards .card em {
            color: var(--black-3) !important;
        }

        .widget_cards .cards .card a:not(.btn-pri):not(.btn-primary):not(.blue-button) {
            color: var(--mauve-1) !important;
        }

.widget_cards[data-color="offwhite"] .card {
    background: var(--white-2);
    color: var(--black-3) !important;
}

.widget_cards .cards .card img {
    max-width: 100%;
}

.widget_cards[data-color="warmgrey"] .card {
    background: var(--white-3);
    color: var(--black-3) !important;
}

.widget_cards[data-color="gradient"] .card {
    background: linear-gradient(315deg, var(--mauve-1), var(--grape-1));
    color: var(--white-1);
}

.widget_cards[data-color="blue"] .card {
    background: var(--mauve-1);
    color: var(--white-1);
}

.widget_cards[data-color="red"] .card {
    background: var(--blush-2);
    color: var(--brown);
}

.widget_cards[data-color="gradient"] .card h1,
.widget_cards[data-color="blue"] .card h1,
.widget_cards[data-color="gradient"] .card h2,
.widget_cards[data-color="blue"] .card h2,
.widget_cards[data-color="gradient"] .card h3,
.widget_cards[data-color="blue"] .card h3,
.widget_cards[data-color="gradient"] .card h4,
.widget_cards[data-color="blue"] .card h4 {
    color: var(--white-1);
}

.widget_cards[data-color="gradient"] .card p,
.widget_cards[data-color="blue"] .card p,
.widget_cards[data-color="gradient"] .card li,
.widget_cards[data-color="blue"] .card li,
.widget_cards[data-color="gradient"] .card span,
.widget_cards[data-color="blue"] .card span,
.widget_cards[data-color="gradient"] .card strong,
.widget_cards[data-color="blue"] .card strong,
.widget_cards[data-color="gradient"] .card em,
.widget_cards[data-color="blue"] .card em {
    color: var(--white-1) !important;
}

    .widget_cards[data-color="gradient"] .card li::marker,
    .widget_cards[data-color="blue"] .card li::marker {
        color: var(--white-1) !important;
    }

.widget_cards[data-color="red"] .card h1,
.widget_cards[data-color="red"] .card h2,
.widget_cards[data-color="red"] .card h3,
.widget_cards[data-color="red"] .card h4 {
    color: var(--brown);
}

.widget_cards[data-color="red"] .card p,
.widget_cards[data-color="red"] .card li,
.widget_cards[data-color="red"] .card span,
.widget_cards[data-color="red"] .card strong,
.widget_cards[data-color="red"] .card em {
    color: var(--brown) !important;
}

    .widget_cards[data-color="red"] .card li::marker {
        color: var(--brown) !important;
    }

.widget_cards[data-dropshadow="true"] .card {
    box-shadow: rgba(69, 56, 53, 0.16) 5px 5px 12px;
}

.widget_cards[data-borders="true"] .card {
    border-radius: var(--border-radius);
}

.widget_cards[data-amount="two"] .card.two,
.widget_cards[data-amount="three"] .card.two,
.widget_cards[data-amount="four"] .card.two {
    display: block !important;
}

.widget_cards[data-amount="three"] .card.three,
.widget_cards[data-amount="four"] .card.three {
    display: block !important;
}

.widget_cards[data-amount="four"] .card.four {
    display: block !important;
}

.widget_cards[data-color="gradient"] .card a, .widget_cards[data-color="pink"] .card a {
    color: var(--gold) !important;
}

.widget_cards .cards .card a.btn-pri,
.widget_cards .cards .card a.btn-primary,
.widget_cards .cards .card a.blue-button {
    display: inline-block;
    margin-top: auto;
    padding: 10px 22px;
    background: var(--mauve-1);
    color: var(--white-1) !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius);
}

    .widget_cards .cards .card a.btn-pri:hover,
    .widget_cards .cards .card a.btn-primary:hover,
    .widget_cards .cards .card a.blue-button:hover {
        background: var(--mauve-3);
        color: var(--white-1) !important;
        text-decoration: none;
    }

.widget_cards[data-color="blue"] .card a:not(.btn-pri):not(.btn-primary):not(.blue-button) {
    color: var(--white-1) !important;
}

.widget_cards[data-color="red"] .card a:not(.btn-pri):not(.btn-primary):not(.blue-button) {
    color: var(--brown) !important;
}

/* Webinar Widget */
.widget_webinar .webinars {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.widget_webinar .webinars .card {
    flex: 1 0 21%;
    padding: 1.2rem;
    background: var(--white-1);
    border: 1px solid #e6e6e6;
    color: var(--black-3);
    text-align: left;
}

    .widget_webinar .webinars .card .card_text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }

    .widget_webinar .webinars .card h1,
    .widget_webinar .webinars .card h2,
    .widget_webinar .webinars .card h3,
    .widget_webinar .webinars .card h4 {
        color: var(--grape-3);
        background: none !important;
        padding: 0 !important;
        text-transform: none;
    }

    .widget_webinar .webinars .card p,
    .widget_webinar .webinars .card li,
    .widget_webinar .webinars .card span,
    .widget_webinar .webinars .card strong,
    .widget_webinar .webinars .card em {
        color: var(--black-3) !important;
    }

    .widget_webinar .webinars .card .webinar_date {
        display: block;
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 0.6rem;
    }

    .widget_webinar .webinars .card .webinar_type {
        display: block;
        margin: 0 0 0.2rem !important;
        padding: 0 !important;
        background: none !important;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.3;
        color: var(--black-1);
    }

    .widget_webinar .webinars .card .webinar_title {
        margin: 0 0 1.2rem !important;
        padding: 0 !important;
        background: none !important;
        color: var(--black-1);
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.3;
        text-transform: none;
    }

.widget_webinar .card_text > p:last-child {
    margin: auto 0 0;
}

/* Colour options */

.widget_webinar[data-color="offwhite"] .card,
.widget_webinar[data-color="warmgrey"] .card {
    background: var(--white-1);
    color: var(--black-3) !important;
}

.widget_webinar[data-color="blue"] .card {
    background: var(--mauve-1);
    border-color: transparent;
    color: var(--white-1) !important;
}

.widget_webinar[data-color="red"] .card {
    background: var(--blush-2);
    border-color: transparent;
    color: var(--brown) !important;
}

.widget_webinar[data-color="blue"] .card h1,
.widget_webinar[data-color="blue"] .card h2,
.widget_webinar[data-color="blue"] .card h3,
.widget_webinar[data-color="blue"] .card h4,
.widget_webinar[data-color="blue"] .card p,
.widget_webinar[data-color="blue"] .card li,
.widget_webinar[data-color="blue"] .card span,
.widget_webinar[data-color="blue"] .card strong,
.widget_webinar[data-color="blue"] .card em,
.widget_webinar[data-color="blue"] .webinar_date,
.widget_webinar[data-color="blue"] .webinar_type,
.widget_webinar[data-color="blue"] .webinar_title {
    color: var(--white-1) !important;
}

.widget_webinar[data-color="red"] .card h1,
.widget_webinar[data-color="red"] .card h2,
.widget_webinar[data-color="red"] .card h3,
.widget_webinar[data-color="red"] .card h4,
.widget_webinar[data-color="red"] .card p,
.widget_webinar[data-color="red"] .card li,
.widget_webinar[data-color="red"] .card span,
.widget_webinar[data-color="red"] .card strong,
.widget_webinar[data-color="red"] .card em,
.widget_webinar[data-color="red"] .webinar_date,
.widget_webinar[data-color="red"] .webinar_type,
.widget_webinar[data-color="red"] .webinar_title {
    color: var(--brown) !important;
}

/* Widget options */

.widget_webinar[data-dropshadow="true"] .card {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.widget_webinar[data-borders="true"] .card {
    border-radius: 12px;
}

.widget_webinar[data-amount="two"] .card.two,
.widget_webinar[data-amount="three"] .card.two,
.widget_webinar[data-amount="four"] .card.two {
    display: flex !important;
}

.widget_webinar[data-amount="three"] .card.three,
.widget_webinar[data-amount="four"] .card.three {
    display: flex !important;
}

.widget_webinar[data-amount="four"] .card.four {
    display: flex !important;
}

/* Playlist styling */

.widget_webinar[data-playlist="true"] .card {
    background: #faf7fc;
    border-left: 5px solid var(--mauve-1);
    color: var(--black-3) !important;
}

.widget_webinar[data-playlist="true"] .webinar_date {
    color: #666 !important;
}

.widget_webinar[data-playlist="true"] .webinar_type {
    color: var(--mauve-1) !important;
}

.widget_webinar[data-playlist="true"] .webinar_title {
    color: var(--black-1) !important;
}

/* Webinar colour compatibility fixes */

/* Default / Grey webinar */

.widget_webinar[data-color="warmgrey"] .card,
.widget_webinar[data-color="offwhite"] .card {
    background: var(--white-1);
    color: var(--black-3) !important;
}

.widget_webinar[data-color="warmgrey"] .webinar_date,
.widget_webinar[data-color="offwhite"] .webinar_date {
    color: #666 !important;
}

.widget_webinar[data-color="warmgrey"] .webinar_type,
.widget_webinar[data-color="offwhite"] .webinar_type,
.widget_webinar[data-color="warmgrey"] .webinar_title,
.widget_webinar[data-color="offwhite"] .webinar_title {
    color: var(--black-1) !important;
}

/* Purple webinar */

.widget_webinar[data-color="blue"] .card {
    background: var(--mauve-1);
    color: var(--white-1) !important;
}

.widget_webinar[data-color="blue"] .webinar_date {
    color: rgba(255, 255, 255, 0.85) !important;
}

.widget_webinar[data-color="blue"] .webinar_type,
.widget_webinar[data-color="blue"] .webinar_title,
.widget_webinar[data-color="blue"] .card p,
.widget_webinar[data-color="blue"] .card li,
.widget_webinar[data-color="blue"] .card span,
.widget_webinar[data-color="blue"] .card strong,
.widget_webinar[data-color="blue"] .card em {
    color: var(--white-1) !important;
}

/* Keep the primary button visible on the mauve background */

.widget_webinar[data-color="blue"] .btn-pri {
    background: var(--white-1);
    color: var(--mauve-3) !important;
}

    .widget_webinar[data-color="blue"] .btn-pri:hover,
    .widget_webinar[data-color="blue"] .btn-pri:focus {
        background: var(--mauve-2);
        color: var(--mauve-3) !important;
    }

/* Blush webinar */

.widget_webinar[data-color="red"] .card {
    background: var(--blush-2);
    color: var(--brown) !important;
}

.widget_webinar[data-color="red"] .webinar_date {
    color: var(--brown) !important;
}

.widget_webinar[data-color="red"] .webinar_type,
.widget_webinar[data-color="red"] .webinar_title,
.widget_webinar[data-color="red"] .card p,
.widget_webinar[data-color="red"] .card li,
.widget_webinar[data-color="red"] .card span,
.widget_webinar[data-color="red"] .card strong,
.widget_webinar[data-color="red"] .card em {
    color: var(--brown) !important;
}

/* Default playlist styling */

.widget_webinar[data-playlist="true"] .card {
    border-left: 5px solid var(--mauve-1);
}

.widget_webinar[data-playlist="true"] .webinar_type {
    font-weight: 700;
}

/* Playlist + Grey */

.widget_webinar[data-playlist="true"][data-color="warmgrey"] .card,
.widget_webinar[data-playlist="true"][data-color="offwhite"] .card {
    background: #faf7fc;
}

.widget_webinar[data-playlist="true"][data-color="warmgrey"] .webinar_type,
.widget_webinar[data-playlist="true"][data-color="offwhite"] .webinar_type {
    color: var(--mauve-1) !important;
}

/* Playlist + Purple */

.widget_webinar[data-playlist="true"][data-color="blue"] .card {
    background: var(--mauve-1);
    border-left: 5px solid var(--gold);
}

.widget_webinar[data-playlist="true"][data-color="blue"] .webinar_date {
    color: rgba(255, 255, 255, 0.85) !important;
}

.widget_webinar[data-playlist="true"][data-color="blue"] .webinar_type,
.widget_webinar[data-playlist="true"][data-color="blue"] .webinar_title {
    color: var(--white-1) !important;
}

/* Playlist + Blush */

.widget_webinar[data-playlist="true"][data-color="red"] .card {
    background: var(--blush-2);
    border-left: 5px solid var(--mauve-1);
}

.widget_webinar[data-playlist="true"][data-color="red"] .webinar_date,
.widget_webinar[data-playlist="true"][data-color="red"] .webinar_type,
.widget_webinar[data-playlist="true"][data-color="red"] .webinar_title {
    color: var(--brown) !important;
}

/*-----------------------------------------------------------------------------------------------*/
/* Text Block Widget */

.widget_text_block .widget_text_block_container {
    display: flex;
    margin: 15px 0;
    overflow: hidden;
}

.widget_text_block[data-style="left"] .widget_text_block_container {
    flex-direction: row;
}

.widget_text_block[data-style="right"] .widget_text_block_container {
    flex-direction: row-reverse;
}

.widget_text_block .widget_text_block_container .text_block_text,
.widget_text_block .widget_text_block_container .text_block_image {
    position: relative;
    flex: 1;
}

.widget_text_block .widget_text_block_container {
    background: #f4eef0;
    color: #3f3f3f;
}

    .widget_text_block .widget_text_block_container .text_block_text > div {
        min-height: 300px;
        height: 100%;
        padding: 30px;
    }

.widget_text_block[data-color="blue"] .widget_text_block_container {
    background: var(--pri);
    color: #fff;
}

.widget_text_block[data-color="red"] .widget_text_block_container {
    background: var(--sec);
    color: #fff;
}

.widget_text_block[data-color="white"] .widget_text_block_container {
    background: #fff;
}

.widget_text_block[data-color="blue"] .widget_text_block_container .text_block_text h1,
.widget_text_block[data-color="red"] .widget_text_block_container .text_block_text h1,
.widget_text_block[data-color="blue"] .widget_text_block_container .text_block_text h2,
.widget_text_block[data-color="red"] .widget_text_block_container .text_block_text h2,
.widget_text_block[data-color="blue"] .widget_text_block_container .text_block_text h3,
.widget_text_block[data-color="red"] .widget_text_block_container .text_block_text h3,
.widget_text_block[data-color="blue"] .widget_text_block_container .text_block_text h4,
.widget_text_block[data-color="red"] .widget_text_block_container .text_block_text h4 {
    color: #fff;
}

.widget_text_block .widget_text_block_container .text_block_text .btn-default {
    font-weight: 700;
    color: var(--pri);
}

.widget_text_block .widget_text_block_container .text_block_text .btn-primary {
    font-weight: 700;
}

.widget_text_block .widget_text_block_container .text_block_image {
    background-color: #f5f5f5;
    min-height: 300px;
    margin: 30px 0;
}

    .widget_text_block .widget_text_block_container .text_block_image img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

.widget_text_block[data-color="grey"] {
    position: relative;
}

    .widget_text_block[data-color="grey"]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 99vw;
        transform: translateX(-50%);
        background: #ededed;
        z-index: -1;
    }

.widget_text_block[data-color="white"] {
    position: relative;
}

    .widget_text_block[data-color="white"]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 99vw;
        transform: translateX(-50%);
        background: #fff;
        z-index: -1;
    }

.widget_text_block[data-color="blue"] {
    position: relative;
}

    .widget_text_block[data-color="blue"]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 99vw;
        transform: translateX(-50%);
        background: var(--pri);
        z-index: -1;
    }

    .widget_text_block[data-color="blue"] .text_block_text ul li::before {
        background: var(--sec) !important;
    }

.widget_text_block[data-color="red"] {
    position: relative;
}

    .widget_text_block[data-color="red"]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 99vw;
        transform: translateX(-50%);
        background: var(--sec);
        z-index: -1;
    }

.widget_text_block p,
.widget_text_block li {
    font-size: 0.9rem;
}

.widget_text_block h3 {
    background-color: var(--sec);
    padding: 10px;
    color: white;
    font-size: 20px;
}

/*-----------------------------------------------------------------------------------------------*/
/* Expandable Widget */
.expandable,
.editable_expandable {
    overflow: hidden;
}

    .expandable .expandable_heading .expandable_title,
    .editable_expandable .expandable_heading .expandable_title {
    }

        .expandable .expandable_heading,
        .expandable .expandable_heading .expandable_title,
        .expandable .expandable_heading .expandable_title a,
        .editable_expandable .expandable_heading,
        .editable_expandable .expandable_heading .expandable_title,
        .editable_expandable .expandable_heading .expandable_title a {
            font-weight: 400;
            text-align: left;
            font-size: 1rem;
            line-height: 1.2em;
            background: var(--pri) !important;
            color: #fff !important;
        }

            .expandable .expandable_heading .expandable_title a,
            .editable_expandable .expandable_heading .expandable_title a {
                text-decoration: none;
                display: block;
            }


            .expandable .expandable_heading .expandable_title span,
            .editable_expandable .expandable_heading .expandable_title span {
                max-width: 80%;
                display: inline-block;
            }

            .expandable .expandable_heading h4,
            .editable_expandable .expandable_heading h4 {
                margin: 0px;
            }

    .editable_expandable .expandable_title {
        text-align: left;
    }

    .expandable .expandable_body,
    .editable_expandable .expandable_body {
        background: var(--pri-light);
        padding: 15px;
    }

        .editable_expandable .expandable_body > :first-child {
            margin-top: 0px;
        }

    .editable_expandable .expandable_title a:not(.collapsed) {
        color: #fff !important;
    }

.expandable_heading .expandable_title .glyphicon {
    float: right;
    transition: transform 0.5s;
    transform: rotate(180deg);
}

    .expandable_heading .expandable_title .glyphicon::before {
        content: "\f282";
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: 400 !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: -.125em;
        -webkit-font-smoothing: antialiased;
    }

.expandable_heading .expandable_title .collapsed .glyphicon {
    transform: rotate(0deg);
}
/*-----------------------------------------------------------------------------------------------*/
/* Nav Columns Widget */

.widget-navcolumns .widget-navcolumns-container {
    display: flex;
    gap: 30px;
    margin: 15px 0;
}

.widget-navcolumns .widget-navcolumns-col {
    position: relative;
    cursor: pointer;
    flex: 1;
}

    .widget-navcolumns .widget-navcolumns-col .widget-navcolumns-image {
        position: relative;
        background-color: var(--background-color);
        min-height: 250px;
    }

        .widget-navcolumns .widget-navcolumns-col .widget-navcolumns-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
        }

    .widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title {
        position: absolute;
        bottom: 20px;
        place-self: center;
        padding: 10px 15px;
        background: white;
        color: var(--primary);
        min-height: 1.2em;
        font-size: 1.1rem;
        line-height: 1.2em;
        text-align: center;
        transition: background .3s linear;
    }

.widget-navcolumns-title h2, .widget-navcolumns-title p, .widget-navcolumns-title a {
    font-weight: bold !important;
}


.widget-navcolumns .widget-navcolumns-col:hover .widget-navcolumns-title,
.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title:focus-within {
    background: var(--secondary);
}

.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title h1,
.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title h2,
.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title h3,
.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title h4 {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

.widget-navcolumns .widget-navcolumns-col .widget-navcolumns-title a {
    text-decoration: none;
    color: inherit;
}
