/* ------------------------------------------------------------------
   Fusion of Café d'Art — public menu
   Brand palette: cream #F4E7D9 · maroon #661010 · gold #AA8750
   ------------------------------------------------------------------ */

:root {
    --cream: #F4E7D9;
    --cream-light: #FBF2E6;
    --maroon: #661010;
    --gold: #AA8750;
    --gold-soft: rgba(170, 135, 80, .55);
}

body.site-body {
    background-color: var(--cream);
    /* A light veil over the tiled argyle keeps the pattern subtle.
       Prefer the original PNG? Drop it in public/images/ and change
       bg.svg -> bg.png below. */
    background-image:
        linear-gradient(rgba(244, 231, 217, .42), rgba(244, 231, 217, .42)),
        url('../images/bg.svg');
    background-size: auto, 200px auto;
    color: var(--maroon);
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    min-height: 100vh;
}

/* ---------- The menu "sheet" (double-line frame + corner stars) --- */

.menu-sheet {
    max-width: 1040px;
    background: var(--cream-light);
    border: 1px solid var(--gold);
    box-shadow: 0 24px 60px rgba(102, 16, 16, .14);
    position: relative;
}

.menu-sheet::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid var(--gold-soft);
    pointer-events: none;
}

.corner {
    position: absolute;
    color: var(--gold);
    font-size: .78rem;
    line-height: 1;
    z-index: 1;
}

.c-tl { top: 4px; left: 5px; }
.c-tr { top: 4px; right: 5px; }
.c-bl { bottom: 4px; left: 5px; }
.c-br { bottom: 4px; right: 5px; }

/* ---------- Header ------------------------------------------------ */

.brand-script {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    color: var(--maroon);
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 1.1;
}

.title-sprig {
    position: absolute;
    top: 50%;
    color: var(--gold);
    opacity: .9;
}

.title-sprig .sprig-svg { width: 96px; height: auto; }

.title-sprig.left {
    left: -118px;
    transform: translateY(-60%) scaleX(-1) rotate(-8deg);
}

.title-sprig.right {
    right: -118px;
    transform: translateY(-60%) rotate(-8deg);
}

.brand-sub {
    align-items: center;
    gap: .65rem;
    text-transform: uppercase;
    letter-spacing: .35em;
    font-weight: 600;
    font-size: clamp(.66rem, 1.8vw, .85rem);
    color: var(--maroon);
}

/* letter-spacing leaves a ghost space after the last letter; pull it back */
.brand-sub span:not(.spark) { margin-right: -.35em; }

.spark { color: var(--gold); letter-spacing: 0; }

.header-divider {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 300px;
    margin-top: 1.15rem;
}

.header-divider .rule { flex: 1; height: 1px; background: var(--gold-soft); }
.header-divider .spark { font-size: .7rem; }

/* ---------- Category sections ------------------------------------ */

.menu-columns {
    columns: 2;
    column-gap: 3.5rem;
}

@media (max-width: 820px) {
    .menu-columns { columns: 1; }
}

.menu-category {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 2.4rem;
}

.sprig-row { color: var(--gold); margin-bottom: .35rem; }
.sprig-row .sprig-svg { width: 54px; height: auto; }

.category-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.15rem;
}

.category-head .rule { flex: 1; height: 1px; background: var(--gold); opacity: .85; }

/* The bordered plaque with a small diamond on each end */
.plaque {
    position: relative;
    border: 1px solid var(--gold);
    color: var(--maroon);
    padding: .42rem 1.6rem;
    margin: 0;
    font-size: clamp(1.02rem, 2.4vw, 1.28rem);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    /* letter-spacing trails the last letter; indent re-centers optically */
    text-indent: .2em;
    white-space: nowrap;
}

.plaque::before,
.plaque::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 11px;
    height: 11px;
    background: var(--cream-light);
    border: 1px solid var(--gold);
    transform: translateY(-50%) rotate(45deg);
}

.plaque::before { left: -6px; }
.plaque::after { right: -6px; }

@media (max-width: 420px) {
    .plaque { white-space: normal; letter-spacing: .12em; padding: .4rem 1.1rem; }
}

/* ---------- Items with dotted price leaders ---------------------- */

.menu-item {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .3rem 0;
    font-size: 1.1rem;
}

.item-name { font-weight: 500; }

.leader {
    flex: 1 1 auto;
    min-width: 1.25rem;
    border-bottom: 2px dotted var(--gold-soft);
    transform: translateY(-.28em);
}

.item-price {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    /* Fixed-width price column: every dotted leader ends on the same
       vertical line whether the price is $8 or $12. Widen --price-col
       (or this fallback) if you ever use longer prices like $12.50. */
    min-width: var(--price-col, 2em);
    text-align: right;
}

.empty-menu {
    font-size: 1.2rem;
    font-style: italic;
    opacity: .85;
}

/* ---------- Footer ------------------------------------------------ */

.site-footer {
    text-align: center;
    color: var(--maroon);
    opacity: .7;
    letter-spacing: .08em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    padding: 0 0 2.25rem;
}

/* ---------- v2: item options (variants / toppings / add-ons) -------
   Printed like the card: indented italic sub-lines under the item. */

.menu-option {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .14rem 0;
    padding-left: 1.5rem;
    /* Same size as item lines — text, prices, and leader dots all match;
       only the indent and italics distinguish an option. */
    font-size: 1.1rem;
    font-style: italic;
}

.menu-option .option-name { font-weight: 400; }

/* Prices stay upright and identical to item prices so the aligned
   price column reads as one piece. */
.menu-option .item-price { font-style: normal; }

/* ---------- v3: optional item description ---------------------------
   Indented italic parenthetical under the item, above its options. */

.menu-desc {
    margin-top: -.15rem;
    padding: 0 2rem .3rem 1.5rem;
    font-size: .98rem;
    font-style: italic;
    opacity: .85;
}