/* styles.css — modern, responsive restaurant demo */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --accent: #2b7cff;
  --accent-2: #6a11cb;
  --bg: #fbfdff;
  --card: #ffffff;
  --muted: #6b7280;
  --dark: #0f172a;
  --maxw: 1100px;
  --radius: 12px;
  --nav-h: 72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  background: linear-gradient(180deg,#f7fbff 0%, var(--bg) 100%);
  color: #0f172a;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* NAVBAR */
.navbar{
  position:fixed; left:0; top:0; width:100%; height:var(--nav-h);
  display:flex; align-items:center; z-index:1200;
  background:transparent; transition: background .25s ease, box-shadow .25s ease;
  padding: 0 16px;
}
.navbar.scrolled{
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98));
  box-shadow: 0 6px 28px rgba(15,23,42,0.08);
}

.nav-container{display:flex; align-items:center; width:100%;}
.brand .logo{}
.logo{font-weight:700; color:var(--dark); font-size:1.05rem; letter-spacing:0.2px}

/* nav */
.nav{margin-left:auto; display:flex; align-items:center; gap:16px}
.nav-links{list-style:none; display:flex; gap:20px; align-items:center; margin:0; padding:0}
.nav-links a{color:var(--dark); text-decoration:none; font-weight:600; padding:8px 6px; border-radius:8px}
.nav-links a:hover{background:rgba(43,124,255,0.08); color:var(--accent)}
.order-btn{display:inline-block; margin-left:8px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px; font-weight:600;
  text-decoration:none; border:0; cursor:pointer;
}
.btn-primary{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow: 0 8px 20px rgba(43,124,255,0.12);
}
.btn-ghost{
  background:transparent; color:var(--dark); border:1px solid rgba(15,23,42,0.04); padding:9px 12px;
}
.btn-outline{ background:transparent; border:1px solid rgba(15,23,42,0.06); padding:8px 12px; border-radius:8px; color:var(--dark) }

/* Hero */
.hero{ padding-top:calc(var(--nav-h) + 28px); padding-bottom:48px }
.hero-inner{ display:grid; grid-template-columns: 1fr 480px; gap:36px; align-items:center; align-content:center; min-height:60vh}
.hero-text h1{ font-size:clamp(1.6rem,4.8vw,2.6rem); margin:0 0 12px; line-height:1.02}
.brand-highlight{ color:var(--accent); font-weight:700}
.lead{ color:var(--muted); margin:6px 0 18px}
.hero-cta{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.hero-meta{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.chip{ background:rgba(15,23,42,0.03); padding:8px 10px; border-radius:999px; font-size:0.9rem; color:var(--muted)}

/* hero media */
.hero-media img{ width:100%; border-radius:14px; display:block; box-shadow:0 12px 36px rgba(2,6,23,0.12); object-fit:cover }

/* Section general */
.section{ padding:72px 0 }
.section-alt{ background:#ffffff; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02) }

/* headings */
h2{ font-size:1.4rem; margin:0 0 8px }
.section-sub{ color:var(--muted); margin-bottom:20px }

/* MENU grid */
.menu-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); margin-top:18px}
.menu-card{
  display:flex; gap:12px; align-items:center; background:var(--card);
  padding:14px; border-radius:12px; box-shadow:0 8px 20px rgba(2,6,23,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.menu-card:hover{ transform: translateY(-6px); box-shadow:0 16px 40px rgba(2,6,23,0.07)}
.menu-thumb{ width:64px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:26px; background:linear-gradient(180deg, rgba(43,124,255,0.12), rgba(106,17,203,0.06)); color:var(--accent) }
.menu-body h3{ margin:0 0 6px; font-size:1rem }
.menu-price{ margin-left:auto; font-weight:700; color:var(--dark) }

/* Booking grid */
.booking-grid{ display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start }
.booking-card{ background:var(--card); padding:18px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.06) }
.contact-card{ background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 26px rgba(2,6,23,0.05) }
.info-list{ list-style:none; padding:0; margin:12px 0 18px; color:var(--muted) }
.info-list li{ margin:8px 0 }

/* Contact grid */
.contact-grid{ display:grid; grid-template-columns: 1fr 360px; gap:28px; align-items:start }
.contact-form{ display:flex; flex-direction:column; gap:12px; background:var(--card); padding:18px; border-radius:12px; box-shadow:0 8px 26px rgba(2,6,23,0.05) }
.contact-form label{ display:flex; flex-direction:column; gap:8px; color:var(--dark); font-weight:600 }
.contact-form input, .contact-form textarea{ padding:12px; border:1px solid rgba(15,23,42,0.06); border-radius:8px; font-size:0.95rem; background:#fff }

/* socials */
.socials{ margin-top:12px; display:flex; gap:10px }
.socials a{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; background:rgba(15,23,42,0.03); border-radius:8px; color:var(--dark) }

/* Footer */
.footer{ padding:22px 0; text-align:center; color:var(--muted); font-size:0.95rem; border-top:1px solid rgba(15,23,42,0.02) }

/* NAV Toggle & Responsive */
.nav-toggle{
  display:none; width:46px; height:46px; border-radius:10px; background:transparent; border:0; cursor:pointer; align-items:center; justify-content:center;
}
.hamburger{ width:26px; height:3px; background:var(--dark); position:relative; display:inline-block; border-radius:3px}
.hamburger::before, .hamburger::after{ content:""; position:absolute; left:0; width:26px; height:3px; background:var(--dark); border-radius:3px}
.hamburger::before{ top:-8px } .hamburger::after{ top:8px }

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr 360px }
  .booking-grid{ grid-template-columns: 1fr }
  .contact-grid{ grid-template-columns: 1fr }
}

@media (max-width: 820px){
  .nav-links{ display:none } /* hide desktop nav */
  .nav{ gap:8px }
  .nav-toggle{ display:flex; }
  .hero-inner{ grid-template-columns: 1fr; text-align:left; gap:18px}
  .hero-media{ order:-1 } /* image first on small */
  .hero{ padding-top: calc(var(--nav-h) + 18px) }
  .hero-cta{ justify-content:flex-start }
  .menu-price{ margin-left:12px }
}

@media (max-width:480px){
  .brand .logo{ font-size:1rem }
  .menu-thumb{ width:54px; height:54px; font-size:22px }
  .hero-media img{ border-radius:10px }
}