/* Variables */
:root {
    --primary-500: #0F2A51;
    --primary-500-shade: #0C2241;
    --secondary-500: #EEC81D;
    --secondary-500-shade: #E2BE1C;
    --gray-500: #ABB4C2;
    --gray-500-shade: #89909B;
    --gray-550: #8794A8;
    --light: #EAE1DA;
    --light-outline: #ffffff20;

    /* spacings */
    --section-padding: 120px;
    --space-section: 32px;

    --space-xxxl: 48px;
    --space-xxl: 40px;
    --space-xl: 32px;
    --space-lg: 24px;
    --space-md: 16px;
    --space-sm: 8px;
    --space-xs: 4px;

    /* other */
    --b-radius-base: 8px;
    --b-radius-cta: 24px;
    --b-radius-screen: 24px;
    --height-logo: 40px;
    --big-item: 72px;
    --icon--md: 72px;
    --screen-shadow: 0px 4px 56px 12px rgba(0, 0, 0, 0.25);

    /* backgrounds */
    --pattern-001: url(pattern-001.svg);
    --pattern-010: url(pattern-010.svg);

    /* controls */
    --btn-padding: 16px 32px;
    --btn-border-prim: 0px 4px 0px #CDAC19;
    --btn-border-outl: 0px 4px 0px #8794A8;

    /* text */
    --font-xl: 24px;
    --font-lg: 20px;
    --font-md: 16px;
    --font-sm: 12px;

    /* titles */
    --title-h1: 52px;
    --title-h2: 36px;
    --title-h3: 24px;
    --title-h4: 20px;
    --title-h5: 18px;
    --title-h6: 17px;

    /* partner logo sizes */
    --logo--smaller: 20px;
    --logo--bigger: 24px;
}


/* Base Styles */
body {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    color: var(--primary-500);
    background-color: var(--light);
    line-height: 150%;
    font-size: 16px;
    margin: unset;
    padding: unset;
}

/* WCAG */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-500);
    color: var(--light);
    padding: var(--btn-padding);
    z-index: 999999999;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
    .skip-link:focus{
        transform: translateY(0%);
    }

    /* focus */
    button:focus:not(:focus-visible):not(.accordion-button),
    :focus-visible,
    .accordion-button:focus-visible,
    .btn:focus-visible,
    .btn:focus
    .btn.btn--link:focus-visible,
    .btn.btn--link:focus,
    .form-control:focus{
        outline: var(--secondary-500) auto 2px ;
        border-color: unset;
        box-shadow: unset;
    }
    
    button:focus:not(:focus-visible),
    .accordion-button:focus,
    .btn:focus-visible,
    .btn:focus
    .btn.btn--link:focus-visible,
    .btn.btn--link:focus{
        text-decoration: underline;
    }

    .btn:focus-visible,
    .btn:focus,
    .navbar .btn.btn--link:focus-visible,
    .navbar .btn.btn--link:focus{
        color:var(--primary-500);
    }

    .btn.btn--link:focus-visible,
    .btn.btn--link:focus
    footer.navbar .btn.btn--link:focus-visible,
    footer.navbar .btn.btn--link:focus{
        color:var(--light);
    }

/* branding basics */
.pattern{
    background-image: var(--pattern-010);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.logo{
    height: var(--height-logo);
    width: auto;
}
    .logo img{
        object-fit: contain;
        height: 100%;
    }
    
img{
    transition: 0.15s ease-in;
}

/* backgrounds */
.bg--primary-500{
    background-color: var(--primary-500);
    color: var(--light);
}
.bg--primary-500-pattern{
    background: var(--pattern-001), var(--primary-500);
    color: var(--light);
}

.bg--primary-500-shade{
    background-color: var(--primary-500-shade) !important;
    color: var(--light);
}

.screen{
    border: 8px var(--primary-500) solid;
    border-radius: var(--b-radius-screen);
    width: 100%;
    margin-top:var(--space-lg);
    background-color: white;
    box-shadow: var(--screen-shadow);
}
    .screen--demo{
        height: 1000px;
        max-height: 75vh;
        margin: var(--space-xxxl) 0;
    }
    .screen-wrapper--left,
    .screen-wrapper--right{
        display: flex;
        max-height: 70vh;
    }
        .screen-wrapper--left{
            justify-content: flex-end;
        }
        .screen-wrapper--right{
            justify-content: flex-start;
        }
        .screen-wrapper img{
            box-shadow: var(--screen-shadow);
            border-radius: 33px;
        }

/* titles */
h1, h2, h3, h4, h5, h6,
.big-item{
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 700;
}
    
    h1{
        font-size: var(--title-h1);
        line-height: 120%;
        margin: unset;
        color: var(--primary-500);
    }

    h2{
        font-size: var(--title-h2);
        line-height: 130%;
        margin-bottom:var(--space-xl);
    }

    h3{
        font-size: var(--title-h3);
        line-height: 140%;
        margin-bottom: var(--space-md);
        padding-top: var(--space-sm);
    }

    h4{
        font-size: var(--title-h4);
        line-height: 150%;
        margin-bottom:var(--space-md);
        padding-top:var(--space-xs);
    }

/* paragraphs */
p{
    font-size: var(--font-md);
    line-height: 175%;
    margin-bottom: var(--space-lg);
    font-weight: 300;
    letter-spacing: 0.5px;
    max-width: 60ch !important;
}
    p.p--lead{
        font-size: var(--font-xl);
        align-self: center;
    }

    p.p--center{
        margin: 0 auto;
    }

    p a,
    label a{
        font-weight: 500;
        text-decoration: underline;
        color: var(--secondary-500);
    }
    label a{
        color: var(--primary-500);
    }
        p a:hover{
            color: var(--secondary-500-shade);
        }
        label a:hover{
            color: var(--primary-500-shade);
            text-decoration: none;
        }

/* btns */
.btn{
    padding: var(--btn-padding);
    border: 3px solid transparent;
    border-radius: var(--b-radius-base);
    cursor: pointer;
    color: var(--primary-500);
    font-weight: 600;
    font-size: var(--font-md);
    display: flex;  
    flex-direction: row;
    gap: var(--space-sm);
    align-items: center;
    transition: 0.075s ease-in;
    width: max-content;
}
    .btn.btn--primary{
        background-color: var(--secondary-500);
        border-color: var(--secondary-500);
        /*box-shadow: var(--btn-border-prim);*/
    }
    .btn.btn--primary:hover{
        background-color: var(--secondary-500-shade);
        border-color: var(--secondary-500-shade);
        color: var(--primary-500);
        box-shadow: unset;
        /*transform: translateY(4px);*/
    }
        .btn.btn--primary:hover img{
            transform: translateX(4px);
        }

    .btn.btn--outline{
        background-color: var(--light-outline);
        border-color: var(--gray-500);
        /*box-shadow: var(--btn-border-outl);*/
    }
    .btn.btn--outline:hover{
        border-color: var(--gray-500-shade);
        box-shadow: unset;
        /*transform: translateY(4px);*/
    }

    /* (Hyper)link */
    .btn.btn--link img{
        height: var(--space-lg);
        aspect-ratio: 1/1;
    }
        .btn.btn--link:hover{
            text-decoration: underline;
        }

    /* group */
    .btn-group-horiz{
        display: flex;
        flex-direction: row;
        gap: var(--space-xxl);
    }

/* Navigation */
nav.navbar{
    padding: var(--space-xs) var(--space-sm);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
    nav.navbar.scrolled{
        background-color: white;
        transition: 0.2s ease-in-out;
        box-shadow: 0px 3px 8px 3px #8e8e8e0f;
    }

    nav.navbar > div{
        flex-wrap: nowrap !important;
    }

/* labels */
label{
    font-size: var(--font-md);
    line-height: 150%;
    margin-bottom: var(--space-sm);
    padding-top: var(--space-sm);
    font-weight: 500;
    font-family: "Figtree", sans-serif;
}

/* Containers and sections */
section{
    padding: var(--section-padding) 0;
    gap: var(--space-section);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

    section.hero{
        background: linear-gradient(180deg, rgba(238, 200, 29, 0.00) 0%, rgba(238, 200, 29, 0.20) 100%), var(--pattern-010);
    }

        section.hero .col{
            display: flex;
            flex-direction: column;
            gap: var(--space-section);
        }

/* Logo list */
.logo-list-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .logo-list{
        display: flex;
        flex-direction: row;
        gap: var(--space-xxxl);
        margin-top: var(--space-lg);
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
        .logo-list img{
            object-fit: contain;
            height: var(--height-logo);
            max-height: var(--space-xl);
        }

        .logo-list img.logo--smaller{
            max-height: var(--logo--smaller);
        }
        .logo-list img.logo--bigger{
            max-height: var(--logo--bigger);
        }

/* Big items */
.big-item{
    font-size:var(--big-item);
    line-height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-lg);
}
    .big-item:last-of-type{
        margin-bottom: unset;
    }

    .big-item label{
        color: var(--gray-550);
    }

/* Solutions */
.solution{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
    .solution img{
        height: var(--icon--md);
        aspect-ratio: 1/1;
        margin-bottom: var(--space-md);
    }
    .solution h3{
        display: flex;
        align-items: center;
    }

/* CTA */
.cta__card{
    background-color: var(--primary-500);
    color: var(--light);
    padding: var(--space-xxl) var(--space-xl);
    border-radius: var(--b-radius-cta);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}
    .cta__card h3,
    .cta__card p{
        margin-bottom: unset;
        padding-top:0;
    }

/* grid */
.grid-sm, .grid-md{
    display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: var(--space-xxxl);
        grid-row-gap: var(--space-xxl);
}
    .grid-item h3{
        display: flex;
        gap: var(--space-md);
        padding: 0;
    }
    .grid-item p{
        margin-bottom: unset ;
    }

.grid-md{
    grid-template-rows: repeat(5, 1fr);
    margin-bottom: var(--space-xxxl);
}
    .grid-md .grid-item{
        border-left:4px solid var(--primary-500-shade);
        padding-left:var(--space-lg)
    }

/* input fields */
.form{
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-control{
    background-color: white;
    border-radius: var(--b-radius-base);
    padding: var(--space-md);
    font-size: var(--font-md);
    color: var(--primary-500);
    border: 3px solid var(--gray-500);
    /*box-shadow: var(--btn-border-outl);*/
}
    span.required{
        color: red;
    }
    .form-control::placeholder{
        color: var(--gray-500);
    }

/* checkbox */
.form-field-checkbox{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
}
    .form-field-checkbox *{
        cursor: pointer;
    }
    .form-field-checkbox input{
        width: var(--space-lg);
        height: var(--space-lg);
    }

/* accordion */
.accordion{
    margin-top: var(--space-xxl);
}

.accordion-item{
    background-color: transparent;
    border:1px solid #ffffff20;
    color: var(--light);
}
.accordion-header,
.accordion-button,
.accordion-body{
    color: var(--light);
}

    .accordion-header{
        padding-top: 0;
        color: var(--primary-500);
        color: inherit;
    }
    .accordion-button,
    .accordion-button:not(.collapsed){
        font-size: var(--title-h4);
        background-color:transparent;
        color: inherit;
        box-shadow: unset;
        gap: var(--space-md);
        padding: var(--space-xl) 0;
    }
        .accordion-button:not(.collapsed){
            background-color:transparent;
        }
        .accordion-button::after,
        .accordion-button:not(.collapsed)::after{
            background-image: url(/assets/chevron--down.svg);
            background-size: cover;
            height: var(--space-lg);
            width: var(--space-lg);
        }
        .accordion-button:hover{
            text-decoration: underline;
        }
        .accordion-button:focus{
            box-shadow: unset;
        }

    .accordion-body{
        text-align: left;
        color: var(--primary-500);
        color: inherit;
        line-height: 175%;
        padding: 0 0 var(--space-xl) 0;
        margin-bottom: unset;
    }

/* footer */
footer.navbar{
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

    footer,
    footer .btn{
        color: var(--light);
    }

    footer hr{
        width: calc(100% - (var(--space-sm)*2));
        padding: 0 var(--space-md);
        margin: unset;
    }

    footer .footer__btn-list{
        display: flex;
        gap: var(--space-md);
        row-gap: 0;
        flex-wrap: wrap;
    }

    footer .p--copyright{
        flex: 1;
        text-align: right;
        margin: unset;
    }

    footer .p--copyright span{
        white-space: pre;
    }

/*Toast after form submit.*/

#formSuccess, #formError {
    visibility: hidden;
    width: 80%;
    margin-left: -40%;
    color: #fff;
    text-align: center;
    border-radius: var(--b-radius-cta);
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#formSuccess {
    background-color: green;
}

#formError {
    background-color: red;
}

#formSuccess.show, #formError.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}