/* Restaurant Menu: front end. Ported from reference/menu.css (nlm- -> rm-).
   Colours come from the theme (Blocksy variables, then WP presets) unless set in Settings.
   Language visibility and QR hiding rules are added inline from the settings. */
.rm{--rm-ink:var(--theme-palette-color-4,var(--wp--preset--color--contrast,#1e1e1e));--rm-text:var(--theme-text-color,inherit);--rm-accent:var(--theme-button-background-initial-color,var(--wp--preset--color--primary,var(--rm-ink)));--rm-top:0px;max-width:760px;margin:0 auto;padding-top:2.2rem;color:var(--rm-text)}
.rm *{box-sizing:border-box}
.rm h1,.rm h2,.rm h3{color:var(--theme-headings-color,inherit)}
.rm h1{margin:.2rem 0 .3rem;font-size:2.2rem;line-height:1.2}
.rm-sub{margin:0 0 1rem;opacity:.85}
.rm-spec-wrap{margin:.2rem 0 .8rem}
.rm-spec{display:inline-block;background:var(--rm-accent);color:#fff !important;text-decoration:none !important;font-weight:600;font-size:.95rem;padding:.7rem 1.3rem;border-radius:3px;line-height:1.2}
.rm-spec:hover{filter:brightness(.92)}
.rm-spec-note{display:block;font-size:.85rem;opacity:.8;margin-top:.4rem}
.rm-pdf{border-radius:3px}
.rm-pdf-wrap .rm-pdf+.rm-pdf{margin-left:0}
.rm-legend{font-size:.85rem;opacity:.8;margin:.6rem 0 1rem}
.rm-lang{display:inline-flex;border:1px solid var(--rm-ink);border-radius:3px;overflow:hidden}
.rm-lang button{appearance:none;border:0;border-radius:0;background:transparent;color:var(--rm-ink);font:inherit;font-size:.8rem;font-weight:600;padding:.3rem .7rem;cursor:pointer;line-height:1.2;min-height:0}
.rm-head .rm-lang{float:right;margin:.3rem 0 0 .5rem}
.rm-qrbar{display:none}
.rm-brand{font-weight:700;font-size:1.2rem;color:var(--theme-headings-color,inherit)}
.rm-qrbar .lg{text-decoration:none}
.rm-qrbar .rm-lang-qr{margin-left:auto}
.rm-qr-table{margin-left:auto;padding:0 .7rem;font-size:.85rem;font-weight:700;white-space:nowrap;color:var(--rm-ink)}
.rm-qr-table+.rm-lang-qr{margin-left:0}
/* Section pills: ALWAYS wrapped on several rows, all visible, never a scrolling single row, at any width.
   The !important guards stop a theme rule from bringing back nowrap / horizontal scroll. */
.rm .rm-nav{display:flex;flex-wrap:wrap !important;overflow-x:visible !important;white-space:normal !important;gap:.4rem;z-index:30;background:var(--rm-bg,#fff);padding:.55rem 0;margin:0 0 .4rem;border-bottom:1px solid color-mix(in srgb,var(--rm-ink) 15%,transparent)}
.rm .rm-nav a{flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:100%;padding:.35rem .75rem;border:1px solid var(--rm-ink);border-radius:3px;color:var(--rm-ink);text-decoration:none;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;text-align:center;white-space:normal !important;overflow-wrap:anywhere}
.rm .rm-nav a.on{background:var(--rm-ink);color:#fff}
/* Phone bar (< 900px): hidden from 900px, where the pills are used. */
.rm-mbar{display:none}
.rm-sec{padding-top:1.2rem}
/* Sections, old anchors (#meat) and items (#rm-i-...): every jump, also the browser's own hash jump, stops below
   the bars on top. --rm-off is measured by menu.js (admin bar + QR logo bar or fixed header + sticky bar + 6px). */
.rm-sec,.rm-sec>span[id],.rm-item{scroll-margin-top:var(--rm-off,0px)}
.rm-sec h2{margin:0 0 .6rem;font-size:2.1rem;line-height:1.2}
.rm-grp h3{margin:1.6rem 0 .5rem;font-size:1.3rem;line-height:1.3}
.rm-note{margin:.2rem 0 .8rem;font-size:.92rem;opacity:.85}
.rm-col{margin:.1rem 0 .5rem;font-size:.8rem;text-align:right;opacity:.65;text-transform:uppercase;letter-spacing:.04em}
.rm-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0 0 .95rem}
.rm-item .tx{flex:1 1 auto;min-width:0}
.rm-item .nm{font-weight:600}
.rm-item .fl{font-weight:400;opacity:.75}
.rm-item .ds{display:block;font-size:.88rem;line-height:1.3;margin-top:.15rem;opacity:.82}
/* Dish descriptions only (not notes or legend): clamped to --rm-lines-mobile / --rm-lines-desktop lines (Settings)
   when JS runs (html.rm-js); menu.js adds "Read more" only where the text is really cut. No JS / print: full text. */
html.rm-js .rm-item .ds{--rm-lines:var(--rm-lines-mobile,3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rm-lines);line-clamp:var(--rm-lines);overflow:hidden}
html.rm-js .rm-item .ds.rm-open{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
/* 44px tall touch target; negative margins keep the row compact. Colour and underline of the theme's links. */
.rm .rm-more{appearance:none;display:flex;align-items:center;width:fit-content;min-height:44px;margin:-12px 0 -14px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--theme-link-initial-color,var(--wp--preset--color--primary,currentColor));font:inherit;font-size:.85rem;font-weight:400;line-height:1.2;letter-spacing:normal;text-transform:none;text-decoration:underline;text-underline-offset:.15em;cursor:pointer;position:relative}
.rm .rm-more:hover{color:var(--theme-link-hover-color,var(--theme-link-initial-color,currentColor))}
.rm .rm-more[hidden]{display:none}
.rm .rm-more:focus-visible{outline:2px solid var(--rm-accent);outline-offset:2px}
.rm-item .pr{flex:0 0 auto;font-weight:600;text-align:right;white-space:nowrap}
.rm-top{margin:1.1rem 0 0;font-size:.85rem}
.rm-top a{text-decoration:none;opacity:.7}
html.rm-qr .rm-hide-qr{display:none !important}
/* QR mode: legend, allergy text and service note at the bottom of the menu, small (normal page: in the head). */
.rm-qr-foot{display:none}
html.rm-qr .rm-qr-foot{display:block;margin:2rem 0 0;padding:.8rem 0 0;border-top:1px solid color-mix(in srgb,var(--rm-ink) 15%,transparent)}
html.rm-qr .rm-qr-foot .rm-legend{font-size:.78rem;line-height:1.4;margin:0 0 .4rem}
/* Specials as a section: one card per link, no prices. */
.rm .rm-spec-card{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;min-height:44px;margin:.4rem 0 .6rem;padding:.9rem 1rem;border:1px solid var(--rm-ink);border-radius:3px;color:var(--rm-ink);text-decoration:none}
.rm .rm-spec-card:hover,.rm .rm-spec-card:focus-visible{background:color-mix(in srgb,var(--rm-ink) 6%,transparent)}
.rm .rm-spec-card:focus-visible{outline:2px solid var(--rm-accent);outline-offset:2px}
.rm-spec-card-t{flex:1 1 auto;min-width:0;font-weight:700;overflow-wrap:anywhere}
.rm-spec-card-n{flex:1 0 100%;order:3;font-size:.88rem;opacity:.8;overflow-wrap:anywhere}
.rm-spec-card-go{flex:0 0 auto;font-weight:700}
/* Allergens section: intro, list (mark + name), note. Desktop: the list in columns. */
.rm-allg-text p{margin:.2rem 0 .8rem;max-width:760px}
.rm .rm-allg-list{list-style:none;margin:.4rem 0 1rem;padding:0}
.rm-allg-list li{display:flex;align-items:baseline;gap:.6rem;padding:.25rem 0;break-inside:avoid}
.rm-al-c{display:inline-flex;align-items:center;justify-content:center;min-width:1.45em;height:1.45em;padding:0 .3em;box-sizing:border-box;border:1px solid currentColor;border-radius:999px;font-size:.78em;font-weight:600;line-height:1;opacity:.85}
.rm-allg-link{white-space:nowrap}
/* Allergens on the dishes (only when on in Settings): small marks, or "ask our staff". */
.rm-item .rm-al{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.8rem;margin-top:.25rem;opacity:.85}
.rm-item .rm-al .rm-al-c{font-size:.72rem}
.rm-item .rm-al-ask{font-style:italic}
.rm-item .rm-al-names{display:block}
/* Allergen icons (owner's drawing, colours from the theme): in the Allergens list and on the dishes. */
.rm .rm-al-i{display:inline-block;width:1.9em;height:1.9em;flex:0 0 auto;vertical-align:middle;color:var(--rm-ink,currentColor)}
.rm-allg-list .rm-al-i{width:2.2em;height:2.2em;align-self:center}
.rm-item .rm-al-icons{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;color:inherit;text-decoration:none}
.rm-item .rm-al-icons .rm-al-i{width:1.75rem;height:1.75rem}
.rm-item .rm-al-icons .rm-al-l{margin-right:.15rem}
.rm-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* QR bar: always shown in QR mode, always with the language switch (logo optional). */
html.rm-qr .rm-qrbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:var(--rm-ab,0px);z-index:40;background:var(--rm-bg,#fff);padding:.45rem 0;height:58px}
html.rm-qr .rm-qrbar img{height:42px;width:auto;display:block}
html.rm-qr .rm{padding-top:0}
html.rm-qr .rm h1{font-size:1.5rem}
html[data-rm-sec]:not([data-rm-sec="all"]) .rm-sec:not(.rm-cur){display:none}
html[data-rm-sec]:not([data-rm-sec="all"]):not(.rm-start) .rm-fold{display:none !important}/* .rm-start: phones open on one section with the head still shown. */
.rm-col2{display:none}
@media print{.rm-sec{display:block !important}.rm-fold{display:block !important}.rm-nav,.rm-lang,.rm-top,.rm-mbar,.rm .rm-more,.rm-pdf-wrap{display:none !important}html.rm-js .rm-item .ds{display:block !important;-webkit-line-clamp:none !important;line-clamp:none !important;overflow:visible !important}}
/* Phones and tablets (< 900px): the pills are replaced by ONE sticky row: "Sections ▾" + current section + EN/IT.
   The button opens a panel under the bar with all sections in two columns. */
@media (max-width:899.98px){
.rm .rm-nav{display:none !important}
.rm .rm-head .rm-lang{display:none}/* The sticky bar below has the switch: one switch only. */
.rm .rm-mbar{display:flex;flex-wrap:nowrap;align-items:center;gap:.6rem;position:sticky;top:var(--rm-top);z-index:36;background:var(--rm-bg,#fff);padding:.35rem 0;margin:0 0 .4rem;border-bottom:1px solid color-mix(in srgb,var(--rm-ink) 15%,transparent)}
.rm-mbar-btn{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:space-between;gap:.35rem;min-height:44px;margin:0;padding:0 .9rem;border:1px solid var(--rm-ink);border-radius:3px;background:var(--rm-ink);color:#fff;font:inherit;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;white-space:nowrap;cursor:pointer}
.rm-mbar-btn[aria-expanded="true"]{background:transparent;color:var(--rm-ink)}
.rm-mbar-cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.rm-mbar-hint{flex:0 0 auto;font-weight:600;font-size:.72rem;letter-spacing:.02em;opacity:.85;white-space:nowrap}
.rm-vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rm-mbar .rm-lang{flex:0 0 auto;margin-left:auto}
.rm-mbar .rm-lang button{min-height:36px}
html.rm-qr .rm-mbar .rm-lang-mbar{display:none}/* In QR mode the logo bar right above has the switch. */
.rm-mpanel{position:absolute;left:0;right:0;top:100%;z-index:37;max-height:calc(100vh - var(--rm-top) - 70px);max-height:calc(100dvh - var(--rm-top) - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--rm-bg,#fff);border:1px solid color-mix(in srgb,var(--rm-ink) 20%,transparent);border-top:0;box-shadow:0 8px 18px rgba(0,0,0,.12);padding:.6rem}
.rm .rm-mpanel[hidden]{display:none !important}/* Never beaten by a display rule (theme or ours). */
/* Touch: no double-tap zoom delay on the section links and buttons, a visible tap highlight. */
.rm .rm-mbar-btn,.rm .rm-mpanel a,.rm .rm-nav a,.rm .rm-lang button,.rm .rm-allg-link{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.12)}
.rm-mpanel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.rm-mpanel li{margin:0}
.rm-mpanel a{display:flex;align-items:center;min-height:44px;padding:.35rem .75rem;border:1px solid var(--rm-ink);border-radius:3px;color:var(--rm-ink);text-decoration:none;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;overflow-wrap:anywhere}
.rm-mpanel a.on{background:var(--rm-ink);color:#fff}
.rm-mpanel a:focus-visible,.rm-mbar-btn:focus-visible{outline:2px solid var(--rm-accent);outline-offset:2px}
}
@media (max-width:520px){.rm-item{gap:10px}.rm-sec h2{font-size:1.7rem}.rm h1{font-size:1.9rem}}
/* The menu box is a size container: two columns only when it is wide enough (normal width = the theme's
   content width, which can be narrow; wide = the theme's wide width, as the pre-plugin menu). */
.rm-wrap{container-type:inline-size;container-name:rm}
@media (min-width:900px){
.rm-wrap>.rm{max-width:none !important}
html.rm-js .rm-item .ds{--rm-lines:var(--rm-lines-desktop,2)}
.rm-head p,.rm-head .rm-legend,.rm-sec>.rm-note{max-width:760px}
.rm-col{text-align:left}
.rm .rm-nav{position:sticky;top:var(--rm-top)}
.rm .rm-nav a{padding:.35rem .7rem}
@container rm (min-width:680px){
.rm .rm-allg-list{column-count:2;column-gap:3.5rem}
.rm-grp{column-count:2;column-gap:3.5rem}
.rm-grp .rm-item{break-inside:avoid}
.rm-grp h3,.rm-grp>.rm-note,.rm-grp>.rm-col{column-span:all}
.rm-grp.rm-cols{column-count:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;align-items:start}
.rm-grp.rm-cols>h3,.rm-grp.rm-cols>.rm-note{grid-column:1/-1}
.rm-grp.rm-cols>.rm-col{text-align:right;margin:.1rem 0 .5rem}
.rm-grp.rm-cols>.rm-col2{display:block}
}
}

/* App (0.1.13): thin install / update bar on the bottom edge, offline note. Outside .rm: appended to <body>. */
.rm-appbar{position:fixed;left:0;right:0;bottom:0;z-index:100000;display:flex;align-items:center;gap:.4rem;min-height:30px;padding:0 0 0 .8rem;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--theme-palette-color-4,#1e1e1e);color:#fff;font:400 .78rem/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 -1px 4px rgba(0,0,0,.15)}
.rm-appbar-go{flex:1 1 auto;min-width:0;margin:0;padding:.35rem 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
button.rm-appbar-go{cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.rm-appbar-x{flex:0 0 auto;position:relative;width:44px;height:30px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:400 1.2rem/1 system-ui,sans-serif;cursor:pointer}
.rm-appbar-x::before{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}/* 44px touch target, the bar stays thin. */
.rm-appbar button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.rm-offline{margin:.4rem 0 .6rem;padding:.35rem .6rem;border-radius:3px;background:color-mix(in srgb,var(--rm-ink) 8%,transparent);font-size:.8rem;opacity:.9}
@media print{.rm-appbar,.rm-offline{display:none !important}}

/* Sizes (0.1.15): one price per line with its code ("XS 100 / S 120 / L 160"), legend under the group title. */
.rm-item .pr.rm-pr-sizes,.rm-pr-sizes .rm-szs{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.rm-sz{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;white-space:nowrap}
.rm .rm-szc{display:inline-block;min-width:1.9em;padding:0 .3em;border:1px solid color-mix(in srgb,var(--rm-ink) 35%,transparent);border-radius:3px;font-size:.68rem;font-weight:600;line-height:1.5;letter-spacing:.02em;text-align:center;text-decoration:none;opacity:.8;cursor:help}
.rm-szp{min-width:2.6em;text-align:right}
.rm-sizes-legend{margin:.1rem 0 .6rem;font-size:.8rem;opacity:.75}
.rm-sizes-legend .rm-sz-l{display:inline-flex;align-items:center;gap:.3rem;margin:0 .9rem .2rem 0;white-space:nowrap}
@container rm (min-width:680px){.rm-grp.rm-sized>.rm-sizes-legend{column-span:all}}
@media (min-width:900px){.rm-grp.rm-sized>.rm-sizes-legend{column-span:all}}

/* Dish photos (0.1.17): always square, one fixed size for every dish (72px phones, 96px desktop);
   object-fit keeps the centre, so any image (portrait, huge, not yet cropped) gives the same layout. */
.rm-item.rm-has-img{align-items:flex-start}
.rm-img{flex:0 0 72px;width:72px;height:72px;overflow:hidden;border-radius:6px;background:color-mix(in srgb,var(--rm-ink) 6%,transparent)}
.rm .rm-img img,.rm .rm-img-i{display:block;width:72px !important;height:72px !important;max-width:none !important;margin:0 !important;object-fit:cover;object-position:center;border-radius:6px}
@container rm (min-width:680px){.rm-img{flex-basis:96px;width:96px;height:96px}.rm .rm-img img,.rm .rm-img-i{width:96px !important;height:96px !important}}
@media print{.rm-img{flex-basis:48px;width:48px;height:48px}.rm .rm-img img{width:48px !important;height:48px !important}}
/* Availability (0.3.0): sold out today = hidden or greyed with the label (dynamic CSS), hidden = gone. menu.js
   updates the classes from the site, also on a cached page; a group with no dish left is hidden. */
.rm[data-rm-soldout="hide"] .rm-soldout,.rm .rm-avail-hidden,.rm .rm-grp-empty{display:none !important}
.rm[data-rm-soldout="show"] .rm-soldout{opacity:.5}
.rm[data-rm-soldout="show"] .rm-soldout .nm::after{font-weight:700;font-size:.8em;letter-spacing:.02em}
.rm[data-rm-soldout="show"] .rm-soldout .pr{text-decoration:line-through}