/** BASE **/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 CSS Variables
2.0 Body
3.0 Styles from design
4.0 Layout
5.0 Core Gutenberg blocks

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

/*- 1.0 CSS Variables */
:root {
    /* Defined by WP through theme.json */

    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: 100px;
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: 100px;

    --wp--style--global--content-size: 1240px;
    --wp--style--global--wide-size: 1440px;
    /*
    Variables below are generated by WordPress based on theme.json

    --wp--preset--color--dark-blue: #0D2059;
    --wp--preset--color--red: #E24848;
    --wp--preset--color--grey-blue: #A7ADBE;
    --wp--preset--color--night-blue: #06102D;
    --wp--preset--color--grey-800: #575E75;
    --wp--preset--color--grey-600: #C4C8D4;
    --wp--preset--color--grey-400: #E8E9ED;
    --wp--preset--color--grey-200: #F9FAFB;

     */

    /* Utils */
    --scrollbar-width: 0px;
    --admin-bar-height: 0px;
    --viewport-height-diff: 0px;

    --custom-theme-z-index-nav: 2000;
    --custom-theme-z-index-overlay: 4000;

    --custom-theme-flex-span: 1;
    --custom-theme-flex-gap: 30px;

    /* Put custom css variables here */
    --custom-theme-site-header-height: 92px;
    --custom-theme-footer-margin-top: 50px;

    --custom-theme-vertical-spacing-xl: 150px;
    --custom-theme-vertical-spacing-l: 100px;
    --custom-theme-vertical-spacing-m: 80px;
    --custom-theme-vertical-spacing-s: 64px;
    --custom-theme-vertical-spacing-xs: 48px;
}
body {

}

.has-white-color { color: #FFF; }
.has-black-color { color: #000; }

.has-dark-blue-color { color: var(--wp--preset--color--dark-blue); }
.has-red-color { color: var(--wp--preset--color--red); }
.has-grey-blue-color { color: var(--wp--preset--color--grey-blue); }
.has-night-blue-color { color: var(--wp--preset--color--night-blue); }
.has-grey-800-color { color: var(--wp--preset--color--grey-800); }
.has-grey-600-color { color: var(--wp--preset--color--grey-600); }
.has-grey-400-color { color: var(--wp--preset--color--grey-400); }
.has-grey-200-color { color: var(--wp--preset--color--grey-200); }


.has-white-background-color { background-color: #FFF; }


.has-dark-blue-background-color { background-color: var(--wp--preset--color--dark-blue); }
.has-red-background-color { background-color: var(--wp--preset--color--red); }
.has-grey-blue-background-color { background-color: var(--wp--preset--color--grey-blue); }
.has-night-blue-background-color { background-color: var(--wp--preset--color--night-blue); }
.has-grey-800-background-color { background-color: var(--wp--preset--color--grey-800); }
.has-grey-600-background-color { background-color: var(--wp--preset--color--grey-600); }
.has-grey-400-background-color { background-color: var(--wp--preset--color--grey-400); }
.has-grey-200-background-color { background-color: var(--wp--preset--color--grey-200); }


@media screen and (max-width: 1279px) {
    body {
        --wp--style--root--padding-right: 50px;
        --wp--style--root--padding-left: 50px;

        --wp--preset--spacing--20: 0.22rem;
        --wp--preset--spacing--30: 0.335rem;
        --wp--preset--spacing--40: 0.5rem;
        --wp--preset--spacing--50: 0.75rem;
        --wp--preset--spacing--60: 1.125rem;
        --wp--preset--spacing--70: 1.69rem;
        --wp--preset--spacing--80: 2.53rem;
    }
}
@media screen and (max-width: 991px) {
    body {
        --custom-theme-vertical-spacing-xl: 100px;
        --custom-theme-vertical-spacing-l: 64px;
        --custom-theme-vertical-spacing-m: 48px;
        --custom-theme-vertical-spacing-s: 48px;
        --custom-theme-vertical-spacing-xs: 48px;
    }
}

@media screen and (max-width: 767px) {
    body {
        --wp--style--root--padding-right: 20px;
        --wp--style--root--padding-left: 20px;
        --custom-theme-site-header-height: 72px;

        --custom-theme-vertical-spacing-xl: 64px;
        --custom-theme-vertical-spacing-l: 48px;
        --custom-theme-vertical-spacing-m: 48px;
        --custom-theme-vertical-spacing-s: 48px;
        --custom-theme-vertical-spacing-xs: 32px;
    }
}

/*- 2.0 Body */
.editor-styles-wrapper,
body:not(.wp-admin) {
    font-family: Figtree, sans-serif;
    color: var(--wp--preset--color--night-blue);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*- 3.0 Styles from design */

/*- 4.0 Layout */
.layout-width {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}
.content-width {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
}
.smaller-content-width {
    max-width: 605px;
    margin: 0 auto;
}
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.has-block-layout > *:not(.alignfull):not(.alignwide) {
    margin-right: auto;
    margin-left: auto;
    max-width: var(--wp--style--global--content-size);
}
.has-global-padding .alignfull,
.has-global-padding .alignwide {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
}

.content-width .alignfull {
    margin-left: calc(50% - 50vw + var(--scrollbar-width) / 2);
    margin-right: calc(50% - 50vw + var(--scrollbar-width) / 2);
    max-width: calc(100vw - var(--scrollbar-width));
    width: calc(100vw - var(--scrollbar-width));
}

.custom-theme-flex-grid,
.gform_fields,
.ginput_complex {
    display: flex;
    gap: var(--custom-theme-flex-gap);
}
.custom-theme-flex-grid > *,
.gform_fields > *,
.ginput_complex > * {
    flex: 0 0 calc((100% - 11 * var(--custom-theme-flex-gap)) / 12 * var(--custom-theme-flex-span) + var(--custom-theme-flex-gap) * (var(--custom-theme-flex-span) - 1));
    min-width: 0;
}

.site-content::after {
    content: '';
    display: block;
    margin-top: var(--custom-theme-footer-margin-top);
}

/*- 5.0 Core Gutenberg blocks */

p[data-type="core/paragraph"],
.block-paragraph {
    margin-top: 0;
    margin-bottom: 1.2em;
    font-size: 1.125rem;
    line-height: 1.5;
}

p[data-type="core/paragraph"] a,
.block-paragraph a,
[data-type="core/list"] a,
.block-list a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.wp-block-heading {
    color: var(--wp--preset--color--dark-blue);
}

h1[data-type="core/heading"],
.block-h1 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.48em;
}

h2[data-type="core/heading"],
.block-h2 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.75em;
    color: var(--wp--preset--color--dark-blue);
}

h3[data-type="core/heading"],
.block-h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--wp--preset--color--dark-blue);
}

h4[data-type="core/heading"],
.block-h4 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--wp--preset--color--dark-blue);
}

h5[data-type="core/heading"],
.block-h5 {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--wp--preset--color--dark-blue);
}

h6[data-type="core/heading"],
.block-h6 {
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--wp--preset--color--dark-blue);
}

[data-type="core/list"],
.block-list {
    margin-top: 0;
    margin-bottom: 1.2em;
    font-size: 1.125rem;
    line-height: 1.5;
}
ul[data-type="core/list"],
ul.block-list {
    padding-left: 0;
}
ul[data-type="core/list"] li,
ul.block-list li {
    padding-left: 30px;
    list-style-type: none;
}
ul[data-type="core/list"] li::before,
ul.block-list li::before {
    content: '•';
    display: inline-block;
    width: 30px;
    margin-left: -30px;
    padding-left: 12px;
}
li[data-type="core/list-item"] > div {
    display: inline-block;
}

ul.is-style-check li {
    margin-bottom: 13px;
    padding-left: 36px;
}
ul.is-style-check li::before {
    content: '';
    margin-left: -36px;
    margin-right: 12px;
    width: 24px;
    height: 24px;
    vertical-align: top;
    margin-top: 2px;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12.5" r="12" fill="%23E24848"/><path d="M17.334 9.167 10 16.5l-3.333-3.333" stroke="%23fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') 0 0 / contain no-repeat;
}

.wp-block-image {
    margin: 0;
}
.wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
.wp-block-image figcaption {
    margin-top: 16px;
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 600;
}

.wp-block-buttons {
    gap: 15px;
}

.wp-block-button__link {
    --custom-theme-button-bg-color: var(--wp--preset--color--dark-blue);
    --custom-theme-button-bg-color-alt: var(--wp--preset--color--red);
    --custom-theme-button-text-color: #FFF;
    --custom-theme-button-text-color-alt: #FFF;
    background-color: transparent!important;
    background-image: radial-gradient(circle at 50% 210%, var(--custom-theme-button-bg-color-alt) 0%, var(--custom-theme-button-bg-color-alt) 20%, var(--custom-theme-button-bg-color) 20.1%);
    background-repeat: no-repeat;
    color: var(--custom-theme-button-text-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.562em 1.25em;
    border-radius: 0.3125em;
    text-decoration: none;
    display: inline-block;
    border: 1px solid var(--custom-theme-button-bg-color)!important;
    background-size: 100% 100%;
    background-position: 50% 100%;
    transition: background 0.5s ease-out, color 0.2s ease-out 0.2s, border 0.1s ease-out 0.2s;
}
[data-type="core/button"] .wp-block-button__link {
    color: var(--custom-theme-button-text-color) !important;
}
.wp-block-button__link:focus,
.wp-block-button__link:hover {
    background-size: 1200% 100%;
    color: var(--custom-theme-button-text-color-alt);
    border-color: var(--custom-theme-button-bg-color-alt)!important;
    transition: background 0.5s ease-out, color 0.2s ease-out, border-bottom-color 0.2s ease-out, border-top-color 0.2s ease-out 0.2s, border-right-color 0.2s ease-out 0.2s, border-left-color 0.2s ease-out 0.2s;
}
.is-style-fill-white .wp-block-button__link {
    --custom-theme-button-bg-color: var(--wp--preset--color--white);
    --custom-theme-button-bg-color-alt: var(--wp--preset--color--red);
    --custom-theme-button-text-color: var(--wp--preset--color--dark-blue);
    --custom-theme-button-text-color-alt: #FFF;
}
.is-style-fill-red .wp-block-button__link {
    --custom-theme-button-bg-color: var(--wp--preset--color--red);
    --custom-theme-button-bg-color-alt: var(--wp--preset--color--dark-blue);
}
.is-style-outline-blue .wp-block-button__link {
    --custom-theme-button-bg-color: transparent;
    --custom-theme-button-bg-color-alt: var(--wp--preset--color--dark-blue);
    --custom-theme-button-text-color: var(--wp--preset--color--dark-blue);
    --custom-theme-button-text-color-alt: #FFF;
    border-color: var(--wp--preset--color--dark-blue)!important;
}
.is-style-outline-white .wp-block-button__link {
    --custom-theme-button-bg-color: transparent;
    --custom-theme-button-bg-color-alt: var(--wp--preset--color--dark-blue);
    --custom-theme-button-text-color: #FFF;
    --custom-theme-button-text-color-alt: #FFF;
    border-color: #FFF!important;
}
.is-style-outline-white .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--dark-blue)!important;
    /* delay borders top, right, left transition */
    transition: background 0.25s ease-out, color 0.2s ease-out, border-bottom-color 0.2s ease-out, border-top-color 0.2s ease-out 0.2s, border-right-color 0.2s ease-out 0.2s, border-left-color 0.2s ease-out 0.2s;
}

.wp-block-quote {

}
.wp-block-quote p {

}
.wp-block-quote p:before {

}
.wp-block-quote p:after {

}

.wp-block-embed {

}
.wp-block-embed iframe {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}
.wp-block-embed figcaption {
    margin-top: 16px;
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 600;
}

.wp-block-columns {
    --wp--style--block-gap: 10px;
}

.wp-block-separator {
    margin-top: var(--custom-theme-vertical-spacing-l);
    margin-bottom: var(--custom-theme-vertical-spacing-l);
    border-top: 1px solid var(--wp--preset--color--grey-400);
    border-bottom: 0;
}

.is-style-h1-like,
p[data-type="core/paragraph"].is-style-h1-like {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.48em;
    color: var(--wp--preset--color--dark-blue);
}

.is-style-smaller,
p[data-type="core/paragraph"].is-style-smaller {
    font-size: 0.875rem;
}
.is-style-smaller a,
p[data-type="core/paragraph"].is-style-smaller a {
    font-weight: 400;
}
.is-style-smaller a:hover,
p[data-type="core/paragraph"].is-style-smaller a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 1279px) {
    .block-h1,
    .is-style-h1-like {
        font-size: 2.5rem;
    }

    .block-h3 {
        font-size: 1.375rem;
    }
}

@media screen and (max-width: 991px) {

    .block-h2 {
        font-size: 1.625rem;
    }
}

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

    .block-paragraph,
    .wp-block-list {
        font-size: 1rem;
    }

    .block-h1,
    .is-style-h1-like {
        font-size: 2rem;
        line-height: 1.1;
    }
    .block-h1 br,
    .is-style-h1-like br,
    .block-h2 br {
        display: none;
    }
    .block-h3 {
        font-size: 1.375rem;
    }
    .block-h4 {
        font-size: 1.125rem;
    }


    .wp-block-buttons {
        flex-direction: column;
    }
    .wp-block-button__link {
        width: 100%;
        text-align: center;
        max-width: 375px;
        margin-left: auto;
        margin-right: auto;
    }

    .wp-block-image.alignleft {
        float: none;
        margin-right: 0;
    }

    .wp-block-separator {
        margin-bottom: 64px;
    }
}