/*********************************************************************
jardin.css
Copyright 2022 Derek Erb Solutions
https://derekerb.solutions
*********************************************************************/

/**********************
	MENU
**********************/

/**********************
	MENU SECTION
**********************/

.menusecttit {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-block-end: 2px solid var(--PgFore);
    margin: 2% auto;
}

.menusecttit h2 {
    text-transform: uppercase;
    font-size: 2em;
}

.menusecttit h3 {
    font-size: 1em;
    font-style: italic;
    padding: 0 4%;
}

/**********************
	MENU SUBSECTION
**********************/

.menusubsect {
    margin: 4% 0 2% 0;
}

/************ PRINT VERSION **********/
@media print {
    .menusubsect {
        display: block;
    }
}

.menusubsecttit {
    text-align: center;
    font-family: var(--Font13);
    border-block-end: 2px solid var(--PgFore);
    padding: 2% 4% 2% 4%;
    color: var(--PgFore);
    inline-size: 100%;
}

/************ DESKTOP VERSION **********/
@media screen and (min-width: 1200px) {
    .menusubsecttit {
        padding-block-end: 1%;
    }
}

.menusubsecttit h3 {
    padding-block-end: -1%;
    line-height: 1.1em;
    font-size: 2em;
}

/************ DESKTOP VERSION **********/
@media screen and (min-width: 1200px) {
    .menusubsecttit h3 {
        padding-block-end: 0.5%;
    }
}

.menusubsecttit h4 {
    font-weight: bold;
    line-height: 1.1em;
    margin-inline: 2%;
    font-size: 1.5em;
}

.menusubsectsupps,
.menusubsectmsmts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    font-weight: bold;
}

.subSuppTit,
.subMsmtTit {
    text-align: right;
    padding-inline-end: 1%;
}

.subSuppPrice,
.subMsmtPrice {
    text-align: left;
    padding-inline-start: 1%;
}

.subMsmtPrice {
    inline-size: 50%;
}

.subMsmtTit {
    inline-size: 50%;
}

.subSuppPrice {
    inline-size: 40%;
}

.subSuppTit {
    inline-size: 60%;
}

/**********************
	MENU ITEMS
**********************/

.menuitems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.menuitems > div {
    flex: 47%;
    min-inline-size: 300px;
}

.menuitems div.forcemaxwide {
    flex: 100%;
}

    /************ PRINT VERSION **********/
    @media print {
        .menuitems {
            display: block;
        }
    }

.menuitems > h4.hGroupTit {
    background-color: var(--PgFore);
    color: var(--PgBack);
    font-weight: bold;
    font-size: 1.3em;
    padding: 1%;
    margin: 2.5% 1% 0.5% 1%;
    width: 100%;
}


    /************ PRINT VERSION **********/
    @media print {
        .menuSingleItem {
            display: block;
        }
    }

/**********************
	MENU SUB SECTION
**********************/

.menusubsubsect {
    display: none;
    inline-size: 80%;
    margin: 2% auto;
    border-block-start: 2px dashed var(--PgFore);
    padding: 1em 0;
}

.menusubsubsect h4 {
    font-size: 1.3em;
    padding-block-end: 1%;
}

/*********** MOBILE VERSION *********/
@media screen and (max-width: 500px) {
    .menusubsubsect h4 {
        padding-block-end: 4%;
    }
}


/**********************
	MENU ITEM
**********************/

.itemAllerg,
.itemDesc,
.itemDesc2,
.itemPair,
.itemSupp,
.itemTempOOS {
    padding: 0.25% 2% 0 3%;
    inline-size: 100%;
}

.itemAllerg,
.itemExtraExtra,
.itemSupp,
.spQty {
    font-size: 0.8em;
}

.itemDesc,
.itemDesc2,
.itemTempOOS {
    inline-size: 100%;
    font-size: 0.9em;
    font-style: italic;
}

.itemDesc {
    background-color: rgb(255 255 255 / 0.7);
}

/************ PRINT VERSION **********/
@media print {
    .itemDesc {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

.itemPair {
    margin-inline-start: 1.5%;
    font-size: 0.7em;
    text-align: right;
}

.menuitem .itemPrice,
.menuitem .itemTit {
    background-color: var(--PgFore);
    color: var(--PgBack);
    font-weight: bold;
    font-size: 1.2em;
}

.itemExtraExtra {
    text-align: right;
    padding-inline-end: 1%;
    font-style: italic;
}

.itemExtras {
    border: 1px solid var(--PgFore);
    border-radius: 10px;
    padding: 2%;

    margin: 1% 0 1% 3%;
    inline-size: 92%;
}

/******** TABLETS OR BIGGER *********/
@media screen and (min-width: 800px) {
    .itemExtras {
        margin: 1% 0 1% 3%;
        inline-size: 44.5%;
    }
}

.titExtras {
    margin-inline-start: -1%;
    padding-block-end: 1%;
    border-block-end: 1px solid var(--PgFore);
}

ul.listExtras {
    margin-inline-start: 4%;
    list-style-type: circle;
}

.itemPrice {
    white-space: nowrap;
    text-align: right;
    padding: 0.25% 2% 0 1%;
    inline-size: 30%;
}

/******** MOBILE VERSION *********/
@media screen and (max-width: 500px) {
    .itemPrice {
        inline-size: 42%;
    }
}

.itemSubTit,
.itemTit {
    padding: 0.25% 2% 0 2%;
}

.itemSubTit {
    font-style: normal;
    font-weight: bold;
}

.itemTit {
    font-family: var(--Font13);
    inline-size: 70%;
}

/******** MOBILE VERSION *********/
@media screen and (max-width: 500px) {
    .itemTit {
        inline-size: 58%;
    }
}

.menuitem {
    display: flex;
    flex-wrap: wrap;
    margin: 1%;
    border: 1px solid var(--PgFore);
}

/************ PRINT VERSION **********/
@media print {
    .menuitem {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        margin: 8mm;
    }
}

.menuitem ul {
    padding-inline-start: 4%;
}

.spAllergImp {
    font-weight: bold;
    text-transform: uppercase;
}

.spStrikeout {
    color: darkgrey;
    text-decoration: line-through red solid;
}

@supports not (text-decoration: line-through) {
    .spStrikeout {
        font-size: 0.7em;
        position: relative;
    }

    .spStrikeout:before {
        position: absolute;
        border-block-start: 0.125em solid red;
        content: '';
        left: 0;
        right: 0;
        top: 50%;
    }
}

.special {
    color: var(--SpecialsText);
}

.special .itemPrice,
.special .itemTit {
    /* background: linear-gradient(180deg, var(--Specials) 20%, var(--SpecialsText) 90%); */
    background-color: var(--Specials);
    color: var(--SpecialsText);
}

.special .menuitem {
    border-color: var(--Specials);
}