/*
Theme overrides

Add custom classes and CSS fixes here instead of editing the compiled style.css.
This file is loaded after style.css, so matching selectors here override the main theme styles.
*/

/* Global overrides */

.home-wrapper .brands-wrapper .restaurants {
    gap: 0.42vw;
    direction: ltr;
}

.home-wrapper .brands-wrapper .restaurants .restaurant {
    width: calc((100% - 1.26vw) / 4);
}

.home-wrapper .brands-wrapper .restaurants .restaurant .bottom-caption {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 2.08vw;
    font-family: GothamBlack, sans-serif;
    font-size: 0.68vw;
    font-weight: 500;
    color: white;
    line-height: 0.78vw;
    letter-spacing: 0.16vw;

    span {
        font-family: 'Publico', sans-serif;
        font-size: 0.81vw;
        line-height: 1.3vw;
    }
}

.home-wrapper .brands-wrapper .restaurants .restaurant.closer {
    background: black;

    .text {
        position: relative;
        font-family: 'Publico', sans-serif;
        font-size: 1.56vw;
        line-height: 2.76vw;
        letter-spacing: 0.03vw;
        color: white;
    }
}

.restaurant-wrapper.theme-jango_rishon {
    background: #253121;
}

.restaurant-wrapper.theme-jango_rishon .hero .content-wrapper .logo {
    margin-top: 0;
}

.restaurant-wrapper.theme-jango_rishon .body .rows .row .text-wrapper h2 {
    color: #D1B46D;
    font-family: "neato-serif", sans-serif;
}

.restaurant-wrapper.theme-jango_rishon .body .rows .row .text-wrapper p {
    color: #D1B46D; 
}

.restaurant-wrapper.theme-jango_rishon .body .rows .row .text-wrapper .link {
    color: #D1B46D; 
}

.header-bg.go-theme.theme-jango_rishon {
    background: #253121;
    border-color: #D1B46D; 
}

.bt-link.go-theme.theme-jango_rishon {
    color: #D1B46D; 
}

.menu-button-wrapper.go-theme.theme-jango_rishon .menu-button .line {
    background: #D1B46D;
}

.restaurant-wrapper.theme-jango_rishon .body .gallery-wrapper .gallery .splide__arrow--prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 26' fill='none'><path d='M13.4141 24.707L1.41406 12.7079L13.4141 0.707031' stroke='%23D1B46D' stroke-width='2'/></svg>")
}

.restaurant-wrapper.theme-jango_rishon .body .gallery-wrapper .gallery .splide__arrow--next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 26' fill='none'><path d='M1.58594 0.707031L13.5859 12.7061L1.58594 24.707' stroke='%23D1B46D' stroke-width='2'/></svg>");
}

.restaurant-wrapper.theme-jango_rishon .body .gallery-wrapper .gallery .splide__pagination__page {
    background: #D1B46D;
}

.restaurant-wrapper.theme-jango_rishon .body .gallery-wrapper .gallery .splide__pagination__page.is-active {
    background: white;
}

.restaurant-wrapper.theme-jango_rishon .contact-wrapper .content-wrapper .text-wrapper .opening-hours {
    font-family: "neato-serif", sans-serif;
}

.restaurant-wrapper.theme-jango_rishon .contact-wrapper .content-wrapper {
    padding: 4.7916666667vw 0 0;
    align-items: center;
}

.legal-wrapper {
    position: relative;
    background: #f0eae5;
    padding: 100px 0;

    .content-wrapper {
        max-width: 544px;

        h1 {
            font-family: 'NarkissBlock-Bold', sans-serif;
            font-size: 48px;
            line-height: 1;
            text-wrap: pretty;
        }

        .wysiwyg {
            position: relative;
            margin: 20px 0 0;
            font-family: 'NarkissBlock-Regular', sans-serif;
            font-size: 16px;
            line-height: 21px;
            letter-spacing: 0.28px;
            text-wrap: pretty;

            h2 {
                position: relative;
                margin: 20px 0 0;
                font-family: 'NarkissBlock-Bold', sans-serif;
                font-size: 21px;
                line-height: 22px;
                letter-spacing: 0.42px;
            }

            p, ol, ul {
                position: relative;
                margin: 10px 0 0;
                font-family: 'NarkissBlock-Regular', sans-serif;
                font-size: 16px;
                line-height: 21px;
                letter-spacing: 0.28px;
            }

            ol {
                padding-right: 20px;
                list-style-type: decimal;
            }

            ul {
                padding-right: 20px;
                list-style-type: disc;
            }

            strong {
                font-family: 'NarkissBlock-Bold', sans-serif;
            }
            
            a {
                border-bottom: 1px solid;
            }
        }
    }
}

.menu-button-wrapper.go-legal .menu-button .line {
    background: #000000 !important;
}

.menu-button-wrapper.go-legal.rotate .menu-button .line {
    background: #ffffff !important;
}


/* Mobile overrides */
@media screen and (max-width: 1023px) {

    .home-wrapper .brands-wrapper .restaurants {
        gap: 4;
    }
    
    .home-wrapper .brands-wrapper .restaurants .restaurant {
        width: calc((100% - 8px) / 2);
    }
    
    .home-wrapper .brands-wrapper .restaurants .restaurant .bottom-caption {
        bottom: 16px;
        font-size: 8px;
        line-height: 15px;
        letter-spacing: 1.84;
    
        span {
            font-size: 8px;
            line-height: 24px;
            letter-spacing: 4.32px;
        }
    }
    
    .home-wrapper .brands-wrapper .restaurants .restaurant.closer {
    
        .text {
            font-size: 20px;
            line-height: 23px;
            letter-spacing: 0.4px;
            max-width: 96px;
            text-align: center;
        }
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-3 {
        order: 2;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-1 {
        order: 3;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-2 {
        order: 4;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-5 {
        order: 5;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-4 {
        order: 6;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-6 {
        order: 7;
    }

    .home-wrapper .brands-wrapper .restaurants .restaurant.n-7 {
        order: 8;
    }

    .restaurant-wrapper.theme-jango_rishon .contact-wrapper .content-wrapper {
        padding: 60px 0 0;
    }


    .legal-wrapper {
        padding: 70px 0;

        .content-wrapper {

            h1 {
                font-size: 40px;
            }

            .wysiwyg {
        
                h2 {
                    font-size: 19px;
                    line-height: 20px;
                }

            }
        }
    }

}

/* Targeted popup */
@font-face {
    font-family: "WaitingForTheSunrise";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/waitingforthesunrise-regular.ttf") format("truetype");
}

@font-face {
    font-family: "NarkissBlock-Medium";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/NarkissBlock-Medium.woff2") format("woff2");
}

.site-popup {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-popup.show {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

.site-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.site-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 50px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    text-align: center;
    outline: none;
    transform: translateY(18px);
    transition: transform 0.3s ease;
}

.site-popup.show .site-popup__dialog {
    transform: translateY(0);
}

.site-popup__close {
    position: absolute;
    z-index: 9;
    top: 36px;
    right: 36px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.site-popup__close img {
    display: block;
    width: auto;
    height: 24px;
}

.site-popup__title {
    font-family: "WaitingForTheSunrise", cursive;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.1;
    text-align: left;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

.site-popup__text {
    margin-top: 60px;
    min-height: 84px;
    font-family: "gotham", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.06em;
}

.site-popup__cta {
    display: block;
    margin-top: 70px;
    padding: 0;
    background: transparent;
    color: #D1B46D;
    font-family: "WaitingForTheSunrise", cursive;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    text-align: left;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

.site-popup__close:focus,
.site-popup__close:focus-visible,
.site-popup__cta:focus,
.site-popup__cta:focus-visible {
    outline: none;
    box-shadow: none;
}

.site-popup__icon {
    position: absolute;
    right: 36px;
    bottom: 36px;
    width: auto;
    max-width: calc(100% - 72px);
}

body.he .site-popup__text {
    font-family: "NarkissBlock-Medium", sans-serif;
    font-weight: 500;
}

@media screen and (max-width: 1023px) {
    .site-popup {
        padding: 20px;
    }

    .site-popup__dialog {
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        padding: 60px 20px;
    }

    .site-popup__close {
        top: 20px;
        right: 20px;
        width: 24px;
        height: 24px;
    }

    .site-popup__close img {
        height: 20px;
    }

    .site-popup__title {
        font-size: 28px;
        text-align: center;
    }

    .site-popup__text {
        max-width: 266px;
        margin: 30px auto 0;
        font-size: 18px;
        text-wrap: pretty;
    }

    .site-popup__icon {
        position: relative;
        display: block;
        right: auto;
        bottom: auto;
        width: auto;
        max-height: 108px;
        margin: 30px auto 0;
    }

    .site-popup__cta {
        margin: 30px auto 0;
        font-size: 28px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-popup,
    .site-popup__dialog {
        transition: none;
    }
}