/**
 * Menu Item Detail widget — single menu / catering item.
 *
 * Same palette and type as the long Menu page, so an item page reads as part
 * of the same set. Every value here is a default the Elementor controls can
 * override; the widget itself ships no control defaults.
 */

.mid {
    --mid-red: #973921;
    --mid-red-dark: #7d2f1b;
    --mid-gold: #b59460;
    --mid-border: #e2d7c0;
    --mid-ink: #3f391b;
    --mid-brown: #52463c;
    --mid-cream: #fbf8f4;

    color: var(--mid-ink);
    font-family: "Interstate Condensed Regular", "Interstate Condensed", sans-serif;
}

/* ========================================
   Breadcrumb
   ======================================== */

.mid-crumbs {
    margin: 0 0 22px;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mid-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mid-crumbs__item {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mid a.mid-crumbs__link {
    color: var(--mid-red);
    text-decoration: none;
}

.mid a.mid-crumbs__link:hover,
.mid a.mid-crumbs__link:focus-visible {
    color: var(--mid-red-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mid-crumbs__sep {
    color: var(--mid-gold);
}

/* Single back link, the way the reference page does it. */
.mid-crumbs--back {
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.mid-crumbs--back .mid-crumbs__chev {
    color: var(--mid-gold);
    margin-right: 4px;
}

.mid-crumbs__current {
    color: var(--mid-brown);
}

/* ========================================
   Layout
   ======================================== */

.mid-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* --mid-media-col is set by the widget's "Image column width" control. Using
   a variable rather than a direct rule keeps the mobile stacking below from
   being outranked by Elementor's generated CSS. */
.mid--image-right .mid-inner {
    grid-template-areas: "body media";
    grid-template-columns: minmax(0, 1fr) var(--mid-media-col, minmax(0, 1fr));
}

.mid--image-left .mid-inner {
    grid-template-areas: "media body";
    grid-template-columns: var(--mid-media-col, minmax(0, 1fr)) minmax(0, 1fr);
}

.mid--image-right .mid-media,
.mid--image-left .mid-media {
    grid-area: media;
}

.mid--image-right .mid-body,
.mid--image-left .mid-body {
    grid-area: body;
}

.mid--image-top .mid-inner {
    grid-template-columns: minmax(0, 1fr);
}

.mid-media {
    margin: 0;
}

.mid-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mid-border);
    background-color: var(--mid-cream);
}

/* ========================================
   Text
   ======================================== */

.mid-title {
    margin: 0 0 14px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 40px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--mid-ink);
}

.mid-price {
    margin: 0 0 16px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 24px;
    color: var(--mid-red);
}

.mid-desc {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--mid-brown);
}

.mid-desc p {
    margin: 0 0 12px;
}

.mid-desc p:last-child {
    margin-bottom: 0;
}

/* ---- Dietary / allergen labels: same treatment as the menu page ---- */

.mid-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.mid-label {
    margin: 0;
    padding: 5px 12px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--mid-red);
    border-radius: 2px;
}

/* ========================================
   Buttons
   ======================================== */

/* Wide rectangular button, matching the reference rather than a small pill. */
.mid-actions {
    display: block;
}

.mid a.mid-order {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 0 14px;
    padding: 17px 34px;
    text-align: center;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 17px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: var(--mid-red);
    border-radius: 2px;
}

.mid a.mid-order:hover,
.mid a.mid-order:focus-visible {
    color: #fff;
    background-color: var(--mid-red-dark);
}

.mid a.mid-back {
    display: inline-block;
    padding: 15px 10px;
    font-family: "Interstate Condensed Bold", "Interstate Condensed", sans-serif;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--mid-red);
}

.mid a.mid-back:hover,
.mid a.mid-back:focus-visible {
    color: var(--mid-red-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ========================================
   Fine print / allergy disclosures
   ======================================== */

.mid-finepanel {
    margin-top: 56px;
    max-width: 900px;
}

.mid-disclosure + .mid-disclosure {
    margin-top: 26px;
}

.mid-disclosure__head {
    margin: 0 0 2px;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mid-brown);
}

.mid a.mid-disclosure__link {
    margin-left: 6px;
    color: var(--mid-red);
    text-decoration: none;
}

.mid a.mid-disclosure__link:hover,
.mid a.mid-disclosure__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* <details> opens and closes on its own; CSS swaps the two labels. */
.mid-disclosure__summary {
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    color: var(--mid-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
    list-style: none;
}

.mid-disclosure__summary::-webkit-details-marker {
    display: none;
}

.mid-disclosure__summary::marker {
    content: "";
}

.mid-disclosure__summary:hover,
.mid-disclosure__summary:focus-visible {
    color: var(--mid-red);
}

.mid-disclosure__less {
    display: none;
}

.mid-disclosure__details[open] .mid-disclosure__more {
    display: none;
}

.mid-disclosure__details[open] .mid-disclosure__less {
    display: inline;
}

/* Body sits above the toggle when open, as on the reference. */
.mid-disclosure__details[open] {
    display: flex;
    flex-direction: column;
}

.mid-disclosure__details[open] .mid-disclosure__summary {
    order: 2;
    align-self: flex-start;
}

.mid-disclosure__body {
    order: 1;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mid-brown);
}

.mid-disclosure__body p {
    margin: 0 0 10px;
}

.mid-disclosure__body p:last-child {
    margin-bottom: 0;
}

.mid-notice {
    padding: 10px 14px;
    border-left: 4px solid var(--mid-red);
    background-color: var(--mid-cream);
    font-size: 14px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .mid-inner {
        gap: 28px;
    }

    .mid-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    /* Always stack on a phone, whichever side the image is on. */
    .mid-inner,
    .mid--image-right .mid-inner,
    .mid--image-left .mid-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "media"
            "body";
        gap: 20px;
    }

    .mid-title {
        font-size: 26px;
    }

    .mid-desc {
        font-size: 16px;
    }

    .mid a.mid-order {
        width: 100%;
        text-align: center;
    }
}