/* =========================================================
   Carmala — full menu
   Same layout and type as the reference menu (Montserrat),
   in Carmala colors, always on a light background.
   Arabic uses Tajawal automatically.
   ========================================================= */

.cm-menu {
  --cm-accent: #4E6320;   /* active tab, inactive tab text, read more */
  --cm-price: #A3172F;    /* prices */
  --cm-title: #2F3F0E;    /* category titles + dish names */
  --cm-text: #6F7266;     /* descriptions */
  --cm-bg: #FFFFFF;       /* page background */
  --cm-thumb: #F2F0E8;    /* photo background */
  --cm-font: "Montserrat", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cm-sticky-top: 76px;  /* room for the fixed nav pill; use 0px if the page has no fixed nav */

  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: var(--cm-bg);
  color: var(--cm-text);
  color-scheme: light;
  font-family: var(--cm-font);
}
html[lang="ar"] .cm-menu { --cm-font: "Tajawal", "Montserrat", system-ui, sans-serif; }

.cm-menu__head,
.cm-menu__body { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }

.cm-menu__eyebrow {
  margin: 0 0 .7rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cm-price);
}
.cm-menu__title {
  margin: 0;
  font-family: var(--cm-font); font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800;
  line-height: 1.12; letter-spacing: -.01em; color: var(--cm-title);
}
.cm-menu__note { max-width: 54ch; margin: .8rem 0 0; font-size: .98rem; line-height: 1.6; }
.cm-menu__note a { color: var(--cm-accent); font-weight: 700; }

/* ---------- category tabs ---------- */
.cm-tabs {
  position: sticky; top: var(--cm-sticky-top); z-index: 20;
  margin-top: 1.75rem; padding: .5rem 0;
  background: var(--cm-bg);
}
.cm-tabs.is-stuck { box-shadow: 0 12px 16px -16px rgba(0, 0, 0, .35); }
.cm-tabs.is-stuck::before { /* hides content scrolling above the stuck bar */
  content: ""; position: absolute; inset-inline: 0; bottom: 100%;
  height: var(--cm-sticky-top); background: var(--cm-bg);
}
.cm-tabs__track {
  position: relative;
  display: flex; gap: .75rem;
  max-width: calc(1100px + 2.5rem); margin-inline: auto;
  padding: .5rem 1.25rem 1rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cm-tabs__track::-webkit-scrollbar { display: none; }

.cm-tab {
  flex: 0 0 auto; scroll-snap-align: center;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.35rem;
  border-radius: 12px;
  background: #FFFFFF; color: var(--cm-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-size: 1.05rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cm-tab:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.cm-tab.is-active { background: var(--cm-accent); color: #FFFFFF; box-shadow: 0 6px 16px -6px rgba(78, 99, 32, .65); }
.cm-tab__icon { width: 24px; height: 24px; object-fit: contain; }

/* ---------- categories ---------- */
.cm-section { padding-top: 2.25rem; }
.cm-section__title {
  margin: 0 0 1.75rem;
  font-family: var(--cm-font); font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800;
  line-height: 1.15; letter-spacing: .01em; text-transform: uppercase;
  color: var(--cm-title);
}
.cm-list { display: grid; grid-template-columns: 1fr; gap: 2rem 3.5rem; }

/* ---------- dish row ---------- */
.cm-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  grid-template-areas:
    "thumb name price"
    "thumb info .";
  grid-template-rows: auto 1fr;
  column-gap: 1.25rem; row-gap: .4rem;
  align-items: start;
}
.cm-item__thumb {
  grid-area: thumb; position: relative;
  width: 96px; aspect-ratio: 1; overflow: hidden;
  border-radius: 18px;
  background: var(--cm-thumb);
}
.cm-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* no photo yet: shows the dish's first letter */
.cm-item__thumb.is-empty::before {
  content: attr(data-initial);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 700; color: var(--cm-accent); opacity: .4;
}

.cm-item__name {
  grid-area: name; margin: 0;
  font-family: var(--cm-font); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  color: var(--cm-title);
}
.cm-item__price {
  grid-area: price; margin: 0;
  max-width: 20rem;
  text-align: end; white-space: normal;
  font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--cm-price);
}
.cm-item__price small { display: block; font-size: .74rem; font-weight: 500; color: var(--cm-text); }

.cm-item__info { grid-area: info; min-width: 0; }
.cm-item__desc {
  margin: 0; font-size: 1rem; line-height: 1.55; font-weight: 400; color: var(--cm-text); white-space: pre-line;
}

/* Arabic text needs a bit more line height */
html[lang="ar"] .cm-item__desc { line-height: 1.7; }
html[lang="ar"] .cm-menu__eyebrow { font-size: .92rem; letter-spacing: 0; }
html[lang="ar"] .cm-section__title { letter-spacing: 0; }

/* ---------- responsive ---------- */
@media (min-width: 880px) {
  .cm-list { grid-template-columns: 1fr 1fr; }
  .cm-section#cm-mains .cm-list { grid-template-columns: 1fr 1fr; }
  .cm-section#cm-mains .cm-item {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb info";
  }
  .cm-section#cm-mains .cm-item__price {
    max-width: none;
    text-align: start;
  }
}
@media (max-width: 560px) {
  .cm-menu { padding-top: 2rem; }
  .cm-menu__head,
  .cm-menu__body { width: min(100% - 1.5rem, 1100px); }
  .cm-menu__title { font-size: 1.85rem; }
  .cm-menu__note { font-size: .9rem; line-height: 1.45; }
  .cm-tabs { margin-top: 1rem; padding: .25rem 0; }
  .cm-tabs__track { gap: .5rem; padding: .35rem .75rem .7rem; }
  .cm-tab { padding: .65rem .85rem; font-size: .84rem; }
  .cm-section { padding-top: 1.35rem; }
  .cm-section__title { margin-bottom: 1.1rem; font-size: 1.45rem; }
  .cm-list { gap: 1.35rem; }
  .cm-item { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: .7rem; row-gap: .3rem; }
  .cm-item__thumb { width: 64px; border-radius: 14px; }
  .cm-item__thumb.is-empty::before { font-size: 1.8rem; }
  .cm-item__name { font-size: .92rem; }
  .cm-item__price { max-width: 14rem; font-size: .72rem; line-height: 1.3; }
  .cm-item__price small { font-size: .66rem; line-height: 1.25; white-space: normal; }
  .cm-item__desc { font-size: .86rem; line-height: 1.45; }
}
@media (max-width: 360px) {
  .cm-item { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb price" "thumb info"; }
  .cm-item__thumb { width: 58px; }
  .cm-item__price { max-width: none; text-align: start; }
}