/* ==========================================================================
   Hindi / Dilli brand layer — loads after style.css and only adds to it.
   Devanagari is shown in both languages; German/English stay the readable copy.
   ========================================================================== */

:root{
  --hi-pink: #e5337a;
  --hi-teal: #0f8a83;
  --hi-parrot: #3f8f2a;
  --hi-mustard: #a8641a;
  --hi-marigold: #f0a91c;   /* bright haldi yellow — needs dark text */
  --hi-display: 'Yatra One', 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', 'Kohinoor Devanagari', serif;
  --hi-text: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Noto Sans Devanagari', 'Kohinoor Devanagari', serif;
}

[lang="hi"]{ font-family:var(--hi-text); font-style:normal; letter-spacing:0; text-transform:none; }

@keyframes hiRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes hiWobble{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(3deg) scale(1.04); } }

/* ----- preloader ----- */
#preloader{ flex-direction:column; gap:18px; }
.hi-preload{ font-family:var(--hi-display); font-size:1.5rem; line-height:1.5; color:var(--saffron); opacity:0; animation:hiRise .6s var(--ease) .1s forwards; }

/* ----- hero ----- */
.hi-hero{
  font-family:var(--hi-display); font-size:clamp(2rem,5.2vw,3.7rem); line-height:1.35;
  color:var(--saffron); margin:0 0 2px; text-shadow:0 6px 32px rgba(230,161,58,.35);
  opacity:0; animation:hiRise .9s var(--ease) .05s forwards;
}
.hi-translit{
  font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-70); margin:0 0 16px; opacity:0; animation:hiRise .9s var(--ease) .15s forwards;
}
.hi-shout{ margin:0 0 26px; opacity:0; animation:hiRise .9s var(--ease) .3s forwards; }
.hi-sticker{
  display:inline-block; font-family:var(--hi-display); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.5;
  padding:.3em 1em; border-radius:999px; background:var(--hi-pink); color:#fff;
  box-shadow:0 0 0 3px var(--saffron), 0 14px 28px -12px rgba(229,51,122,.7);
  transform:rotate(-4deg);
}
.hi-shout .hi-sticker{ animation:hiWobble 3.6s ease-in-out 1.2s infinite; }
/* the hero shout is a shortcut to the momos — a button, styled as the sticker */
.hi-sticker-btn{ border:none; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.hi-sticker-btn:hover{ filter:brightness(1.08); }
/* hold still while it is being aimed at — a wobbling target is hard to hit */
.hi-shout .hi-sticker-btn:hover,
.hi-shout .hi-sticker-btn:focus-visible{ animation-play-state:paused; }
.hi-sticker-btn:focus-visible{ outline:3px solid var(--saffron); outline-offset:3px; }

/* ----- Hindi labels above section headings ----- */
.hi-label{ font-family:var(--hi-display); font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.45; color:var(--chili); margin:0 0 4px; }
.picks .hi-label{ color:var(--saffron); }
.reserve-copy .hi-label, .contact-info .hi-label{ color:var(--chili); }

/* ----- marquee ----- */
.marquee-track .hi{ font-family:var(--hi-display); font-style:normal; font-size:1.25rem; color:#ffe7a8; line-height:1.3; }

/* ----- menu: Hindi category names ----- */
.menu-tab .tab-hi{ font-size:.85em; opacity:.75; margin-left:2px; }
.menu-cat-hi{ font-family:var(--hi-display); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.4; color:var(--chili); text-align:center; margin:0 0 2px; }

/* ----- Dilli band (truck-art) ----- */
.dilli{ position:relative; background:var(--ink); color:var(--cream); padding:96px 6vw 90px; overflow:hidden; }
.dilli::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:repeating-linear-gradient(90deg, var(--hi-pink) 0 40px, var(--saffron) 40px 80px, var(--hi-parrot) 80px 120px, var(--hi-teal) 120px 160px);
}
/* scalloped fringe, like the jhalar on a truck's bumper */
.dilli-jhalar{
  position:absolute; left:0; right:0; top:10px; height:14px;
  background:radial-gradient(circle at 12px 0, var(--saffron) 10px, transparent 11px) 0 0/24px 14px repeat-x;
}
.dilli-inner{ position:relative; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.dilli-sign{
  position:relative; padding:40px 30px 34px; border-radius:22px; text-align:center;
  background:linear-gradient(160deg,#2a1c14,#1a130e); border:2px solid var(--saffron);
  box-shadow:inset 0 0 0 6px var(--ink), inset 0 0 0 8px var(--hi-pink), 0 30px 60px -30px rgba(0,0,0,.8);
}
.dilli-sign .hi-label{ color:var(--hi-pink); }
.dilli-title{ font-family:var(--hi-display); font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.35; color:var(--cream); text-wrap:balance; }
.dilli-sign .hi-translit{ opacity:1; animation:none; margin:6px 0 12px; }
.dilli-sub{ color:var(--cream-70); max-width:420px; margin:0 auto; }
.dilli-sign .hi-sticker{ position:absolute; top:-20px; right:-14px; animation:hiWobble 3.6s ease-in-out infinite; }
.dilli-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; padding:0; }
.dilli-card{ position:relative; overflow:hidden; padding:22px 20px 20px; border-radius:18px; color:#fff; transition:transform .4s var(--ease); }
.dilli-card:hover{ transform:translateY(-4px) rotate(-.6deg); }
/* full-card hit area, kept behind the text so selection still works */
.dilli-hit{ position:absolute; inset:0; z-index:2; border:none; background:none;
  cursor:pointer; padding:0; font:inherit; color:transparent; }
.dilli-hit:focus-visible{ outline:3px solid #fff; outline-offset:-6px; border-radius:18px; }
.dilli-card:has(.dilli-hit:hover){ transform:translateY(-6px) rotate(-.6deg); }
.dilli-card::after{ content:""; position:absolute; inset:6px; border:1.5px dashed rgba(255,255,255,.45); border-radius:13px; pointer-events:none; }
/* The momo card is marigold yellow. White text on a bright yellow fails contrast,
   so this one card flips to dark ink instead of washing the yellow out. */
.dilli-card:nth-child(1){ background:var(--hi-marigold); color:var(--ink); }
.dilli-card:nth-child(1)::after{ border-color:rgba(22,19,15,.35); }
.dilli-card:nth-child(1) small{ opacity:.7; }
.dilli-card:nth-child(2){ background:var(--hi-pink); }
.dilli-card:nth-child(3){ background:var(--hi-teal); }
.dilli-card:nth-child(4){ background:var(--hi-parrot); }
.dilli-card [lang="hi"]{ display:block; font-family:var(--hi-display); font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.4; }
.dilli-card small{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-top:2px; }
.dilli-card p{ margin-top:8px; font-size:.9rem; line-height:1.45; }
.dilli-horn{
  grid-column:1/-1; text-align:center; margin-top:8px;
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:800; letter-spacing:.12em;
  font-size:clamp(1.1rem,2.4vw,1.6rem); color:transparent; -webkit-text-stroke:1px var(--saffron);
}

/* ----- footer ----- */
.hi-footer{ font-family:var(--hi-display); font-size:1.3rem; line-height:1.5; color:var(--saffron); }

@media (max-width: 860px){
  .dilli-inner{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 420px){
  .dilli-cards{ grid-template-columns:1fr; }
  .dilli-sign .hi-sticker{ right:8px; }
}
@media (prefers-reduced-motion: reduce){
  .hi-hero, .hi-translit, .hi-shout, .hi-preload{ opacity:1; animation:none; }
  .hi-sticker, .hi-shout .hi-sticker, .dilli-sign .hi-sticker{ animation:none; }
}