/* Oh!Mumbai — frontend polish, third pass.
   Loads LAST (after frontend-polish-2.css). Purpose: mop-up items the
   earlier passes missed. Still no HTML, copy, or JS changes. */

/* ─── Homepage dish articles — inherit the menu card language ─────────────── */
/* index.html shows 4 dish articles under the "Меню" section, using
   `.media-dish` instead of `.mn-img`. My earlier passes only targeted
   `.mn-img`, so the homepage cards missed the pill normalisation and
   image-hover polish. Fix here. */

body.page-index main article[role="button"] .media-dish{
  transition:box-shadow .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             transform .5s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
  will-change:transform;
}
body.page-index main article[role="button"]:hover .media-dish{
  transform:translateY(-4px);
  box-shadow:0 30px 50px -30px rgba(41,27,22,.55);
}
body.page-index main article[role="button"] > p{
  transition:color .3s ease;
  padding-top:.35rem;
}
body.page-index main article[role="button"]:hover > p{
  color:var(--color-terracotta);
}

/* Normalise the chili / veg / contains-nuts pills on homepage dishes to
   the same chocolate-glass style used inside .mn-img on the menu page. */
body.page-index .media-dish > 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, #f2e8d4);
  align-items:center;
}
body.page-index .media-dish > span.absolute.top-2.left-2 > span.grid.h-12.w-12{
  height:22px;width:22px;
}
body.page-index .media-dish > span.absolute.top-2.left-2 svg{
  width:16px;height:16px;
}
/* Chili → saffron, veg/nuts → cream. Uses the sibling utility class
   `.bg-red` / `.bg-green` that Tailwind already put on the span. */
body.page-index .media-dish > span.absolute.top-2.left-2.bg-red svg{
  color:var(--color-saffron, #d4a256);
}
body.page-index .media-dish > span.absolute.top-2.left-2.bg-green svg{
  color:var(--color-cream, #f2e8d4);
}
body.page-index .media-dish > span.absolute.top-2.left-2 .font-geometria{
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  padding-right:8px !important;
}

/* Homepage dish article — focus ring (they're role=button tabindex=0
   so keyboard users can reach them; the site-wide focus-visible only
   catches <a>/<button>, not <article>). */
body.page-index main article[role="button"]:focus-visible{
  outline:2px solid var(--color-saffron, #d4a256);
  outline-offset:6px;
  border-radius:6px;
}

/* Mobile: 4-across → 2-across is fine, but on ≤420 they need to be 1-up
   like menu cards. mobile.css already does span-12 at ≤420 but doubles
   in a row — force actual 1-up + 4:3 image for appetising presence. */
@media (max-width:420px){
  body.page-index main article[role="button"].col-span-3{grid-column:span 12 !important}
  body.page-index main article[role="button"] .media-dish{aspect-ratio:4/3}
}

/* ─── Menu view swap — smoother cross-fade with a hairline breather ───────── */
/* The existing swap animation moves `.mn-body` opacity 0/1 with a 10px
   translate. Add a subtle blur ramp so cards don't hard-blink between
   categories. */
.mn-body{
  transition:opacity .32s ease, transform .32s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             filter .32s ease;
}
.mn-body.is-out{filter:blur(2px)}
@media (prefers-reduced-motion:reduce){
  .mn-body{transition:opacity .2s ease}
  .mn-body.is-out{filter:none}
}

/* ─── Menu tab focus keyboard cue ─────────────────────────────────────────── */
/* .mn-tab already has an outline-offset:-2px + saffron tint on focus (from
   frontend-polish.css). Layer a subtle chocolate underline so keyboard
   users can distinguish "focused" from just "hovered". */
.mn-tab:focus-visible::before{
  transform:scaleX(1);
  opacity:1;
  height:1.5px;
  background:var(--color-chocolate);
}

/* ─── Scroll reveal — directional variation by element role ───────────────── */
/* The base `.rv` transform is `translateY(20px)`; every SSR element with
   `opacity:0` gets it. That's a lot of same-y motion. Layer a couple
   softer variants for sec-heads and long body copy so the site
   choreographs rather than everything sliding the same distance. */

/* Section eyebrows / heads: slower fade, no vertical push (they should
   read as *arriving into place* rather than pushed up). */
.rv.eyebrow,
.sec-head-t > .rv{
  transition-duration:1.1s;
  transform:translateY(6px);
}
.rv.eyebrow.rv-in,
.sec-head-t > .rv.rv-in{transform:none}

/* Long paragraphs of body copy: fade only, no translate — text sliding
   feels theatrical, fading feels calm. Target the `text-pretty` copy
   which is a reliable marker for body paragraphs across the site. */
p.font-geometria.text-pretty.rv{
  transform:none;
  transition-duration:1.3s;
}

/* Big images / hero panoramas: scale up from 98% instead of translate. */
.media-pano.rv,
.gal button.col-span-12.rv{
  transform:scale(.98);
  transition-duration:1.1s;
}
.media-pano.rv.rv-in,
.gal button.col-span-12.rv.rv-in{transform:none}

/* ─── Header nav trigger — "open" state color echo ────────────────────────── */
/* When the dropdown is open, the trigger's chevron is already rotated 180°.
   Tint the whole trigger (icon + label) so it reads unmistakeably as active. */
.site-header.is-open .nav-menu-trigger{color:var(--color-saffron, #d4a256)}
.site-header.is-open .nav-menu-trigger svg{color:currentColor}
/* on mobile-nav open, the trigger is inside the white sheet; use terracotta */
.site-header.is-nav.is-open .nav-menu-trigger{color:var(--color-terracotta)}

/* ─── Site-header — reveal is jarring when the burger sheet is closing ───── */
/* When the mobile nav sheet is closing (removing `.is-nav`), the transform
   snaps. Give it a companion opacity fade so it settles gently. */
@media (max-width:768px){
  .site-header header > div.col-span-5{
    transition-property:transform, opacity, visibility, background-color !important;
    transition-duration:.5s, .35s, 0s, .35s !important;
  }
}

/* ─── Booking popup — CSS-only body scroll lock (defense in depth) ────────── */
/* site.js sets body.style.overflow='hidden' when the popup opens. If a
   browser or third party clears that, this CSS backup still keeps the
   page underneath quiet. */
body:has(.bk-overlay.is-open),
body:has(.lb.is-open),
body:has(.site-header.is-nav){
  overflow:hidden;
}

/* ─── Interior page mobile ~390px — tighter gallery rhythm ────────────────── */
/* The gallery is a mix of .col-span-6/12/3/pair layouts. On ≤420 they
   all become full-width in mobile.css — but adjacent tiles then have
   larger vertical gaps than the design intends. Tighten. */
@media (max-width:420px){
  body.page-interior main .gal{gap:14px}
  body.page-interior main .gal-pair{gap:14px}
  body.page-interior main .gal .col-span-12,
  body.page-interior main .gal button.col-span-12{aspect-ratio:16/10 !important;height:auto}
  body.page-interior main .gal button.col-span-6:hover{transform:none}
}

/* ─── About page — image hover on the ~portrait tiles ─────────────────────── */
body.page-about main img{
  transition:transform .6s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             filter .35s ease;
}
body.page-about main .col-span-3:hover img,
body.page-about main .col-span-6:hover img{
  filter:saturate(1.06) contrast(1.02);
}

/* ─── Contacts page — richer address hover state ──────────────────────────── */
/* The address `underline decoration-[#B7B8AD]` currently sits static.
   Layer a subtle text-underline offset change on hover so it feels alive. */
main .col-span-2.col-start-11 p.underline:hover,
footer p.underline:hover,
main .col-span-2.col-start-11 a[href^="tel"]:hover{
  text-underline-offset:5px;
  transition:text-underline-offset .3s ease;
}

/* ─── Ripple button — gate on pointer-fine to save touch battery ──────────── */
/* The ripple SVG filter uses feTurbulence + feDisplacementMap — cheap
   on desktop, real cost on cheap Androids. Disable on coarse pointers. */
@media (pointer:coarse){
  main button > span[aria-hidden].rounded-full,
  footer button > span[aria-hidden].rounded-full,
  .site-header button > span[aria-hidden].rounded-full{
    filter:none !important;
  }
}

/* ─── Header logo — SVG stroke tuning on chocolate ────────────────────────── */
/* The Oh!Mumbai wordmark is `.text-biege` — reads at #eee2d1 on chocolate
   which is fine, but slightly warms on saffron feels more editorial. Just
   a hair — 92% biege blended with 8% saffron. */
.site-header header > a[href="index.html"] svg{
  color:color-mix(in srgb, var(--color-biege) 92%, var(--color-saffron, #d4a256));
}

/* ─── Footer — micro-refinement to social icon hover ──────────────────────── */
footer .flex.gap-5 > a{
  transition:transform .35s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
             filter .3s ease;
}
footer .flex.gap-5 > a:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
footer .flex.gap-5 > a:active{transform:translateY(-1px)}

/* ─── Reduced motion — universal calmer treatment ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body.page-index main article[role="button"]:hover .media-dish,
  body.page-about main img,
  footer .flex.gap-5 > a:hover{transform:none;transition:none}
  .rv{transition:opacity .3s ease !important}
  .rv.eyebrow,
  .sec-head-t > .rv,
  p.font-geometria.text-pretty.rv,
  .media-pano.rv,
  .gal button.col-span-12.rv{transform:none}
}