/* ============================================================
   The Wok Restaurant — static site stylesheet (v3, matched to
   the real original theme: black nav, photo hero carousel,
   beige info bar, photo-tile menu row)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --black:    #141414;
  --near-black: #1c1c1c;
  --beige:    #ddd8cc;
  --beige-2:  #efece4;
  --red:      #b3271e;
  --ink:      #262220;
  --gray:     #6b6560;
  --line:     #e6e0d8;

  --display: 'Playfair Display', serif;
  --body:    'Open Sans', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); margin:0 0 .4em 0; font-weight:700; }

.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
header.site{ background:var(--black); }
.nav-inner{
  position:relative;
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand img{ height:38px; width:auto; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.6rem; cursor:pointer; }
.nav-links{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:rgba(255,255,255,0.75);
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
}
.nav-links a:hover, .nav-links a.active{ color:#fff; }

.has-dropdown{ position:relative; }
.has-dropdown .dropdown{
  display:none; position:absolute; top:100%; left:0; min-width:170px;
  background:var(--near-black); z-index:40; margin-top:0; padding:14px 0 6px;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:block; }
.dropdown li a{ display:block; padding:10px 18px; font-size:.72rem; letter-spacing:.1em; }
.dropdown li a:hover{ color:var(--red); }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--near-black); z-index:30;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:16px 24px; display:block; border-bottom:1px solid rgba(255,255,255,0.08); }
  .has-dropdown .dropdown{ display:block; position:static; margin:0; background:rgba(0,0,0,0.25); }
}

/* ---------- Hero carousel ---------- */
.hero{ position:relative; overflow:hidden; background:var(--black); padding:0 10px; }
.slide{
  position:relative;
  height:min(72vh, 620px);
  min-height:400px;
  display:none;
  background-size:cover; background-position:center;
}
.slide.active{ display:block; }
.slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35));
}
.slide-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.slide-content h1{
  color:#fff; font-size:clamp(1.8rem,4.4vw,2.9rem);
  text-shadow:0 2px 14px rgba(0,0,0,0.5);
  margin-bottom:.15em;
}
.slide-content p{
  color:#fff; font-family:var(--body); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:.85rem;
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
  margin-bottom:1.6em;
}
.ghost-btn{
  display:inline-block; border:1px solid rgba(255,255,255,0.8); color:#fff;
  padding:12px 28px; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; background:rgba(0,0,0,0.15);
}
.ghost-btn:hover{ background:#fff; color:var(--ink); }

.slider-dots{
  position:absolute; left:0; right:0; bottom:20px; z-index:3;
  display:flex; justify-content:center; gap:10px;
}
.slider-dots button{
  width:9px; height:9px; border-radius:50%; border:1px solid #fff;
  background:transparent; cursor:pointer; padding:0;
}
.slider-dots button.active{ background:#fff; }

/* ---------- Info bar ---------- */
.info-bar{ background:var(--beige); padding:30px 24px; }
.info-bar .wrap{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
}
.info-bar .col{ flex:1; min-width:220px; }
.info-bar h3{
  font-family:var(--body); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; color:var(--ink);
}
.info-bar p{ margin:0; color:var(--gray); font-size:.88rem; }
.info-bar a{ color:var(--ink); }

/* ---------- Photo-tile menu row ---------- */
.menu-tiles{ display:flex; background:var(--black); padding:0 10px; }
.menu-tile{
  position:relative; flex:1; height:230px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  cursor:pointer;
}
.menu-tile:focus-visible{ outline:3px solid var(--red); outline-offset:-3px; }
.menu-tile::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,0.42); transition:background .2s ease; }
.menu-tile:hover::after{ background:rgba(179,39,30,0.55); }
.menu-tile-content{ position:relative; z-index:2; color:#fff; }
.menu-tile-content .lead{ font-size:.85rem; font-weight:600; letter-spacing:.03em; }
.menu-tile-content .item{
  font-family:var(--display); font-weight:700; font-size:1.55rem; line-height:1.15;
}
@media (max-width:760px){
  .menu-tiles{ flex-wrap:wrap; }
  .menu-tile{ flex:1 1 50%; height:190px; }
}
@media (max-width:480px){
  .menu-tile{ flex:1 1 100%; }
}
@media (max-width:480px){
  .hero, .menu-tiles{ padding:0 6px; }
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:42px; height:42px; border-radius:2px;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.to-top.show{ opacity:1; pointer-events:auto; }

/* ---------- Sections ---------- */
section{ padding:64px 24px; }
.section-title{ text-align:center; margin-bottom:44px; }
.section-title h2{ font-size:clamp(1.7rem,3.6vw,2.3rem); color:var(--ink); }
.section-title p{ color:var(--gray); }

.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; } }
.story-grid h3{ font-size:1.2rem; color:var(--ink); }
.story-grid p{ color:var(--gray); font-size:.95rem; }
.band{ background:var(--beige-2); }

/* ---------- Footer ---------- */
footer.site{ background:var(--black); color:rgba(255,255,255,0.55); padding:26px 24px; text-align:center; font-size:.82rem; }
footer.site a{ color:rgba(255,255,255,0.75); }
footer.site a:hover{ color:var(--red); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ background:var(--black); color:#fff; padding:54px 24px 40px; text-align:center; }
.page-hero h1{ color:#fff; font-size:clamp(1.9rem,4.2vw,2.7rem); }
.page-hero p{ color:rgba(255,255,255,0.7); max-width:56ch; margin:0 auto; }
.crumb{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--red); margin-bottom:10px; display:block; }
.crumb a{ text-decoration:underline; }

/* ---------- Menu tabs (menu.html) ---------- */
.tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:40px; }
.tab-btn{
  background:var(--beige-2); border:1px solid var(--line); cursor:pointer;
  padding:11px 22px; font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink);
}
.tab-btn.active{ background:var(--black); color:#fff; border-color:var(--black); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.menu-images{ display:grid; gap:20px; max-width:780px; margin:0 auto; }
.menu-images img{ border:1px solid var(--line); }

/* ---------- Awards ---------- */
.awards-list{ list-style:none; margin:0 auto; padding:0; max-width:640px; }
.awards-list li{ display:flex; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.awards-list li:last-child{ border-bottom:none; }
.awards-list .year{ font-weight:700; color:var(--red); min-width:6ch; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.info-block{ margin-bottom:24px; }
.info-block h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--red); margin-bottom:6px; font-family:var(--body); font-weight:700; }
.map-frame{ width:100%; height:320px; border:1px solid var(--line); }

form.contact-form{ display:grid; gap:14px; }
form.contact-form label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
form.contact-form input, form.contact-form textarea{
  font-family:var(--body); font-size:.95rem; padding:12px 14px;
  border:1px solid var(--line); background:var(--beige-2); color:var(--ink);
}
form.contact-form textarea{ min-height:140px; resize:vertical; }
form.contact-form button{
  justify-self:start; background:var(--red); color:#fff; border:none; cursor:pointer;
  padding:13px 30px; font-weight:700; text-transform:uppercase; font-size:.76rem;
  letter-spacing:.12em;
}
form.contact-form button:hover{ background:#8f1f18; }