/* FONTS */
@font-face {
    font-family: 'SimonMono';
    src: url('../fonts/SimonMono-Regular.woff2') format('woff2'),
    url('../fonts/SimonMono-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Phaser';
    src: url('../fonts/Phaser-Bold.woff2') format('woff2'),
    url('../fonts/Phaser-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Override Bootstrap's scroll-behavior on mobile to prevent snap-back */
@media (max-width: 991px) {
    html, :root {
        scroll-behavior: auto !important;
    }
}

a {
 cursor: pointer;
}

:root {
    --bs-primary: #FF5321;
    --bs-primary-rgb: 71, 0, 55;
    --bs-secondary: #FFD328;
    --bs-secondary-rgb: 255, 211, 40;
    --bs-third: #E76DFF;
    --bs-third-rgb: 231, 109, 255;
    --bs-orange: #FF5321;
    --bs-beige: #F4E3D3;
    --bs-purple: #470037;
    --bs-body-bg: #fff6ec;
    --bs-body-font-family: 'SimonMono', serif;
    --bs-body-font-weight: 400;
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--bs-primary);
    --bs-body-color-rgb: var(--bs-primary-rgb);
    --bs-border-width: 0;
    --bs-border-radius: 0;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-decoration: underline;
    --bs-link-hover-color: var(--bs-primary);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-gutter-x: 1.5rem;
}

html, body {
    background-color: #FF5321;
}

.btn {
    --bs-btn-font-family: 'SimonMono', serif;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 400;
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 30px;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-border-radius: 50px;
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-secondary);
}

.text-purple {
    color: var(--bs-purple);
}

.text-beige {
    color: var(--bs-beige);
}

.bg-beige {
    background: var(--bs-beige);
}

.h4 {
    font-family: 'Phaser', serif;
    font-weight: 700;
}

.h2-xl {
    font-family: 'Phaser', serif;
    font-weight: 700;
    font-size: clamp(3rem, 0.8286rem + 10.8571vw, 12.5rem);
    line-height: 0.85;
}

@media(max-width:768px) {
    .h2-xl, .h2xll {
        font-size: 5rem;
    }
}

.h2-xll {
    font-family: 'Phaser', serif;
    font-weight: 700;
    font-size: clamp(2.625rem, 1.1107rem + 7.5714vw, 9.25rem);
    line-height: 0.85;
}

.text-small {
    font-size: 14px;
}

main {
    position: relative;
    overflow: hidden;
}
@media(min-width: 992px) {
    .opacity-lg-100 {
        opacity: 1 !important;
    }
}

/**HEADER**/
header .logo {
    top: 0;
    right: calc(var(--bs-gutter-x) * .5);
    max-width: 190px;
    pointer-events: none;
}

@media(min-width: 992px) {
    header .logo {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}


/**HERO**/
.hero {
    background: no-repeat;
    height: 100vh;
    max-height: 1000px;
    width: 100%;
    background-size: cover;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-bottom: calc(var(--bs-gutter-x) * .5);
}

.hero div:first-child {
    margin-top: 100px;
}

.hero .heart-graphic {
    left: 0;
    bottom: 5%;
}

@media (min-width: 992px) {
    .hero .heart-graphic {
        left: auto;
        right: 15%;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 95vh;
    }
}

.hero .hungry-graphic {
    width: calc(100% - 32px);
}

@media (min-width: 992px) {
    .hero .hungry-graphic {
        width: auto;
    }
}

.hero .framesvg-wrapper {
    position: absolute;
    max-width: 216px; /* optional: limit width */
    width: 100%;
    padding-bottom: 24px;
    bottom: calc(var(--bs-gutter-x) * 5);
    left: calc(var(--bs-gutter-x) * 5);
}

.hero .framesvg-wrapper svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero .framesvg-content {
    position: relative; /* stays above the SVG */
    padding: 24px;
    color: var(--bs-secondary);
    top: 32px;
}

.pasta-graphic {
    top: 5vw;
    right: calc(var(--bs-gutter-x) * 5);
    z-index: 2;
}

@media(max-width: 768px) {
    .pasta-graphic {
        top: 35vh
    }
}

/**PLATE**/
.plate-graphic {
    top: 25vh; /* Mobile: 20vh */
}

@media(min-width: 992px) {
    .plate-graphic {
        top: 30vh; /* Desktop: 25vh */
    }
}

.plate-graphic img {
    max-width: calc(50vw - 48px);
}

@media(max-width: 768px) {
    .plate-graphic img {
        max-width: calc(100vw - 48px);
        width: 90vw !important;
    }
}

/** MENU BADGE **/
.badge {
    position: relative;
    --bs-badge-padding-y: 0;
    --bs-badge-font-size: 10px;
}

.badge > span {
    display: inline-block;
    background-color: var(--bs-primary);
    padding: 8px 4px;
}

.badge.badge-secondary:after,
.badge.badge-secondary:before {
    background-image: url('data:image/svg+xml,<svg width="60.5" height="47" viewBox="0 0 60.5 47" fill="none" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;"><path d="M117.95 13.3861V8.20289H115.358V5.61126H112.766V3.01972H107.583V0.428101H13.459V3.01972H8.27576V5.61126H5.68414V8.20289H3.0926V13.386H0.500977V33.6135H3.0926V38.7967H5.68414V41.3883H8.27576V43.9799H13.4589V46.5716H107.583V43.9799H112.766V41.3883H115.358V38.7967H117.95V33.6135H120.541V13.3861H117.95Z" fill="%23FFD328"/></svg>');
}

.badge.badge-third:after,
.badge.badge-third:before {
    background-image: url('data:image/svg+xml,<svg width="60.5" height="47" viewBox="0 0 60.5 47" fill="none" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;"><path d="M117.95 13.3861V8.20289H115.358V5.61126H112.766V3.01972H107.583V0.428101H13.459V3.01972H8.27576V5.61126H5.68414V8.20289H3.0926V13.386H0.500977V33.6135H3.0926V38.7967H5.68414V41.3883H8.27576V43.9799H13.4589V46.5716H107.583V43.9799H112.766V41.3883H115.358V38.7967H117.95V33.6135H120.541V13.3861H117.95Z" fill="%23E76DFF"/></svg>');
}

.badge:after, .badge:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.badge:after {
    left: auto;
    right: 0;
    transform: rotate(180deg);
}

.text-bg-third {
    background-color: var(--bs-third) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.font-2 {
    font-family: 'Phaser', serif;
    font-weight: 700;
}

.text-18 {
    font-size: 18px;
}

.text-28 {
    font-size: 28px;
}

.text-22 {
    font-size: 22px;
}

ul.list-icon li::before {
    content: '';
    width: 67px;
    height: 67px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='70' height='67' viewBox='0 0 70 67' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7305 0.639648V5.07715H52.6045V9.51367H57.041V13.9512H61.4785V22.8252H65.916V43.7305H61.4785V52.6045H57.041V57.041H52.6045V61.4785H43.7305V65.916H22.8252V61.4785H13.9512V57.041H9.51367V52.6045H5.07715V43.7305H0.639648V22.8252H5.07715V13.9512H9.51367V9.51367H13.9512V5.07715H22.8252V0.639648H43.7305Z' fill='%23470037' stroke='%23FFD328' stroke-width='1.27991'/%3E%3Cpath d='M44.2718 23.0381H41.8468V25.5068H39.4058V27.9756H36.9807V30.4606H34.5397V32.9293H32.1147V35.398H29.6896V32.9293H27.2486V30.4606H24.8236V32.9293H22.3985V35.398H24.8236V37.883H27.2486V40.3518H29.6896V42.8368H32.1147V40.3518H34.5397V37.883H36.9807V35.398H39.4058V32.9293H41.8468V30.4606H44.2718V27.9756H46.6969V25.5068H44.2718V23.0381Z' fill='%23FFD328'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    flex-shrink: 0;
}

/**FOOTER**/
footer {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media(min-width: 992px) {
    footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }

}

@media(min-width: 992px) {
    .modal-body {
        --bs-modal-padding: 24px;
    }
}

.modal.from-bottom.fade .modal-dialog { transform: translateY(100vh); transition: transform .5s ease-out; }
.modal.from-bottom.show .modal-dialog { transform: translateY(10vh); }

/* Menu dish spin on hover */
.menu-card-item:hover .dish-image {
    animation: spin-once 0.5s ease-out forwards;
}

@keyframes spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}