@import url('https://fonts.googleapis.com/css2?family=Courgette&family=PT+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@font-face {font-family: "Geared Slab"; src: url("https://db.onlinewebfonts.com/t/c36a6d41b8f196a940ad43737e21be54.eot");}

:root {
    --primary-color: #00738a;
    --secondary-color: #00738aad;
    --bg-color: #dfe8ee;
    --overlay-color: rgba(0, 0, 0, 20%);
    --featured-item-section-bg: linear-gradient(to bottom, #00738a, #00738aec);
    --button-hover-color: #e41b13;
    --button-border-radius: 0;
    --body-font: PT Serif;
    --heading-font: Courgette;
    /* OPTIONAL */
    --text-color: #111f44;
    --footer-bg: var(--primary-color);
    --menu-item-color: var(--primary-color);
}

/* -------------------- Base -------------------- */
body {
    background: var(--bg-color);
    font-family: var(--body-font);
    color: var(--text-color);
}

/* -------------------- Typography -------------------- */
.heading,
.page-title {
    font-family: var(--heading-font);
}

/* .menu .items .name,
section.featured-items .info .name {
} */

/* -------------------- Buttons, Links, Icons -------------------- */
.button {
    border-radius: var(--button-border-radius) !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.button:hover {
    color: #FFFFFF !important;
    background-color: var(--button-hover-color) !important;
    border-color: var(--button-hover-color) !important;
}

.link:hover {
    text-decoration: underline;
}

/* -------------------- Navbar -------------------- */
.navbar,
.navbar .content .mobile-menu {
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-weight: 400;
}

.navbar .nav-item .link:hover {
    text-decoration: none !important;
    border-bottom: 4px solid #fff !important;
}

.navbar .restaurant-store-link {
    font-family: var(--body-font);
}

.custom-navbar .order-now-button,
.navbar .order-now-button {
    background-color: var(--secondary-color) !important;
    color: #ffffff !important;
}

.custom-navbar .book-a-table-button,
.navbar .book-a-table-button {
    border: 1px solid #ffffff !important;
}

.navbar .heading .restaurant-store-link, 
.custom-navbar .heading .restaurant-store-link  {
        font-size: 20px !important;
}

.navbar .nav-items a,
.custom-navbar .nav-items a {
    font-size: 17px;
}

/* -------------------- Footer -------------------- */
footer {
    background: var(--footer-bg);
}

footer .order-now-button {
    background-color: var(--secondary-color) !important;
    color: inherit !important;
}

/* -------------------- Popup - Custom Message and Loyalty Program -------------------- */
.website-popup-modal .dismiss-button path {
    stroke: var(--secondary-color);
}

.website-popup-modal .button {
    background-color: var(--primary-color) !important;
    color: inherit !important;
}

/* -------------------- Common - Page -------------------- */
.collection-type-button,
.collection-types button.collection-type {
    border: 1px solid var(--primary-color) !important;
    background-color: #00738a;
    color: inherit;
}

.collection-type-button.selected {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* -------------------- Home Page -------------------- */
/*** Hero section */
section.hero .overlay {
    background: var(--overlay-color);
    backdrop-filter: none;
}

section.hero .button {
    background-color: #f95752 !important;
    color: #FFFFFF !important;

}

section.hero .button:hover,
.navbar .content .ctas .cta .order-now-button:hover {
    color: #FFFFFF !important;
    background-color: var(--button-hover-color) !important;
    border-color: var(--button-hover-color) !important;
}

/*** Covid Safe section */
section.covid-safe .guideline path {
    fill: var(--primary-color);
}

section.covid-safe .content .message {
    font-size: 18px;
}

/*** Featured Item section */
section.featured-items {
    background: var(--featured-item-section-bg);
}

section.featured-items .heading {
    color: #FFFFFF;
}

section.featured-items .view-menu-button {
    background-color: var(--secondary-color) !important;
}

/*** Whats New section */

/*** Loyalty Card & Coupon sections */
section.loyalty-coupon .promo {
    background: #ffffff;
}

/*** Special Note section */
section.special-note {
    background-color: var(--secondary-color);
    background-image: var(--special-note-bg-image);
    background-size: cover;
}

/* -------------------- Menu Page -------------------- */
.menu-page .items .name {
    color: var(--menu-item-color);
}

.menu .categories {
    margin-top: 90px;
}

/* If Salad changes order - change the number as well*/
.menu .content .categories .category:nth-child(11) {
    position: relative;

}

.menu .content .categories .category:nth-child(11) .items {
    padding-top: 335px !important;
}

.menu .content .categories .category:nth-child(11) .heading:after {
    content: "";
    width: 869px;
    height: 335px;
    background-image: url(https://restoplus-prod.imgix.net/users/k5NhU6tQtrWZIOcQ2VZHQTxT9og1/images/custom_themes/fish-out-of-water-menu-salad.jpg);
    top: 25px;
    left: 0px;
    display: inline-block;
    position: absolute;
    background-size: cover;
    mix-blend-mode: multiply;
    border-radius: 8px;
    margin-top: 40px;
}

/* Remove logo only on hero banner */
section.hero .content .overlay .imgix img {
    display: none;
}


@media (min-width: 768px) {
    section.hero .overlay {
        display: none !important;
    }

    .menu .categories {
        margin-top: 70px;
    }
}

@media (max-width: 768px) {
    section.hero .content .overlay {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .menu .content .categories .category:nth-child(11) .heading:after {
        position: unset;
        width: 300px;
        height: 300px;
        background-size: 300px;
        background-image: url(https://restoplus-prod.imgix.net/users/k5NhU6tQtrWZIOcQ2VZHQTxT9og1/images/custom_themes/fish-out-of-water-menu-salad-mobile.png);
    }

    .menu .content .categories .category:nth-child(11) .items {
        padding-top: 0px !important;
    }
}


.collection-types button.collection-type-button {
    background: transparent;
}

.collection-types button.collection-type-button.selected {
    background-color: var(--primary-color);
}

section.hero .content .overlay .imgix img {
    display: none;
}
section.covid-safe {
    padding: 0px;
}
section.covid-safe .guidelines {
    display: none !important;
}
section.covid-safe img {
    opacity: 0;
}

/* update font */
p {
    font-size: 20px;
}

section.covid-safe .info .message {
    font-size: 22px;
}

/**
 * Hide collection type buttons in Trading Hours section 
 * Replace with image
 */
.trading-hours.section .content .collection-types li{
    display: none;
}

.trading-hours.section .content .collection-types {
    grid-template-columns: minmax(100%, 1280px);
    justify-items: center;
}

.trading-hours.section .content .collection-types::before {
     position: absolute;
    background-image: url('https://restoplus-prod.imgix.net/users/k5NhU6tQtrWZIOcQ2VZHQTxT9og1/images/custom_themes/fish-out-of-water-open-public-holidays.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    display: block;
    content: '';
    max-width: 700px !important;
    max-height: 500px !important;
    width: 100%;
    height: 100%;
}

.collection-type-schedule {
    margin-top: 400px;
}

/* Update navbar - remove More */
@media (min-width: 769px) {
    .custom-navbar .content {
        padding: 0 50px;
        display: flex;
        justify-content: space-between;
    }

    .custom-navbar .content nav .dropdown >.link {
        display: none !important;
        pointer-events: none;
    }

    .custom-navbar .content nav .dropdown >.more:hover {
        display: unset !important;
    }

    .custom-navbar .content nav .dropdown-content {
        display: flex;
        position: unset;
        min-width: unset;
        align-items: center;
        justify-content: unset;
        height: 100%;
    }
    
    .custom-navbar .content nav .dropdown:hover .dropdown-content {
        display: flex;
    }
}

@media (max-width: 768px) {

    .custom-navbar .content {
        padding: 0 20px;
    }


    /* home page about-us */

    section.about-us {
        padding: 50px 0;
    }

    section.about-us .content {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    section.about-us .content .info {
        right: unset;
        width: 100%;
    }

    section.about-us .content .image {
        width: 100%;
    }

    .collection-type-schedule {
        margin-top: 200px;
    }

    .trading-hours.section .content .collection-types::before {
        max-height: 329px !important;
    }

    /* show 2 photos per row*/
    section.gallery .content .photos {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
        margin-top: 44px;
        margin-bottom: 20px;
        gap: 10px;
    }
}

@media (max-width: 375px) {
    /* change style of hero button */
    section.hero .button {
        background-color: #f95752 !important;
        border: unset !important;
        font-weight: 700 !important;
        font-family: sans-serif;
        margin-bottom: 90px;
        padding: 10px 16px;
        color: #ededed !important;
    }

        /* show 2 photos per row*/
    section.gallery .content .photos {
        display: grid;
        margin-top: 44px;
        margin-bottom: 20px;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .section.hero .content .overlay .ctas .cta .order-now-button {
        background-color: var(--secondary-color) !important;
        color: #ffffff !important;
    }

    /* center menu image */
    .menu .categories .category .items .show-image {
    grid-gap: 8px 16px;
    grid-template-columns: 290px;
    grid-template-areas:
        "image"
        "name"
        "description"
        "price";
    justify-self: center;
    }

    .menu h2 {
        text-align: center;
    }

}

/* Hide delivery areas */
section.delivery-areas {
    display: none;
}

/* -------------------- Custom Page -------------------- */
.custom-page {
    max-width: 100%;
    display: grid;
    justify-items: center;
    color: #FFFFFF !important;
    margin: unset !important;
    background-color: var(--bg-color);
}

.catering-page {
    padding: unset;
}

/* Images */
.custom-page img {
    max-width: 1280px;
    margin: 40px auto;
    width: 100%;
    height: auto;
}

.custom-page .next-page {
    margin-top: unset;
}

/* Buttons - can use var(--primary-color) for BG */
.custom-page .button {
    background-color: #030102;
    padding: 8px 16px;
}

/* Typography - Page title */
.custom-page h1 {
    font-size: 56px !important;
    margin-top: 120px;
    margin-bottom: 24px;
    text-align: center;
    color: #000000;
}

/* Typography - Subheadings */
.custom-page h2,
.custom-page h3,
.custom-page h4 {
    margin-top: 25px;
    margin-bottom: 18px;
    color: #000000;
    font-weight: 700;
}

/* Typography - Body */
.custom-page p {
    text-align: center;
    max-width: 900px;
}

.custom-page a:link,
.custom-page a:visited,
.custom-page a:focus {
    text-decoration: none;
    color: #E73232;
    font-size: 24px;
    line-height: 28px;
}

.custom-page .send-us-a-message-label {
    font-size: 24px;
    line-height: 28px;
    margin-top: 30px;
    color: #000000;
}

.custom-page .menu-title {
    margin-top: 30px;
}

.custom-page .spacer-100 {
    height: 100px;
}

.custom-page .spacer-50 {
        height: 50px;
}

.custom-page .catering-image {
    max-width: 850px;
}

.custom-page body {
    background-color: #00000000 !important;
}

.custom-page iframe {
    border: 0px none;
    margin-left: -60px;
    height: 1130px;
    margin-top: -350px;
    width: 700px;
    padding: 50px;
}

.custom-page .map {
    display: none;
}

.custom-page div {
    border: unset !important;
}

.custom-page .menu-download {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 70px;
    gap: 40px;

}

.custom-page .menu-download .download {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 375px;
    height: 375px;
    position: relative;
}

.custom-page .menu-download .download .title {
    z-index: 1;
}

.custom-page .menu-download .download .link {
    z-index: 1;
    padding: 10px;
    border: 1px solid #FFFFFF50;
    border-radius: 12px;
    color: #FFFFFF;
    background-color: #E73232;
}

.custom-page .menu-download .download .background {
    background: #00000000 url(https://restoplus-prod.imgix.net/users/1yt6JcJpH5VTJQboWkZ115LapYC3/images/logos/sbfrv1awv.jpg);
    background-repeat: no-repeat;
    background-size:contain;   
    width: 375px;
    height: 375px;
    z-index: 0;
    position: absolute;
    opacity: .1;
    border-radius: 50%;
    box-shadow: rgb(0 16 29) 1.95px 1.95px 2.6px;
    border: 1px solid #FFFFFF !important;
}

/* Page title font on mobile */
@media (max-width: 768px) {
    custom-navbar .content {
        padding: 0 2px;
    }

    .custom-navbar .content .ctas {
        gap: unset;
    }

    .custom-page h1 {
        font-size: 32px !important;
    }

    .custom-page iframe {
        border: 0px none;
        height: 1130px;
        margin-top: -300px;
        max-width: 100%;
        width: 768px;
        margin-left: unset;
        padding: unset;

    }

    .custom-page .menu-download {
        grid-template-columns: 1fr;
        margin-top: 25px;
    }

    .custom-page .menu-download .download .link {
        font-size: 22px;
    }

    .custom-page .menu-download .download .background {
        /* border-radius: unset; */
        width: 325px;
        height: 325px;
    } 
}

@media (max-width: 375px) {
    .custom-page {
       padding: unset;
    }

    .custom-page p {
        margin: 30px 20px 0px 20px ;
    }
}


/* Burger of the month */

.featured-burger {
    padding: 40px 15px;
    color: #111f44 !important;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
    text-align: left;
}

.featured-burger img.banner {
    margin: 0px 0px 40px 0px;
}

.featured-burger p.introduction {
    text-align: left;
}

.featured-burger p.description {
    text-align: left;
}

.featured-burger h3 {
    font-weight: 500;
    color: #E32212;
    text-transform: uppercase;
}

.featured-burger .price {
    font-size: 24px;
    color: #da1f26;
    margin: 15px 0px 8px 0px;
    text-align: left;
    font-weight: 600;
}

.featured-burger .call-to-action {
    font-weight: 400;
    font-size: 20px;
    margin: unset;
    text-align: left;
}

p.introduction {
    margin: unset;
}

p.description {
    font-size: 16px!important;
    margin: unset;
}

.previous-burgers {
    padding: 0px 15px;
}

.previous-burgers .details {
    color: #111f44 !important;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
}

.previous-burgers > h3 {
    text-align: center;
    margin-bottom: 50px;
    font-weight: 500;
    border: 3px solid #111f44;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.previous-burgers .details h3{
    text-align: center !important;
    font-weight: 500;
    color: #E32212;
    margin: unset;
}

.burger-of-the-month .category-previous-year {
    display: none;
}


/** Burger of the month: desktop **/
@media (min-width: 769px) {
    .burger-of-the-month {
        display: grid;
        justify-items: center;
        grid-template-columns: 1fr 90px;
        grid-template-areas:
            'a b'
            'c x';
        column-gap: 50px;
    }

    .burger-of-the-month .category-previous-year {
        grid-area: b;
        padding-top: 50px;
        display: grid;
        grid-template-rows: min-content;
        justify-items: flex-start;
    }
    .category-previous-year h4 {
        font-size: 22px !important;
        margin-bottom: 12px!important;
    }
    .category-previous-year li a {
        font-size: 20px !important;
    }

    .featured-burger {
        max-width: 998px;
        width: 100%;
        display: grid;
        grid-template-areas: 
            'banner banner'
            'details burger';
        justify-items: center;
        align-items: center;
        grid-gap: 10px;
        grid-area: a;
    }

    .featured-burger img.banner {
        grid-area: banner;
        margin: 40px auto;
    }

    .featured-burger .details {
        grid-area: details;
    }

    .featured-burger img.burger {
        grid-area: burger;
    }

    .featured-burger h3 {
        font-size: 30px;
    }

    .featured-burger .price {
        font-size: 40px;
        color: #E12027;
    }

    .featured-burger .call-to-action {
        font-size: 24px;
    }

    .featured-burger p.introduction {
        font-size: 24px;
        font-weight: 400;
    }   

    .featured-burger p.description {
        font-size: 20px;
        font-weight: 300;
    }

    .previous-burgers {
        display: grid;
        justify-items: center;
        grid-area: c;
    }

    .previous-burgers > h3 {
        font-size: 36px !important;
        padding: 12px;
        font-weight: 600;
    }

    .previous-burgers .details h3 {
        font-size: 40px !important;
        font-weight: 300;
        color: #111f44 !important;
    }

    .previous-burgers ul li:nth-child(even) {
        max-width: 998px;
        width: 100%;
        display: grid;
        grid-template-areas: 'liburger lidetails';
        justify-items: center;
        align-items: center;
        border-top: 2px dashed #292e3a50;
        border-bottom: 1px dashed #292e3a50;
        padding: 12px;
    }

    .previous-burgers ul li .details h3,
    .previous-burgers ul li .details p {
        text-align: left !important;
        padding-left: 12px;    
    }

    .previous-burgers ul li .burger {
        grid-area: liburger;
    }

    .previous-burgers ul li .details {
        grid-area: lidetails;
    }

    .previous-burgers ul li:nth-child(odd) {
        max-width: 998px;
        width: 100%;
        display: grid;
        grid-template-areas: 'lidetails liburger';
        justify-items: center;
        align-items: center;
    }

    .previous-burgers ul li:nth-child(odd) .details h3,
    .previous-burgers ul li:nth-child(odd) .details p {
        text-align: right !important;
        padding-right: 12px;    
    }

    p.description {
        max-width: 1280px;
        width: 100%;
        display: grid;
    }
}

/** Gift Certificate **/
.custom-page .gift-certificate-page .gift-certificate-image {
    max-width: 700px;
}

/* -------------------- End of Custom Page -------------------- */

/* Update menu page order collection type button */
ul.collection-types {
    display: flex!important;
}

/* Custom menu page */
.custom-page .menu .content {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.custom-page .menu .content .disclaimer-text {
    color: var(--text-color);
}

.custom-page .menu .content li.item {
    color: var(--text-color);
}

.custom-page .menu .content p.description {
    text-align: left;
}

.custom-page .menu .content img {
    margin: unset;
}

/* remove disclaimer text */
section.menu .disclaimer-text {
    display: none;
}

/* hide starts at */
p.price span:first-child:not(.currency-symbol) {
    display: none;
}

/* end of cutom menu page */



/* Replace covid section with images*/
body section.covid-safe {
    padding-bottom: 0px;
    margin-top: 50px;
}

body section.covid-safe .guideline path {
    fill: var(--primary-color);
}

body section.covid-safe .content .image {
    display: none;
}

body section.covid-safe .content .info .heading,
body section.covid-safe .content .info .message{
    display: none;

}

body section.covid-safe .content {
    height: 329px;
    padding: unset;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    overflow: hidden;
}

body section.covid-safe .info {
    max-width: 1280px;
    width: 100%;
    padding: unset!important;
}

body section.covid-safe .content::before {
    position: absolute;
    background-image: url('https://restoplus-prod.imgix.net/users/k5NhU6tQtrWZIOcQ2VZHQTxT9og1/images/custom_themes/fish-out-of-water-covid-section-desktop.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    display: block;
    content: '';
    max-width: 1280px !important;
    max-height: 329px !important;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .custom-page h1 {
        font-size: 32px !important;
    }

    body section.covid-safe .content {
    height: 768px;
    margin-top: 120px;
    margin-bottom: 40px;
}

    /* covid section */
    body section.covid-safe .content::before {
        background-image: url('https://restoplus-prod.imgix.net/users/k5NhU6tQtrWZIOcQ2VZHQTxT9og1/images/custom_themes/fish-out-of-water-covid-section-mobile.jpg');
        max-width: 768px !important;
        max-height: 768px !important;
    }
}

@media (max-width: 500px) {
    .custom-page .download-menu .title {
        padding: 20px;
        text-align: center;
    }

    .custom-page .menu-download .download .link {
        font-size: 20px;
    }
}

@media (max-width: 375px) {
    body section.covid-safe .content {
        height: 375px;
        margin:0px;
    }
}
/* End of covid section */



/* select collection type in menu page */

.menu .collection-types {
    display: none !important;
}

/* end of update menu page order collection type button */

/* Website homepage layout */
section.hero {
    grid-area: hero;
}
section.about-us {
    grid-area: aboutUs;
}
section.featured-items {
    grid-area: featuredItems;
}
section.whats-new {
    grid-area: whatsNew;
}
section.special-note {
    grid-area: specialNote;
}
main {
    display: grid;
    grid-template-areas: 
    'hero'
    'whatsNew'
    'aboutUs'
    'featuredItems'
    'specialNote';
    grid-template-columns: 100%;
}

/* Hide pwa if contact-us-page */
/* add if using iframe in custom pages */
body:has(.contact-us) .pwa-prompt {
    display: none;
}