/* 0.0.7fg */

:root {
	--metaThemeColor: #9f2e25;
	--metaThemeColorDarkMode: undefined;
	--metaBackgroundColor: undefined;
	--siteBackgroundColor: undefined;
	accent-color: var(--metaThemeColor);
}

html, body {
	scrollbar-3dlight-color: #9f2e25;
	scrollbar-arrow-color: #9f2e25;
	scrollbar-base-color: #9f2e25;
	scrollbar-darkshadow-color: #9f2e25;
	scrollbar-shadow-color: #9f2e25;
	-ms-scrollbar-3dlight-color: #9f2e25;
	-ms-scrollbar-arrow-color: #9f2e25;
	-ms-scrollbar-base-color: #9f2e25;
	-ms-scrollbar-darkshadow-color: #9f2e25;
	-ms-scrollbar-shadow-color: #9f2e25;
}

::-webkit-scrollbar-button {
	background-color: #9f2e25;
}

::-webkit-scrollbar-thumb {
	background-color: #9f2e25;
}

::-webkit-scrollbar-corner {
	background-color: #9f2e25;
}

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

@font-face {
    font-family: 'Nexa Slab xBold';
    src: url('/fonts/NexaSlabxBold.woff2') format('woff2'),
        url('/fonts/NexaSlabxBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Knockout';
    src: url('/fonts/Knockout-HTF67-FullBantamwt.woff2') format('woff2'),
        url('/fonts/Knockout-HTF67-FullBantamwt.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ostrich Sans';
    src: url('/fonts/OstrichSans-Bold.woff2') format('woff2'),
        url('/fonts/OstrichSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
	--valentinesBorder: #ffc0cb;
    --valentinesBackground: #cd5c5c;

    --MPRed: #9f2e25;
    --MPYellow: #dbb347;
    --MPGreen: #009a65;
    --MPBlack: #000000;
    --MPWhite: #ffffff;

    --MPEggShell: #edeadd;
    --MPWhite: #f9f9f7;
    --MPRed: #9f2e25ff;
    --MPYellow: #dbb345ff;
    --MPGreen: #019866ff;
    --MPBlack: #231f20ff;

    --darkTextColor: var(--MPBlack);
    --lightTextColor: var(--MPWhite);
    --lightmodeBackgroundColor: var(--MPWhite);
    --BGColor: var(--MPRed);
}

html,
body {
    scrollbar-color: var(--MPRed) var(--MPEggShell);
}

html {
    background-color: var(--MPEggShell);
}

body {
    color: var(--darkTextColor);
    background-color: var(--MPEggShell);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    font-family: 'Chivo', sans-serif;
}

a {
    color: var(--MPRed);
}

header > nav > #top-nav,
.home-title,
.parallax-darker .home-title,
.info-box h5,
#menu-details > summary,
main details summary,
#our-menu > h2,
.button {
    font-family: "Nexa Slab xBold", sans-serif;
}

.img-slider,
.widget-background:not([style],[src], picture) {
    background-color: var(--MPWhite);
}

.mediabox {
    box-shadow: 10px 10px 1px var(--MPRed);
}

body > header {
    padding-top: 1vw;
}

header > #logo {
    min-height: 100px;
    max-height: 300px;
    width: 50vh;
}

body > header > nav {
    padding-top: 8px;
    padding-bottom: 5px;
}

header > nav > #top-nav > li > a {
    background-color: transparent;
    border-color: transparent;
    color: var(--MPRed);
    border-radius: 0;
    border-width: 0;
    border-bottom-width: 0px;
    border-bottom-width: 0.4em;
    padding-bottom: 0;
    padding-left: 0.4em;
    padding-right: 0.4em; 
}

header > nav > #top-nav > li > a[aria-current="page"] {
  border-color: var(--MPYellow);
  border-width: 0;
  border-bottom-width: 0px;
  border-bottom-width: 0.4em;
  border-radius: 0;
  padding-bottom: 0;
  padding-left: 0.4em;
  padding-right: 0.4em; 
}

ul.social-links {
    padding: 0;
}

section .button,
body > footer .button,
ul.social-links > li[class^="social-"] > a {
    background-color: var(--MPRed);
    border-color: var(--MPRed);
    color: var(--MPWhite);
}

header > nav > #top-nav > li > a:hover,
header > nav > #top-nav > li > a:focus {
    background-image: none;
    background-color: ;
}

.widget-background > b,
section#food-menu details#menu-details .widget-background b,
section#food-menu details#menu-details[open] .widget-background b,
header > .img-slider {
    background-color: var(--MPEggShell);
    background-color: color-mix(in oklab, var(--MPEggShell) 60%, #000000);
    mask-image: url(/diamond-bg-pattern.svg); // Replace this with the one from the PDF
    mask-repeat: repeat;
    mask-size: 100px;
    mask-position: center;
    opacity: 0.08;
}

.home-title {
    color: var(--MPRed);
    font-weight: bold;
}

[data-section="specials"] .home-title {
    font-size: 4em;
}

.home-title::after {
    background-color: currentColor;
    mask-image: url(/lines.svg);
    mask-repeat: no-repeat;
    mask-size: 50% 100%;
    mask-position: center;
    height: 40px;
    width: 50%;
    position: relative;
    bottom: auto;
    display: block;
    left: 25%;
    display: none;
}

#specials-img-slider::before,
#specials-img-slider::after {
    background-color: var(--MPYellow);
    mask-image: url(/lines.svg);
    mask-repeat: repeat;
    mask-size: 50% 100%;
    mask-position: center;
    height: 40px;
    width: 100%;
    position: relative;
    bottom: auto;
    display: block;
    left: 0;
    display: none;
}

[data-section="address"] > .alignr > address .find-us-box {
    letter-spacing: 2px;
    font-kerning: none;
    text-transform: uppercase;
}

[data-section="address"] > .alignr > address .find-us-box .icon {
    display: none;
}

header #menu-post,
.home-title::before,
#footer-logo {
    display: none;
}

address#third-parties {
    text-align: left;
}

#address-and-contact {
    text-align: center;
}

#address-and-contact span:has(.icon) {
    display: none;
}

#address-and-contact [href="https://marketplacegrill.com/careers.html#careers"] {
    display: none;
}

body > footer .col {
    word-break: normal;
}

#hours-and-parking,
#hours-and-parking .hours {
    text-align: right;
}

.hours .days .icon {
    display: none;
}

[data-section="about"],
[data-section="about"] .widget-background,
[data-section="about"] .widget-background > b,
[data-section="about"] section#food-menu details#menu-details .widget-background b {
    background-color: var(--MPEggShell);
}

.deal-box {
    max-width: 80%;
}

.deal-box h5 {
    color: var(--MPRed);
    font-weight: bold;
}

.deal-box .small-feature-icon {
    color: var(--MPRed);
    font-weight: bold;
}

.deal-box .deal .small-feature-icon svg.icon,
.deal-box .deal .small-feature-icon svg.icon path {
    width: 4em;
    height: 4em;
}

.specials-box,
#FAQs .info-box,
#careers .info-box {
    background-color: var(--MPEggShell);
    padding: 1em;
    border-radius: 40px;

    text-align: center;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: flex-start;
    row-gap: 10px;
    position: relative;

    margin-bottom: 2em;
}

/*
.home-title,
.parallax-darker .home-title,
.info-box h5,
#menu-details > summary {
    text-transform: none;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}
*/



section#food-menu details#menu-details .widget-background {
    opacity: 1;
}

section#food-menu details#menu-details .menu-bg,
section#food-menu details#menu-details .widget-background {
    background-color: transparent;
}

section#food-menu details#menu-details[open] .widget-background b {
    //mask-image: none;
    background-color: var(--MPGreen);
    background-color: var(--MPBlack);
}

section#food-menu details#menu-details > summary {
    color: var(--lightTextColor);
    background-color: var(--metaThemeColor);
}

#our-menu {
    margin: 0;
}

#menu-details #our-menu > h2 {
    color: var(--darkTextColor);
}

main details {
    background-color: transparent;
    background-color: var(--metaThemeColor);
}

main details[open] {
    color: var(--metaThemeColor);
    background-color: var(--MPWhite);
}

main details summary {

}

/*

.home-title,
#our-menu h2,
a {
    color: var(--MPYellow);
}

.menu-section .menu-post-desc {
    color: var(--lightTextColor);
}

body > header {
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    align-items: baseline;
    background-color: var(--metaThemeColor);

    contain: content;
	container-name: header;
	container-type: inline-size;

    overflow-x: unset;
}

header > #logo {
    text-decoration: none;
    max-width: 100%;
    box-shadow: none;
    filter: none;
    margin: 0;
    padding: 0;
    padding-top: calc(8px + 4vw);
    order: 1;

    //width: 43%;
    //margin-left: 5%;

    width: 100%;

    container-type: inline-size;
    container-name: logo;
}

header > #logo > svg {
    display: inline-block;
    width: auto;
    height: 12em;
    min-height: 0px;
    margin-right: 1em;
}

header #top-note.button {
    order: 4;
    margin-bottom: 20px;
}

body > header > #navigation {
    order: 3;
    width: 100%;
    padding: 0;
}

body > header > .social-links {
    order: 5;
    width: 100%;
    flex-grow: 5;
    margin: 0;
    margin-bottom: 10px;
}

header #menu-post,
header > .img-slider {
    display: none;
}

.button {
    border-radius: 8px;
    border-style: double;
    color: var(--lightTextColor);
}

section .button, body > footer .button {
    background-color: var(--BGColor);
}

header > nav > #top-nav > li > a {
    border-color: color-mix(in oklab, var(--MPYellow) 10%, transparent);
}

header > nav > #top-nav > li > a:hover,
header > nav > #top-nav > li > a:focus {
    background-color: var(--MPRed);
    background-image: none;
    color: var(--MPYellow);
    border-color: currentColor;
}

.button[data-resy="true"] svg.icon[data-filename="resy"], .button[data-resy="true"] svg.icon[data-filename="resy"] path {
    background-color: var(--MPYellow);
    border-color: var(--MPYellow);
    border-width: 0.1em;
    border-style: solid;
}

[data-section="specials"] .home-title {
    margin: 0.3em;
    font-size: 3em;
}

.home-title::before {
    display: none;
}

.home-title::after {
    bottom: 0.03em;
    background-color: transparent;
    border-color: currentColor;
    border-width: 0;
}

.parallax-darker .home-title::before, .parallax-darker .home-title::after {
    background-color: transparent;
}

[data-section="about"] .widget-background:not([style],[src]), [data-section="gallery"] .widget-background:not([style],[src]) {
    //background-color: var(--MPYellow);
}

.widget-background, .widget-background:not([style],[src]) {
    background-color: var(--BGColor);
}

main details > summary {
    color: var(--lightTextColor);
    background-color: var(--metaThemeColor);
    border-width: 0;
    border-radius: 8px;
}

main details[open] {
    // border-width: 0;
}

main details[open] > summary {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

main details .content,
main details > p {
    
    border-style: double;
    border-color: var(--MPYellow);
    border-top-style: none;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-width: 3px;
    background-color: var(--MPYellow);

    border-color: var(--metaThemeColor);
}

main details > p {
    border-bottom-style: none;
    border-radius: 0;
}

ul.social-links > li[class^="social-"] > a {
    background-color: var(--MPWhite);
}

@supports ( (--a: 0)) {
    ul.social-links > li[class^="social-"] > a:hover,
    ul.social-links > li[class^="social-"] > a:focus {
        border-color: var(--MPYellow)
    }
}

#footer-logo h1 {
    font-size: 4em;
    margin: 0;
}

#footer-logo h2 {
    margin: 0;
}

#footer-logo > svg.lola-face {
    width: min(300px, 10vw, 50%);
}

#footer-logo > svg.lolas-name {
    width: auto;
    min-height: 1em;
    height: 6em;
}

#footer-logo > svg.lolas-name path,
#footer-logo > svg.lolas-name polygon {
    fill: currentColor;
}

header span#top-note {
    order: 3;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--MPYellow);
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    height: auto;

}

@supports selector(::details-content) {
    main details .content,
    main details > p {
        padding-left: 2vw;
	    padding-right: 2vw;
        width: calc(100% - 4vw);
        
        border-style: double;
        border-top-style: none;
        border-radius: 0;
        border-width: 0;
        background-color: transparent;

        border-color: transparent;
    }

    main details::details-content,
    .detailscontenttest {
        width: calc(100% - 6px);
        border-style: double;
        border-color: var(--MPRed);
        border-top-style: none;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        background-color: var(--MPRed);
        color: var(--lightTextColor);

        border-width: 0px;
        border-color: var(--metaThemeColor);
    }

    main details[open]::details-content,
    .detailscontenttest {
        border-width: 3px;
        border-color: var(--metaThemeColor);
    }
}

body > footer {
    border-top-width: 0;
    padding-top: 10px;
}

body > footer, body > footer > .widget-background, body > footer > .widget-background:not([style],[src]) {
    color: var(--lightTextColor);
    background-color: var(--metaThemeColor);
}

body > footer a {
    color: var(--lightTextColor);
}

body > footer > .widget-background > b {
    background-color: var(--MPYellow);
    opacity: 0.1;
}

.copyright {
    color: var(--lightTextColor);
}

#events .info-box {
    display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;

    border-radius: 8px;
    border-style: double;
    border-width: 3px;
    border-color: var(--MPYellow);
    padding: 18px;
}
*/

/*
DoorDash
*/

div[class^="storefront-sdk-emotion-"] #sf-floating-button {
	border-color: var(--lightTextColor);
    border-width: 2px;
    border-style: solid;

    border-width: 4px;
    border-style: double;

    background-color: var(--MPRed) !important;
}

/*
Valentines Stuff
*/

header #top-note[data-event="valentines"] {
    background-color: var(--valentinesBackground);
    border-color: var(--valentinesBorder);
    position: relative;
}

header #top-note[data-event="valentines"]:hover, header #top-note[data-event="valentines"]:focus {
    border-color: color-mix(in srgb, var(--valentinesBorder) 50%, transparent);
    background-color: color-mix(in srgb, var(--valentinesBackground) 50%, transparent);
}

header #top-note[data-event="valentines"]::before, header #top-note[data-event="valentines"]::after {
    content: "💝";
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
    font-size: 2em;
    position: absolute;
    top: -0.1em;
}

header #top-note[data-event="valentines"]::before {
    left: -0.5em;
}

header #top-note[data-event="valentines"]::after {
    right: -0.5em;
}

/*
	Animationsz
*/
@media not (prefers-reduced-motion: reduce) {
    main details > summary {
        transition-property: color, background-color, border, transform, border-radius;
		transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0s;
        transition-delay: 0s, 0s, 0s, 0s, 0.5s;
		transition-timing-function: ease-in-out;
    }

    main details[open] > summary {
        transition-property: color, background-color, border, transform, border-radius;
		transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0s;
        transition-delay: 0s, 0s, 0s, 0s, 0s;
		transition-timing-function: ease-in-out;
    }

    section#food-menu details#menu-details .widget-background {
        transition-property: background-color, transform;
		transition-duration: 0.5s, 0.5s;
		transition-timing-function: ease-in-out;
    }

    @supports selector(::details-content) {
        @starting-style {
            [open]::details-content, .detailscontenttest {
                display: block;
                height: 0px;
            }
        }

        ::details-content, .detailscontenttest {
            transition-behavior: allow-discrete;
            transition-property: height, display, border-width;
            transition-duration: 0.5s, 0.5s, 0s;
            transition-delay: 0s, 0s, 0.5s;
            transition-timing-function: ease;
        }

        [open]::details-content, .detailscontenttest {
            transition-behavior: allow-discrete;
            transition-property: height, display, border-width;
            transition-duration: 0.5s, 0.5s, 0s;
            transition-delay: 0s, 0s, 0s;
            transition-timing-function: ease;
        }
    }

};