/*
============================================================
4TFIED Technologies Website Framework
Copyright © 2026 Benjamin Pendleton / 4TFIED Technologies
All rights reserved.

This file is part of a proprietary website framework created
by 4TFIED Technologies.

Unauthorized copying, reuse, redistribution, resale, or use
on another website or project is prohibited without written
permission from 4TFIED Technologies.

Client receives permission to use this code only as part of
the approved website/project delivered by 4TFIED Technologies.

Author: Benjamin Pendleton
Website: https://4tfied.us
============================================================
*/

* {
    box-sizing: border-box;
}

:root {
    --cm-bg: #f4efe7;
    --cm-panel: #ffffff;
    --cm-primary: #153d35;
    --cm-primary-light: #215247;
    --cm-accent: #d8c4a4;
    --cm-soft: #faf7f1;
    --cm-border: #e6ded3;
    --cm-text: #222222;
    --cm-muted: #666666;
    --cm-shadow: 0 12px 28px rgba(0,0,0,0.10);
    --cm-radius: 18px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cm-bg);
    color: var(--cm-text);
}

/* =========================================================
   COMPLETE MENUS DEMO WRAPPER
========================================================= */

.complete-menus-demo {
    width: min(1180px, 94%);
    margin: 40px auto;
}

.plugin-intro {
    text-align: center;
    margin-bottom: 28px;
}

.plugin-eyebrow {
    margin: 0 0 10px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    color: var(--cm-primary);
}

.plugin-intro h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.05;
}

.plugin-intro p {
    width: min(780px, 100%);
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--cm-muted);
}

/* =========================================================
   MAIN MENU PLUGIN
========================================================= */

.complete-menu-plugin {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
}

/* =========================================================
   SIDEBAR
========================================================= */

.menu-sidebar {
    background: var(--cm-panel);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
    padding: 20px;
    position: sticky;
    top: 24px;
}

.menu-sidebar h2 {
    margin: 0 0 18px;
    font-size: 1.45rem;
}

/* =========================================================
   CATEGORY BLOCKS
========================================================= */

.category-block + .category-block {
    margin-top: 12px;
}

.category-toggle {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 15px 18px;
    background: var(--cm-primary);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    transition: background 0.18s ease;
}

.category-toggle:hover {
    background: var(--cm-primary-light);
}

.category-toggle span {
    font-size: 1.4rem;
    line-height: 1;
}

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

.item-list {
    padding: 10px 0 2px 12px;
}

.menu-item-button {
    width: 100%;
    display: block;
    border: 0;
    border-left: 4px solid var(--cm-accent);
    background: var(--cm-soft);
    margin: 8px 0;
    padding: 12px 14px;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    color: var(--cm-text);
    transition:
        background 0.18s ease,
        transform 0.12s ease;
}

.menu-item-button:hover,
.menu-item-button.active {
    background: #efe2cf;
}

.menu-item-button:active {
    transform: scale(0.99);
}

.menu-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.menu-item-name {
    text-align: left;
    flex: 1;
}

.menu-item-price {
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   DETAIL PANEL
========================================================= */

.menu-detail-panel {
    background: var(--cm-panel);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
    min-height: 540px;
    padding: 28px;
}

.detail-placeholder {
    height: 460px;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--cm-muted);
}

.detail-placeholder h2 {
    margin-bottom: 12px;
}

/* =========================================================
   ITEM DETAIL
========================================================= */

.item-detail {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 28px;
    align-items: start;
}

.item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    background: #e8e0d5;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.item-content h2 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
}

.item-description {
    font-size: 1.08rem;
    line-height: 1.6;
}

/* =========================================================
   DETAIL SECTIONS
========================================================= */

.detail-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cm-border);
}

.detail-section h3 {
    margin: 0 0 12px;
    font-size: 1.08rem;
}

/* =========================================================
   PRICING / NUTRITION
========================================================= */

.price-list,
.nutrition-list {
    display: grid;
    gap: 8px;
}

.price-row,
.nutrition-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: var(--cm-soft);
    padding: 11px 13px;
    border-radius: 10px;
}

/* =========================================================
   META TAGS
========================================================= */

.meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-pill {
    background: #eee2d0;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* =========================================================
   STATES
========================================================= */

.empty-state {
    color: var(--cm-muted);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    html,
    body {
    min-height: 100%;
    overflow-x: hidden;
    }

    .complete-menus-demo {
    width: min(760px, 94%);
    margin: 12px auto 18px;
    }

    .plugin-intro {
        margin-bottom: 10px;
    }

    .plugin-eyebrow {
        margin-bottom: 6px;
        font-size: 0.72rem;
    }

    .plugin-intro h1 {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .plugin-intro p:not(.plugin-eyebrow) {
        display: none;
    }

    .complete-menu-plugin {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .menu-detail-panel {
        order: 1;
        flex-shrink: 0;

        min-height: auto;
        padding: 18px;

        border: 5px solid #000000;
        border-radius: 34px;

        text-align: center;

        position: sticky;
        top: 0;
        z-index: 20;
    }

    .menu-sidebar {
        order: 2;
        position: static;
        width: 100%;
        padding: 18px;
    }

    .menu-sidebar h2 {
        font-size: 1.7rem;
        margin-bottom: 18px;
    }

    .category-block + .category-block {
        margin-top: 14px;
    }

    .category-toggle {
        min-height: 64px;
        border-radius: 16px;
        padding: 18px 20px;
        font-size: 1.25rem;
    }

    .category-toggle span {
        font-size: 1.8rem;
    }

    .item-list {
        padding: 12px 0 4px 10px;
    }

    .menu-item-button {
        border-radius: 14px;
        padding: 15px 16px;
        margin: 10px 0;
        font-size: 1rem;
    }

    .menu-item-price {
        font-size: 1.05rem;
    }

    .detail-placeholder {
        height: auto;
        min-height: 110px;
        padding: 12px 8px;
    }

    .detail-placeholder h2,
    .item-content h2 {
        font-size: clamp(1.6rem, 7vw, 2.5rem);
        line-height: 1.1;
    }

    .item-detail {
        display: block;
    }

    .item-image-wrap {
    display: none;
    }

    .item-description {
        font-size: 1rem;
        line-height: 1.4;
    }

    .price-row,
    .nutrition-row {
        text-align: left;
    }

    .meta-pills {
        justify-content: center;
    }
}