/*
Theme Name: Tempo
Description: Tempo Theme
Author: Andreas Ahoniemi
Template: flatsome
Version: 3.0
*/

/*************** Imports  ***************/
@font-face {
    font-family: "NotoSansReg";
    src: url('fonts/noto-sans-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: "NotoSansBold";
    src: url('fonts/noto-sans-700.woff2') format('woff2');
    font-display: swap;
}
.grecaptcha-badge { 
    visibility: hidden;
}

:root {
    --padding-size-sm: 60px;
    --padding-size: 90px;
    --padding-size-lg: 120px;
    --padding-size-xlg: 180px;
    
    --body-font-size-sm: .9rem !important; 
    --body-font-size: 1rem !important;
    --body-font-size-lg: 1.1rem !important; 
    --h1-size: 3rem !important; 
    --h2-size: 1.5rem !important; 
    --h3-size: 1.25rem !important; 
    --h4-size: 1rem !important; 
    --h5-size: 0.75rem !important; 
    --h6-size: 0.70rem !important; 
    --btn-size: 0.75rem 1.5rem !important;

    --body-font-family: "NotoSansReg", sans-serif!important;
    --heading-font-family: "NotoSansBold", sans-serif!important;
    --font-weight: normal!important;

}

@media only screen and (max-width: 849px) {
    :root {
        --padding-size-sm: 30px!important;
        --padding-size: 30px!important;
        --padding-size-lg: 30px!important;
        --padding-size-xlg: 30px!important;
        --body-font-size: 1rem!important; 
        --h1-size: 2rem!important; 
        --h2-size: 1.5rem!important; 
        --h3-size: 1.25rem!important; 
        --h4-size: 1rem!important; 
        --h5-size: 0.75rem!important; 
        --h6-size: 0.70rem!important; 
        --btn-size: 0.75rem 1.5rem!important;        
    }
}

.box-text .price-wrapper .price {
    display: none;
}

/*************** Typograhy  ***************/

body {
    & p {
        font-family: var(--body-font-family);
        font-size: var(--body-font-size);
        font-weight: var(--font-weight);

        & a {text-decoration: underline!important;}
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight);
    text-transform: uppercase;
}

h1 {font-size: var(--h1-size); margin-bottom: .5rem;}
h2, .h2, h3.h2 {font-size: var(--h2-size);}
h3, .h3, h2.h3 {font-size: var(--h3-size);}
h4 {font-size: var(--h4-size);}
h5 {font-size: var(--h5-size);}
h6 {font-size: var(--h6-size);}

.sr-only {
    display: none;
}

.upper p, .upper {
    font-family: var(--medium-font-family);
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.is-divider {
    display: none;
}

dl.variation, dl.variation dt, dl.variation dd {
    font-size: var(--body-font-size);
}

/*************** Background classes (change class names if needed, but not variable names)  ***************/
.bg-brand-color-1 {background-color: var(--brand-color-1)!important;}
.bg-brand-color-2 {background-color: var(--brand-color-2)!important;}
.bg-brand-color-3 {background-color: var(--brand-color-3)!important;}
.bg-brand-color-4 {background-color: var(--brand-color-4)!important;}
.bg-brand-color-5 {background-color: var(--brand-color-5)!important;}
/*************** Color classes (change class names if needed, but not variable names)  ***************/
.color-brand-color-1 {color: var(--brand-color-1)!important;}
.color-brand-color-2 {color: var(--brand-color-2)!important;}
.color-brand-color-3 {color: var(--brand-color-3)!important;}
.color-brand-color-4 {color: var(--brand-color-4)!important;}
.color-brand-color-5 {color: var(--brand-color-5)!important;}
.color-black {color: black!important;}
.color-white {color: white!important;}
/*************** Global paddings  ***************/
.py-sm {padding: var(--padding-size-sm) 0px!important;}
.py {padding: var(--padding-size) 0px!important;}
.py-lg {padding: var(--padding-size-lg) 0px!important;}
.py-xlg {padding: var(--padding-size-lg) 0px!important;}
.pt {padding-top: var(--padding-size) 0px!important;}
.pt-lg {padding-top: var(--padding-size-lg) 0px!important;}
.pt-xlg {padding-top: var(--padding-size-xlg) 0px!important;}
.pl {padding-left: var(--padding-size)!important;}
.pt {padding-top: var(--padding-size)!important;}
.pb {padding-bottom: var(--padding-size)!important;}
.pb-lg {padding-bottom: var(--padding-size-lg)!important;}
.pb-xlg {padding-bottom: var(--padding-size-xlg)!important;}
.mb-0, .mb-0 p {margin-bottom: 0 !important;}
.m-0, .m-0 p {margin: 0 !important;}

/*************** Buttons  ***************/
.button:not(.icon, .back-to-top), .wpcf7-submit {
    padding: var(--btn-size);
    font-size: var(--body-font-size);
    font-weight: var(--font-weight);
    line-height: 1;
    min-height: unset;

    & span {
        line-height: 1;
    }
}

.button:not(.icon).primary {

    & span {

    }
}

.button:not(.icon).secondary {
    
    & span {

    }
}

.button:not(.icon).is-link {

    & span {

    }
}

.button:not(.icon, .back-to-top).is-outline {
    
    & span {

    }
}

/*************** Header & Navigation  ***************/
.header {
    & .nav {
        & li {
            & a {

            }
        }
    }
}

.header.transparent {
    & .nav {
        & li {
            & a {

            }
        }
    }
}
/*************** Frontpage  ***************/
.frontpage-hero {
    height: calc(100vh - 90px)!important;
}

@media only screen and (max-width: 1400px) {
    
    
}

@media only screen and (max-width: 849px) {
    .frontpage-hero {
        height: auto;
    }
    
}

@media only screen and (max-width: 48em) {
    
    
}

.category-page-title {
    display: none;
}

.product-small .box-image {
    display: none;
}

.post-type-archive-product .box-vertical {
    background: #f1f1f1;
}

.post-type-archive-product .box-vertical .box-text {
    padding: 30px;
}

.product-title, .woocommerce-LoopProduct-link {
    margin: 0!important;
    line-height: 1;
}

.lunch-dishes ul {
    margin: 0;
}

.lunch-dishes li {
    font-size: .9rem;
    margin-bottom: .3rem;
}

.lunch-dishes li:last-child {
    margin-bottom: 0;
}

/*************** Sections  ***************/
.half-bg-left {

    & .section-bg {
        width: calc(50% - 60px);
        height: auto;
    }
}

.half-bg-right {

    & .section-bg {
        left: calc(50% + 60px);
        width: calc(50% - 60px);
        height: auto;
    }
}

@media only screen and (max-width: 849px) {
    .half-bg-right, .half-bg-left {
        flex-direction: column;
        padding-top: 0!important;
        & .section-bg {
            flex-basis: 100%;
            width: 100%;
            position: relative;
            left: unset;
            aspect-ratio: 16 / 10;
            margin-bottom: 30px!important;
            transform: none!important;
        }
    }
}

/*************** Single product ***************/
.wc-lunch-multi {
    background-color: #fafafa;
    padding: 2rem;

    & .wc-lunch-chk {
        margin: 0;
    }

    & .wc-lminus, .wc-lplus {
        background-color: var(--fs-color-primary);
        color: white;
        margin: 0;
    }
}

.ux-quantity.quantity.buttons_added {
    display: none;
}

/*************** Cart & checkout ***************/
.off-canvas-cart {
    background-color: white!important;
}

.woocommerce-mini-cart {
    margin-bottom: 0!important;
}

.mini_cart_item {
    background-color: #fafafa;
    padding: 1rem!important;
    margin-bottom: 1rem!important;
    & img, .variation {
        display: none!important;
    }

    .ux-mini-cart-qty {
        justify-content: start;
    } 
}

.cart-collaterals {
    background-color: #fafafa;
    padding: 1rem;
}

.is-well {
    box-shadow: unset;
}

td.product-thumbnail {
    display: none;
}
td.product-remove {
    width: 20px!important;
    overflow: visible;
}

/*************** Rows & Columns  ***************/
.row.align-equal .fh-banner {
    min-height: 100%;
}

/*************** Accordions  ***************/
.accordion {

    .accordion-title {
        border-top: none;
    }

    .accordion-title.active {
        
    }

    .toggle {
        left: auto;
        right: 0;
    }
}

/*************** Subpage  ***************/
.subpage-title {
    min-height: 400px;
}

@media only screen and (max-width: 1400px) {
    
    
}

@media only screen and (max-width: 849px) {
    
    
}

@media only screen and (max-width: 48em) {
    
    
}

/*************** Footer  ***************/
.absolute-footer {display: none;}
.footer-section {

}

@media only screen and (max-width: 1400px) {
    
    
}

@media only screen and (max-width: 849px) {
    
    
}

@media only screen and (max-width: 48em) {
    
    
}

/*************** Contact Form 7  ***************/
input[type=text], input[type=tel], input[type=number], input[type=email], textarea {
        box-shadow: none!important;
        height: unset;
}

& input:focus, textarea:focus {
    box-shadow: none!important;
}

& textarea {
    resize: none!important;
}