/* Oh!Mumbai — frontend polish layer.
   Loads AFTER character.css. Scope: interaction, menu scan-rhythm, gallery
   lightbox, booking popup, header dropdown, mobile at ~390px.
   NO structural HTML changes, NO copy edits, NO JS changes. */

/* ─── Global micro-tokens ─────────────────────────────────────────────────── */
:root{
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --shadow-card:    0 22px 44px -28px rgba(41,27,22,.32);
  --shadow-card-h:  0 28px 60px -22px rgba(41,27,22,.42);
}

/* Motion-safe scroll behaviour — prevents janky scrollbar shift during
   popup/lightbox open (we set body { overflow:hidden } from JS). */
html{scrollbar-gutter:stable}

/* Hover motion only when the input can actually hover — kills sticky
   hover on touch devices that keep the last :hover state after tap. */
@media (hover:none){
  main button[type="button"]:hover img,
  main .mn-card:hover .mn-img img{transform:none}
}

/* ─── Menu tabs — sliding underline indicator ─────────────────────────────── */
/* The existing chocolate pill is kept for the active state; on top we add
   a slim saffron underline that anchors the eye and gives the tab bar
   editorial rhythm. */
.mn-tabs{position:relative;flex-wrap:wrap}
.mn-tab{
  position:relative;
  overflow:hidden;
  transition:color .3s ease, background-color .35s ease, transform .3s var(--ease-spring);
}
.mn-tab::before{
  content:"";
  position:absolute;left:22px;right:22px;bottom:8px;height:1px;
  background:var(--color-saffron);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--ease-out-quart), opacity .3s ease;
  opacity:0;
}
.mn-tab:hover:not(.is-active)::before{transform:scaleX(1);opacity:.85}
.mn-tab.is-active::before{opacity:0}
.mn-tab.is-active{transform:translateY(0)}

/* ─── Menu view switcher — refined indicator ──────────────────────────────── */
.mn-view{
  background:rgba(41,27,22,.05);
  border:1px solid rgba(41,27,22,.06);
  padding:5px;
}
.mn-view button{
  height:40px;padding:0 16px;gap:6px;
  font-size:.9375rem;letter-spacing:.01em;
  transition:color .3s ease;
}
.mn-view button svg{opacity:.7;transition:opacity .3s ease}
.mn-view button.is-active svg{opacity:1;color:var(--color-terracotta)}
.mn-view-ind{
  top:5px;left:5px;
  height:40px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 18px -8px rgba(41,27,22,.4), 0 1px 0 rgba(255,255,255,.5) inset;
}

/* ─── Menu grid — rhythm + entrance ───────────────────────────────────────── */
.mn-grid{gap:28px;row-gap:clamp(2.5rem,4.2vw,3.75rem)}
.mn-card{
  transition:transform .5s var(--ease-out-quart);
}
/* image gets the interactive lift; text stays in place — cleaner scan */
.mn-card .mn-img{
  transition:box-shadow .5s var(--ease-out-quart), transform .5s var(--ease-out-quart);
  will-change:transform;
}
.mn-card:hover .mn-img{
  transform:translateY(-4px);
  box-shadow:0 30px 50px -30px rgba(41,27,22,.55);
}

/* body swap smoother — feels less "flicker" */
.mn-body{transition:opacity .28s ease, transform .32s var(--ease-out-quart)}
.mn-body.is-out{opacity:0;transform:translateY(8px)}

/* ─── Menu — chili tag normalization (align with .mn-pill style) ──────────── */
/* The chili SVG lives in a red pill at top-2 left-2 h-12 — visually
   inconsistent with the veg/nonalc pill (chocolate glass, h-30, top-12).
   Normalize to the same editorial pill treatment, but use terracotta as
   the accent so "острое" still reads as heat. */
.mn-img > span.absolute.top-2.left-2{
  top:12px !important;
  left:12px !important;
  right:auto;
  height:30px !important;
  padding:0 8px 0 4px;
  background:color-mix(in srgb, var(--color-chocolate) 62%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(242,232,212,.14);
  color:var(--color-cream);
  align-items:center;
}
.mn-img > span.absolute.top-2.left-2 > span.grid.h-12.w-12{
  height:22px;width:22px;
}
.mn-img > span.absolute.top-2.left-2 svg{width:16px;height:16px;color:var(--color-saffron)}
.mn-img > span.absolute.top-2.left-2 .font-geometria{
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  padding-right:8px !important;
}

/* ─── Menu name + meta refinement ─────────────────────────────────────────── */
.mn-name{text-wrap:balance}
.mn-desc{
  max-width:44ch;
  text-wrap:pretty;
  hyphens:auto;-webkit-hyphens:auto;
}

/* ─── Menu PDF view — warmer placeholder ──────────────────────────────────── */
.mn-pdf{
  border:1px solid color-mix(in srgb, var(--color-chocolate) 6%, transparent);
  box-shadow:var(--shadow-card);
}
.mn-pdf-head h3{letter-spacing:-.01em}
.mn-pdf-head a{color:var(--color-terracotta);text-decoration-color:color-mix(in srgb, var(--color-terracotta) 40%, transparent)}
.mn-pdf-head a:hover{color:var(--color-terracotta-hover);text-decoration-color:currentColor}

/* ─── Interior gallery — richer press feedback ────────────────────────────── */
main.bg-biege .gal button[type="button"]{
  transform-origin:center;
}
main.bg-biege .gal button[type="button"]:active{transform:scale(.985)}
main.bg-biege .gal button[type="button"]:hover img{
  filter:saturate(1.1) contrast(1.02) brightness(1.02);
}

/* subtle glass caption overlay on hover — hint that these open ──────────── */
main.bg-biege .gal button[type="button"]{position:relative}
main.bg-biege .gal button[type="button"]::after{
  content:"";
  position:absolute;inset:auto 10px 10px auto;
  width:34px;height:34px;
  border-radius:999px;
  background:color-mix(in srgb, var(--color-chocolate) 60%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f2e8d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 3 21 3 21 9'/><polyline points='9 21 3 21 3 15'/><line x1='21' y1='3' x2='14' y2='10'/><line x1='3' y1='21' x2='10' y2='14'/></svg>");
  background-repeat:no-repeat;background-position:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .35s var(--ease-out-quart);
  pointer-events:none;z-index:2;
}
main.bg-biege .gal button[type="button"]:hover::after,
main.bg-biege .gal button[type="button"]:focus-visible::after{opacity:1;transform:translateY(0)}

/* ─── Lightbox — warmer controls + count on top ───────────────────────────── */
.lb{
  background:radial-gradient(ellipse 100% 80% at 50% 50%, rgba(41,27,22,.9) 0%, rgba(28,17,14,.96) 90%);
  overscroll-behavior:contain;
}
.lb img{box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.lb-btn{
  background:color-mix(in srgb, var(--color-biege) 12%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);
  border:1px solid rgba(242,232,212,.14);
  transition:background-color .3s ease, transform .35s var(--ease-out-quart), border-color .3s ease;
}
.lb-btn:hover{
  background:color-mix(in srgb, var(--color-biege) 22%, transparent);
  border-color:rgba(242,232,212,.32);
  transform:scale(1.06);
}
.lb-prev:hover{transform:scale(1.06) translateX(-2px)}
.lb-next:hover{transform:scale(1.06) translateX(2px)}
.lb-btn:active{transform:scale(.97)}
.lb-count{
  top:26px;bottom:auto;
  color:var(--color-cream);
  font-size:.8125rem;letter-spacing:.14em;
  padding:6px 14px;
  background:color-mix(in srgb, var(--color-biege) 8%, transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(242,232,212,.12);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}

/* ─── Booking popup — refined chrome ──────────────────────────────────────── */
.bk-overlay{
  background:color-mix(in srgb, var(--color-chocolate-deep, #3a2823) 55%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  overscroll-behavior:contain;
}
.bk-card{
  box-shadow:0 40px 100px -30px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.6) inset;
  border:1px solid rgba(41,27,22,.06);
  padding:80px 56px 88px;
}
.bk-title{
  font-family:var(--font-gertika),serif;
  font-weight:400;
  letter-spacing:-.015em;
  max-width:22ch;
  margin-inline:auto;
  padding-bottom:.5rem;
  position:relative;
}
.bk-title::after{
  content:"";display:block;
  width:44px;height:1px;
  background:var(--color-saffron);
  margin:1.25rem auto 0;
}
.bk-label{
  font-family:var(--font-geometria),sans-serif;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--color-saffron-deep, #ad7a3a);
  margin-bottom:1.25rem;
}
.bk-phone{
  font-weight:400;letter-spacing:-.02em;
  transition:color .3s ease;
}
.bk-close{
  transition:color .3s ease, background-color .3s ease, transform .35s var(--ease-out-quart);
}
.bk-close:hover{
  background:var(--color-seashell);
  color:var(--color-chocolate);
  transform:rotate(90deg);
}
.bk-icons a{
  transition:transform .35s var(--ease-out-quart), filter .3s ease;
}
.bk-icons a:hover{transform:translateY(-4px);filter:drop-shadow(0 6px 12px rgba(41,27,22,.2))}
.bk-icons a:active{transform:translateY(-1px)}

/* ─── Header — nav tap targets, dropdown card hover ───────────────────────── */
/* Dropdown menu cards: promote hover from image-only to card lift */
.menu-panel .group\/card{
  transition:transform .35s var(--ease-out-quart);
}
.menu-panel .group\/card:hover{transform:translateY(-3px)}
.menu-panel .group\/card > div.overflow-hidden{
  transition:box-shadow .35s var(--ease-out-quart);
}
.menu-panel .group\/card:hover > div.overflow-hidden{
  box-shadow:0 22px 44px -24px rgba(41,27,22,.4);
}
.menu-panel .group\/card > span{
  letter-spacing:.005em;
  transition:color .35s ease, letter-spacing .35s ease;
}
.menu-panel .group\/card:hover > span{letter-spacing:.02em}

/* Burger button — clean idle + hover states */
.nav-burger{
  border-radius:10px;
  transition:background-color .3s ease;
}
.nav-burger:hover{background:color-mix(in srgb, var(--color-biege) 8%, transparent)}
.site-header.is-nav .nav-burger:hover{background:color-mix(in srgb, var(--color-chocolate) 6%, transparent)}
.nav-burger:active{transform:scale(.94)}

/* Mobile nav sheet — warmer background, saffron current-page marker */
@media (max-width:768px){
  .site-header.is-nav header>div.col-span-5{
    background:linear-gradient(180deg, #fff 0%, #faf7ef 100%);
  }
  .site-header.is-nav .nav-current{
    color:var(--color-terracotta);
  }
  .site-header.is-nav .nav-current::before{
    content:"";display:inline-block;
    width:20px;height:1px;background:var(--color-saffron);
    margin-right:12px;vertical-align:middle;
  }
}

/* ─── Focus — richer ring on interactive surfaces ─────────────────────────── */
.mn-tab:focus-visible,
.mn-view button:focus-visible{
  outline-offset:-2px;
  background:color-mix(in srgb, var(--color-saffron) 12%, transparent);
}
.bk-close:focus-visible,
.lb-btn:focus-visible{outline-offset:2px}

/* ─── Ripple button — smoother, warmer glow ───────────────────────────────── */
main button > span[aria-hidden].rounded-full,
footer button > span[aria-hidden].rounded-full,
.site-header button > span[aria-hidden].rounded-full{
  transition:width .55s var(--ease-out-quart), height .55s var(--ease-out-quart), opacity .3s ease !important;
  opacity:.75;
}

/* ─── Menu tab bar mobile — no scroll, wrap gracefully at 390px ───────────── */
@media (max-width:768px){
  .mn-bar{gap:20px}
  .mn-tabs{
    justify-content:flex-start;
    overflow-x:visible;
    flex-wrap:wrap;
    gap:6px;
    scrollbar-width:auto;
  }
  .mn-tab{
    flex:0 0 auto;
    font-size:.9375rem;
    padding:11px 16px;
    letter-spacing:.005em;
  }
  .mn-tab::before{left:16px;right:16px;bottom:5px}
  .mn-view{align-self:flex-start;padding:4px}
  .mn-view button{height:36px;padding:0 12px;font-size:.875rem}
  .mn-view-ind{height:36px}
}

/* ─── Mobile phones ~390px: menu card refinements ─────────────────────────── */
@media (max-width:768px){
  /* card image gets a tighter aspect on phones for scan speed */
  .mn-card{gap:.25rem}
  .mn-img{aspect-ratio:1/1.05;border-radius:10px}
  .mn-name{font-size:1rem;padding-top:.55rem;line-height:1.22}
  .mn-meta{font-size:.875rem;padding-top:.3rem;margin-top:.25rem}
  .mn-desc{font-size:.875rem;line-height:1.5;margin-top:.35rem}
  .mn-pill{
    height:26px;padding:0 9px;font-size:.6875rem;letter-spacing:.08em;
    top:10px;left:10px;
  }
  .mn-img > span.absolute.top-2.left-2{
    height:26px !important;top:10px !important;left:10px !important;
    padding:0 6px 0 2px;
  }
  .mn-img > span.absolute.top-2.left-2 > span.grid.h-12.w-12{height:20px;width:20px}
  .mn-img > span.absolute.top-2.left-2 svg{width:14px;height:14px}
  .mn-img > span.absolute.top-2.left-2 .font-geometria{font-size:.625rem;padding-right:6px !important}
}

@media (max-width:420px){
  /* one dish per row on the smallest phones — image gets more presence */
  .mn-grid{row-gap:32px;gap:20px}
  .mn-card{grid-column:span 12}
  .mn-img{aspect-ratio:4/3}
  .mn-name{font-size:1.125rem}
  .mn-meta{font-size:.9375rem}
  .mn-desc{font-size:.9375rem;max-width:none}
  /* one hint icon on gallery is enough on small phones */
  main.bg-biege .gal button[type="button"]::after{display:none}
}

/* ─── Mobile booking popup ────────────────────────────────────────────────── */
@media (max-width:768px){
  .bk-overlay{padding:16px}
  .bk-card{
    padding:60px 22px 44px;
    border-radius:14px;
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .bk-title{font-size:1.375rem;padding-bottom:0;margin-bottom:2rem}
  .bk-title::after{margin-top:1rem}
  .bk-label{font-size:.6875rem;letter-spacing:.2em;margin-bottom:1rem}
  .bk-phone{font-size:1.75rem}
  .bk-icons{gap:24px;justify-content:center}
  .bk-icons svg{width:44px;height:44px}
  .bk-cols{gap:32px}
  .bk-close{top:14px;right:14px;width:40px;height:40px}
}

/* ─── Mobile lightbox tuning ──────────────────────────────────────────────── */
@media (max-width:768px){
  .lb-btn{width:42px;height:42px}
  .lb-prev{left:12px}
  .lb-next{right:12px}
  .lb-close{top:14px;right:14px}
  .lb-count{top:18px;font-size:.75rem;padding:5px 12px}
  .lb img{border-radius:8px}
}

/* ─── Reduce motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mn-card:hover .mn-img{transform:none;box-shadow:var(--shadow-card)}
  .mn-tab::before,
  .lb-prev:hover, .lb-next:hover, .lb-btn:hover,
  .bk-icons a:hover, .bk-close:hover,
  .menu-panel .group\/card:hover{transform:none;transition:none}
}