/* =====================================================================
   NEIGHBOURHOOD CHINESE RESTAURANT & BAR - Stylesheet
   Light, warm, welcoming. Cream base, deep red, warm gold, charcoal.
   Built by Baha Connect.  ->  Edit colours in the :root block below.
   ===================================================================== */

/* ------------------------------ TOKENS ------------------------------ */
:root {
  /* Fonts */
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  /* Brand colours - change these to re-skin the whole site */
  --cream:    hsl(38 44% 96%);
  --cream-2:  hsl(38 40% 93%);
  --surface:  hsl(40 40% 99%);
  --ink:      hsl(20 16% 15%);
  --ink-2:    hsl(20 10% 34%);
  --ink-3:    hsl(20 8% 52%);

  --red-050:  hsl(357 60% 96%);
  --red-500:  hsl(357 68% 45%);
  --red-600:  hsl(357 70% 37%);
  --red-700:  hsl(357 72% 29%);

  --gold-050: hsl(44 70% 94%);
  --gold-500: hsl(41 74% 47%);
  --gold-600: hsl(38 72% 40%);

  --green:    hsl(145 63% 40%);
  --green-600:hsl(145 63% 32%);

  --line:     hsl(38 24% 86%);
  --charcoal: hsl(20 14% 12%);

  /* Type scale */
  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 1.9rem; --t-4xl: 2.5rem; --t-5xl: 3.25rem;

  /* Spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;

  --container: 1140px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  --sh-sm: 0 1px 2px hsl(20 20% 20% / .08);
  --sh-md: 0 6px 20px hsl(20 25% 25% / .10), 0 2px 6px hsl(20 20% 20% / .06);
  --sh-lg: 0 16px 40px hsl(20 25% 25% / .16);

  --nav-h: 68px;
}

/* ------------------------------ RESET ------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); background: var(--cream); color: var(--ink-2);
  line-height: 1.6; font-size: var(--t-base); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; font-weight: 700; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 4px; }

/* --------------------------- LAYOUT HELPERS ------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-16); }
.section-alt { background: var(--cream-2); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--s-10); }
.eyebrow { font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-500); display: inline-block; margin-bottom: var(--s-2); }
.section-head h2 { font-size: var(--t-4xl); color: var(--ink); }
.section-head p { color: var(--ink-2); margin-top: var(--s-3); font-size: var(--t-lg); }
/* decorative gold rule under section titles (subtle Chinese menu feel) */
.rule { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-3); color: var(--gold-500); }
.rule::before, .rule::after { content: ""; width: 34px; height: 2px; background: currentColor; opacity: .6; }
.rule svg { width: 18px; height: 18px; }

/* ----------------------------- BUTTONS ------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); padding: .8rem 1.4rem; border-radius: var(--r-pill); transition: transform .12s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red-500); color: #fff; box-shadow: var(--sh-sm); }
.btn-red:hover { background: var(--red-600); box-shadow: var(--sh-md); }
.btn-wa { background: var(--green); color: #fff; box-shadow: var(--sh-sm); }
.btn-wa:hover { background: var(--green-600); box-shadow: var(--sh-md); }
.btn-gold { background: var(--gold-500); color: var(--charcoal); box-shadow: var(--sh-sm); }
.btn-gold:hover { background: var(--gold-600); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--red-500); color: var(--red-600); }
.btn-lg { padding: .95rem 1.7rem; font-size: var(--t-base); }
.btn-block { width: 100%; }

/* ------------------------------ HEADER ------------------------------ */
.header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: hsl(38 44% 96% / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
/* thin red+gold accent strip, like a restaurant awning */
.header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red-500), var(--gold-500), var(--red-500)); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--red-500); display: grid; place-items: center; color: var(--gold-050); box-shadow: inset 0 0 0 2px var(--gold-500); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: var(--t-lg); line-height: 1.05; }
.brand-name span { display: block; font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-500); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a.navlink { font-family: var(--font-head); font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); position: relative; transition: color .15s ease; }
.nav a.navlink:hover, .nav a.navlink.active { color: var(--red-600); }
.nav a.navlink::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--red-500); transition: width .2s ease; }
.nav a.navlink:hover::after, .nav a.navlink.active::after { width: 100%; }

.hamburger { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------ HERO -------------------------------- */
.hero { position: relative; color: #fff; text-align: center; overflow: hidden;
  /* EDIT: replace the url(...) below with a real food photo (fried rice, wings, ribs, noodles). */
  background:
    linear-gradient(hsl(20 30% 8% / .74), hsl(20 30% 8% / .82)),
    radial-gradient(120% 90% at 50% 0%, hsl(357 60% 30%), hsl(20 25% 12%) 70%);
  background-size: cover; background-position: center;
}
.hero-inner { padding: var(--s-20) var(--s-5) calc(var(--s-20) + var(--s-8)); max-width: 780px; margin-inline: auto; position: relative; z-index: 2; }
.hero .tag { display: inline-flex; align-items: center; gap: 8px; background: hsl(0 0% 100% / .12); border: 1px solid hsl(41 74% 60% / .5); color: var(--gold-050); font-size: var(--t-sm); font-weight: 500; padding: .4rem 1rem; border-radius: var(--r-pill); margin-bottom: var(--s-5); }
.hero .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hero h1 { font-size: clamp(2.2rem, 6vw, var(--t-5xl)); color: #fff; letter-spacing: -.01em; }
.hero h1 .accent { color: var(--gold-500); }
.hero .sub { font-size: var(--t-lg); color: hsl(40 30% 92%); margin: var(--s-5) auto 0; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-8); }
/* hanging lantern decorations (pure CSS, subtle) */
.lantern { position: absolute; top: -10px; width: 30px; z-index: 1; opacity: .9; }
.lantern::before { content: ""; display: block; width: 2px; height: 46px; background: var(--gold-500); margin: 0 auto; opacity: .6; }
.lantern::after { content: ""; display: block; width: 30px; height: 40px; border-radius: 50% / 40%; background: linear-gradient(var(--red-500), var(--red-700)); box-shadow: inset 0 0 0 3px hsl(41 74% 55% / .55), var(--sh-md); }
.lantern.l1 { left: 8%; } .lantern.l2 { right: 8%; top: -4px; } .lantern.l3 { left: 20%; top: 6px; display: none; }
@media (min-width: 720px){ .lantern.l3 { display: block; } }

/* --------------------------- QUICK INFO BAR ------------------------- */
.info { margin-top: calc(var(--s-16) * -1); position: relative; z-index: 5; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.info-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.info-item .ic { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--red-050); color: var(--red-500); display: grid; place-items: center; }
.info-item .ic svg { width: 20px; height: 20px; }
.info-item h4 { font-family: var(--font-body); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.info-item p { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
.info-item p a:hover { color: var(--red-600); }

/* ------------------------------ MENU -------------------------------- */
.cat-nav { position: sticky; top: var(--nav-h); z-index: 40; background: hsl(38 44% 96% / .95); backdrop-filter: blur(8px); border-block: 1px solid var(--line); margin-bottom: var(--s-8); }
.cat-nav-scroll { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-3) 0; scrollbar-width: thin; }
.cat-nav-scroll::-webkit-scrollbar { height: 4px; }
.cat-nav-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.cat-link { flex: none; font-family: var(--font-head); font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); padding: .45rem .9rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); transition: all .15s ease; white-space: nowrap; }
.cat-link:hover { border-color: var(--red-500); color: var(--red-600); }
.cat-link.active { background: var(--red-500); color: #fff; border-color: var(--red-500); }

.menu-search { position: relative; max-width: 460px; margin: 0 auto var(--s-10); }
.menu-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.menu-search input { width: 100%; padding: .8rem 1rem .8rem 2.7rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--t-base); }
.menu-search input:focus { border-color: var(--red-500); outline: none; box-shadow: 0 0 0 3px var(--red-050); }

.menu-cat { margin-bottom: var(--s-12); scroll-margin-top: calc(var(--nav-h) + 64px); }
.menu-cat-title { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 2px solid var(--gold-500); }
.menu-cat-title .ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--red-500); color: var(--gold-050); display: grid; place-items: center; flex: none; }
.menu-cat-title .ic svg { width: 20px; height: 20px; }
.menu-cat-title h3 { font-size: var(--t-2xl); color: var(--ink); }
.menu-cat-note { font-size: var(--t-sm); color: var(--ink-3); margin: -6px 0 var(--s-5); }

/* compact scannable item rows */
.items { display: grid; gap: 2px; }
.item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); transition: background .15s ease; }
.item:hover { background: var(--gold-050); }
.item-main { min-width: 0; }
.item-name { font-family: var(--font-head); font-weight: 600; font-size: var(--t-base); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); }
.badge-pop { background: var(--red-050); color: var(--red-600); }
.badge-best { background: var(--gold-050); color: var(--gold-600); }
.item-desc { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.item-prices { display: flex; gap: var(--s-4); text-align: right; }
.price { display: flex; flex-direction: column; align-items: center; min-width: 46px; }
.price b { font-family: var(--font-head); font-weight: 600; color: var(--red-600); font-size: var(--t-base); }
.price span { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.price.single b { color: var(--ink); }
.item-order { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; transition: transform .12s ease, background .15s ease; }
.item-order:hover { background: var(--green-600); transform: scale(1.08); }
.item-order svg { width: 18px; height: 18px; }

.no-results { display: none; text-align: center; color: var(--ink-3); padding: var(--s-12); }
.no-results.show { display: block; }

/* ------------------------------ DRINKS ------------------------------ */
.drink-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-12); }
.drink-group h4 { font-family: var(--font-head); font-size: var(--t-lg); color: var(--ink); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.drink-group h4 svg { width: 18px; height: 18px; color: var(--gold-600); }
.drink-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 7px 0; border-bottom: 1px dotted var(--line); }
.drink-row .dn { color: var(--ink-2); font-size: var(--t-sm); }
.drink-row .dn b { color: var(--ink); font-weight: 600; font-family: var(--font-head); }
.drink-row .dp { font-family: var(--font-head); font-weight: 600; color: var(--red-600); font-size: var(--t-sm); white-space: nowrap; }
.notice { margin-top: var(--s-10); background: var(--red-050); border: 1px solid hsl(357 60% 85%); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start; }
.notice svg { width: 22px; height: 22px; color: var(--red-500); flex: none; margin-top: 2px; }
.notice p { font-size: var(--t-sm); color: var(--ink-2); }
.notice b { color: var(--ink); }

/* ----------------------------- LOCATION ----------------------------- */
.loc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-10); align-items: stretch; }
.loc-info { display: flex; flex-direction: column; gap: var(--s-5); }
.loc-info .info-item p { font-size: var(--t-base); }
.map-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-md); min-height: 320px; background: var(--cream-2); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.loc-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }

/* ----------------------- ABOUT + CUSTOMER INFO ---------------------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-10); align-items: center; }
.about-copy p { font-size: var(--t-lg); color: var(--ink-2); margin-bottom: var(--s-4); }
.about-img { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-md); background: linear-gradient(135deg, var(--red-050), var(--gold-050)); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--red-500); text-align: center; padding: var(--s-6); }
.about-img svg { width: 54px; height: 54px; opacity: .5; }
.about-img small { display: block; margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-sm); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-10); }
.note-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); }
.note-card .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--gold-050); color: var(--gold-600); display: grid; place-items: center; margin-bottom: var(--s-3); }
.note-card .ic svg { width: 18px; height: 18px; }
.note-card h4 { font-size: var(--t-base); color: var(--ink); margin-bottom: 4px; }
.note-card p { font-size: var(--t-sm); color: var(--ink-2); }

/* ------------------------------ FOOTER ------------------------------ */
.footer { background: var(--charcoal); color: hsl(40 20% 78%); padding-block: var(--s-12) var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--s-10); }
.footer h5 { font-family: var(--font-head); color: #fff; font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer .brand-name { color: #fff; }
.footer p { font-size: var(--t-sm); color: hsl(40 18% 72%); margin-top: var(--s-2); }
.footer a { color: hsl(40 18% 78%); font-size: var(--t-sm); }
.footer a:hover { color: var(--gold-500); }
.footer-links { display: grid; gap: 8px; margin-top: var(--s-2); }
.footer .socials { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.footer .socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: hsl(20 10% 20%); transition: background .15s ease; }
.footer .socials a:hover { background: var(--red-500); }
.footer .socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid hsl(20 10% 24%); margin-top: var(--s-10); padding-top: var(--s-5); text-align: center; font-size: var(--t-xs); color: hsl(40 12% 58%); }
.footer-bottom a { color: var(--gold-500); }

/* ------------------------- FLOATING BUTTONS ------------------------- */
.floats { position: fixed; right: 16px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 12px; }
.float { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--sh-lg); transition: transform .15s ease; }
.float:hover { transform: scale(1.08); }
.float svg { width: 27px; height: 27px; }
.float-wa { background: var(--green); }
.float-call { background: var(--red-500); }

/* ---------------------- MOBILE BOTTOM NAV BAR ----------------------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px hsl(20 20% 20% / .10); padding-bottom: env(safe-area-inset-bottom, 0); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px; font-family: var(--font-head); font-size: .68rem; font-weight: 500; color: var(--ink-2); min-height: 60px; }
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.bn-wa { color: var(--green-600); }
.bottom-nav a.bn-call { color: var(--red-600); }
.bottom-nav a:active { background: var(--cream-2); }

/* ------------------------- MOBILE DRAWER MENU ----------------------- */
.scrim { position: fixed; inset: 0; background: hsl(20 20% 10% / .5); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim.show { opacity: 1; pointer-events: auto; }

/* ----------------------------- RESPONSIVE --------------------------- */
@media (max-width: 900px) {
  .info-card { grid-template-columns: repeat(2, 1fr); }
  .loc-grid, .about-grid { grid-template-columns: 1fr; }
  .drink-groups { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .section { padding-block: var(--s-12); }
  .section-head h2 { font-size: var(--t-3xl); }
  .nav { position: fixed; top: var(--nav-h); right: 0; width: min(78vw, 300px); height: calc(100dvh - var(--nav-h)); flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-left: 1px solid var(--line); padding: var(--s-4); transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; }
  .nav.open { transform: translateX(0); }
  .nav a.navlink { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-base); }
  .nav a.navlink::after { display: none; }
  .nav .btn { margin-top: var(--s-4); }
  .header .nav-cta-desktop { display: none; }
  .hamburger { display: flex; }
  .info { margin-top: calc(var(--s-12) * -1); }
  .info-card { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .item { grid-template-columns: 1fr auto; grid-template-areas: "main order" "prices order"; gap: var(--s-2) var(--s-3); }
  .item-main { grid-area: main; } .item-prices { grid-area: prices; justify-content: flex-start; } .item-order { grid-area: order; align-self: center; }
  .bottom-nav { display: grid; }
  .floats { display: none; }        /* replaced by bottom nav on mobile */
  body { padding-bottom: 64px; }    /* room for bottom nav */
  .hero-inner { padding-block: var(--s-16) var(--s-16); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}