/* =========================================
   Khushi Grill – styles.css (fixed header + mobile dropdown)
   ========================================= */

/* ---------------- Brand System ---------------- */
:root{
  /* Brand */
  --brand-700:#b45309;
  --brand-600:#d97706;
  --brand-500:#f59e0b;
  --brand-400:#fbbf24;
  --brand-200:#fde68a;

  /* Ink & Neutrals */
  --ink-900:#0b0d0e;
  --ink-800:#101214;
  --ink-700:#1f2937;
  --ink-600:#374151;
  --muted-500:#6b7280;
  --muted-400:#9ca3af;
  --muted-300:#d1d5db;

  /* Layout */
  --bg:#ffffff;
  --container:1200px;
  --header-h:72px; /* fixed header height fallback; JS keeps this exact */

  /* Effects */
  --shadow-1:0 6px 18px rgba(0,0,0,.12);
  --shadow-2:0 16px 40px rgba(0,0,0,.16);
  --shadow-3:0 30px 70px rgba(0,0,0,.20);
}

/* ---------------- Base / Overflow Guards ---------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink-600);
  background:var(--bg);
  line-height:1.6;
  padding-top:var(--header-h); /* space for fixed header */
}
img,iframe{max-width:100%;height:auto;display:block}
.container{width:min(var(--container), calc(100% - 32px));margin-inline:auto}
p,a,h1,h2,h3,h4,h5,h6{word-break:break-word;overflow-wrap:anywhere}

/* Prevent children from forcing horizontal scroll */
.nav-wrap > *, .split-2 > *, .grid-2 > *, .bar-grid > *, .gallery-grid > *,
.reviews-wrap, .reviews-track, .order-grid > *, .info-cards > *, .foot-grid > *{min-width:0}

/* ---------------- Buttons & Chips ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--brand-600),var(--brand-500));color:#111;box-shadow:0 12px 28px rgba(217,119,6,.35)}
.btn.dark{background:#0f1113;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.btn.ghost{background:transparent;border:2px solid var(--brand-500);color:var(--brand-400)}
.inline-link{color:var(--brand-700);text-decoration:none}
.inline-link:hover{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,var(--brand-200),#fff);border:1px solid var(--brand-400);color:var(--ink-800);font-weight:700}

/* ---------------- HEADER / NAVBAR (fixed) ---------------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1500;
  background:linear-gradient(180deg, rgba(16,18,20,.95), rgba(16,18,20,.85));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap{
  max-width:var(--container); margin:0 auto;
  height:var(--header-h); padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;background:#0f1113;padding:.34rem .52rem;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.brand-badge img{height:42px}
.brand-text{color:#fff;font-weight:900;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav-desktop{display:none;align-items:center;gap:20px}
.nav-link{color:#f5f6f7;text-decoration:none;font-weight:700;position:relative;padding:8px 4px}
.nav-link::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:0;background:linear-gradient(90deg,var(--brand-600),var(--brand-400));transition:width .22s}
.nav-link:hover::after,.nav-link.is-active::after{width:100%}
.nav-cta{display:none;align-items:center;gap:10px}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;cursor:pointer;border-radius:12px;flex:0 0 auto}
.burger .line{stroke:#f3f4f6;stroke-width:2.4;stroke-linecap:round;transition:transform .28s,opacity .2s}
.nav-toggle.open .top{transform:translateY(6px) rotate(45deg)}
.nav-toggle.open .mid{opacity:0}
.nav-toggle.open .bot{transform:translateY(-6px) rotate(-45deg)}

/* ---------------- Mobile dropdown (simple & clear) ---------------- */
.mobile-nav[hidden]{display:none !important}
.mobile-nav{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:1400;
  background:#ffffff; color:#111;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
  box-shadow:0 16px 30px rgba(0,0,0,.08);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.mobile-nav.open{max-height:80vh}
.m-nav-link{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; text-decoration:none; color:#111; font-weight:800;
  border-top:1px solid #f4f4f4;
}
.m-nav-link:first-child{border-top:none}
.m-nav-link:hover{background:#fafafa}
.m-nav-link i{width:20px;text-align:center;color:#6b7280}

/* Desktop: show full nav, hide dropdown & toggle */
@media (min-width: 1000px){
  .nav-desktop{display:flex}
  .nav-cta{display:flex}
  .nav-toggle, .mobile-nav{display:none}
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; isolation:isolate; color:#fff;
  background:
    radial-gradient(800px 500px at 10% -10%, rgba(245,158,11,.25), transparent 60%),
    radial-gradient(600px 400px at 100% -10%, rgba(217,119,6,.22), transparent 60%),
    #0f1113;
  padding: clamp(72px, 8vw, 120px) 0 56px;
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(1.9rem, 4.8vw, 3.1rem);line-height:1.08;margin:0 0 10px;font-weight:900}
.hero p{color:#f7f7f7;opacity:.92;margin:0 0 16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hero-media img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-3)}
.hero-glow{position:absolute;inset:auto;filter:blur(48px);opacity:.25;z-index:-1;pointer-events:none}
.hero-glow.a{width:38vmin;height:38vmin;background:#f59e0b;left:-8vmin;top:-10vmin;border-radius:50%}
.hero-glow.b{width:30vmin;height:30vmin;background:#d97706;right:-8vmin;top:-6vmin;border-radius:50%}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}

/* ---------------- Generic Sections ---------------- */
.section{padding:64px 0}
.section.alt{background:#fffaf0}
.section-title{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:900;margin:0 0 12px;position:relative;color:var(--ink-700)}
.section-title::after{content:"";position:absolute;left:0;bottom:-10px;width:64px;height:3px;background:linear-gradient(90deg,var(--brand-600),var(--brand-400));border-radius:2px}
.center{text-align:center}
.dim{color:var(--muted-500)}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-2)}
@media (max-width: 900px){.split-2,.grid-2{grid-template-columns:1fr}}

/* ---------------- Menu Cards ---------------- */
.menu-card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:var(--shadow-1);overflow:hidden}
.menu-card img{width:100%;display:block;cursor:zoom-in}
.menu-card figcaption{text-align:center;padding:10px;font-weight:800;color:var(--ink-700)}

/* ---------------- Bar images ---------------- */
.bar-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){.bar-grid{grid-template-columns:1fr}}

/* ---------------- Gallery ---------------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-1);cursor:pointer;transition:transform .2s}
.gallery-grid img:hover{transform:scale(1.02)}

/* ---------------- Reviews ---------------- */
.reviews-wrap{max-width:860px;margin-inline:auto;overflow:hidden}
.reviews-track{display:flex;transition:transform .5s ease;will-change:transform}
.review{min-width:100%;background:#fff;border:1px solid #eee;border-radius:18px;box-shadow:var(--shadow-1);padding:24px;opacity:0;transform:translateX(20px);transition:opacity .4s, transform .4s}
.review.active{opacity:1;transform:translateX(0)}
.review-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.review h3{margin:0 6px 0 0;color:var(--ink-700)}
.avatar{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--brand-600),var(--brand-500))}
.dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted-300);border:none;cursor:pointer}
.dot.active{background:linear-gradient(135deg,var(--brand-600),var(--brand-400))}

/* ---------------- ORDER SECTION ---------------- */
.order-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.order-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:14px;border-radius:16px;text-decoration:none;color:#111;background:#fff;box-shadow:var(--shadow-1);border:1px solid #eee;
  transition:transform .18s, box-shadow .18s;
}
.order-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.order-icon img{height:18px}
.order-icon i{font-size:1.2rem}
.order-card.just-eat .order-icon img{filter:none}
.order-card.uber .order-icon i{color:#000}
.order-card.call .order-icon i{color:#0f1113}
.order-body h3{margin:0 0 2px}
.order-body p{margin:0;color:#666}
.order-go{color:#999}
.small{font-size:.92rem}
@media (max-width: 900px){.order-grid{grid-template-columns:1fr}}

/* ---------------- Contact ---------------- */
.info-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info-card{background:linear-gradient(135deg,#f8fafc,#ffffff);border:1px solid #eee;border-left:4px solid var(--brand-600);border-radius:14px;padding:16px;box-shadow:var(--shadow-1)}
.info-card h3{margin:0 0 6px;color:var(--ink-700)}
.hours{list-style:none;margin:8px 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed #eee;padding:6px 0}
.map-card{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-2)}
@media (max-width: 900px){.info-cards{grid-template-columns:1fr}}

/* ---------------- Footer ---------------- */
.footer{background:linear-gradient(135deg,#161b22,#0f1113);color:#cdd9e5;margin-top:8px}
.foot-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:16px;padding:24px 0}
.foot-logo{height:44px;margin-bottom:8px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links a{color:#cdd9e5;text-decoration:none}
.foot-links a:hover{color:#fbbf24}
.foot-bottom{text-align:center;color:#9aa4b2;border-top:1px solid rgba(255,255,255,.08);padding:14px 0}
@media (max-width: 900px){.foot-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* ---------------- Lightbox (Menu & Gallery) ---------------- */
.lb{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-inner{position:relative;max-width:92vw;max-height:92vh}
.lb-img{width:100%;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.6rem;display:flex;align-items:center;justify-content:center
}
.lb-close{top:-48px;right:0;transform:none}
.lb-prev{left:-56px}
.lb-next{right:-56px}
@media (max-width:520px){.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:-40px}}