/* ==========================================================================
   MENU
   Loaded by menu.html only, and scoped to body.menu-room.

   Ivory page, pure-white cards with a warm-taupe border and a champagne
   hairline inside it; titles in espresso, prices in deep muted gold. The
   food photographs bring the colour.

   It also carries the two things the menu alone needs: the Arabic name beside
   the English (set in Cairo), and the VAT note under every price.
   ========================================================================== */

@font-face { font-family: "Cairo"; src: url("../fonts/cairo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; src: url("../fonts/cairo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

body.menu-room {
  --font-arabic: "Cairo", "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --card-frame: var(--c-champagne);
}

/* ---------- chapter index: a bar across the top, not a rail on the left --- */
body.menu-room .menu-shell { display: block; }
body.menu-room .menu-chips {
  display: block; position: sticky; top: var(--header-h); z-index: 30;
  background: rgba(245, 241, 233, .93);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-block: 1px solid var(--gold-line);
  box-shadow: 0 16px 30px -26px rgba(52, 42, 35, .5);
  transition: top var(--dur-base) var(--ease-out);
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
body.menu-room .site-header.is-hidden ~ main .menu-chips { top: 0; }
body.menu-room .menu-chips__inner { display: flex; align-items: center; gap: 1.5rem; }
body.menu-room .menu-chips__row {
  display: flex; gap: .3rem; overflow-x: auto; flex: 1;
  padding: .75rem 0; scrollbar-width: none; scroll-snap-type: x proximity;
}
body.menu-room .menu-chips__row::-webkit-scrollbar { display: none; }
body.menu-room .menu-chips__row a {
  display: inline-flex; align-items: baseline; gap: .45rem; white-space: nowrap;
  padding: .5rem .95rem; border-radius: 999px; scroll-snap-align: start;
  font-size: .82rem; color: var(--ink-soft); border: 1px solid transparent;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
body.menu-room .menu-chips__row a .num {
  font-family: var(--font-display); font-style: italic; font-size: .9em; color: var(--color-caramel);
}
body.menu-room .menu-chips__row a:hover {
  color: var(--ink); background: rgba(255, 253, 248, .85); border-color: var(--gold-line);
}
body.menu-room .menu-chips__row a.is-active {
  color: var(--color-ivory); background: var(--color-ink);
  border-color: var(--color-ink); font-weight: 600;
}
body.menu-room .menu-chips__row a.is-active .num { color: var(--c-champagne); }
body.menu-room .menu-chips__search { flex: 0 0 clamp(190px, 22vw, 290px); }
body.menu-room .menu-search input {
  background: var(--c-white); border-color: var(--c-taupe);
}
body.menu-room .menu-foot { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 48em; }
@media (max-width: 760px) {
  body.menu-room .menu-chips__inner { display: block; }
  body.menu-room .menu-chips__row { margin-inline: calc(var(--gutter) * -1); padding: .55rem var(--gutter); }
  body.menu-room .menu-chips__row a { padding: .42rem .8rem; font-size: .78rem; }
  body.menu-room .menu-chips__search { padding-bottom: .55rem; }
  body.menu-room .menu-chips__search .menu-search input { min-height: 42px; font-size: .9rem; }
}

/* ---------- chapter headings ---------- */
body.menu-room .chapter-head h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; }
body.menu-room .chapter-head__ar {
  font-family: var(--font-arabic); font-size: .5em; font-weight: 400;
  color: var(--color-mocha); letter-spacing: 0; line-height: 1.6;
}

/* ---------- the dish card: paper in a gold frame ---------- */
body.menu-room .dish,
body.menu-room .pick {
  background: var(--panel);
  border: 1px solid var(--c-taupe);
  box-shadow: 0 18px 36px -30px rgba(52, 42, 35, .5);
}
body.menu-room .dish::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 2;
  border: 1px solid var(--card-frame); opacity: .5;
  transition: opacity var(--dur-base) var(--ease-out);
}
body.menu-room .dish:hover { border-color: var(--c-gold-muted); }
body.menu-room .dish:hover::after { opacity: 1; }
body.menu-room .dish__media { margin: 6px 6px 0; }

/* Item name: English, then the Arabic, the way a bilingual menu is set. */
body.menu-room .dish__name .n-sep { color: var(--ink-faint); margin: 0 .34em; font-weight: 400; }
body.menu-room .dish__name .n-ar {
  font-family: var(--font-arabic); font-weight: 400; font-size: .82em;
  color: var(--color-mocha); unicode-bidi: isolate;
}

/* Price to the right, the VAT note tucked under it. */
body.menu-room .dish__price {
  margin-top: auto; padding-top: .85rem;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: .05rem;
}
body.menu-room .dish__price .menu-line__lead { grid-column: 1; align-self: center; }
body.menu-room .dish__price .dish__size { grid-column: 1; }
body.menu-room .dish__price .price { grid-column: 2; }
body.menu-room .vat-note {
  grid-column: 2; justify-self: end;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
body.menu-room .variant-list__vat { justify-content: flex-end; border: 0; padding-top: .15rem; }

/* ---------- detail modal ---------- */
body.menu-room .dish-modal__name .n-sep { color: var(--ink-faint); margin: 0 .3em; }
body.menu-room .dish-modal__name .n-ar {
  font-family: var(--font-arabic); color: var(--color-mocha); font-size: .72em; unicode-bidi: isolate;
}
body.menu-room .dish-modal__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
body.menu-room .dish-modal__price .vat-note { flex-basis: 100%; text-align: right; }