/* ============================================================
   KICKERS — live menu pages
   Generated pages under /menu/<slug>/ and the in-page overlay.
   Inherits every colour from the venue theme in base.css:
   .theme-kickers / .theme-cafe / .theme-garden.
   Source of truth: /opt/kickmenu/site/menu.css — do not edit in the webroot,
   publish-site.js copies this file over.
   ============================================================ */

/* Must come BEFORE anything that sets display: the UA sheet's [hidden] loses to an
   authored display:grid/flex, and the search filter hides rows with el.hidden. */
.mpage [hidden]{display:none !important}

.mpage{
  --price-cell:clamp(58px,7.4vw,94px);
  --bar-h:64px;
  /* how far an anchor jump has to clear: nav + toolbar. The toolbar wraps to three
     rows on a phone, so this is not the same number on both layouts. */
  --jump:calc(var(--nav-h) + 82px);
  padding-bottom:96px;
}
@media(max-width:860px){ .mpage{--jump:calc(var(--nav-h) + 152px)} }

/* ---------- hero ---------- */
.mhero{padding:calc(var(--nav-h) + 54px) 0 34px}
.mhero .container{max-width:min(1280px,94vw)}
.m-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-2)}
.m-crumbs a{border-bottom:1px solid transparent; transition:border-color .2s, color .2s}
.m-crumbs a:hover{color:var(--text); border-bottom-color:var(--accent)}
.m-crumbs .sep{opacity:.5}
.mhero h1{margin-top:16px; font-size:clamp(34px,6.4vw,76px)}
.mhero .m-sub{margin-top:14px; max-width:60ch; color:var(--text-2); font-size:clamp(15px,1.5vw,18px)}
.m-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.m-fact{display:inline-flex; align-items:baseline; gap:7px; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); font-size:13px; color:var(--text-2)}
.m-fact b{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text)}

/* ---------- sticky toolbar ---------- */
.mbar{position:sticky; top:var(--nav-h); z-index:40; margin-top:26px;
  background:var(--glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-block:1px solid var(--line)}
.mbar-in{max-width:min(1280px,94vw); margin:0 auto; padding:11px 24px;
  display:flex; align-items:center; gap:12px; min-height:var(--bar-h)}
.m-search{position:relative; flex:1 1 260px; max-width:420px}
.m-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  color:var(--text-2); pointer-events:none}
.m-search input{
  width:100%; padding:11px 38px 11px 40px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; /* 16px: anything smaller makes iOS zoom on focus */
  -webkit-appearance:none; appearance:none; transition:border-color .2s;
}
.m-search input:focus{outline:none; border-color:var(--accent)}
.m-search input::-webkit-search-cancel-button{display:none}
.m-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px; color:var(--text-2); font-size:15px; line-height:1; display:none}
.m-clear:hover{color:var(--text); background:var(--bg-3)}
.m-search.has-value .m-clear{display:block}

.m-filters{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.m-filters::-webkit-scrollbar{display:none}
.m-chip{flex:0 0 auto; padding:8px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--text-2); font-size:13px; font-weight:700; white-space:nowrap;
  transition:border-color .2s, color .2s, background .2s}
.m-chip:hover{color:var(--text); border-color:var(--text-2)}
.m-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
/* section jump: sidebar above 1100px, this button and a bottom sheet below it */
.m-secs{display:none; flex:0 0 auto; align-items:center; gap:8px; margin-left:auto;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:var(--bg);
  font-size:13px; font-weight:700; color:var(--text-2); white-space:nowrap}
.m-secs svg{width:15px; height:15px}
.m-secs:hover,.m-secs[aria-expanded="true"]{color:var(--text); border-color:var(--text-2)}
.m-count{margin-left:auto; flex:0 0 auto; font-size:13px; color:var(--text-2); white-space:nowrap}
/* the sibling rule has to live in here too: .m-secs stays in the DOM when hidden, so an
   unscoped `.m-secs + .m-count` would cancel the counter's auto margin on desktop and
   leave it floating in the middle of the toolbar */
@media(max-width:1099px){
  .m-secs{display:inline-flex}
  .m-secs+.m-count{margin-left:0}
}

/* mobile: search on its own row, chips scroll under it */
@media(max-width:860px){
  .mbar-in{flex-wrap:wrap; padding:10px 18px; gap:9px}
  .m-search{flex:1 1 100%; max-width:none; order:1}
  /* row 1 search · row 2 count + sections · row 3 the dietary chips.
     Explicit orders: an element without one defaults to 0 and jumps to the front. */
  .m-count{order:2; margin-left:0}
  .m-secs{order:3; margin-left:auto}
  .m-filters{order:4; flex:1 1 100%; margin:0 -18px; padding:0 18px 2px}
}

/* ---------- layout ---------- */
.mlayout{max-width:min(1280px,94vw); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr; gap:44px}
@media(min-width:1100px){
  .mlayout{grid-template-columns:212px minmax(0,1fr); gap:56px; align-items:start}
}

/* section index — sidebar on desktop, hidden on touch (the chips row covers it) */
.mnav{display:none}
@media(min-width:1100px){
  .mnav{display:block; position:sticky; top:calc(var(--nav-h) + var(--bar-h) + 24px); padding-top:42px}
  .mnav-t{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-2); margin-bottom:12px}
  .mnav ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
    max-height:calc(100vh - var(--nav-h) - var(--bar-h) - 90px); overflow-y:auto; scrollbar-width:thin}
  .mnav a{display:block; padding:7px 12px; border-left:2px solid var(--line);
    font-size:13px; line-height:1.35; color:var(--text-2); transition:color .2s, border-color .2s}
  .mnav a:hover{color:var(--text)}
  .mnav a.on{color:var(--text); border-left-color:var(--accent); font-weight:700}
}

.mbody{min-width:0; padding-top:42px}

/* ---------- section ---------- */
.msec{margin-bottom:62px; scroll-margin-top:var(--jump)}
.msec:last-child{margin-bottom:0}
.msec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:6px 20px;
  padding-bottom:14px; border-bottom:2px solid var(--text); margin-bottom:6px}
.msec-head h2{flex:1 1 auto; min-width:0; font-size:clamp(21px,2.5vw,32px); letter-spacing:.01em}
/* the right slot carries anything from "36" to a 50-character sentence, so it has to be
   allowed to shrink and, when it still does not fit, drop to its own line */
.msec-side{flex:0 1 auto; min-width:0; max-width:100%; text-align:right; font-size:13px;
  font-weight:700; color:var(--text-2); letter-spacing:.06em; text-transform:uppercase}
.msec-side .amt{font-family:var(--font-display); font-size:18px; color:var(--accent); letter-spacing:0}

/* column headers (e.g. 250 ML / 500 ML) */
.mcols{display:flex; gap:10px; justify-content:flex-end}
.mcols span{width:var(--price-cell); text-align:right; font-size:11.5px; font-weight:800;
  letter-spacing:.08em; color:var(--text-2)}

.mgrp{margin-top:30px}
.mgrp-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:4px 16px;
  padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:4px}
.mgrp-head h3{flex:1 1 auto; min-width:0; font-size:clamp(15px,1.6vw,18px); letter-spacing:.06em; text-transform:uppercase}

/* ---------- item ---------- */
.mi{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line)}
.mi:last-child{border-bottom:0}
.mi-head{display:flex; align-items:baseline; gap:9px; min-width:0}
.mi-name{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(14.5px,1.5vw,17px);
  line-height:1.25; letter-spacing:.01em}
.mi-note{font-family:var(--font-body); font-style:italic; font-weight:400; font-size:13px; color:var(--text-2)}
.mi-lead{flex:1 1 auto; min-width:16px; border-bottom:1px dotted var(--line); transform:translateY(-5px)}
.mi-desc{grid-column:1; margin-top:5px; font-size:14px; line-height:1.5; color:var(--text-2); max-width:74ch}
.mi-meta{grid-column:1; margin-top:5px; display:flex; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--text-2); letter-spacing:.03em}
.mi-meta span{display:inline-flex; align-items:center; gap:8px}
.mi-meta span+span::before{content:"·"; opacity:.55}

.mi-price{grid-column:2; grid-row:1; display:flex; gap:10px; align-items:baseline}
.mi-price b{width:var(--price-cell); text-align:right; font-family:var(--font-display);
  font-weight:600; font-size:clamp(14.5px,1.5vw,17px); color:var(--text); font-variant-numeric:tabular-nums}
.mi-price b.none{color:var(--text-2); opacity:.55}
.mi-price .lbl{display:none}
/* single unlabelled price: no fixed cell, hug the text */
.mi.one-price .mi-price b{width:auto}

/* phones: labels ride above the numbers, drop the leader */
@media(max-width:600px){
  .mi-lead{display:none}
  .mi-price{gap:14px}
  .mi-price b{width:auto; min-width:0}
  .mi-price .lbl{display:block; font-family:var(--font-body); font-size:10px; font-weight:800;
    letter-spacing:.07em; color:var(--text-2); text-align:right; margin-bottom:1px}
  .mcols{display:none}
  .mi-price.multi{flex-direction:row}
  .mi-price.multi > *{display:flex; flex-direction:column; align-items:flex-end}
  /* on a phone the heading's right slot always reads better as a line of its own */
  .msec-side{flex:1 1 100%; text-align:left; line-height:1.4}
}

/* rows that carry no price of their own */
.mi.kind-plain .mi-name{font-family:var(--font-body); font-weight:600}
.mi.kind-info{border-bottom:0; padding:6px 0}
.mi.kind-info .mi-name{font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--text-2)}
.mi[data-available="0"]{opacity:.5}
.mi-out{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}

/* ---------- badges ---------- */
.mb{flex:0 0 auto; display:inline-grid; place-items:center; height:18px; padding:0 7px; border-radius:999px;
  font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:.06em;
  border:1px solid currentColor; opacity:.9}
.mb-V,.mb-VG{color:#4caf6d}
.mb-SPICY{color:#e5564f}
.mb-ORGANIC{color:#2fa89a}
.mb-A{color:#b57ad4}
.mb-NEW{color:#5b9bd5}
.mb-SIGNATURE{color:#d4af37}
.mb-al{color:var(--text-2); text-transform:uppercase}

/* ---------- section sheet (narrow screens) ----------
   Deliberately NOT pushed into history: the menu overlay already owns the Back
   button, and stacking a second consumer of popstate races with it. */
.m-sheet{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center}
.m-sheet-in{width:min(560px,100%); max-height:76vh; display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.4);
  animation:m-sheet-up .22s cubic-bezier(.16,1,.3,1)}
@keyframes m-sheet-up{from{transform:translateY(14px); opacity:.6}to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){ .m-sheet-in{animation:none} }
.m-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--line)}
.m-sheet-head strong{font-family:var(--font-display); font-size:14px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase}
.m-sheet-x{width:34px; height:34px; border-radius:999px; border:1px solid var(--line);
  color:var(--text-2); font-size:15px}
.m-sheet ol{list-style:none; margin:0; padding:8px 0 max(14px,env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch}
.m-sheet a{display:block; padding:14px 20px; font-size:15px; font-weight:700; line-height:1.3}
.m-sheet a.on{color:var(--accent)}
.m-sheet li+li a{border-top:1px solid var(--line)}
@media(min-width:1100px){ .m-sheet{display:none !important} }

/* ---------- empty state ---------- */
.m-empty{display:none; padding:60px 0; text-align:center}
.m-empty h3{font-size:22px}
.m-empty p{margin-top:10px; color:var(--text-2)}
.mpage.no-results .m-empty{display:block}

/* ---------- foot ---------- */
.mfoot{max-width:min(1280px,94vw); margin:64px auto 0; padding:0 24px}
.mfoot-in{padding:28px 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between}
.mlegend{flex:1 1 320px; font-size:13px; color:var(--text-2); line-height:1.7}
.mlegend dl{display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0}
.mlegend dt{font-weight:800; font-size:11px; letter-spacing:.06em}
.mlegend dd{margin:0 12px 0 0}
.mnote{flex:1 1 320px; max-width:56ch; font-size:12.5px; color:var(--text-2); line-height:1.7}
.mcta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.mother{margin-top:44px}
.mother-t{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:14px}
.mother-list{display:flex; flex-wrap:wrap; gap:10px}
.mother-list a{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); font-size:14px; font-weight:700;
  transition:border-color .2s, transform .2s}
.mother-list a:hover{border-color:var(--accent); transform:translateY(-2px)}
.mother-list .arr{color:var(--accent); font-family:var(--font-display)}

/* ============================================================
   overlay — the same markup injected over a venue page
   ============================================================ */
.menu-ov{position:fixed; inset:0; z-index:120; display:none; background:var(--bg);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.menu-ov.open{display:block}
body.ov-lock{overflow:hidden}
.menu-ov{--nav-h:56px}
.menu-ov .mhero{padding-top:34px}
.ov-bar{position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:14px; padding:0 clamp(16px,3vw,30px);
  background:var(--glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line)}
.ov-back{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--text-2);
  transition:color .2s}
.ov-back:hover{color:var(--text)}
.ov-back svg{width:16px; height:16px}
.ov-title{margin-left:auto; font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ov-bar .lang-switch{flex:0 0 auto; margin-left:14px}
.ov-close{flex:0 0 auto; width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center; font-size:16px; color:var(--text-2); transition:color .2s, border-color .2s}
.ov-close:hover{color:var(--text); border-color:var(--text-2)}
/* no room for the title on a phone — the language pair takes over the right side */
@media(max-width:600px){
  .ov-title{display:none}
  .ov-bar .lang-switch{margin-left:auto}
}
.menu-ov .m-loading{display:grid; place-items:center; min-height:60vh; color:var(--text-2); font-size:14px}

/* menu links on the venue pages become anchors — keep the button look */
a.menu-btn{text-decoration:none}

/* ============================================================
   print — a clean paper menu, no chrome
   ============================================================ */
@media print{
  .nav,.mbar,.mnav,.footer,.mcta,.mother,.ov-bar,.m-empty,.kinetic,.pdf-modal,.lightbox{display:none !important}
  body{background:#fff !important; color:#000 !important}
  .mpage{padding:0}
  .mhero{padding:0 0 18px}
  .mhero h1{font-size:26pt}
  .mlayout{display:block; max-width:none; padding:0}
  .mbody{padding-top:0}
  .msec{margin-bottom:22pt; break-inside:avoid}
  .msec-head{border-bottom:1.5pt solid #000}
  .mi{break-inside:avoid; padding:5pt 0; border-bottom:.5pt solid #ddd}
  .mi-desc,.mi-meta,.msec-side,.mcols span{color:#444 !important}
  .mi-price b{color:#000 !important}
  .m-facts,.m-crumbs{display:none}
  a[href]::after{content:none !important}
}