.ts-dining-menu {
    --h2--margin-top   : 0;
    --h2--margin-bottom: clamp(30px, calc(54vw*var(--size-modifier)), 54px);
    --h2--font-size    : clamp(26px, calc(50vw*var(--size-modifier)), 50px);
    --h3--margin-top   : 0;
    --h3--margin-bottom: clamp(25px, calc(34vw*var(--size-modifier)), 34px);
    --h3--font-size    : clamp(22px, calc(30vw*var(--size-modifier)), 30px);

    color        : var(--wp--preset--color--primary);
    font-size    : 15px;
    margin-top   : clamp(66px, calc(146vw*var(--size-modifier)), 146px);
    margin-bottom: clamp(100px, calc(160vw*var(--size-modifier)), 160px);
}

.ts-dining-menu__header{
    background-color: var(--wp--preset--color--primary);
    text-align      : center;
    padding-top     : clamp(60px, calc(80vw*var(--size-modifier)), 80px);
    padding-bottom  : clamp(146px, calc(467vw*var(--size-modifier)), 457px);
    color           : var(--wp--preset--color--clear);
}

.ts-dining-menu__body{
    max-width    : calc(var(--wp--custom--width--default) - 115px * 2);
    margin-left  : auto;
    margin-right : auto;
    padding-left : var(--wp--custom--gap--big-page-padding);
    padding-right: var(--wp--custom--gap--big-page-padding);
    margin-top: calc( -1 * clamp(146px, calc(467vw*var(--size-modifier)), 457px));
}

.ts-dining-menu__media-item{
    display: none;
}

.ts-dining-menu__media-item.is-active{
    display: block;
}

.ts-dining-menu__media-image{
    aspect-ratio   : var(--wp--preset--aspect-ratio--venue);
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    object-position: center;
    display        : block;
    mask-image     : url(assets/images/mask-top.svg);
    mask-size      : 100% 100%;
    mask-repeat    : no-repeat;
    width          : calc(103.3%);
    margin-left    : -1.60%;
}

.ts-dining-menu__content{
    border-image-source: url(assets/images/mask-bottom.svg);
    border-style       : ridge;
    border-width       : 40px;
    border-image-slice : 40;
    border-image-repeat: repeat;
    border-top         : 0;
}

.ts-dining-menu__navigation{
    padding        : 24px 0;
    font-size      : clamp(14px, calc(20vw*var(--size-modifier)), 20px);
    margin-left    : auto;
    margin-right   : auto;
    font-weight    : 200;
}

.ts-dining-menu__navigation-select{
    list-style     : none;
    margin         : 0;
    text-transform : uppercase;
    display        : var(--ts-dining-menu--navigation-select--display, flex);
    gap            : clamp(35px, calc(70vw*var(--size-modifier)), 70px);
    align-items    : center;
    justify-content: center;
    padding-left   : 0;
}

.ts-dining-menu__navigation-selected-menu{
    display: none;
}

.ts-dining-menu__navigation-option{
    display    : block;
    padding    : 4px 16px;
    cursor     : pointer;
    transition : background-color 0.3s;
    font-weight: 200;
}

.ts-dining-menu__navigation-option.is-active{
    font-weight: 500;
}

.ts-dining-menu__navigation-option:hover{
    background-color: var(--wp--preset--color--hover);
}


.ts-dining-menu__menu-list{
    padding: clamp(25px, calc(70vw*var(--size-modifier)), 70px) clamp(1px, calc(85vw*var(--size-modifier)), 85px)  clamp(20px, calc(35vw*var(--size-modifier)), 35px) clamp(1px, calc(85vw*var(--size-modifier)), 85px);
}

.ts-dining-menu__menu-item{
    display              : none;
    grid-template-columns: 1fr;
    gap                  : 40px;
}

.ts-dining-menu__menu-item.is-active{
    display: grid;
}

.ts-dining-menu__menu-content{
    display       : flex;
    flex-direction: column;
}

.ts-dining-menu__menu-title{
    text-align: center;
}

.ts-dining-menu__menu-text{
    list-style-image: url('data:image/svg+xml,<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2197 0.5C12.2197 2.74448 14.0392 4.56404 16.2838 4.56404V5.31404C16.0549 5.31404 15.8305 5.33296 15.6119 5.36932V5.375H15.5787C13.6703 5.70886 12.2197 7.37416 12.2197 9.37826H11.4697C11.4697 7.70929 12.319 6.23867 13.6089 5.375H0V4.625H13.8005C12.4037 3.78232 11.4697 2.25022 11.4697 0.5H12.2197Z" fill="%23475C6B"/></svg>');
    margin-left     : auto;
    margin-right    : auto;
    text-transform  : uppercase;
    font-size       : clamp(14px, calc(20vw*var(--size-modifier)), 20px);
}

.ts-dining-menu__menu-text ul {
    margin-left: -50px;
}

.ts-dining-menu__menu-text ul li {
    padding-left : 4px;
    margin-bottom: 11px;
    margin-left  : 6px;
}

.ts-dining-menu__menu-text ul li:last-child {
    margin-bottom: 0;
}

@media(max-width:768px){
    .ts-dining-menu__navigation-select{
        list-style      : none;
        margin          : 0;
        padding         : var(--ts-dining-menu--navigation-select--padding, 0);
        text-transform  : uppercase;
        position        : absolute;
        z-index         : 1;
        display         : block;
        background-color: var(--wp--preset--color--clear);
        flex-direction  : column;
        max-height      : var(--ts-dining-menu--navigation-select--max-height, 0);
        transition      : all 0.5s ease-in-out;
        overflow        : hidden;
    }

    .ts-dining-menu__navigation-menu.is-open{
        --ts-dining-menu--navigation-select--max-height       : 250px;
        --ts-dining-menu__navigation-selected-arrow--transform: translateY(-25%) rotate(180deg);
        --ts-dining-menu--navigation-select--padding: 0 0 20px 0;
    }

    .ts-dining-menu__navigation-selected-menu{
        padding: 10px 30px 10px 15px;
        cursor : pointer;
        display: block;
    }

    .ts-dining-menu__navigation-selected-menu span{
        font-family   : var(--wp--preset--font-family--default-font);
        color         : var(--wp--preset--color--primary);
        font-size     : 14px;
        font-weight   : 500;
        text-transform: uppercase;
        display       : inline-block;
        position      : relative;
    }

    .ts-dining-menu__navigation-selected-menu span:after{
        content   : url('data:image/svg+xml,<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.60972 5.74707L0.391532 0.126978L8.82791 0.126979L4.60972 5.74707Z" fill="%23475C6B"/></svg>');
        display   : inline-block;
        position  : absolute;
        right     : -20px;
        top       : 50%;
        transform : var(--ts-dining-menu__navigation-selected-arrow--transform, translateY(-50%));
    }

    .ts-dining-menu__navigation-option.is-active{
        font-weight: 200;
    }

    .ts-dining-menu__menu-content,
    .ts-dining-menu__menu-actions{
        grid-template-columns: 1fr;
    }

    .ts-dining-menu__menu-title{
        grid-column:unset;
    }

    .ts-dining-menu__menu-text{
        list-style-image:url('data:image/svg+xml,<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.299 5.85616H0V5.07315H16.299V5.85616Z" fill="%23475C6B"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7577 0.766602C12.7577 3.10985 14.6572 5.00949 17.0006 5.00949V5.7925C14.2248 5.7925 11.9747 3.54228 11.9747 0.766602H12.7577Z" fill="%23475C6B"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.0006 5.7925C14.6573 5.7925 12.7577 7.6924 12.7577 10.0358H11.9747C11.9747 7.25994 14.2249 5.00949 17.0006 5.00949V5.7925Z" fill="%23475C6B"/></svg>');
    }

    .ts-dining-menu__navigation-label{
        display: none;
    }

    .ts-dining-menu__navigation{
        justify-content: start;
        margin-left: -10px;
    }

    .ts-dining-menu__menu-list{
        padding-left: 0;
        padding-right: 0;
    }

    .ts-dining-menu__menu-feature-list{
        margin-top: 10px;
    }

    .ts-dining-menu__menu-link-list,
    .ts-dining-menu__menu-cta{
        margin-top: 0;
    }

    .ts-dining-menu__menu-text ul {
        margin-left: 0;
        padding-inline-start:25px;
    }

    .ts-dining-menu__menu-text ul li {
        padding-left : 0px;
        margin-bottom: 6px;
    }

}

@media(max-width:768px){
    .ts-dining-menu__menu-title{
        text-align  : left;
        padding-left: 30px;
    }

    .ts-dining-menu__menu-text {
        margin-left: 0;
    }

    .ts-dining-menu__navigation-select{
        gap:0;
    }
}