/* UPGRADE v4.2 + v4.3 — SAFE PATCH
   Preserves v4.1 behavior (splash, tabs, layout, glow above price).
   Adds: thicker header, silky fade, smaller footer band, slim lang pill, subtle band parallax.
   DO NOT modify splash styles, tabs structure, or menu card layout ratios.
*/

/* ====================== THEME (v4.1) ====================== */
:root{
  --gold:#d3a437; --deep-gold:#b6892a; --brick:#a33a21; --earth:#7a3b1b;
  --ink:#28160f; --cream:#f1e7d6;

  --radius-3xl:30px; --radius-2xl:26px;
  --pad-2xl:clamp(24px,4.8vw,40px);

  --header-h:116px;               /* v4.2 thicker header */
  --parallax-scale-top: 0.08;     /* very gentle parallax for header band */
  --parallax-scale-bottom: -0.06; /* counter parallax for footer band */
  --maxw:1200px;
}

/* Base overflow (hide OS scrollbar on the document) */
html, body{
  height: 100%;
  overflow: hidden; /* hide OS scrollbar; inner scroller handles content */
}

/* Leather-like background */
body{
  margin:0; color:var(--cream);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(233,198,133,.20), transparent 60%),
    radial-gradient(1200px 600px at 120% 110%, rgba(163,58,33,.15), transparent 60%),
    linear-gradient(180deg, #5e2b14 0%, #4b220f 40%, #3a1a0c 100%);
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.no-scroll{ overflow:hidden; height:100vh; }
.screen{ min-height:100svh; width:100%; position:relative; overflow:hidden; }

/* ====================== SPLASH ====================== */
.screen--splash{ background: inherit; }
.splash__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); }
.splash__content{ position:relative; z-index:1; min-height:100%; display:grid; place-items:center; gap:22px; padding: var(--pad-2xl); }
.welcome-pill{
  padding:6px 12px; border-radius:999px;
  background: rgba(35,19,12,.55); border:1px solid rgba(211,164,55,.35);
  color:#f6ead1; letter-spacing:.22em; font-weight:900; font-size:.82rem;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.splash__logo{ width:min(75%,480px); height:auto; border-radius:var(--radius-3xl); box-shadow:0 22px 60px rgba(0,0,0,.58); object-fit:cover; }
.cta{
  letter-spacing:.12em; padding:14px 26px; border:1.5px solid rgba(255,255,255,.25); border-radius:999px;
  background:linear-gradient(180deg, rgba(211,164,55,.96), rgba(182,137,42,.96));
  color:#2a160c; font-weight:800; box-shadow:0 10px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .25s ease;
}
.cta:hover{ transform: translateY(-1px); box-shadow:0 12px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4); }

/* ====================== MENU / HEADER ====================== */
.screen--menu{ display:grid; grid-template-rows:auto 1fr; }

/* Header container: transparent so nothing shows beneath the band */
.site-header{
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: transparent;                 /* critical */
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* Use a pseudo-element that ALWAYS covers the entire header area */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, rgba(43,19,9,0.78), rgba(43,19,9,0.78)),
    url("../assets/header-band.png");
  background-repeat: no-repeat, repeat-x;
  background-size: auto, cover;
  background-position: center, center calc(var(--band-offset, 0px)); /* gentle parallax still works */
  pointer-events:none;
  z-index: -1;   /* sits behind the brand text inside the header */
}

/* If the old .pattern--top element exists, hide it (to avoid double layers) */
.pattern--top{ display:none !important; }

/* thin gold hairline below header (silky separation) */
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(211,164,55,.72), transparent);
  box-shadow: 0 0 6px rgba(211,164,55,.35);
  pointer-events:none;
}

.brand{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; text-align:center; padding:0 14px; }
.brand__title{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight:900; font-size:clamp(18px,4.2vw,26px); letter-spacing:.07em;
  color:#f3e6c9; text-shadow:0 1px 0 #5e3115, 0 2px 6px rgba(0,0,0,.35);
}
.brand__title .of{ color:var(--gold); }
.brand__tagline{ margin-top:10px; font-style:italic; color:rgba(255,245,231,.92); font-size:.98rem; }

/* Disable the brown fade below header; we want ONLY the gold hairline */
.header-fade{
  display: none !important;
  height: 0 !important;
}

/* Scroll area under header */
.menus{
  height: calc(100svh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-top:0 !important; /* Ensure content edge touches the gold line */

  /* visually hide the inner scrollbar too (Firefox + WebKit + legacy) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.menus::-webkit-scrollbar{ width:0; height:0; display:none; } /* WebKit */

/* ====================== PANELS ====================== */
.snap{
  scroll-snap-align:start;
  min-height: calc(100svh - var(--header-h));
  display:flex; align-items:stretch;
  padding: min(3vw, 20px);
}

/* The first card should not round at the very top or add extra top padding */
.snap:first-child{ padding-top:0 !important; }
.snap:first-child .menu-card{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}
.menu-card{
  width:100%;
  background: linear-gradient(180deg, rgba(40,22,15,.82), rgba(40,22,15,.94));
  border-radius: var(--radius-3xl);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow: hidden;
}
.menu-card__grid{
  display:grid; grid-template-columns: 1fr; max-width: var(--maxw); margin:0 auto;
  gap: clamp(16px, 2.5vw, 28px);
}
.menu-card__body{ padding: var(--pad-2xl); display:flex; flex-direction:column; gap:12px; justify-content:center; }
.menu-card__title{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight:900; letter-spacing:.22em; color: var(--gold);
  font-size: clamp(20px, 6vw, 34px); margin: 0 0 6px; text-transform: uppercase;
}
.menu-card__subtitle{ margin:0 0 6px; font-size: clamp(16px,4.2vw,22px); font-weight:700; color:#f6e9cf; }
.menu-card__desc{ margin:0; color:#f3e6c9; line-height:1.5; opacity:.92; max-width:46ch; }

/* v4.1: glowy divider above price only */
.menu-card__divider{
  height:1px; margin:10px 0 6px;
  background: linear-gradient(90deg, transparent, rgba(211,164,55,.7), transparent);
  box-shadow: 0 0 6px rgba(211,164,55,.35);
}
.menu-card__price{ font-weight:900; font-size: clamp(18px,4.8vw,26px); color: var(--gold); }

.menu-card__media{
  position:relative; min-height: 44svh; background:#1e0f09;
  display:grid; place-items:center;
  border-top-right-radius: var(--radius-3xl);
  border-bottom-right-radius: var(--radius-3xl);
  overflow:hidden; box-shadow: inset 0 0 0 1px rgba(211,164,55,.15);
}
.menu-card__media img{ width:100%; height:100%; object-fit: cover; object-position: center; aspect-ratio: 4 / 3; filter: contrast(1.05) saturate(1.04); }
/* If .menu-card__label still exists in the HTML, hide it */
.menu-card__label{ display:none !important; }

@media (min-width:900px){
  .menu-card__grid{ grid-template-columns: 1fr 2fr; }
  .menu-card__media{ min-height:auto; }
}

/* ====================== FOOTER (v4.1 height) ====================== */
.site-footer{
  position: fixed; left:0; right:0; bottom:0; z-index:55;
  transform: translateY(100%); opacity:0;
  transition: transform .35s ease, opacity .35s ease;
}
.site-footer.is-visible{ transform: translateY(0); opacity:1; }

.pattern--bottom{
  height:40px; /* ~half of v4.1 */
  background-image:
    linear-gradient(to top, rgba(43,19,9,0.78), rgba(43,19,9,0.78)),
    url("../assets/header-band.png");
  background-repeat: no-repeat, repeat-x;
  background-size: auto, cover;
  background-position: center, center calc(var(--band-offset-bottom, 0px));
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.20), 0 -2px 10px rgba(0,0,0,.22);
}

/* Gold hairline at top of footer (mirror header) */
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(211,164,55,.72), transparent);
  box-shadow: 0 0 6px rgba(211,164,55,.35);
  pointer-events:none;
}

.footer__content{
  background: linear-gradient(180deg, rgba(40,22,15,.96), rgba(40,22,15,.98));
  padding: 10px 16px 14px; display:grid; gap:6px; place-items:center; color:#f4e9d0;
}
.footer__brand{ font-weight:900; letter-spacing:.12em; color:#f3e6c9; }
.footer__contact{ opacity:.85; font-size:.92rem; text-align:center; }
.footer__social{ display:flex; gap:12px; }
.sicon{ width:32px; height:32px; display:grid; place-items:center; background: rgba(35,19,12,.7); border:1px solid rgba(211,164,55,.32); border-radius:50%; }

/* Allow last card to clear the footer height */
.snap.is-last{ padding-bottom:120px; }

/* ====================== RIGHT-EDGE HALF-PILL TABS (v4.1) ====================== */
.tabs{
  position: fixed; right:0; top: 50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:65;
  /* Hidden on splash via JS by display:none; no antenna lines */
}
.tab{
  pointer-events:auto;
  width:28px; height:20px; /* small */
  border:none;
  background: rgba(255,255,255,0.06); /* translucent */
  border-top-left-radius: 14px; border-bottom-left-radius: 14px; /* half-pill */
  box-shadow:
    inset 0 0 0 1px rgba(211,164,55,.65), /* thin glowing edge */
    0 2px 8px rgba(0,0,0,.25);
  transition: box-shadow .2s ease, background .2s ease;
  font-size:0; line-height:0; /* In case any text slipped into the pills, hide it */
}
.tab.active{
  background: rgba(211,164,55,.18);
  box-shadow:
    inset 0 0 0 1px rgba(211,164,55,.95),
    0 0 0 4px rgba(211,164,55,.20),
    0 4px 12px rgba(0,0,0,.35);
}

/* ====================== LANGUAGE TOGGLE — slimmer/tighter (v4.3) ====================== */
.lang-toggle{
  position:absolute; right:12px; bottom:16px;
  background: rgba(35,19,12,.55);
  border:1px solid rgba(211,164,55,.35);
  border-radius:999px; padding:3px 8px; gap:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  display:flex; align-items:center;
}
.lang-btn{
  color:#f4e9d0; font-weight:800; letter-spacing:.06em;
  background:none; border:none; padding:0 2px;
  font-size:.85rem; line-height:1.1; cursor:pointer;
}
.lang-btn.active{ color:var(--gold); }
.lang-sep{ color:rgba(244,233,208,.6); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ===== Today's Special Stamp ===== */
.special-stamp{
  --stamp-bg: var(--special-color, #b2352c);
  --stamp-bg-dark: var(--special-color-dark, #8f2721);

  position:absolute;
  top:14px; left:14px;
  transform: rotate(-12deg);
  z-index: 2;

  display:grid; place-items:center;
  width: 142px; height: 142px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, var(--stamp-bg), var(--stamp-bg-dark));
  box-shadow:
    0 6px 14px rgba(0,0,0,.25),
    inset 0 2px 6px rgba(255,255,255,.15),
    inset 0 -2px 8px rgba(0,0,0,.25);
  border: 3px solid rgba(255,255,255,.16);

  outline: 2px dotted rgba(0,0,0,.30);
  outline-offset: 4px;
}

.special-stamp__text{
  text-align:center;
  padding:10px 12px;
  line-height:1.05;
  color:#fff8f6;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.special-stamp__title{
  display:block;
  font-weight:900;
  letter-spacing:.10em;
  font-size:.78rem;
}

.special-stamp__offer{
  display:block;
  margin-top:6px;
  font-weight:800;
  letter-spacing:.04em;
  font-size:.72rem;
  color:#ffe3de;
}

.menu-card__media{ position:relative; }

/* Responsive */
@media (max-width: 720px){
  .special-stamp{ width:100px; height:100px; top:10px; left:10px; }
  .special-stamp__title{ font-size:.7rem; }
  .special-stamp__offer{ font-size:.6rem; }
}
@media (max-width: 420px){
  .special-stamp{ width:85px; height:85px; top:8px; left:8px; }
  .special-stamp__title{ font-size:.62rem; }
  .special-stamp__offer{ font-size:.55rem; }
}

/* Image missing placeholder */
.img-missing {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(241,231,214,0.3);
  font-size: 3rem;
  background: rgba(0,0,0,0.1);
  border-radius: 12px;
}

/* Mobile Enhancements */
@media (max-width: 720px){
  body{ font-size:15px; line-height:1.4; }
  .menu-card{ flex-direction: column; padding:16px; }
  .menu-card__text{ width:100%; text-align:center; }
  .menu-card__media{ width:100%; max-height:240px; }
  .menu-card__media img{ width:100%; border-radius:12px; }
  .footer{ font-size:.82rem; padding:12px; }
}