/* The online menu. The venue's look arrives from menu.js (applyLook) as custom properties:
   --paper (page background), --card (cards), --ink (text), --accent, --on-accent (the text on the accent, chosen to read),
   --title and --text (the font families). Everything the guest reads sits on a card, never straight on a picture.
   The files of the fonts are in fonts.css (generated by tools/fonts.py, served by us). Defaults: CMP's Shift theme. */

:root{
  --paper:#f1f2f6; --card:#ffffff; --ink:#062028; --accent:#e05610; --on-accent:#ffffff;
  --soft:color-mix(in srgb,var(--ink) 74%,var(--card));
  --line:color-mix(in srgb,var(--ink) 14%,var(--card));
  --title:"Anton","Arial Narrow",Impact,sans-serif;
  --text:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--paper) center top/cover no-repeat fixed;color:var(--ink);font:15px/1.45 var(--text)}
.app{max-width:720px;margin:0 auto;padding:12px 12px 32px}
.noscript{padding:24px 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header: one card, the cover on top of it when there is one */
.top{position:relative;text-align:center;background:var(--card);border-radius:var(--radius);overflow:hidden}
.cover{height:170px;background:center/cover no-repeat}
.brand{padding:22px 16px 6px}
.cover + .brand{padding-top:14px}
.logo{display:block;margin:0 auto 10px;max-width:120px;max-height:88px;object-fit:contain;border-radius:12px}
.cover + .brand .logo{margin-top:-58px;position:relative;background:var(--card);padding:6px}
h1{margin:0;font:400 34px/1.1 var(--title);letter-spacing:.2px;color:var(--accent)}
:root[data-title="anton"] h1,:root[data-title="anton"] h2,:root[data-title="antonio"] h1,:root[data-title="antonio"] h2{text-transform:uppercase;letter-spacing:.4px}
:root:not([data-title="anton"]):not([data-title="antonio"]) h1{font-weight:700}
.intro{margin:8px auto 0;max-width:46ch;color:var(--soft)}
.langs{display:flex;justify-content:center;gap:6px;padding:10px 16px 16px}
.langs button{font:600 12px/1 var(--text);letter-spacing:.6px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.langs button[aria-current]{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* sticky bar: the sections and the allergen filter */
.bar{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:8px 10px;background:color-mix(in srgb,var(--card) 95%,transparent);backdrop-filter:blur(8px);border-radius:var(--radius);box-shadow:0 1px 0 var(--line),0 6px 18px -10px color-mix(in srgb,var(--ink) 40%,transparent)}
.chips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{white-space:nowrap;text-decoration:none;color:var(--ink);font:600 13px/1 var(--text);padding:8px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.filter-btn{flex:none;font:600 13px/1 var(--text);padding:8px 12px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.filter-btn .count{display:inline-block;min-width:18px;padding:2px 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px}
.filter{margin:8px 0 0;padding:12px;border-radius:var(--radius);background:var(--card)}
.filter p{margin:0 0 8px;font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{font:13px/1 var(--text);padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.opts button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-decoration:line-through}
.link{margin:10px 12px 0 0;padding:0;border:0;background:none;color:var(--accent);font:600 13px/1.4 var(--text);cursor:pointer;text-decoration:underline}

/* sections: one card each */
main{display:block}
section{margin:12px 0 0;padding:18px 16px 4px;background:var(--card);border-radius:var(--radius)}
h2{margin:0;font:400 24px/1.15 var(--title)}
:root:not([data-title="anton"]):not([data-title="antonio"]) h2{font-weight:700}
.hours{margin:2px 0 0;color:var(--soft);font-size:13px}
.sdesc{margin:4px 0 0;color:var(--soft)}
section.closed h2{color:var(--soft)}
.item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
section .item:last-child{border-bottom:0}
.item .photo{flex:none;width:76px;height:76px;object-fit:cover;border-radius:12px;background:var(--line)}
.item .body{flex:1;min-width:0}
.item.closed{opacity:.72}
.row{display:flex;align-items:baseline;gap:10px}
h3{flex:1;margin:0;font:700 16px/1.3 var(--text)}
.price{flex:none;font-weight:700;white-space:nowrap}
.desc{margin:3px 0 0;color:var(--soft);font-size:14px}
.variants{list-style:none;margin:6px 0 0;padding:0}
.variants li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:2px 0}
.opts-line{margin:4px 0 0;font-size:13px;color:var(--soft)}
.tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.tag{font:600 11px/1 var(--text);padding:4px 7px;border-radius:999px;background:var(--line);color:var(--ink)}
.tag.sold{background:var(--accent);color:var(--on-accent)}
.allergens{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.al{font:11px/1 var(--text);padding:4px 7px;border-radius:6px;border:1px solid var(--line);color:var(--soft)}
.allergens.traces{font-size:12px;color:var(--soft)}
.allergens.none{font-size:12px;color:var(--soft);font-style:italic}
.item.sold h3,.item.sold .price{opacity:.5;text-decoration:line-through}

.empty,.hidden-note{margin:12px 0 0;padding:14px 16px;border-radius:var(--radius);background:var(--card);color:var(--soft);text-align:center;font-size:14px}
footer{margin-top:12px;padding:16px;border-radius:var(--radius);background:var(--card);color:var(--soft);font-size:13px}
footer p{margin:0 0 8px}
footer a{color:var(--accent)}
.by{font-size:11px;letter-spacing:.4px;opacity:.8}

/* the preview inside the back office: links to the PDFs lead nowhere */
:root[data-preview] .pdfs a{pointer-events:none}
@media (min-width:640px){.item .photo{width:96px;height:96px}h1{font-size:42px}.app{padding-top:20px}}
footer .counts{font-size:12px;line-height:1.45}