/* GreenWheels Theme — Refined for Bigfoot Bistro */
:root{
  --green-600:#2e7d32;
  --green-700:#256428;
  --green-100:#dcedc8;
  --earth-700:#5a463c;
  --earth-500:#8d6e63;
  --earth-200:#e6ded6;
  --sand:#f5f1e6;
  --ink:#1e2420;
  --muted:#59635e;
  --gold:#f3c74f;
  --white:#ffffff;
  --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.07);
  --shadow-strong:0 16px 40px rgba(0,0,0,.08);
  --container:1140px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:Lato, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:radial-gradient(circle at 20% 20%, rgba(220,237,200,.5), transparent 30%),
             radial-gradient(circle at 80% 0%, rgba(243,199,79,.18), transparent 28%),
             linear-gradient(180deg,var(--sand),#fff);
  line-height:1.7;
  letter-spacing:0.01em;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--green-700) }

/* Utilities */
.container{ max-width:var(--container); margin-inline:auto; padding:1.25rem 1.5rem }
.muted{ color:var(--muted) }
.lead{ font-size:1.2rem; color:var(--muted); max-width:48ch }
.link-cta{ color:var(--green-700); font-weight:700; text-decoration:none }
.link-cta:hover{ text-decoration:underline }
.section__eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .35rem;
  font-weight:800;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.85rem 1.35rem; border-radius:999px;
  text-decoration:none; font-weight:800; border:2px solid transparent;
  transition:all .2s ease; box-shadow:0 8px 20px rgba(46,125,50,.15);
  letter-spacing:.01em;
}
.btn--primary{ background:linear-gradient(135deg,var(--green-600),var(--green-700)); color:#fff }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong) }
.btn--ghost{ border-color:var(--green-600); color:var(--green-700); background:rgba(220,237,200,.4) }
.btn--ghost:hover{ background:var(--green-100); transform:translateY(-2px) }

.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .85rem; border-radius:999px; background:var(--earth-200);
  color:var(--ink); font-weight:700; font-size:.92rem;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.pill--quiet{ background:rgba(89,99,94,.15); color:var(--muted); box-shadow:none }
.stack{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 }

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--earth-200);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); font-weight:900; font-family:Merriweather, serif }
.brand img{ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08) }
.nav__menu{ display:none; align-items:center; gap:1rem }
.nav__menu ul{ list-style:none; padding:0; margin:0; display:flex; gap:1rem; align-items:center }
.nav__menu a{ text-decoration:none; color:var(--ink); padding:.6rem .8rem; border-radius:12px; font-weight:700 }
.nav__menu a:hover{ background:var(--earth-200) }
.nav__toggle{
  background:transparent; border:0; width:46px; height:46px; border-radius:12px;
  display:grid; place-content:center; gap:5px; cursor:pointer; transition:background .2s ease;
}
.nav__toggle:hover{ background:var(--earth-200) }
.nav__toggle span{ display:block; width:22px; height:2px; background:var(--ink) }
.nav__cta{ white-space:nowrap }
.nav--open #site-nav{ display:block; position:absolute; top:64px; right:1.25rem; background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow-strong); min-width:240px }
.nav--open #site-nav ul{ flex-direction:column; align-items:flex-start; width:100% }
.nav--open #site-nav .nav__cta{ width:100%; justify-content:center; text-align:center }

/* Hero */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--green-100),#fff 55%,rgba(243,199,79,.15));
  padding:4rem 0;
}
.hero::after{
  content:""; position:absolute; inset:20px -120px auto auto;
  width:280px; height:280px; background:radial-gradient(circle, rgba(46,125,50,.25), transparent 60%);
  filter:blur(6px); opacity:.6;
}
.hero__inner{ display:grid; gap:2.4rem; align-items:center }
.hero__copy h1{ font-family:Merriweather, serif; font-size:2.6rem; margin:.2rem 0 }
.hero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--earth-700); color:#fff; padding:.5rem .9rem; border-radius:999px;
  font-weight:800; letter-spacing:.03em; text-transform:uppercase; font-size:.78rem;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.hero__highlights{ list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.45rem }
.hero__highlights li{ display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:flex-start }
.hero__highlights li::before{ content:"•"; color:var(--green-700); font-weight:900; margin-top:.1rem }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem }
.hero__meta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }
.hero__art{ position:relative; z-index:2 }
.hero__card{
  background:#fff; padding:1.2rem; border-radius:20px; box-shadow:var(--shadow-strong);
  border:1px solid var(--earth-200); max-width:320px; margin-inline:auto; text-align:center;
}
.hero__card p{ margin:.8rem 0; color:var(--muted) }
.texture{ position:absolute; left:-30px; bottom:-20px; width:220px; height:220px; opacity:.25 }

/* Sections / Cards */
.section{ padding:3rem 0; scroll-margin-top:96px }
#book{ scroll-margin-top:120px }
.section__title{ font-size:1.8rem; font-family:Merriweather, serif; margin:0 0 1rem }
.grid{ display:grid; gap:1.1rem }
.grid--cards{ grid-template-columns:1fr }
.grid--list{ grid-template-columns:1fr }

/* Cards */
.card{
  background:#fff; border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow);
  border:1px solid var(--earth-200); position:relative; overflow:hidden;
}
.card--raised{ box-shadow:var(--shadow-strong) }
.card::before{ content:""; position:absolute; inset:0; top:0; height:6px; background:linear-gradient(90deg,var(--green-600),var(--earth-500)); opacity:.28 }
.card h3{ margin:.1rem 0 .3rem }
.card--accent{ background:var(--green-100); border-color:rgba(46,125,50,.25) }

/* Menu card */
.menu-card__header{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.menu-card h3{ margin:.2rem 0; font-size:1.1rem }
.price{ background:var(--earth-200); padding:.2rem .6rem; border-radius:999px; font-weight:800 }

/* Feature cards */
.grid--features{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.feature{ min-height:200px }
.cta-panel{
  margin-top:1.5rem; padding:1.3rem 1.5rem; border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(46,125,50,.12),rgba(243,199,79,.16));
  border:1px solid var(--earth-200);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}

.cta-group{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:1rem }
.menu-preview{ max-height:700px; display:flex; flex-direction:column; gap:1rem }
.menu-preview__header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.menu-preview__body{ overflow:auto; padding-right:.5rem }
.menu-preview__body h2{ margin-top:0 }
.menu-preview__body h3{ margin-bottom:.2rem }
.contact-list{ display:grid; gap:.35rem; margin:1rem 0; padding:0; list-style:none }
.contact-card{ background:linear-gradient(180deg,#fff,rgba(230,222,214,.5)); border-color:rgba(138,129,121,.4) }
.section--contact{ background:linear-gradient(180deg,rgba(46,125,50,.05),rgba(243,199,79,.06)) }

/* Layout helpers */
.two-col{ display:grid; gap:1.4rem }
.prose p{ margin:1rem 0 }
.footer-grid{ display:grid; gap:1rem; align-items:start }

/* Specials */
.section--specials{
  background:linear-gradient(180deg,rgba(46,125,50,.05),rgba(46,125,50,.01));
  border-block:1px solid var(--earth-200);
}
.section--specials .grid{ margin-top:1.1rem }

/* About */
.section--about .card{ height:100%; display:grid; align-content:start; gap:.5rem }

/* Footer */
.site-footer{ background:#fff; border-top:1px solid var(--earth-200); margin-top:2rem; padding:1.6rem 0 }
.list-plain{ list-style:none; padding:0; margin:0 }
.list-plain a{ text-decoration:none; color:var(--ink); font-weight:700 }
.list-plain a:hover{ color:var(--green-600) }

/* Responsive Breakpoints */
@media (min-width:576px){
  .hero__inner{ grid-template-columns:1.2fr .8fr }
  .hero__card{ margin:0 }
}
@media (min-width:768px){
  .grid--cards{ grid-template-columns:repeat(2,1fr) }
  .two-col{ grid-template-columns:1.2fr .8fr }
  .footer-grid{ grid-template-columns:1fr auto auto }
  .nav__menu{ display:flex }
  .nav__toggle{ display:none }
  .hero__copy h1{ font-size:2.9rem }
}
@media (min-width:992px){
  .grid--cards{ grid-template-columns:repeat(3,1fr) }
  .hero{ padding:4.4rem 0 }
  .hero__inner{ gap:3rem }
}
@media (min-width:1200px){
  .container{ padding:1.6rem }
}