/* China Tea Club — menu pages
   Additive to site.css (RAKU design system). Do not duplicate site.css rules;
   only menu-specific patterns live here: page hero, tab-strip, menu/wine
   list variants, hub cards, and stub styling. */

/* ---------- header nav current-page indication ---------- */
.links a.current{
  color:var(--primary-90);
  border-bottom-color:var(--primary-90);
}

/* ---------- page hero (no photography, compact) ---------- */
.menu-page-hero{
  padding-top:calc(var(--sp-xl) * 0.55);
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid var(--border);
}
.menu-page-hero h1{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.15;
  margin:var(--sp-sm) 0 0;
  color:var(--primary-90);
}
.menu-page-lede{
  font-family:var(--font-serif);
  font-size:16px;
  line-height:1.5;
  color:var(--primary-90);
  opacity:0.85;
  max-width:620px;
  margin:var(--sp-md) 0 0;
}

/* ---------- tab strip ---------- */
.menu-tabs{
  position:sticky;
  /* --header-h is measured at runtime by menu-tabs.js; the fallback covers no-JS */
  top:var(--header-h, 77px);
  z-index:40;
  background:rgba(18,18,18,0.92);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--border);
}
.menu-tabs-inner{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  gap:var(--sp-lg);
  padding:var(--sp-sm) var(--sp-lg);
}
.menu-tabs a{
  font-family:var(--font-label);
  font-size:12px;
  line-height:16px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--secondary);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .25s ease, border-color .25s ease;
}
.menu-tabs a:hover{ color:var(--primary-90); }
.menu-tabs a.active{
  color:var(--primary-90);
  border-bottom-color:var(--primary-90);
}

/* ---------- menu page sections ---------- */
.menu-page-section{
  padding-top:calc(var(--sp-xl) * 0.6);
  padding-bottom:calc(var(--sp-xl) * 0.6);
}
.menu-page-section + .menu-page-section{
  border-top:1px solid var(--border);
}
.menu-page-section .section-head{ margin-bottom:var(--sp-lg); }
.menu-subnote{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:15px;
  color:var(--secondary);
  margin-top:var(--sp-md);
}

/* refine the shared .menu-list rhythm slightly for full menu pages
   (tighter than the homepage teaser so long sections stay scannable) */
.menu-page-section .menu-list{ gap:0 var(--sp-xl); }
.menu-page-section .menu-item{ padding:var(--sp-md) 0; }

/* ---------- origin badges + legend (a la carte) ---------- */
.origin-badge{
  font-family:var(--font-label);
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--secondary);
  margin-left:6px;
  font-style:italic;
}
.menu-legend{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-top:var(--sp-md);
}
.menu-allergy-note{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:15px;
  color:var(--secondary);
  margin:var(--sp-md) 0 0;
  max-width:640px;
}

/* ---------- fine print (reused on hub + a la carte) ---------- */
.menu-page-fine{
  margin-top:var(--sp-lg);
  padding-top:var(--sp-lg);
  border-top:1px solid var(--border);
  font-family:var(--font-label);
  font-size:12px;
  line-height:16px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--secondary);
  text-align:center;
}

/* ---------- hub cards ---------- */
.menu-hub-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-md);
}
.menu-hub-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-sm);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:var(--sp-lg);
  transition:border-color .25s ease, background-color .25s ease;
}
.menu-hub-card:hover{
  border-color:var(--primary-90);
  background:rgba(245,244,239,0.03);
}
.menu-hub-card h3{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  color:var(--primary-90);
  margin:0;
}
.menu-hub-card p{
  font-family:var(--font-serif);
  font-size:15px;
  line-height:22px;
  color:var(--secondary);
  margin:0;
  flex:1;
}
.menu-hub-card .cta{
  align-self:flex-start;
  margin-top:var(--sp-sm);
  font-family:var(--font-label);
  font-size:12px;
  line-height:16px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--primary-90);
  border-bottom:1px solid var(--tertiary);
  padding-bottom:3px;
}
.menu-hub-card:hover .cta{ border-bottom-color:var(--primary-90); }

/* ---------- wine list ---------- */
.wine-category{
  margin-bottom:calc(var(--sp-xl) * 0.5);
}
.wine-category-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  color:var(--primary-90);
  margin:0 0 var(--sp-md);
}
.wine-group{ margin-bottom:var(--sp-lg); }
.wine-group:last-child{ margin-bottom:0; }
.wine-varietal{
  font-family:var(--font-label);
  font-size:12px;
  line-height:16px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-bottom:var(--sp-sm);
}
.wine-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 var(--sp-xl);
}
.wine-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--sp-md);
  padding:var(--sp-sm) 0;
  border-bottom:1px solid var(--border);
}
.wine-item .wine-name{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:16px;
  line-height:20px;
  color:var(--primary-90);
}
.wine-item .wine-badge{
  font-family:var(--font-label);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--secondary);
  margin-left:6px;
}
.wine-item .wine-region{
  display:block;
  font-family:var(--font-label);
  font-size:12px;
  line-height:16px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-top:4px;
}
.wine-item .wine-note{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:12px;
  color:var(--secondary);
  margin-top:2px;
}
.wine-item .price{
  font-family:var(--font-label);
  font-size:15px;
  line-height:20px;
  letter-spacing:0.06em;
  color:var(--primary-90);
  opacity:0.8;
  white-space:nowrap;
}
.wine-legend{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-top:var(--sp-lg);
}

/* by-the-glass uses a single column list, it reads better narrow */
.wine-list.single{ grid-template-columns:1fr; max-width:640px; }

/* ---------- banquet packages ---------- */
.banquet-intro{
  max-width:720px;
  margin:0 0 var(--sp-lg);
}
.banquet-intro p{
  font-family:var(--font-serif);
  font-size:16px;
  line-height:1.5;
  color:var(--primary-90);
  opacity:0.85;
  margin:0 0 var(--sp-sm);
}
.banquet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--sp-lg);
  align-items:stretch;
}
.banquet-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:var(--sp-lg);
}
.banquet-card h3{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  color:var(--primary-90);
  margin:0 0 4px;
}
.banquet-min{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-bottom:var(--sp-md);
}
.banquet-courses{
  list-style:none;
  margin:0 0 var(--sp-md);
  padding:0;
  flex:1;
}
.banquet-courses li{
  font-family:var(--font-serif);
  font-size:15px;
  line-height:1.5;
  color:var(--primary-90);
  opacity:0.9;
  padding:6px 0;
  border-bottom:1px dashed var(--border);
}
.banquet-courses li:last-child{ border-bottom:none; }
.banquet-courses li.course-heading{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--secondary);
  opacity:1;
  border-bottom:none;
  padding-top:var(--sp-sm);
}
.banquet-price{
  font-family:var(--font-label);
  font-size:18px;
  letter-spacing:0.04em;
  color:var(--primary-90);
  margin-top:auto;
  padding-top:var(--sp-md);
  border-top:1px solid var(--border);
}
.banquet-note{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:15px;
  color:var(--secondary);
  margin-top:var(--sp-lg);
}
.banquet-call{
  margin-top:var(--sp-lg);
  text-align:center;
}

/* ---------- banquet stub pages (kept for future rework use) ---------- */
.menu-stub{
  border:1px dashed var(--border);
  border-radius:var(--r-sm);
  padding:calc(var(--sp-xl) * 0.6) var(--sp-lg);
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
.menu-stub h3{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  color:var(--primary-90);
  margin:0 0 var(--sp-md);
}
.menu-stub p{
  font-family:var(--font-serif);
  font-size:16px;
  line-height:1.5;
  color:var(--primary-90);
  opacity:0.85;
  margin:0 0 var(--sp-md);
}
.menu-stub p:last-of-type{ margin-bottom:var(--sp-lg); }
.course-list--empty{
  /* placeholder container — real course markup drops in here once the
     banquet menu is finalised; kept empty on purpose, see HTML comment */
  display:none;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .menu-hub-grid{ grid-template-columns:repeat(2, 1fr); }
  .menu-list, .wine-list{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .menu-tabs{ top:57px; }
  .menu-tabs-inner{ padding:var(--sp-sm) var(--sp-md); gap:var(--sp-md); }
  .menu-hub-grid{ grid-template-columns:1fr; }
  .menu-page-hero{ padding-top:var(--sp-lg); }
}


/* Chinese dish names — secondary line beside the English name */
.zh{
  display:block;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:var(--secondary);
  margin-top:2px;
}
.menu-tabs-inner::-webkit-scrollbar{ display:none; }
/* anchor targets clear both sticky bars */
.menu-page-section{ scroll-margin-top:calc(var(--header-h, 77px) + 56px); }

@media (max-width:640px){
  .menu-tabs-inner{ gap:var(--sp-md); padding:var(--sp-sm) var(--sp-md); }
}