/* 
    default, override via theme css - only need to include items youre overriding
    needs to be used for both normal and mobile css
    newer footprint, "responsive" (locations/menu) doesnt use mobile css overrides, only "desktop" overrides
*/
:root {
    /* content */
    --content-background: #ffffff; /* main body/content background color, text can sit on top of this. not fully implemented across kc, right now themes force this via css queries */
    /* NEW NEW NEW NEW */
    --content-background-image: url("../images/Background.jpg");
    /* /END */
    --content-text-color: #3e3d3b; /* main text color, can sit on top of background color. not fully implemented across kc, right now themes force this via css queries */
    /* nav */
    --nav-container-background: #000;
    --nav-scrolled-container-background: var(--nav-container-background); /* matches --nav-container-background */
    --nav-modal-container-background: #000;
    --nav-logo-max-width: 100%;
    --nav-logo-max-height: 124px; /* should never be taller than roughly this, kc is not a marketing website */
    --nav-item-font-family: 'Acme', Helvetica, Arial, sans-serif;
    --nav-item-font-size: 26px;
    --nav-item-font-weight: 300;
    --nav-item-padding: 10px 20px;
    --nav-item-text: #ffffff99;
    --nav-item-content-vertical-align: center; /* flex-start(top)|center|flex-end(bottom) */
    --nav-item-content-horizontal-align: flex-start; /* flex-start(left)|center|flex-end(right) */
    --nav-item-background: transparent;
    --nav-item-border-bottom: none;
    --nav-item-border-top: #ffffff;
    --nav-item-hover-text: #ffffff;
    --nav-item-hover-background: none;
    --nav-item-hover-border-left: none;
    --nav-item-hover-border-right: transparent;
    --nav-modal-logo-max-width: 100%;
    --nav-modal-item-font-size: 18px;
    --nav-modal-item-font-weight: 700;
    --nav-modal-item-padding: 15px 20px;
    --nav-floating-logo-min-height: 75px;
    --nav-floating-logo-max-height: 75px;
    --nav-floating-logo-horizontal: 20px; /* left pixel adjustment, ie, moves to right */
    --nav-floating-logo-vertical: 0; /* top pixel adjustment, ie, moves down */
    /* 
        - home buttons  
        - border/bg/hover colors also being used as accent colors on newer footprint, will be replaced with dedicated palette variables when we get to it
    */
    --home-button-background-color: #ffffff;
    --home-button-border-color: #b32519;
    --home-button-border-size: 2px;
    --home-button-text-family: Acme;
    --home-button-text-color: #b32519;
    --home-button-text-size: 32px; /* wouldnt go larger than this */
    --home-button-tag-text-family: sans-serif;
    --home-button-hover-background-color: var(--home-button-text-color);
    --home-button-hover-border-color: var(--home-button-text-color);
    --home-button-hover-text-color: var(--home-button-background-color);
    /* probably shouldnt modify these unless you drastically change the font size it should scale ok */
    --home-button-text-callout-size: calc(var(--home-button-text-size) * 1.5);
    --home-button-tag-text-size: calc(var(--home-button-text-size) * .50);
    --home-button-tag-text-callout-size: calc(var(--home-button-text-callout-size) * .50);
}

/* 
    how to specify "mobile" overrides in the "desktop" theme css overrides 
    for new "responsive" footprint
*/
@media (max-width: 768px) {
    :root {
        /* add mobile specific override items here for mobile */
        --nav-logo-max-height: 70px;
        --home-button-text-size: 20px;
    }
}
body {
     background-image: var(--content-background-image);
     background-size: cover;
}
.parentCategory.active>a {
     font-family:'Acme';
 }
.parentCategory a {
    font-size: 30px;
    font-family: 'Acme';
}
footer {
    background: #b32519;
    color:white;
    text-align:center;
}
a {
    color: #cdc5c5;
}
.category-canvas .menu-category-item-container-full-width .menu-categories-items-container 
.menu-categories-item .menu-categories-item-info .menu-categories-item-info-description {
 text-transform:uppercase;
}
.category-canvas .menu-category-item-container-full-width .menu-categories-items-container 
.menu-categories-item .menu-categories-item-info .menu-categories-item-info-description, 
.category-canvas .menu-category-item-container-full-width .menu-categories-items-container 
.menu-categories-item .menu-categories-item-info .menu-categories-item-info-name {
    text-transform:uppercase;
}
.productname,
.menu-category-item-container > div:first-child > span,
.menu-category-item-container .menu-category-item-container-category-name {
    font-family: "Acme", Helvetica, Arial, sans-serif;
    font-size: 34px;
}
.category-canvas .menu-categories-item .menu-categories-item-image {
 display: none;
}
@media (max-width: 768px) {
    :root {
        /* add mobile specific override items here for mobile */
        --home-button-text-size: 14px;
    }
}