/* The Goat Shack digital menu board.
   One stylesheet, three targets:
     body.tv  — 65" 4K TV, read from 10–20 ft: huge type, no scrolling ever
     body.web — desktop/tablet/phone, normal scrolling page
   Sizing philosophy: everything scales from the viewport via clamp(), so the
   same markup is legible at 3840×2160 and on a phone. */

:root {
    --bg: #14170f;              /* charcoal with a green cast */
    --panel: #1d221a;
    --ink: #f4efe4;             /* warm cream */
    --muted: #b9b3a2;
    --gold: #d49a17;            /* club accent */
    --red: #c0392b;             /* bandana red */
    --green: #4c8f5a;
    --rule: #3a4034;
}

* { box-sizing: border-box; margin: 0; }

html, body { background: var(--bg); color: var(--ink); }

body {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    line-height: 1.3;
    padding: clamp(12px, calc(1.2vw * var(--s, 1)), 144px);
}

/* No scrolling on the TV — the board is a fixed 100vh composition. */
body.tv {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: none;               /* hide any stray TV-browser pointer */
}

/* ── Header: hand-painted sign + MENU, centered ───────────────────────── */
.mb-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, calc(1.5vw * var(--s, 1)), 144px);
    padding-bottom: clamp(8px, calc(0.7vw * var(--s, 1)), 72px);
    border-bottom: 3px solid var(--gold);
}
.mb-sign {
    background: var(--ink);
    color: #111;
    padding: clamp(4px, calc(0.5vw * var(--s, 1)), 54px) clamp(12px, calc(1.2vw * var(--s, 1)), 120px);
    transform: rotate(-2deg);
    border: 3px solid #111;
    box-shadow: 4px 4px 0 rgba(0,0,0,.5);
    font-size: clamp(18px, calc(1.6vw * var(--s, 1)), 192px);
    font-style: italic;
    white-space: nowrap;
}
.mb-sign span {
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.mb-title {
    font-size: clamp(26px, calc(2.6vw * var(--s, 1)), 312px);
    font-weight: 900;
    letter-spacing: 0.25em;
    color: var(--gold);
}
.mb-nav {
    position: absolute;          /* floats right so the title stays centered */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 16px;
    font-size: 14px;
}
.mb-nav a { color: var(--muted); text-decoration: none; }
.mb-nav a:hover { color: var(--ink); }

/* ── Specials banner ──────────────────────────────────────────────────── */
.mb-specials {
    display: flex;
    gap: clamp(10px, calc(1vw * var(--s, 1)), 96px);
    margin: clamp(10px, calc(0.9vw * var(--s, 1)), 96px) 0;
}
.mb-special {
    flex: 1;
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(1.2vw * var(--s, 1)), 120px);
    background: linear-gradient(135deg, #2a1d0a, #1d220f);
    border: 3px solid var(--gold);
    border-radius: 12px;
    padding: clamp(10px, calc(1vw * var(--s, 1)), 108px) clamp(14px, calc(1.4vw * var(--s, 1)), 144px);
    position: relative;
}
.mb-special-eyebrow {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: 0.18em;
    font-size: clamp(12px, calc(0.9vw * var(--s, 1)), 108px);
    text-transform: uppercase;
    writing-mode: initial;
    white-space: nowrap;
}
.mb-special-body { flex: 1; }
.mb-special-name {
    font-size: clamp(22px, calc(1.9vw * var(--s, 1)), 228px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mb-special-desc {
    color: var(--muted);
    font-size: clamp(14px, calc(1vw * var(--s, 1)), 120px);
    margin-top: 0.15em;
}
.mb-special-price {
    font-size: clamp(30px, calc(2.6vw * var(--s, 1)), 312px);
    font-weight: 900;
    color: var(--gold);
    white-space: nowrap;
}

/* ── Category columns ─────────────────────────────────────────────────── */
.mb-cols {
    column-count: 4;
    column-gap: clamp(16px, calc(1.6vw * var(--s, 1)), 168px);
    column-rule: 1px solid var(--rule);
}
body.tv .mb-cols {
    flex: 1;
    min-height: 0;
    column-fill: auto;          /* fill down each column, no page growth */
    overflow: hidden;
}
.mb-cat {
    break-inside: avoid;
    margin-bottom: clamp(14px, calc(1.2vw * var(--s, 1)), 132px);
}
.mb-cat h2 {
    font-size: clamp(18px, calc(1.35vw * var(--s, 1)), 162px);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    border-bottom: 2px solid var(--rule);
    padding-bottom: 0.2em;
    margin-bottom: 0.45em;
}
.mb-cat ul { list-style: none; padding: 0; }

.mb-item {
    display: flex;
    gap: 10px;
    padding: clamp(3px, calc(0.32vw * var(--s, 1)), 39px) 0;
}
.mb-item.featured .mb-item-name { color: var(--gold); }
.mb-star { color: var(--gold); }
.mb-item.sold-out .mb-item-main { opacity: 0.45; }

.mb-item-main { flex: 1; min-width: 0; }
.mb-item-line {
    display: flex;
    align-items: baseline;
    gap: 0.45em;
    /* A long price wraps onto its own right-aligned row instead of
       overflowing the column and overprinting the neighbor column. */
    flex-wrap: wrap;
}
.mb-item-name {
    font-size: clamp(15px, calc(1.05vw * var(--s, 1)), 126px);
    font-weight: 700;
}
.mb-dots {
    flex: 1;
    border-bottom: 2px dotted var(--rule);
    transform: translateY(-0.25em);
    min-width: 1.5em;
}
.mb-item-price {
    font-size: clamp(15px, calc(1.05vw * var(--s, 1)), 126px);
    font-weight: 800;
    color: var(--ink);
    white-space: normal;     /* multi-part prices may break at their spaces */
    text-align: right;
    margin-left: auto;       /* stays right-aligned even on its own row */
}
.mb-item-desc {
    color: var(--muted);
    font-size: clamp(12px, calc(0.78vw * var(--s, 1)), 93px);
    margin-top: 0.1em;
}
.mb-badge {
    background: var(--red);
    color: #fff;
    font-size: 0.55em;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    vertical-align: 0.25em;
    text-transform: uppercase;
}
.mb-tag-soldout {
    background: var(--red);
    color: #fff;
    font-size: 0.55em;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    vertical-align: 0.25em;
}
.mb-special .mb-tag-soldout {
    position: absolute;
    top: 8px; right: 12px;
    font-size: clamp(12px, calc(0.8vw * var(--s, 1)), 90px);
}
.mb-thumb {
    width: clamp(34px, calc(2.6vw * var(--s, 1)), 312px);
    height: clamp(34px, calc(2.6vw * var(--s, 1)), 312px);
    object-fit: cover;
    border-radius: 8px;
    flex: none;
}

/* ── Footer (web only) ────────────────────────────────────────────────── */
.mb-foot {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 13px;
}

/* ── Responsive: tablet 2-col, phone 1-col ────────────────────────────── */
@media (max-width: 1100px) {
    .mb-cols { column-count: 2; }
    .mb-specials { flex-direction: column; }
}
@media (max-width: 640px) {
    .mb-cols { column-count: 1; column-rule: none; }
    .mb-head { flex-wrap: wrap; }
    .mb-nav { position: static; transform: none; width: 100%; margin: 8px 0 0; justify-content: center; }
    .mb-special { flex-wrap: wrap; gap: 8px; }
    .mb-special-eyebrow { width: 100%; }
}

/* ── TV = outdoors in the sun: white background, black text ───────────── */
body.tv {
    color-scheme: only light;   /* belt+suspenders vs TV auto-dark modes */
    --bg: #ffffff;
    --panel: #f6f5f0;
    --ink: #111111;
    --muted: #3d3d3d;
    --gold: #9a6f06;            /* darkened so it holds up on white in sun */
    --red: #b7261b;
    --rule: #8f8f8f;
}
body.tv .mb-sign {
    background: #fff;           /* keep the painted-sign look on white */
    color: #111;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
}
body.tv .mb-special {
    background: #fdf4dd;        /* light gold wash instead of the dark card */
    border-color: #111;
}
body.tv .mb-item-desc { font-weight: 500; }  /* thin gray text dies in sun */

/* ── Single boards (breakfast / lunch): fewer sections, bigger everything ─ */
body.board-breakfast .mb-cols,
body.board-lunch .mb-cols {
    column-count: 3;
}
body.tv.board-breakfast .mb-title,
body.tv.board-lunch .mb-title { font-size: clamp(26px, calc(3vw * var(--s, 1)), 360px); }
body.tv.board-breakfast .mb-cat h2,
body.tv.board-lunch .mb-cat h2 { font-size: clamp(18px, calc(1.9vw * var(--s, 1)), 228px); }
body.tv.board-breakfast .mb-item-name,
body.tv.board-lunch .mb-item-name,
body.tv.board-breakfast .mb-item-price,
body.tv.board-lunch .mb-item-price { font-size: clamp(15px, calc(1.5vw * var(--s, 1)), 180px); }
body.tv.board-breakfast .mb-item-desc,
body.tv.board-lunch .mb-item-desc { font-size: clamp(12px, calc(1.05vw * var(--s, 1)), 126px); }
body.tv.board-breakfast .mb-item,
body.tv.board-lunch .mb-item { padding: clamp(4px, calc(0.45vw * var(--s, 1)), 54px) 0; }
body.tv.board-lunch .mb-special-name { font-size: clamp(22px, calc(2.3vw * var(--s, 1)), 276px); }
body.tv.board-lunch .mb-special-desc { font-size: clamp(14px, calc(1.25vw * var(--s, 1)), 150px); }
body.tv.board-lunch .mb-special-price { font-size: clamp(30px, calc(3.2vw * var(--s, 1)), 384px); }

/* Web board-switcher active state */
.mb-nav a.on { color: var(--gold); font-weight: 700; }

/* Category jump-bar (web full menu) — shows everything is on one page */
.mb-jump {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0 4px;
}
.mb-jump a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid var(--rule);
    border-radius: 999px;
}
.mb-jump a:hover { border-color: var(--gold); color: var(--gold); }