/* ===================================================================
   The Tee Room Cafe — Menu stylesheet
   Reuses The Golf Lounge's exact palette (same CSS variable names as
   style.css) so this page matches the rest of the site precisely.
   Built for two contexts at once: a Samsung Galaxy Tab A9 sitting on
   a table as a passive/touch menu, and a normal browser visit.
   =================================================================== */

:root {
  --color-bg: #121212;
  --color-card: #1a1a1a;
  --color-darkest: #0a0a0a;
  --color-accent: #d3f357;
  --color-text: #ffffff;
  --color-text-light: #a8a8a8;
  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  /* clip, not hidden, where the browser knows it: `hidden` makes the body a
     scroll box of its own that never scrolls, and the sticky title and
     categories (.menu-top) would scroll away with it. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Prevents the double-tap-to-zoom / accidental text selection that
     makes touch kiosks feel janky */
  user-select: none;
  -webkit-user-select: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- The title and the categories stay at the top ----------
   Mazin, 28 Sep 2026: "On the menu, when someone scrolls down, I want the
   title and the filter buttons to stay static". One sticky block, opaque so
   the menu slides under it, with a shadow once the page has moved. Its
   height never changes as it sticks, so nothing on the page jumps. Under
   the popups (9000), the screensaver (9999), the order bar and the call
   buttons; the call buttons keep below it (--uc-menu-top, service-box.js). */
.menu-top { position: sticky; top: 0; z-index: 60; background: var(--color-bg); transition: box-shadow .2s ease; }
.menu-top.is-stuck { box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }

/* ---------- Header (kept minimal on this page — the menu is the star) ---------- */
.menu-header {
  /* env(safe-area-inset-top) is 0 on Android fullscreen and on desktop, so
     this adds nothing there. On an iPad run from the home screen it keeps
     the title clear of the notch/status bar instead of sliding under it. */
  padding: calc(4px + env(safe-area-inset-top, 0px)) 0 6px;
  text-align: center;
}
.menu-header .cafe-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 40px); color: var(--color-text); margin: 0;
  letter-spacing: .02em;
  /* Body line-height of 1.5 puts ~10px of invisible leading above the
     caps on a 40px title, which reads as a gap even with no padding. */
  line-height: 1.1;
}
.menu-header .cafe-name .accent { color: var(--accent-ink, var(--color-accent)); }
.menu-header .cafe-sub { color: var(--color-text-light); font-size: 13.5px; margin: 4px 0 0; }
/* ---------- Category tabs ---------- */
.category-tabs {
  /* Wraps onto as many lines as it needs so every category is visible at
     once. Sideways scrolling hid categories off-screen with no hint they
     were there. Pills shrink a little rather than overflow. */
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 16px;
  justify-content: center;
}
@media (min-width: 900px) {
  .category-tabs { justify-content: center; }
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: 0 1 auto; min-width: 0; background: var(--color-card); border: 1px solid transparent;
  color: var(--color-text-light); font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; padding: 9px 16px; border-radius: 30px; cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.category-tab.active { background: var(--color-accent); color: var(--color-darkest); }
.category-tab:not(.active):hover { border-color: var(--color-accent); color: var(--color-text); }

/* ---------- Menu grid ---------- */
.menu-section { display: none; padding: 0 24px 60px; }
.all-view-heading {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 18px; color: var(--accent-ink, var(--color-accent)); letter-spacing: .03em;
  max-width: var(--max-width); margin: 22px auto 10px; padding: 0 0 7px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.all-view-heading:first-child { margin-top: 8px; }
.menu-section.active { display: block; }
.menu-grid {
  display: grid;
  /* Fixed 4 columns so the layout is predictable rather than reflowing
      to 2 on mid-size screens; 1fr lets the cards size to the space. */
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 12px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.item-card {
  background: var(--color-card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: grid-column .25s ease, transform .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(255,255,255,.06);
}
.item-card:hover { transform: translateY(-3px); border-color: rgba(211,243,87,.35); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }

.item-card .thumb-wrap {
  aspect-ratio: 16/10; overflow: hidden; position: relative; background: #0d0d0d;
}
.item-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.item-card:hover .thumb-wrap img { transform: scale(1.04); }

.item-card .card-body { padding: 10px 12px 12px; }
.item-card .item-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin: 0 0 2px; line-height: 1.25; }
.item-card .item-price { color: var(--accent-ink, var(--color-accent)); font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.item-card .item-teaser { color: var(--color-text-light); font-size: 11.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



/* ---------- Tablet-specific tuning ----------
   Samsung Galaxy Tab A9, used flat on a table in landscape, sits in
   roughly this width range. Larger touch targets, denser default
   grid so it looks well-populated and inviting at rest. */
@media (min-width: 1000px) and (max-width: 1400px) and (pointer: coarse) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 12px; }
  .item-card .item-name { font-size: 16px; }
  .category-tab { padding: 11px 20px; font-size: 14.5px; }
}

@media (max-width: 640px) {
  /* Phones keep 2 across — 3 would make the photos too small to read. */
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-tabs { padding: 10px 12px 12px; gap: 6px; }
  .category-tab { padding: 8px 13px; font-size: 12.5px; }
      }

/* ---------- Attract mode (kiosk screensaver) ----------
   Full-bleed product photography with the name and price over it. Two
   stacked image layers crossfade so there's never a blank frame between
   slides. Sits above everything and swallows the first touch, so waking
   the tablet can't accidentally open a menu item. */
.attract {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-bg);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.attract.on { opacity: 1; pointer-events: auto; }

.attract-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.attract-slide.visible { opacity: 1; }

/* Blurred, dimmed copy of the same photo, filling the screen. Gives the
   slide an edge-to-edge backdrop in the product's own colours instead of
   flat black bars, without cropping anything meaningful. */
/* A canvas 32 pixels wide, stretched: the browser's smoothing is the blur,
   and cafe-menu.js darkens it as it draws. No CSS filter - a full-screen
   blur(34px) redrawn every few seconds, all day, is what the menu tablets
   froze on (Mazin, 8 Oct 2026). */
.attract-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #000;
}

/* The photo itself — "contain" so the whole product is always visible,
   whatever shape it is. Inset from the bottom so it sits above the name
   and price rather than behind them. */
.attract-fg {
  position: absolute;
  top: 5vh; left: 6vw; right: 6vw; bottom: 26vh;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* Gradient keeps the text legible over any photo, light or dark. */
.attract::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,.1) 62%);
}
.attract-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 8vw 9vh; z-index: 2; text-align: center;
}
.attract-cat {
  font-family: var(--font-display); font-weight: 600; font-size: 2.1vh;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink, var(--color-accent));
  margin-bottom: 1.4vh;
}
.attract-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 6.4vh; line-height: 1.08; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.attract-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4vh; color: var(--accent-ink, var(--color-accent)); margin-top: 1.6vh;
}
.attract-hint {
  position: absolute; left: 0; right: 0; bottom: 3vh; z-index: 2;
  text-align: center; font-size: 1.8vh; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  animation: attract-pulse 2.6s ease-in-out infinite;
}
@keyframes attract-pulse { 0%,100% { opacity:.35 } 50% { opacity:.8 } }


/* ---------- Item popup ----------
   Sized entirely in viewport units so it always fits the screen without
   scrolling, whatever the device — the image takes the space left after
   the text rather than the other way round. */
body.popup-open { overflow: hidden; }

.item-popup {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0,0,0,.82);
  opacity: 0; transition: opacity .2s ease;
  cursor: pointer;
}
.item-popup.on { opacity: 1; }

.item-popup-inner {
  display: flex; flex-direction: column;
  width: min(560px, 92vw); max-height: 92vh;
  background: var(--color-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden;
  transform: scale(.96); transition: transform .2s ease;
}
.item-popup.on .item-popup-inner { transform: scale(1); }

.item-popup-media { flex: 1 1 auto; min-height: 0; background: #0d0d0d; }
.item-popup-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.item-popup-body { flex: 0 0 auto; padding: 16px 20px 18px; }
.item-popup-name {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  line-height: 1.2; margin-bottom: 4px;
}
.item-popup-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--accent-ink, var(--color-accent));
}
.item-popup-desc {
  color: var(--color-text-light); font-size: 13.5px; line-height: 1.5;
  margin: 8px 0 0;
  /* Capped rather than scrolled — a long description must not push the
     popup taller than the screen. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.item-popup-hint {
  margin-top: 12px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
}
/* Option chips inside the popup reuse the menu's own styling. */
.item-popup .option-group { margin-top: 12px; }

/* ---- Wave 3 batch 6: accessibility ----------------------------------------
   Where the focus is, for anyone moving with a keyboard: every control that
   takes it shows a ring in the venue's accent. Fields keep the border they
   already change on focus; the ring is for what has no other sign.
   And less movement for anyone whose device asks for it: nothing slides,
   fades or scrolls by itself. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 3px solid var(--color-accent, #d3f357) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}