:root{
  --primary: #ff9800;   /* nav bg */
  --accent: #ff5722;    /* headings */
  --bg: #fafafa;
  --card-bg: #fff;
  --text: #222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* centered container for page content */
.container{
  max-width:1024px;
  margin:0 auto;
  padding:18px;
}

/* header with centered logo */
header{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
header img{
  height:64px;
  max-height:80px;
  display:block;
}

/* main nav */
nav{
  background:var(--primary);
  text-align:center;
  padding:10px 0;
}
nav a{
  color:#fff;
  margin:0 14px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  padding:8px 10px;
  border-radius:6px;
}
nav a:hover{ opacity:0.95; text-decoration:underline; }

/* main page headings */
h1{ margin:20px 0 10px; color:var(--accent); text-align:center; }
h2{ color:var(--accent); margin:18px 0 8px; }

/* card style for menu / content */
.card{
  background:var(--card-bg);
  padding:14px;
  margin:10px 0;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* menu grid: two columns on desktop, single on mobile */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  align-items:start;
}
.menu-grid .card{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; }

/* small text, price styling */
.menu-item { font-weight:600; }
.menu-price { font-weight:800; color:var(--text); }

/* map placeholder */
.map-placeholder{
  background:#eee;
  border:1px dashed #d8d8d8;
  padding:24px;
  text-align:center;
  color:#666;
  border-radius:8px;
}

/* footer */
footer{
  background:#111;
  color:#ddd;
  text-align:center;
  padding:16px;
  margin-top:26px;
  font-size:14px;
  border-top:4px solid rgba(255,255,255,0.02);
}

/* small screens */
@media (max-width:700px){
  header img{ height:54px; }
  .menu-grid{ grid-template-columns: 1fr; }
  nav a{ display:block; margin:6px auto; width:90%; max-width:320px; }
  .container{ padding:12px; }
  h1{ font-size:20px; }
}