/* style.css — Khodlak Loqma e-menu. Forest green + bread gold on warm paper, like the shop's own sign. */

:root {
  --bg: #f5ecdb;
  --fg: #2a1d12;
  --paper: #fffaf0;
  --ink: #2a1d12;
  --green: #1d4428;
  --green-2: #2a5d37;
  --accent: #f3b419;
  --crust: #b5651d;
  --muted: #7a6550;
  --line: rgba(42, 29, 18, .14);
  --wa: #1fa855;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--arabic); }

/* ---------- header ---------- */
.top {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(243, 180, 25, .22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    var(--green);
  color: #fdf3dc; text-align: center; padding: 56px 20px 46px;
  border-bottom: 6px solid var(--accent);
}
.top-in { max-width: 640px; margin-inline: auto; }
.kicker { font-size: 15px; font-weight: 600; color: var(--accent); }
.logo {
  font: 600 clamp(64px, 19vw, 132px)/1.15 var(--arabic); color: var(--accent);
  text-shadow: 0 3px 0 #8a4d0f, 0 10px 30px rgba(0, 0, 0, .35); margin-block: 6px 2px;
}
.tag { font-size: 20px; opacity: .9; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.btn-wa, .btn-call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 26px;
  border-radius: 999px; font-weight: 600; font-size: 18px; transition: transform .2s var(--ease), background .2s;
}
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.btn-wa svg, .fab svg { width: 24px; height: 24px; fill: currentColor; }
.btn-call { border: 2px solid rgba(253, 243, 220, .45); color: #fdf3dc; }
.btn-wa:hover, .btn-call:hover { transform: translateY(-2px); }
.btn-call:hover { background: rgba(255, 255, 255, .08); }

/* ---------- category chips ---------- */
.cats { position: sticky; top: 0; z-index: 20; background: rgba(245, 236, 219, .96); border-bottom: 1px solid var(--line); }
.cats-in {
  display: flex; gap: 8px; padding: 12px 16px; max-width: 980px; margin-inline: auto;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cats-in::-webkit-scrollbar { display: none; }
.cats a {
  flex: none; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line); color: var(--green); transition: background .2s, color .2s;
}
.cats a.is-on { background: var(--green); color: var(--accent); border-color: var(--green); }

/* ---------- menu ---------- */
.menu { max-width: 980px; margin-inline: auto; padding: 36px 16px 40px; }
.sec { margin-bottom: 48px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 18px; }
.sec-head h2 { font: 600 clamp(28px, 6vw, 40px)/1.3 var(--arabic); color: var(--green); white-space: nowrap; }
.sec-head span {
  font-size: 14px; font-weight: 600; color: var(--crust); background: rgba(243, 180, 25, .2);
  padding: 2px 12px; border-radius: 999px;
}
.sec-head::after { content: ''; flex: 1 1 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); align-self: center; }

/* item cards: photo only when the item has one */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card {
  background: #f9f3f0; border-radius: 18px; padding: 10px 10px 14px; text-align: center; /* matches the photos' backdrop */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -14px rgba(60, 35, 10, .35);
}
.card img { width: 100%; height: auto; aspect-ratio: 230 / 132; object-fit: cover; border-radius: 12px; margin-bottom: auto; }
.card--plain { background: var(--paper); justify-content: center; min-height: 112px; padding: 16px 12px; }
.card h3 { font-size: 18px; font-weight: 600; margin-top: 8px; line-height: 1.4; }
.card--plain h3 { margin-top: 0; }
.card .desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.card .price { margin-top: 4px; }
.price { font-weight: 600; color: var(--crust); white-space: nowrap; font-size: 17px; }
.price small { font-size: 12px; font-weight: 400; color: var(--muted); margin-inline-start: 3px; }
.price.ask { font-size: 14px; font-weight: 400; color: var(--muted); }
.empty { text-align: center; padding: 60px 0; color: var(--muted); }

/* ---------- footer ---------- */
.foot { background: var(--green); color: #e9dfc8; text-align: center; padding: 44px 20px 120px; font-size: 15px; line-height: 1.9; }
.foot-logo { font-size: 34px; font-weight: 600; color: var(--accent); }
.foot-addr { max-width: 30em; margin-inline: auto; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { margin-top: 10px; font-size: 13px; opacity: .65; }

/* ---------- floating WhatsApp ---------- */
.fab {
  position: fixed; z-index: 30; inset-inline-start: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px;
  background: var(--wa); color: #fff; font-weight: 600; font-size: 17px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: transform .2s var(--ease);
}
.fab:hover { transform: scale(1.05); }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .top { padding: 40px 16px 34px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card h3 { font-size: 16px; }
}