@import url("fonts.css");

/* ============================================================================
   «المنيو الذكي», the big-screen board.
   Two axes the shop chooses at setup and never touches again:
     data-orient : h (landscape)  |  v (portrait)
     data-mode   : full (whole menu) | slides (one category at a time)

   Sizing is driven by --u = 1% of the STAGE height (not 1vh), because in
   portrait-on-a-landscape-TV the stage is rotated 90° and viewport units stop
   describing the surface the customer is actually looking at. tv.js sets it.
   ========================================================================== */

:root {
  /* Matches the eMenu flyer (flyer/emenu/emenu-flyer.html), which draws the
     shop screen itself on cream: cream ground, ink content, vermilion the only
     saturated colour, hairline rules. */
  --bg:      #F4F1EA;
  --panel:   #FFFFFF;
  --line:    #D8D2C4;
  --rule:    #1C1B18;
  --text:    #1C1B18;
  --muted:   #6E6759;
  --sand:    #B4AC9C;
  --accent:  #D64B2A;
  --scale:   1;
  --u:       1vh;     /* replaced by tv.js with a px value */

  --f-body:    'almarai', Tahoma, sans-serif;
  --f-display: 'Noto Kufi Arabic', 'almarai', Tahoma, sans-serif;
  --f-num:     'Changa', 'almarai', Tahoma, sans-serif;
  --f-logo:    'Arslan Wessam B', 'Noto Kufi Arabic', Tahoma, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body { color: var(--text); font-family: var(--f-body); }
a { color: inherit; text-decoration: none; }

/* ---------------- the stage ---------------- */
.stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}
/* Portrait content on a TV whose output cannot be rotated: compose a portrait
   canvas and turn it a quarter turn to fill the landscape panel. When the
   screen is already portrait, no rotation is needed. */
@media (orientation: landscape) {
  [data-orient="v"] .stage {
    inset: auto; top: 0; left: 0;
    width: 100vh; height: 100vw;
    transform-origin: top left;
    transform: rotate(90deg) translate(0, -100%);
  }
}

/* ---------------- header ---------------- */
.tv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(3 * var(--u));
  padding: calc(2.2 * var(--u)) calc(3 * var(--u)) calc(1.8 * var(--u));
  border-bottom: 2px solid var(--rule);
  flex: 0 0 auto;
}
.tv-logo { display: flex; align-items: center; gap: calc(.6 * var(--u)); --logo-h: calc(3.4 * var(--u)); margin-bottom: calc(.8 * var(--u)); }
.tv-logo .mark { width: calc(var(--logo-h) * 1.38); height: var(--logo-h); flex: 0 0 auto; }
.tv-logo .mark svg { width: 100%; height: 100%; display: block; }
.tv-logo .name { font-family: var(--f-logo); font-size: calc(var(--logo-h) * .95); line-height: 1; margin-top: calc(var(--logo-h) * -.09); }
.tv-logo .dd { font-size: 1.18em; position: relative; top: -.16em; display: inline-block; margin-inline-end: -.05em; }

.tv-brand { font-family: var(--f-display); font-weight: 800; font-size: calc(4.2 * var(--u)); line-height: 1.25; letter-spacing: -.01em; }
.tv-brand .dot { color: var(--accent); }
.tv-sub { color: var(--muted); font-size: calc(1.9 * var(--u)); margin-top: calc(.3 * var(--u)); }
.tv-meta { text-align: start; flex: 0 0 auto; }
.tv-clock { font-family: var(--f-num); font-weight: 800; font-size: calc(4.2 * var(--u)); color: var(--accent); direction: ltr; line-height: 1.1; }
.tv-rate { color: var(--muted); font-size: calc(1.8 * var(--u)); }
.tv-rate b { font-family: var(--f-num); color: var(--text); direction: ltr; }

/* ---------------- body ---------------- */
.tv-body { flex: 1 1 auto; min-height: 0; position: relative; }

/* ---- full menu ---- */
.board {
  height: 100%;
  padding: calc(2 * var(--u)) calc(3 * var(--u));
  column-count: 3;
  column-gap: calc(3.4 * var(--u));
  column-fill: balance;
  overflow: hidden;
}
[data-orient="v"] .board { column-count: 1; }
[data-mode="slides"] .board { display: none; }

.tv-cat { break-inside: avoid; margin-bottom: calc(2.4 * var(--u)); }
.tv-cat h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: calc(2.5 * var(--u) * var(--scale));
  color: var(--accent);
  padding-bottom: calc(.5 * var(--u));
  margin-bottom: calc(.8 * var(--u));
  border-bottom: 1px solid var(--line);
}
.tv-item { display: flex; align-items: baseline; gap: calc(.8 * var(--u)); padding: calc(.55 * var(--u)) 0; }
/* the dishes the shop chose to draw carry their drawing on the board too */
.tv-art {
  align-self: center; flex: 0 0 auto;
  width: calc(5.6 * var(--u) * var(--scale));
  height: calc(4.2 * var(--u) * var(--scale));
}
.tv-art svg, .tv-art img { width: 100%; height: 100%; object-fit: contain; }
.tv-item .n { font-weight: 700; font-size: calc(2.15 * var(--u) * var(--scale)); min-width: 0; }
.tv-item .lead { flex: 1 1 auto; border-bottom: 1px dotted var(--line); transform: translateY(calc(-.4 * var(--u))); min-width: calc(1 * var(--u)); }
.tv-item .p { font-family: var(--f-num); font-weight: 800; font-size: calc(2.25 * var(--u) * var(--scale)); color: var(--text); direction: ltr; white-space: nowrap; }

/* ---- slideshow ---- */
.slides { display: none; height: 100%; position: relative; }
[data-mode="slides"] .slides { display: block; }
.slide {
  position: absolute; inset: 0;
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(calc(2 * var(--u)));
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.slide.on { opacity: 1; visibility: visible; transform: none; }
.slide h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: calc(5 * var(--u));
  color: var(--accent);
  border-bottom: 2px solid var(--rule);
  padding-bottom: calc(1.4 * var(--u));
  margin-bottom: calc(2 * var(--u));
  flex: 0 0 auto;
}
/* centred, not top-aligned: a category of three items should sit in the middle
   of the screen rather than hang off the top with a void underneath */
.slide .list {
  flex: 1 1 auto; min-height: 0;
  display: grid; align-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(5 * var(--u));
  row-gap: calc(.4 * var(--u));
}
[data-orient="v"] .slide .list { grid-template-columns: 1fr; }
.slide .it { display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.6 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.slide .art { width: calc(10 * var(--u)); height: calc(7.5 * var(--u)); flex: 0 0 auto; }
.slide .art svg, .slide .art img { width: 100%; height: 100%; object-fit: contain; }
.slide .txt { flex: 1 1 auto; min-width: 0; }
.slide .n { font-weight: 700; font-size: calc(3.2 * var(--u)); line-height: 1.4; }
.slide .d { color: var(--muted); font-size: calc(2.1 * var(--u)); line-height: 1.5; }
.slide .p { font-family: var(--f-num); font-weight: 800; font-size: calc(3.4 * var(--u)); direction: ltr; white-space: nowrap; }

.dots { display: flex; justify-content: center; gap: calc(1 * var(--u)); padding-top: calc(1.6 * var(--u)); flex: 0 0 auto; }
.dots i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 999px; background: var(--line); transition: width .3s, background .3s; }
.dots i.on { width: calc(4 * var(--u)); background: var(--accent); }

/* ---------------- footer ---------------- */
/* three tracks so the gear sits dead centre regardless of the side widths */
.tv-foot {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: calc(3 * var(--u));
  background: var(--bg); color: var(--text);
  border-top: 2px solid var(--rule);
  padding: calc(1.5 * var(--u)) calc(3 * var(--u));
  font-weight: 700; font-size: calc(2.1 * var(--u));
}
.tv-foot > :last-child { text-align: end; }
.tv-foot .num { font-family: var(--f-num); font-weight: 800; font-size: calc(2.8 * var(--u)); direction: ltr; color: var(--accent); }
.tv-foot .by { font-size: calc(1.7 * var(--u)); color: var(--muted); }

/* ---------------- setup UI ---------------- */
/* Lives inside the stage so it reads at the same angle as the menu. The opener
   is a bare icon in the footer centre: no button chrome to compete with the
   menu, and nowhere near the logotype. */
.ui-open {
  grid-column: 2;
  display: grid; place-items: center;
  width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u));
  padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer;
  opacity: .55; transition: opacity .2s, color .2s;
}
.ui-open:hover, .ui-open:focus-visible { opacity: 1; color: var(--accent); }
.ui-open svg { width: 100%; height: 100%; }

.ui-backdrop {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(28, 27, 24, .35);
}
.ui-backdrop[hidden] { display: none; }

.ui {
  position: absolute; z-index: 10;
  bottom: calc(11 * var(--u));
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: calc(1.2 * var(--u));
  background: var(--panel);
  border: 1px solid var(--rule); border-radius: calc(1.2 * var(--u));
  padding: calc(2.4 * var(--u)) calc(2 * var(--u)) calc(1.8 * var(--u));
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.ui.show { opacity: 1; visibility: visible; }
.ui .grp { display: flex; align-items: center; gap: calc(1 * var(--u)); }
.ui .lbl { font-size: calc(1.6 * var(--u)); color: var(--muted); min-width: calc(11 * var(--u)); }
.ui button[data-set] {
  font-family: var(--f-body); font-weight: 700; font-size: calc(1.6 * var(--u));
  color: var(--text); background: transparent;
  border: 1px solid var(--line); border-radius: calc(.8 * var(--u));
  padding: calc(.7 * var(--u)) calc(1.6 * var(--u));
  cursor: pointer;
}
.ui button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--panel); }
.ui a { font-size: calc(1.5 * var(--u)); color: var(--muted); }

.ui-close {
  position: absolute; inset-block-start: calc(.8 * var(--u)); inset-inline-end: calc(.8 * var(--u));
  width: calc(3 * var(--u)); height: calc(3 * var(--u));
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer;
}
.ui-close:hover, .ui-close:focus-visible { color: var(--accent); }
.ui-close svg { width: 65%; height: 65%; }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}