/* ====== Base & Theme (watercolor palette) ====== */
:root{
  --paper:#F2E9D8;
  --green:#1FAF50;
  --green-deep:#0E7A2E;
  --gold:#FFC20D;
  --orange:#FF7A00;
  --red:#D62828;
  --teal:#0FA3B1;
  --ink:#0B0B0F;
  --cocoa:#492015;
  --cocoa-600:#35160F;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:#222;
  background: var(--paper);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px, 92%);margin-inline:auto}

.brand {
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff;
}
.brand-logo{
  width: 36px; height: 36px; flex: 0 0 36px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.brand-name{
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 1.05rem;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ====== Nav ====== */
.site-nav{
  position: fixed;       /* <— changed from sticky to fixed */
  top: 0; left: 0; right: 0;
  width: 100%;
  background:#121314;
  color:#fff;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: box-shadow .2s ease, background-color .2s ease;
}
body.has-fixed-nav{          /* added so content doesn't slide under nav */
  padding-top: var(--navh, 72px);
}
.site-nav.is-scrolled{       /* small shadow bump when the user scrolls */
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0;}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff}
.brand-mark{
  font-weight:800; letter-spacing:.5px;
  background: linear-gradient(90deg,var(--green),var(--gold),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.nav-links{
  list-style:none; display:flex; gap:1.25rem; margin:0; padding:0;
}
/* Pill buttons for all nav links */
.nav-links a{
  display:inline-block;
  text-decoration:none;
  font-weight:800;
  padding:.55rem 1rem;
  border-radius:10px; 
  border-radius:999px;
  background: var(--gold);   /* same as Order Online */
  color:#111;
  box-shadow: var(--shadow);
}
.nav-links a:hover{
  background: var(--orange);      /* subtle warm hover */
  transform: translateY(-2px);
}

#nav-cart-count{
  background:#111;
  color:#fff;
  border-radius:6px;              /* less rounded to match */
  padding:.15rem .45rem;
  font-size:.8rem;
}

/* ====== Hero (split like inspiration) ====== */
.hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:0;
}
.hero-visual{
  min-height: 62vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25)),
    url('../assets/restaurant.jpg') center/cover no-repeat;
  border-radius: 0 12px 12px 0;      /* softer edge toward text */
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.hero-panel{
  background: var(--orange);
  color:#fff; display:flex; align-items:center;
  padding: clamp(2rem, 4vw, 4rem);
}
.hero-panel h1{
  font-weight:900; letter-spacing:1px; line-height:1.1; margin:0 0 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
}
.hero-panel p{font-size:1.05rem; margin:0 0 1.25rem}

/* ===== Smaller Action Buttons (Add / Remove) ===== */
.btn {
  display:inline-block;
  font-weight:700;
  font-size:0.9rem;       /* ↓ smaller text */
  padding:0.45rem 0.85rem;/* ↓ smaller height & width */
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

/* Keep color styles the same */
.btn.green{
  background:var(--green);
  color:#fff;
}
.btn.green:hover{
  background:var(--green-deep);
}
.btn.outline{
  border:1.5px solid #222;
  color:#222;
  background:transparent;
}
.btn.outline:hover{
  background:rgba(0,0,0,.05);
}

/* Even smaller Remove buttons */
button[data-remove]{
  font-size:0.8rem;
  padding:0.3rem 0.6rem;
  border-radius:6px;
}

/* ====== Cards / Sections ====== */
.section{padding: clamp(2rem, 5vw, 4rem) 0}
.grid-3{display:grid; gap:1.2rem; grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff; border-radius:18px; padding:1.2rem; box-shadow: var(--shadow);
}
.badge{
  display:inline-block; background:var(--gold); color:#111; font-weight:800;
  padding:.2rem .6rem; border-radius:999px; font-size:.85rem;
}

/* ====== Menu Page (like screenshot 1) ====== */
.menu-hero{padding:1.8rem 0 0}
.menu-wrap{
  display:grid; gap:2.5rem; grid-template-columns:1.2fr .9fr; align-items:start;
}
.menu-card{
  background:#fff; border-radius:28px; padding:2rem; box-shadow: var(--shadow);
  border:3px solid rgba(0,0,0,.06); position:relative;
}
.menu-title{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.2rem;
}
.menu-title h2{margin:0; font-size:1.6rem}
.menu-item{
  display:grid; grid-template-columns: 1fr auto; gap:.75rem; padding:.5rem 0;
  border-bottom:1px dashed rgba(0,0,0,.08);
}
.menu-item:last-child{border-bottom:none}
.menu-item h4{margin:0; font-size:1.05rem}
.menu-item p{margin:.2rem 0 0; color:#555; font-size:.95rem}
.menu-price{margin:0; font-weight:700}

.burst{
  position:absolute; right:-18px; top:40%; transform:rotate(-10deg);
  background:var(--gold); color:#111; font-weight:900; padding:1rem .8rem;
  clip-path: polygon(50% 0%, 61% 17%, 80% 7%, 75% 28%, 98% 32%, 79% 45%, 100% 62%, 76% 62%, 82% 83%, 60% 73%, 50% 100%, 40% 73%, 18% 83%, 24% 62%, 0% 62%, 21% 45%, 2% 32%, 25% 28%, 20% 7%, 39% 17%);
  box-shadow: var(--shadow);
}
.burst small{display:block; font-weight:700}

.most-popular{
  background:#fff; border-radius:22px; padding:1.5rem; box-shadow: var(--shadow);
}
.most-popular h3{
  font-weight:900; letter-spacing:1px; margin:0 0 1rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.pop-list{display:grid; gap:1rem}
.pop-item{display:grid; grid-template-columns:1fr auto; gap:.5rem; padding-bottom:.8rem; border-bottom:1px dashed rgba(0,0,0,.08)}
.pop-item:last-child{border-bottom:none}
.pop-item h4{margin:0}
.pop-item p{margin:.2rem 0 0; color:#555}

/* ====== Footer ====== */
.site-footer{margin-top:3rem; background:#131415; color:#eee}
.footer-grid{
  display:grid; gap:1.4rem; grid-template-columns:repeat(4,1fr);
  padding:2rem 0;
}
.site-footer h4, .site-footer h5{margin:.2rem 0 1rem}
.list-plain{list-style:none; padding:0; margin:0}
.footer-bottom{text-align:center; padding:.9rem 0; color:#bbb; border-top:1px solid rgba(255,255,255,.08)}
.socials a{color:#fff; text-decoration:none}
.socials a:hover{color:var(--gold)}

/* ====== Utilities ====== */
.round{border-radius:16px}
.center{text-align:center}
.lede{font-size:1.1rem; color:#333}

/* Make outline buttons readable on white cards */
.card .btn.outline{
  border:2px solid #222;
  color:#222;
  background:transparent;
}
.card .btn.outline:hover{ background:rgba(0,0,0,.06) }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; right:4%; top:64px; background:#121314; padding:1rem; border-radius:12px; display:none; flex-direction:column; gap:.6rem; box-shadow: var(--shadow)}
  .nav-links.open{display:flex}
  .hero{grid-template-columns:1fr}
  .hero-visual{min-height:40vh}
  .menu-wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr}
}