/* ═══════════════════════════════════════════════
   OG Menu Plugin — og-menu.css
   Brand: #FBE9D2 (cream), #A8AD00 (olive green)
   Modern pill-filter layout, inspired by ref UI
   ═══════════════════════════════════════════════ */

:root {
    --ogm-cream:        #FBE9D2;
    --ogm-cream-dark:   #f0d8b0;
    --ogm-cream-bg:     #fdf5ea;
    --ogm-green:        #A8AD00;
    --ogm-green-dark:   #7a7e00;
    --ogm-green-light:  rgba(168,173,0,0.12);
    --ogm-text:         #1a1a1a;
    --ogm-text-mid:     #444444;
    --ogm-text-light:   #777777;
    --ogm-white:        #ffffff;
    --ogm-border:       #e5d9c3;
    --ogm-shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
    --ogm-shadow-md:    0 4px 16px rgba(0,0,0,0.09);
    --ogm-shadow-lg:    0 8px 28px rgba(0,0,0,0.13);
    --ogm-radius:       12px;
    --ogm-radius-sm:    8px;
    --ogm-radius-pill:  50px;
    --ogm-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ogm-font-serif:   Georgia, 'Times New Roman', serif;
    --ogm-t:            0.2s ease;
}

/* ─── Wrapper ─────────────────────────────────── */

.ogm-wrapper {
    font-family: var(--ogm-font);
    color: var(--ogm-text);
    margin: 0 0 2.5rem;
}

/* ─── Controls block (search + chips) ─────────── */

.ogm-controls {
    background: transparent;
    border: 1px solid var(--ogm-border);
    border-radius: var(--ogm-radius);
    padding: 1.1rem 1.25rem 1rem;
    margin-bottom: 2rem;
    box-shadow: var(--ogm-shadow-sm);
}

/* ─── Search ──────────────────────────────────── */

.ogm-search {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.6rem;
    border: 1.5px solid var(--ogm-border);
    border-radius: var(--ogm-radius-pill);
    font-size: 0.93rem;
    color: var(--ogm-text);
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
        no-repeat 0.8rem center / 16px;
    transition: border-color var(--ogm-t), box-shadow var(--ogm-t);
    box-sizing: border-box;
    margin-bottom: 0.9rem;
}

.ogm-search:focus {
    outline: none;
    border-color: var(--ogm-green);
    background-color: var(--ogm-white);
    box-shadow: 0 0 0 3px rgba(168,173,0,0.14);
}

.ogm-search::placeholder { color: #aaa; }

/* ─── Pill chips ──────────────────────────────── */

.ogm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.65rem;
    border-top: 1.5px solid var(--ogm-border);
}

.ogm-chip {
    background: transparent;
    border: 1.5px solid var(--ogm-border);
    border-radius: var(--ogm-radius-pill);
    padding: 0.38rem 1.05rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ogm-text-mid);
    cursor: pointer;
    transition: all var(--ogm-t);
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.ogm-chip:hover {
    border-color: var(--ogm-green);
    color: var(--ogm-green-dark);
    background: var(--ogm-green-light);
}

.ogm-chip.ogm-chip-active {
    background: var(--ogm-text);
    border-color: var(--ogm-text);
    color: var(--ogm-white);
    font-weight: 600;
}

/* ─── Section headings (non-full-menu) ────────── */

.ogm-subcat-heading {
    font-family: var(--ogm-font-serif);
    font-size: 1.2rem;
    color: var(--ogm-green-dark);
    border-bottom: 2px solid var(--ogm-cream-dark);
    padding-bottom: 0.4rem;
    margin: 2rem 0 1.1rem;
}
.ogm-subcat-heading:first-child { margin-top: 0; }

/* standalone search for section shortcodes */
.ogm-search-wrap {
    margin-bottom: 1.25rem;
}
.ogm-search-wrap .ogm-search {
    margin-bottom: 0;
}

/* ─── Grid ────────────────────────────────────── */

.ogm-grid {
    display: grid;
    gap: 1.35rem;
}

.ogm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ogm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ogm-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Card ────────────────────────────────────── */

.ogm-card {
    background: transparent;
    border-radius: var(--ogm-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ogm-shadow-sm);
    border: 1px solid var(--ogm-border);
    transition: transform var(--ogm-t), box-shadow var(--ogm-t);
}

.ogm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ogm-shadow-lg);
}

/* ─── Card image ──────────────────────────────── */

.ogm-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ogm-cream);
}

.ogm-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.38s ease;
}

.ogm-card:hover .ogm-card-img img {
    transform: scale(1.05);
}

.ogm-no-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ogm-cream) 0%, var(--ogm-cream-dark) 100%);
}

/* Badges — inline, below description */
.ogm-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.ogm-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--ogm-radius-pill);
}

.ogm-badge-new     { background: var(--ogm-green);  color: var(--ogm-white); }
.ogm-badge-gs      { background: rgba(46,125,50,0.88); color: #fff; }
.ogm-badge-sodium  { background: rgba(230,81,0,0.88);  color: #fff; }
.ogm-badge-alcohol { background: rgba(69,39,160,0.88); color: #fff; }

/* ─── Card body ───────────────────────────────── */

.ogm-card-body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.35rem;
}

.ogm-subcat {
    font-size: 0.7rem;
    color: var(--ogm-green-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ogm-item-name {
    font-size: 0.97rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
    color: var(--ogm-text);
    letter-spacing: -0.01em;
}

.ogm-item-desc {
    font-size: 0.8rem;
    color: var(--ogm-text-light);
    margin: 0;
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ogm-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ogm-cream-dark);
}

.ogm-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ogm-green-dark);
    letter-spacing: -0.02em;
}

.ogm-cal {
    font-size: 0.75rem;
    color: var(--ogm-text-light);
    background: var(--ogm-cream-bg);
    padding: 0.15rem 0.55rem;
    border-radius: var(--ogm-radius-pill);
    border: 1px solid var(--ogm-border);
}

/* ─── Empty / no results ──────────────────────── */

.ogm-empty,
.ogm-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ogm-text-light);
    font-size: 0.95rem;
}

/* ─── Hidden ──────────────────────────────────── */

.ogm-card.ogm-hidden { display: none; }

/* ─── Tabs (kept for section shortcodes that still use them) ── */

.ogm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ogm-cream-dark);
}

.ogm-tab {
    background: var(--ogm-cream);
    border: 1.5px solid var(--ogm-border);
    border-radius: var(--ogm-radius-pill);
    padding: 0.42rem 1.1rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ogm-text-mid);
    cursor: pointer;
    transition: all var(--ogm-t);
    white-space: nowrap;
}

.ogm-tab:hover { border-color: var(--ogm-green); color: var(--ogm-green-dark); }

.ogm-tab.ogm-tab-active {
    background: var(--ogm-green);
    border-color: var(--ogm-green);
    color: var(--ogm-white);
    font-weight: 700;
}

.ogm-panel         { display: none; }
.ogm-panel.ogm-panel-active { display: block; }

/* ─── Responsive ──────────────────────────────── */

@media (max-width: 960px) {
    .ogm-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .ogm-cols-4,
    .ogm-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ogm-cols-4,
    .ogm-cols-3,
    .ogm-cols-2 { grid-template-columns: 1fr; }

    .ogm-chip {
        font-size: 0.78rem;
        padding: 0.32rem 0.85rem;
    }

    .ogm-controls {
        padding: 0.9rem 0.9rem 0.75rem;
    }
}

/* ─── Section headings (full menu) ───────────────── */

.ogm-section {
    margin-bottom: 3rem;
}

.ogm-section-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ogm-cream-dark);
}

.ogm-section-title {
    font-family: var(--ogm-font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ogm-green-dark);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.ogm-section-desc {
    font-size: 0.88rem;
    color: var(--ogm-text-light);
    margin: 0;
    line-height: 1.55;
}