/* Oh!Mumbai — frontend polish, second pass.
   Loads LAST, after editorial.css. Scope (still): interaction, menu
   scan-rhythm, gallery/lightbox, booking popup, header dropdown, mobile.
   Same rules: no HTML structure, no copy, no JS changes. */

/* ─── Global touch / tap UX ───────────────────────────────────────────────── */
html{
  /* iOS 26 auto-highlight on tap looks cheap next to the ripple we already
     have; also mobile Safari's rubber-band scrolls the underlying page when
     a fixed overlay opens — kill the highlight, keep the scroll polite. */
  -webkit-tap-highlight-color:transparent;
}
a, button, [role="button"], [role="tab"], .mn-tab, .mn-view button, .site-header a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* iOS text scaling on orientation change would inflate the hero measure
   past its clamp cap. Belt + braces (mobile.css already sets this). */
@supports (-webkit-text-size-adjust:100%){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}

/* ─── Warm scrollbar site-wide ────────────────────────────────────────────── */
/* Firefox */
html{scrollbar-color:color-mix(in srgb, var(--color-chocolate) 45%, transparent) transparent}
/* Webkit / Blink */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--color-chocolate) 32%, transparent);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--color-chocolate) 55%, transparent);
  background-clip:padding-box;
}

/* Elements that scroll inside popups — same treatment, thinner. */
.bk-card::-webkit-scrollbar,
.mn-tabs::-webkit-scrollbar{width:6px;height:6px}

/* ─── Hero — proper dynamic viewport on mobile browsers ───────────────────── */
/* Chrome/Firefox mobile use dvh reliably; iOS Safari still needs svh
   fallback but dvh works in Safari 17+. We already ship svh — layer dvh
   on top for browsers that support it (@supports gate). */
@supports (height:100dvh){
  @media (max-width:768px){
    .hero{height:calc(100dvh - 64px);min-height:480px}
  }
}

/* ─── Menu — subtle warm ambient behind card image on hover ───────────────── */
/* `isolation:isolate` establishes a stacking context on `.mn-card` so the
   `::before z-index:-1` glow stays behind the card *without* falling
   behind main.bg-biege's background (which is what plain position:relative
   would do — it doesn't create a stacking context by itself). */
.mn-card{position:relative;isolation:isolate}
.mn-card::before{
  content:"";
  position:absolute;
  left:-4px;right:-4px;top:-8px;bottom:auto;
  height:calc(100% * .78);
  z-index:-1;
  border-radius:16px;
  background:radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--color-saffron, #d4a256) 22%, transparent), transparent 70%);
  opacity:0;
  transition:opacity .55s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
  pointer-events:none;
}
.mn-card:hover::before{opacity:1}
@media (hover:none){.mn-card::before{display:none}}

/* ─── Menu — the meta row hairline now warms in on card hover ─────────────── */
.mn-meta{
  border-top-color:color-mix(in srgb, var(--color-chocolate) 12%, transparent);
  transition:border-color .45s ease;
}
.mn-card:hover .mn-meta{
  border-top-color:color-mix(in srgb, var(--color-saffron, #d4a256) 55%, transparent);
}

/* ─── Menu — dish price gains a subtle tabular-nums swap on hover ─────────── */
.mn-meta span:last-child{
  transition:color .35s ease;
}
.mn-card:hover .mn-meta span:last-child{color:var(--color-terracotta-hover, #a13f24)}

/* ─── Menu PDF placeholder — richer editorial look ────────────────────────── */
.mn-pdf-page .ph-slot{
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-saffron, #d4a256) 12%, transparent) 0%, transparent 40%),
    repeating-linear-gradient(135deg, #d9cdb9 0 14px, #e4d9c7 14px 28px);
}
.mn-pdf-page .ph-slot span{
  font-family:var(--font-geometria), sans-serif;
  letter-spacing:.08em;
  padding:10px 16px;
  border-radius:999px;
  background:color-mix(in srgb, var(--color-chocolate) 62%, transparent);
  color:var(--color-cream, #f2e8d4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* ─── Booking popup — content entrance stagger ────────────────────────────── */
/* No inline .rv on the popup children, so use a simple CSS-only staged
   entrance driven by the .is-open class. */
.bk-overlay .bk-card > *{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             transform .55s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.bk-overlay.is-open .bk-card > *{opacity:1;transform:none}
.bk-overlay.is-open .bk-card > .bk-close       {transition-delay:.05s}
.bk-overlay.is-open .bk-card > .bk-title       {transition-delay:.08s}
.bk-overlay.is-open .bk-card > .bk-cols        {transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .bk-overlay .bk-card > *{opacity:1;transform:none;transition:none}
}

/* Inside .bk-cols — the two columns fade in with their own stagger */
.bk-overlay .bk-cols > div{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)) .18s,
             transform .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)) .18s;
}
.bk-overlay.is-open .bk-cols > div{opacity:1;transform:none}
.bk-overlay.is-open .bk-cols > div:nth-child(2){transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .bk-overlay .bk-cols > div{opacity:1;transform:none;transition:none}
}

/* ─── Lightbox — image gets a soft "landing" curve ────────────────────────── */
.lb.is-open img{
  animation:lb-in .55s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
@keyframes lb-in{
  from{opacity:.4;transform:scale(.94)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.lb.is-open img{animation:none}}

/* Prev/next hint on mobile — small "1/12" pill also on the bottom for thumbs */
@media (max-width:768px){
  .lb-count{top:auto;bottom:20px}
}

/* ─── Header — the logo eases up on hover; nav trigger chevron finesse ────── */
.site-header header > a[href="index.html"]{
  transition:transform .35s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.site-header header > a[href="index.html"]:hover{transform:translateY(-1px)}
.site-header header > a[href="index.html"]:active{transform:translateY(0)}

/* When the dropdown is open, the trigger's chevron already rotates.
   Add a color echo so the whole trigger reads "you activated me". */
.site-header.is-open .nav-menu-trigger{transition:color .3s ease}

/* ─── Header dropdown — smoother content offset when scrolled ─────────────── */
/* The menu-panel appears absolute below .site-header; when the header has
   been scrolled a bit, the panel's shadow lands on the page. Warmer shadow. */
.menu-panel > div{
  box-shadow:0 30px 60px -22px rgba(41,27,22,.35), 0 1px 0 rgba(41,27,22,.04);
}

/* ─── Header current-page marker — slightly bolder underline in desktop ───── */
@media (min-width:769px){
  .site-header header > div.col-span-5 > a.nav-current::after,
  .site-header header > div.col-span-5 > span > a.nav-current::after{
    background:var(--color-saffron, #d4a256);
    height:1.5px;
    transform:scaleX(1);
    bottom:.25rem;
  }
}

/* ─── Contacts / footer — richer hover on tel/mailto ──────────────────────── */
/* character.css already saffronises footer tel/mailto hover. Add a
   subtle underline-slide echo for the pattern used elsewhere. */
footer a[href^="tel"],
footer a[href^="mailto"],
main .col-span-2.col-start-11 a[href^="tel"]{
  transition:color .3s ease, text-decoration-color .3s ease;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset:3px;
}
footer a[href^="tel"]:hover,
footer a[href^="mailto"]:hover,
main .col-span-2.col-start-11 a[href^="tel"]:hover{
  text-decoration-color:var(--color-saffron, #d4a256);
}

/* ─── Contacts page — small map hover cue (only where there IS a map) ─────── */
footer img.rounded-xs[alt*="Карта"],
footer img.rounded-xs[alt*="Map" i]{
  transition:transform .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             filter .35s ease;
}
footer img.rounded-xs[alt*="Карта"]:hover{
  transform:scale(1.015);
  filter:saturate(1.08) contrast(1.02);
}

/* ─── Mobile ~390px: menu tab bar — inline "chip" feel, less busy ─────────── */
@media (max-width:420px){
  .mn-tabs{gap:4px}
  .mn-tab{
    font-size:.9375rem;
    padding:10px 14px;
    border-radius:999px;
    background:color-mix(in srgb, var(--color-chocolate) 4%, transparent);
  }
  .mn-tab.is-active{
    background:var(--color-chocolate);
    box-shadow:0 8px 20px -12px rgba(41,27,22,.55);
  }
  .mn-tab::before{display:none}   /* the pill IS the affordance at this width */
}

/* ─── Mobile: nav sheet — smoother scroll, safe-area-aware ────────────────── */
@media (max-width:768px){
  .site-header header > div.col-span-5{
    padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* the burger area cheekily needs the notch inset too */
  .site-header header{padding-right:max(16px, env(safe-area-inset-right, 0px))}
}

/* ─── Booking popup / lightbox: safe area on iPhone ───────────────────────── */
.bk-overlay{padding-top:max(24px, env(safe-area-inset-top, 0px));
            padding-bottom:max(24px, env(safe-area-inset-bottom, 0px))}
.lb-close{top:max(24px, env(safe-area-inset-top, 0px));
          right:max(24px, env(safe-area-inset-right, 0px))}
.lb-count{bottom:max(24px, env(safe-area-inset-bottom, 0px))}
@media (max-width:768px){
  .lb-close{top:max(14px, env(safe-area-inset-top, 0px));
            right:max(14px, env(safe-area-inset-right, 0px))}
  .lb-count{bottom:max(18px, env(safe-area-inset-bottom, 0px))}
}

/* ─── Universal reduced motion baseline ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  ::-webkit-scrollbar-thumb{transition:none}
  .mn-card:hover::before,
  .mn-card:hover .mn-meta,
  .mn-card:hover .mn-meta span:last-child,
  footer img.rounded-xs[alt*="Карта"]:hover{transition:none}
}