/* Oh!Mumbai — character layer.
   Loads AFTER styles.css / site.css / mobile.css / polish.css.

   Purpose: give the site real taste — warm editorial tone, disciplined use of
   the brand palette with one small warm accent (saffron), a confident type
   scale on TT Gertika, an appetising hero, tactile imagery and menu cards,
   accessible focus. No structural changes; keeps content and JS behaviour. */

:root{
  /* Editorial warm accent — used sparingly (eyebrows, ornaments, focus).
     Sits between the existing terracotta and biege on the color wheel
     so it never fights either. */
  --color-saffron: #d4a256;
  --color-saffron-deep: #ad7a3a;
  --color-chocolate-deep: #3a2823;
  --color-cream: #f2e8d4;

  --hairline-warm: color-mix(in srgb, var(--color-saffron) 45%, transparent);

  /* Editorial type ramp — larger, tighter display at wide viewports. */
  --f-display: clamp(2.75rem, 5.6vw, 5.25rem);
  --f-h2:      clamp(2rem, 3.1vw, 2.875rem);
  --f-h3:      clamp(1.1875rem, 1.6vw, 1.5rem);
}

/* ─── Typographic base ─────────────────────────────────────────────────── */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-feature-settings:"kern","liga","calt";font-variant-ligatures:common-ligatures}
.font-gertika,h1,h2,h3{font-feature-settings:"kern","liga","calt","ss01"}

/* Warmer off-white for hero + biege headings — the pure white was clinical. */
.hero .text-biege,
.page-hero .text-biege,
main.bg-chocolate .text-biege,
footer .text-biege{color:#f2e8d4}
.text-gray-light{color:#dcdcc9}

/* ─── Section eyebrow — the one repeated editorial marker ──────────────── */
.eyebrow{
  color:var(--color-saffron);
  opacity:1;
  font-family:var(--font-geometria),sans-serif;
  font-size:.75rem;
  letter-spacing:.22em;
  font-weight:500;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding-bottom:.5rem;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:clamp(24px,3.2vw,44px);
  height:1px;
  background:currentColor;
  flex:0 0 auto;
  opacity:.9;
}
/* on beige/light grounds the saffron reads muddy — deepen it */
main.bg-biege .eyebrow{color:var(--color-saffron-deep)}

/* ─── Section head hairline — warm rule instead of gray ────────────────── */
.sec-head{
  border-bottom-color:var(--hairline-warm);
  padding-bottom:1.75rem;
  gap:1.5rem 2.5rem;
}
.sec-head-t{gap:1rem}
.sec-head h1,
.sec-head h2{
  font-family:var(--font-gertika),serif;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.sec-head h1{font-size:clamp(2.5rem,4.4vw,4.25rem);line-height:1.04}
.sec-head h2{font-size:var(--f-h2);line-height:1.06}

/* the "see more" link on section heads — gives it a subtle underline lead-in */
.sec-head > a{
  font-family:var(--font-geometria),sans-serif;
  font-size:.9375rem;
  letter-spacing:.02em;
  color:inherit;
  opacity:.85;
  transition:opacity .3s ease,color .3s ease;
}
.sec-head > a:hover{opacity:1;color:var(--color-terracotta)}

/* ─── Hero (index page) ────────────────────────────────────────────────── */
.hero{overflow:hidden}

/* refined overlay — a real editorial vignette + warmer top+bottom cap */
.hero::after{
  background:
    radial-gradient(ellipse 78% 60% at 50% 52%, transparent 0%, rgba(41,27,22,.20) 55%, rgba(41,27,22,.70) 100%),
    linear-gradient(180deg,
      rgba(41,27,22,.62) 0%,
      rgba(41,27,22,.10) 22%,
      rgba(41,27,22,.10) 55%,
      rgba(41,27,22,.72) 100%);
}
/* very faint warm grain — reads as texture not as noise */
.hero > img{filter:saturate(1.04) contrast(1.02)}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background-image:
    radial-gradient(rgba(212,162,86,.06) 1px, transparent 1.4px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
  opacity:.45;
}

/* Hero copy — bigger, tighter, with a proper display eyebrow */
.hero h3.font-gertika,
.hero .font-gertika.text-2xl{
  font-family:var(--font-geometria),sans-serif;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--color-saffron);
  padding-bottom:1.75rem;
  position:relative;
  display:inline-block;
  margin:0 auto;
}
.hero h3.font-gertika::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;transform:translateX(-50%);
  width:48px;height:1px;background:currentColor;opacity:.85;
}
.hero h1{
  font-size:var(--f-display);
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  padding-bottom:2.5rem;
}
.hero h1 br{display:inline}
.hero h1{max-width:22ch;margin-inline:auto}

/* CTA row — sharper spacing, primary button with subtle depth */
.hero .flex.justify-center.gap-2{gap:14px}
.hero button.bg-terracotta,
.hero a > button.bg-terracotta{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 28px -14px rgba(41,27,22,.65);
  transition:filter .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.hero button.bg-terracotta:hover{filter:brightness(1.06)}
.hero button.bg-terracotta:active{transform:translateY(1px)}
/* the "Меню" ghost button — refined outline treatment */
.hero a > button:not(.bg-terracotta){
  border:1px solid rgba(242,232,212,.6);
  background:rgba(242,232,212,.06);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background-color .3s ease, border-color .3s ease;
}
.hero a > button:not(.bg-terracotta):hover{
  background:rgba(242,232,212,.14);
  border-color:rgba(242,232,212,.85);
}

/* ─── Page-hero (menu/interior/about/contacts) ─────────────────────────── */
.page-hero{min-height:clamp(360px,34vw,520px);padding-top:96px}
.page-hero > .absolute.inset-0::after{
  background:linear-gradient(180deg,rgba(41,27,22,.32),rgba(41,27,22,.10) 50%,rgba(41,27,22,.42))
}
.page-hero .sec-head h1{max-width:22ch;font-size:clamp(2.75rem,5vw,4.5rem)}
.page-hero .sec-head{border-bottom-color:transparent;padding-bottom:0;margin-bottom:0}

/* ─── Header — semi-transparent chocolate with blur ────────────────────── */
.site-header.bg-chocolate{
  background-color:color-mix(in srgb, var(--color-chocolate) 88%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid color-mix(in srgb, var(--color-biege) 8%, transparent);
}
.site-header.is-scrolled{background-color:color-mix(in srgb, var(--color-chocolate-deep) 94%, transparent)}
.site-header header > a > svg{transition:opacity .3s ease}
.site-header header > a:hover > svg{opacity:.86}
/* current-page nav marker in saffron */
.site-header .nav-current{color:var(--color-saffron)}

/* nav link hover underline — subtle, warm */
.site-header header > div.col-span-5 > a,
.site-header header > div.col-span-5 > span > a{
  position:relative;transition:color .3s ease;
}
.site-header header > div.col-span-5 > a::after,
.site-header header > div.col-span-5 > span > a::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.35rem;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.site-header header > div.col-span-5 > a:hover::after,
.site-header header > div.col-span-5 > span > a:hover::after{transform:scaleX(1)}

/* Header "Забронировать" CTA — refined */
.site-header header > button.bg-terracotta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px -12px rgba(0,0,0,.55);
}

/* ─── Imagery treatment — softer corners, warmer hover ─────────────────── */
main img,
footer img,
main iframe{border-radius:10px}
main img.rounded-full,
.site-header img{border-radius:9999px}
main .site-header img{border-radius:0}
main button[type="button"]{border-radius:12px;overflow:hidden}
main button[type="button"] > .aspect-\[3\/4\],
main button[type="button"] > .aspect-\[4\/3\],
main button[type="button"] > div.relative{border-radius:12px;overflow:hidden}
main button[type="button"] img{transition:transform .95s cubic-bezier(.22,1,.36,1),filter .5s ease}
main button[type="button"]:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.02)}

/* ─── Menu page — the card grid deserves the most polish ───────────────── */
.mn-grid{row-gap:3.5rem}
.mn-card{gap:.5rem}
.mn-img{
  border-radius:12px;
  height:auto;aspect-ratio:3/4;
  box-shadow:0 20px 40px -30px rgba(41,27,22,.5);
}
.mn-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(41,27,22,.28) 100%);
  border-radius:inherit;
}
.mn-pill{
  top:12px;left:12px;right:auto;                     /* move to top-left as an editorial tag */
  height:30px;padding:0 12px;
  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);
  font-family:var(--font-geometria),sans-serif;
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
}
.mn-name{
  font-family:var(--font-gertika),sans-serif;
  font-weight:400;
  font-size:1.1875rem;
  line-height:1.2;
  letter-spacing:-.005em;
  padding-top:.65rem;
  color:var(--color-chocolate);
}
.mn-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:.4rem;
  font-family:var(--font-geometria),sans-serif;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums;
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent);
  margin-top:.35rem;
}
.mn-meta span:first-child{color:#8b7d70;letter-spacing:.02em}
.mn-meta span:last-child{color:var(--color-terracotta);font-weight:500}
.mn-desc{
  font-size:.9375rem;line-height:1.55;color:#7a6b60;margin-top:.35rem;
}

/* tab pills — a hair softer, active gets a subtle terracotta glow instead of raw green */
.mn-tab{
  font-family:var(--font-geometria),sans-serif;
  font-size:1rem;letter-spacing:.01em;
  padding:14px 22px;
}
.mn-tab.is-active{
  background:var(--color-chocolate);
  color:var(--color-cream);
  box-shadow:0 10px 24px -14px rgba(41,27,22,.55);
}
.mn-view{background:rgba(41,27,22,.06);border:1px solid rgba(41,27,22,.04)}

/* ─── Interior gallery — tighter hover, richer shadow ──────────────────── */
main.bg-biege .gal button[type="button"]{
  background:transparent;
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1);
}
main.bg-biege .gal button[type="button"]:hover{
  box-shadow:0 30px 60px -30px rgba(41,27,22,.32);
}

/* ─── Booking popup / lightbox — small touches ─────────────────────────── */
.bk-card{border-radius:14px}
.bk-title{font-family:var(--font-gertika),sans-serif;letter-spacing:-.01em}
.bk-phone{letter-spacing:-.01em}
.lb img{border-radius:8px}

/* ─── Footer refinement ────────────────────────────────────────────────── */
footer.bg-green,
main.bg-green{background-color:#5a6033}   /* slightly deeper for better contrast under saffron */
footer h3{
  font-family:var(--font-gertika),sans-serif;
  font-weight:400;
  letter-spacing:-.01em;
}
footer .border-b-2{border-color:color-mix(in srgb, var(--color-biege) 20%, transparent)}
footer a[href^="tel"],
footer a[href^="mailto"]{transition:color .3s ease}
footer a[href^="tel"]:hover,
footer a[href^="mailto"]:hover{color:var(--color-saffron)}

/* ─── Focus-visible — one warm accent everywhere ───────────────────────── */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--color-saffron);
  outline-offset:3px;
  border-radius:3px;
}

/* ─── Scrollbar (webkit): warm the corners without adding chrome ───────── */
::selection{background:color-mix(in srgb, var(--color-saffron) 55%, transparent);color:#1f1512}

/* ─── Larger viewports: more air, more scale ───────────────────────────── */
@media (min-width:1400px){
  :root{--pad-x:clamp(28px,4.5vw,84px)}
  .sec{padding-block:clamp(88px,7vw,140px)}
}

/* ─── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .hero h1{font-size:clamp(2.5rem,7vw,4rem)}
  .sec-head h1{font-size:clamp(2.25rem,5vw,3.75rem)}
}

/* ─── Phone — genuinely thoughtful, not a shrunk desktop ───────────────── */
@media (max-width:768px){
  .hero{min-height:calc(100svh - 64px)}
  .hero::after{
    background:
      radial-gradient(ellipse 100% 60% at 50% 55%, transparent 0%, rgba(41,27,22,.18) 55%, rgba(41,27,22,.72) 100%),
      linear-gradient(180deg,rgba(41,27,22,.55) 0%,rgba(41,27,22,.15) 30%,rgba(41,27,22,.75) 100%);
  }
  .hero h3.font-gertika,
  .hero .font-gertika.text-2xl{
    font-size:.6875rem;letter-spacing:.36em;padding-bottom:1.25rem;
  }
  .hero h3.font-gertika::after{width:36px}
  .hero h1{
    font-size:clamp(2rem,9.5vw,2.75rem);
    line-height:1.05;
    padding:0 12px 24px;
    letter-spacing:-.015em;
  }
  .hero .flex.justify-center.gap-2{gap:12px;padding:0 20px}
  .hero .flex.justify-center.gap-2 > *{width:100%}
  .hero .flex.justify-center.gap-2 button{width:100%}

  .eyebrow{font-size:.6875rem;letter-spacing:.2em}
  .eyebrow::before{width:20px}
  .sec-head{padding-bottom:1.25rem;margin-bottom:1.25rem;gap:.75rem}
  .sec-head h1{font-size:clamp(2rem,7vw,2.5rem);line-height:1.05}
  .sec-head h2{font-size:clamp(1.625rem,5.5vw,2rem);line-height:1.08}

  .page-hero{min-height:280px;padding-top:80px}

  .mn-grid{row-gap:2rem}
  .mn-img{aspect-ratio:1/1.1}
  .mn-name{font-size:1.0625rem;padding-top:.55rem}
  .mn-meta{font-size:.9375rem;padding-top:.3rem;margin-top:.25rem}
  .mn-desc{font-size:.875rem}
  .mn-pill{height:26px;padding:0 10px;font-size:.6875rem}

  main img,main iframe,main button[type="button"]{border-radius:10px}
}

@media (max-width:420px){
  .hero h1{font-size:2rem;line-height:1.06}
  .hero h3.font-gertika,
  .hero .font-gertika.text-2xl{font-size:.625rem}
}

/* ─── Round 5: manager blocker fixes (edit-in-place, no new layer) ─────── */

/* Hero H1 mobile — smaller clamp, tighter padding, no text-wrap:balance.
   Root cause of the earlier clip: the base rule sets text-wrap:balance,
   which at ~390px tries to fit "ресторан индийской" on one line to
   balance line widths — but Cyrillic Gertika Bold at 30px overflows a
   ~310px content box. Disable balance here and clamp smaller so wrap
   falls on the natural word boundary between the two words. */
@media (max-width:480px){
  /* Two-part fix. (1) The inner .hero flex column is an intrinsically
     sized flex item — it shrunk to ~265 px (the max-content of the
     button row), which cramped the h1. Force it to fill the outer
     mx-auto container so the h1 gets the full ~350 px column. (2) TT
     Gertika Trial has no Cyrillic glyphs; Chrome falls back to a wide
     system font (~1.4 em per Cyrillic char at bold weight), so we clamp
     small — clamp(1rem, 4.8vw, 1.375rem) gives ~19 px at 390 px
     viewport — and each word ('ресторан' / 'индийской' / 'кухни')
     lands on its own line inside the ~330 px content box. */
  .hero > div.mx-auto > .flex.flex-col{width:100%;align-items:stretch}
  .hero h1{
    font-size:clamp(1rem,4.4vw,1.25rem);
    line-height:1.15;
    padding:0 12px 18px;
    text-wrap:wrap;
    /* Cap to ~14em (~250px at ~18px). Slightly narrower than a single
       Cyrillic word ('ресторан' ≈ 200px in the fallback font at 18px),
       forcing the wrap between words that the browser refuses at the
       full 350px content width. */
    max-width:14em;
    margin-inline:auto;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .hero h3.font-gertika,
  .hero .font-gertika.text-2xl{
    font-size:.6rem;letter-spacing:.32em;padding-bottom:1rem;
  }
  /* page-hero (about page etc) — same treatment on the sec-head h1 */
  .sec-head h1,
  .sec-head h2,
  .page-hero .sec-head h1{
    font-size:clamp(1.5rem,6vw,1.875rem);
    line-height:1.1;
    text-wrap:wrap;
    max-width:none;
    word-break:normal;
    overflow-wrap:break-word;
  }
}

/* Contacts page mobile — h3/p wrap protection + CTA reorder.
   The grid layer (mobile.css grid-column: 1/-1) restored full column
   width, but the address h3 uses editorial.css's clamp(1.5rem, 2vw,
   1.875rem) which is 24 px at mobile — Cyrillic fallback pushes
   'Санкт-Петербург, переулок Гривцова, 2' past 350 px. Trim size and
   allow break-word so overlong Cyrillic runs wrap gracefully. */
@media (max-width:640px){
  body.page-contacts main.bg-green .sec:first-of-type .col-span-6 h3{
    font-size:clamp(1.0625rem,4.4vw,1.25rem);
    line-height:1.28;
    overflow-wrap:break-word;
    word-break:normal;
  }
  body.page-contacts main.bg-green p{
    overflow-wrap:break-word;
    word-break:normal;
  }
  body.page-contacts main.bg-green .flex.flex-wrap.items-center.gap-5{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    width:100%;
  }
  body.page-contacts main.bg-green .flex.flex-wrap.items-center.gap-5 > button{
    order:2;
    width:100%;
    justify-content:center;
  }
  body.page-contacts main.bg-green .flex.flex-wrap.items-center.gap-5 > .cta-links{
    order:1;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 14px;
    align-items:baseline;
  }
  body.page-contacts main.bg-green .cta-links > p{margin:0;padding:0}
}

/* ─── Reduce motion — respect ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  main button[type="button"] img,
  .site-header header > div.col-span-5 > a::after,
  .site-header header > div.col-span-5 > span > a::after{transition:none}
}