/* ==========================================================================
   Jerusalem Shawarma: Our Menu page
   Rules for the menu chapters only. The frame, hero, triptych and dish lists
   are in site.css, which this file extends.
   ========================================================================== */

.landing { display: flex; flex-direction: column; flex: 1; }

/* --------------------------------------------------------------------------
   Chapter chrome: back button + tab bar, on a band of the hero photo.
   The band is sticky with a negative top, so on scroll the upper part of
   the photo slides away and the row of buttons stays pinned to the top of
   the screen with a slim strip of photo behind it.
   --lift is how much of the band scrolls away; --bar-stuck is what remains
   (padding + buttons + padding) and is what deep links scroll clear of.
   -------------------------------------------------------------------------- */
:root { --bar-stuck: 84px; }
.section-bar {
  --lift: 56px;
  position: sticky;
  top: calc(-1 * var(--lift));
  z-index: 20;
  padding: calc(var(--lift) + 20px) var(--gutter) 22px;
  border-bottom: 1px solid var(--hair-07);
  background:
    linear-gradient(180deg, rgba(16, 16, 16, .72), rgba(16, 16, 16, .9)),
    url("img/hero.webp") center 45% / cover no-repeat var(--surface);
  animation: fadeUp .35s ease both;
}
.section-bar-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 22px; }
.chip {
  appearance: none;
  border: 0;
  display: inline-block;
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--chamfer);
}
/* Chips sit on the photo band, so they get a translucent fill and a
   hairline edge (inset, so the chamfer keeps it). */
.back {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  color: #eee;
  font-weight: 600;
  padding: 13px 26px;
  transition: color .25s, background .25s;
}
.back:hover { color: var(--orange); background: rgba(255, 255, 255, .16); }
.tabs { display: flex; gap: 3px; }
.tab {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  color: #ddd;
  font-weight: 700;
  padding: 13px 28px;
  transition: background .25s, color .25s;
}
.tab:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.tab.is-active { background: var(--orange); color: var(--on-orange); box-shadow: none; }
.chip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--orange); }
.tab.is-active:focus-visible { box-shadow: inset 0 0 0 2px var(--on-orange); }

.chapter { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 72px; animation: fadeUp .4s ease both; }

/* --------------------------------------------------------------------------
   02 The Juice Bar: list entries with a photo on top
   -------------------------------------------------------------------------- */
.cat--juice { margin-bottom: 56px; max-width: var(--max); }
.juices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 40px;
}
.juice { border-top: 1px solid var(--hair-14); padding: 20px 2px 22px; transition: border-color .35s; }
.juice:hover { border-top-color: var(--orange-85); }
.juice > .zoom { display: block; width: 100%; }
.juice-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; border: 1px solid var(--hair-07); background: var(--surface); }
/* No cutout yet: a quiet glass outline on the same tile */
.juice-photo--none { display: flex; align-items: center; justify-content: center; color: var(--muted-2); }
.juice-photo--none svg { width: 44px; height: 58px; opacity: .6; }
.juice-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.juice-row h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; }
.juice-price { font-size: 15px; color: var(--orange); font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   03 Breakfast: a printed-card menu after the in-store chalkboard. A
   full-width photo hero with the hours on it, then orange section heads
   over a rule and rows of English name, Arabic name and price separated by
   hairlines. Two columns like the card; one column under 900px.
   -------------------------------------------------------------------------- */
/* The chapter loses its own padding so the hero can run edge to edge; the
   menu below gets it back through .chapter-inner. */
.chapter--bk { max-width: none; padding: 0; }
.chapter--bk .chapter-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 72px; }
.bk-hero {
  position: relative;
  min-height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface);
}
.bk-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.bk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, .15) 0%, rgba(16, 16, 16, .35) 40%, rgba(16, 16, 16, .9) 82%, var(--bg) 100%);
  pointer-events: none;
}
.bk-hero h1,
.bk-hero h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 54px;
  line-height: 1.15;
  color: #fff;
  max-width: 640px;
  text-wrap: balance;
}
.bk-hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--orange);
}
.bk-hours-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: .7; }

.bk-menu { columns: 2; column-gap: 72px; max-width: var(--max); }
.bk-section { break-inside: avoid; margin-bottom: 44px; }
.bk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-22);
}
.bk-head h3 { font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--orange); letter-spacing: .5px; }
.bk-head .ar { font-size: 16px; color: var(--muted-1); }
.bk-sub { font-size: 12.5px; color: var(--text-4); line-height: 1.6; margin-top: 12px; text-wrap: pretty; }
.bk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-06);
}
.bk-item:last-child { border-bottom: 0; }
/* A small photo at the left of each row; the lightbox opens the whole
   spread it was cropped from */
.bk-item > .zoom, .bk-tray > .zoom { flex: none; }
.bk-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--hair-07); background: var(--surface); }
.bk-thumb--tray { width: 72px; height: 72px; }
.bk-tray > div { flex: 1; min-width: 0; }
.bk-body { flex: 1; min-width: 0; line-height: 1.5; }
.bk-name { font-size: 15.5px; font-weight: 600; color: var(--text-name); }
.bk-item .ar { font-size: 16px; color: var(--text-3); margin-left: 6px; white-space: nowrap; }  /* an Arabic name moves to the next line whole, never splits */
.bk-hint { display: block; font-size: 13px; color: var(--text-4); margin-top: 1px; }
.bk-price { flex: none; font-size: 15px; color: var(--orange); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Trays: the two sharing platters, set apart under a rule */
.bk-trays { max-width: var(--max); margin-top: 4px; padding-top: 36px; border-top: 1px solid var(--hair-14); text-align: center; }
.bk-trays-kicker { letter-spacing: 3px; margin-bottom: 22px; }
/* Two separate cards, centred under the heading, with clear space between */
.bk-tray-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; max-width: 800px; margin: 0 auto; }
.bk-tray {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--hair-07);
  padding: 24px 28px;
  transition: border-color .3s;
}
.bk-tray:hover { border-color: var(--orange-55); }
.bk-tray-name { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; }
.bk-tray-ar { font-size: 16px; color: var(--text-3); margin-top: 4px; }
.bk-tray-price { flex: none; font-size: 24px; color: var(--orange); font-weight: 600; }

/* Shared with 01 À la Carte, which uses the same card style. A row or tray
   whose photo has not arrived yet shows a dashed slot the size of the
   thumbnail with a small camera outline, so the missing picture is easy to
   spot. */
.bk-thumb--ph {
  flex: none;
  display: block;
  border: 1px dashed var(--hair-22);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716b64' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5h3.2l1.8-2.5h7l1.8 2.5h3.2v10h-17z'/%3E%3Ccircle cx='12' cy='13.5' r='3.2'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.bk-thumb--tray.bk-thumb--ph { background-size: 26px 26px; }
/* --------------------------------------------------------------------------
   01 À la Carte: the same rows as Breakfast, but the sections stack full
   width in menu order (soups first, drinks last) and each lays its rows out
   in a grid, two or three across. Sub-headings split a long section
   (Main Courses, Sandwiches, Drinks).
   -------------------------------------------------------------------------- */
.ac-menu { max-width: var(--max); }
.ac-menu .bk-section { margin-bottom: 56px; }
.ac-menu .bk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 56px; }
.ac-menu .bk-item:last-child { border-bottom: 1px solid var(--hair-06); }
.ac-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair-07);
}
.bk-head + .ac-sub { margin-top: 16px; }
.ac-sub h4 { font-family: var(--serif); font-weight: 700; font-size: 17.5px; color: var(--text-name); letter-spacing: .3px; }
.ac-sub .ar { font-size: 15px; color: var(--muted-1); }
/* Family meals: how many it serves, under the name */
.bk-serves { display: block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--orange); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Under 900px
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* One scrollable row of buttons, so the pinned strip stays short on phones */
  :root { --bar-stuck: 68px; }
  .section-bar { --lift: 24px; padding-top: calc(var(--lift) + 14px); padding-bottom: 14px; }
  .section-bar-inner { gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .section-bar-inner::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .tabs { flex: none; }
  .chapter { padding-top: 36px; padding-bottom: 56px; }
  .chapter--bk { padding: 0; }
  .chapter--bk .chapter-inner { padding-top: 36px; padding-bottom: 56px; }
  .bk-hero { min-height: 360px; }
  .bk-hero .landing-head { flex-direction: column; align-items: flex-start; padding-top: 32px; padding-bottom: 20px; }
  .bk-hero h1, .bk-hero h2 { font-size: 34px; }
  .bk-menu { columns: 1; }
  .ac-menu .bk-list { grid-template-columns: 1fr; }
  .bk-hours { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
  .bk-hours-dot { display: none; }
}