/* ==========================================================================
   BAMBOO & FIRE PARTNER PAGE — STYLESHEET v1.0.0
   The only stylesheet partners/bamboo-fire/index.php loads (plus the two Google Fonts links).
   Self-contained: nothing is shared with the GPLink or Next-Fi pages.

   Identity (spec section 4): embers on dark wood. Black with a gold frame, warm photographs,
   one flame-orange button. Cormorant Garamond for headings and dish names, Nunito Sans for text,
   Great Vibes only for the wordmark and the hero name (its font file holds just the characters
   of "Bamboo & Fire"; any other hero name uses the .is-alt rule below).
   The one moving part is the menu search; the only motion is smooth anchor scrolling.
   Served with cache-control max-age=86400: after editing this file, bump the ?v= on its <link>
   in index.php (bamboo-fire.1.0.0.css?v=2) or visitors keep the old copy.
   LF line endings throughout.
   ========================================================================== */

/* 1. TOKENS =============================================================== */
:root {
  --char: #12100D;          /* page */
  --char-raised: #1C1915;   /* cards, header, trays */
  --char-line: #332E27;     /* rules and borders */
  --cream: #F4ECDD;         /* text */
  --muted: #BDB29F;         /* secondary text (9:1 on --char) */
  --gold: #D4AF5A;          /* prices, small caps, rules, note pills */
  --ember: #E0582E;         /* primary button fill; its text is --char (5:1) */
  --bamboo: #8DAA63;        /* small touches only */

  --font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script: 'Great Vibes', 'Cormorant Garamond', Georgia, serif;

  --radius: 10px;
  --wrap: 1180px;
  --gutter: 20px;
  --header-h: 64px;
}

/* 2. BASE ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--char);
}
img { display: block; max-width: 100%; }
svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin-bottom: 12px;
  color: var(--cream);
}
p { margin: 0 0 16px; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section-intro { max-width: 46em; margin: 0 0 12px; font-size: 18px; color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--gold); color: var(--char); font-weight: 700; }
.skip-link:focus { top: 8px; }
.sep { color: var(--gold); }

/* 3. HEADER ============================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--char-raised);
  border-bottom: 1px solid var(--char-line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--cream); text-decoration: none; }
.brand-logo { flex: none; width: 48px; height: 48px; border-radius: 50%; }   /* the owner's badge, logo-96.png */
.brand-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brand-name { font-family: var(--font-script); font-size: 30px; line-height: 1.15; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0.2em 0 0; }   /* the script's strokes overhang its box */
.brand-name.is-alt { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 28px; }
.brand-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 379px) { .brand-logo { width: 40px; height: 40px; } }   /* leaves room for a longer name edited in the console */

.nav-toggle { display: none; flex: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  position: absolute; left: 10px; width: 24px; height: 2px; border-radius: 2px; background: var(--cream);
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ''; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--cream); text-decoration: none;
}
.site-nav a:hover { color: var(--gold); }

/* Phone width. The inline script in <head> adds the "js" class before first paint, so each rule below
   applies to exactly one state: with script the hamburger opens a panel; without script there is no button
   and the links sit inline, wrapped, under the brand. */
@media (max-width: 859px) {
  html.js .nav-toggle { display: block; }
  html.js .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--gutter) 12px;
    background: var(--char-raised); border-bottom: 1px solid var(--char-line);
  }
  html.js .site-nav.is-open { display: flex; }
  html.js .site-nav a { min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--char-line); border-radius: 0; font-size: 18px; }
  html:not(.js) .header-row { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 4px; }
  html:not(.js) .site-nav { flex-basis: 100%; flex-wrap: wrap; gap: 0 4px; }
  html:not(.js) .site-nav a { min-height: 44px; padding: 0 10px; }
  html:not(.js) .menu-bar { position: static; }   /* the wrapped no-JS header is taller than --header-h */
}

/* 4. HERO ================================================================ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(86vh, 760px);
  overflow: hidden;
  background: var(--char);
}
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 16, 13, 0.25) 0%, rgba(18, 16, 13, 0.72) 55%, rgba(18, 16, 13, 0.97) 100%);
}
.hero-inner { padding-top: calc(var(--header-h) + 56px); padding-bottom: 56px; }
.hero-logo {
  display: block; width: clamp(112px, 30vw, 160px); height: auto; margin: 0 0 18px; border-radius: 50%;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
}
.hero-name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(46px, 14vw, 120px);
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-name.is-alt { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: clamp(44px, 9vw, 96px); line-height: 1.02; }
.hero-tag { margin: 0 0 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.hero-lead { max-width: 34em; margin: 0 0 28px; font-size: 19px; color: var(--cream); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero-info { margin: 0; font-size: 15px; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 22px; border-radius: var(--radius); border: 1.5px solid transparent;
  font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn-ember { background: var(--ember); color: var(--char); }
.btn-ember:hover { background: #EE6A3F; color: var(--char); }
.btn-ghost { border-color: var(--cream); color: var(--cream); }
.btn-ghost:hover { background: rgba(244, 236, 221, 0.08); color: var(--cream); }
.btn-outline { border-color: var(--gold); color: var(--gold); }
.btn-outline:hover { background: rgba(212, 175, 90, 0.1); color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 0.2s ease, color 0.2s ease; }
}

/* 5. FEATURED ============================================================ */
.featured { padding: 64px 0 24px; }
.featured .wrap { margin-bottom: 24px; }
.feat-row {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 8px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 20px;
  /* The snap stops also honour the padding, so the first card lines up with the container edge. */
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.feat-list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.feat {
  flex: 0 0 min(78vw, 300px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--char-raised);
  border: 1px solid var(--char-line);
  border-radius: var(--radius);
}
.feat-media { background: #0C0B09; }
.feat-media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; margin: 0 auto; }
.feat-body { padding: 14px 16px 18px; }
.feat-name { font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--cream); }
.feat-sub { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.feat-price { margin: 8px 0 0; font-size: 18px; font-weight: 700; color: var(--gold); }
/* The dish description, clamped to four lines; the full text stays in the markup. */
.feat-desc {
  margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* 6. MENU BAR (sticky: chips and the search box) ======================== */
.menu { padding-top: 64px; }
.menu-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: 28px;
  background: var(--char);
  border-top: 1px solid var(--char-line);
  border-bottom: 1px solid var(--char-line);
}
.menu-bar .wrap { display: grid; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 4px 4px 6px; margin: -4px -4px -6px; }
.chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--char-line); border-radius: 999px;
  background: var(--char-raised); color: var(--cream);
  font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.chip:hover { border-color: var(--bamboo); color: var(--cream); }
.menu-find { display: grid; gap: 2px; }
.menu-find input[type="search"] {
  width: 100%; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--char-line); border-radius: var(--radius);
  background: var(--char-raised); color: var(--cream);
  font: inherit; font-size: 16px;
}
.menu-find input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.menu-find input[type="search"]:focus { border-color: var(--gold); outline: 3px solid var(--gold); outline-offset: 2px; }
.menu-count { margin: 0; font-size: 14px; color: var(--muted); }

/* 7. MENU CATEGORIES ===================================================== */
.menu-body { padding-bottom: 8px; }
.menu-cat { scroll-margin-top: 210px; padding-top: 36px; }
@media (min-width: 860px) { .menu-cat { scroll-margin-top: 150px; } }
.cat-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--char-line);
}
.menu-cat h3 { font-family: var(--font-head); font-size: clamp(30px, 4vw, 38px); font-weight: 700; line-height: 1.1; color: var(--cream); }
.cat-note {
  margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--gold); color: var(--char);
  font-size: 13px; font-weight: 700; line-height: 1.4;
}

/* Card grid (a category with a picture on any dish) */
.dish-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--char-raised);
  border: 1px solid var(--char-line); border-radius: var(--radius);
}
.card-media { position: relative; aspect-ratio: 4 / 3; background: #0C0B09; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.card .dish-price { margin-top: auto; padding-top: 4px; }
/* Phones (under 600px): each photo dish is a compact row, a square thumbnail on the left (same <img>). */
@media (max-width: 599px) {
  .dish-grid { gap: 12px; }
  .card { flex-direction: row; }
  .card-media { flex: 0 0 96px; width: 96px; aspect-ratio: 1 / 1; align-self: flex-start; }
  .card-body { min-width: 0; padding: 12px 14px 14px; gap: 4px; }
}

/* Compact list (a category with no pictures): name left, price right */
.dish-list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) {
  .dish-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
.dish { padding: 14px 0; border-bottom: 1px solid var(--char-line); }
.dish-head { display: flex; align-items: center; gap: 10px; }
.dish-head .dish-name { min-width: 0; overflow-wrap: anywhere; }
.dish-leader { display: none; flex: 1 1 24px; height: 0; min-width: 16px; border-bottom: 2px dotted #5A5145; }
@media (min-width: 640px) { .dish-leader { display: block; } }
.dish-price { font-size: 17px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.dish-head .dish-price { flex: 0 0 auto; margin-left: auto; }
.dish-name {
  font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--cream);
}
.dish-desc { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card .dish-desc { margin: 0; }
.menu-note { margin: 32px 0 0; font-size: 14px; color: var(--muted); }

/* 8. TRAYS =============================================================== */
.trays { padding: 64px 0 24px; }
.trays .wrap > h2 { margin-bottom: 12px; }
.tray-wrap {
  margin-top: 28px;
  overflow: hidden;
  background: var(--char-raised);
  border: 1px solid var(--char-line); border-radius: var(--radius);
}
/* Every tray table uses the same fixed columns (widths set on the <colgroup> in index.php), so the two size
   columns sit at the same x in every group. 46 + 27 + 27 = 100%: at 320px a size column is ~75px wide. */
.tray-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tray-table .col-dish { width: 46%; }
.tray-table .col-size { width: 27%; }
.tray-table caption {
  caption-side: top; text-align: left;
  padding: 16px 16px 12px;
  font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--gold);
}
.tray-table th, .tray-table td {
  padding: 12px 8px; border-top: 1px solid var(--char-line);
  text-align: left; vertical-align: top;
}
.tray-table thead th {
  padding-top: 10px; padding-bottom: 10px;
  border-top: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.tray-table .num { text-align: right; }
.serves { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tray-dish { font-size: 16px; font-weight: 600; color: var(--cream); overflow-wrap: anywhere; }
.tray-price { display: block; font-size: 17px; font-weight: 700; color: var(--gold); }
.tray-note { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tray-none { color: var(--muted); }

/* 9. VISIT =============================================================== */
.visit { padding: 64px 0 80px; }
.tiles {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin: 28px 0 0; padding: 0; list-style: none;
}
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.tile {
  padding: 22px 20px;
  background: var(--char-raised);
  border: 1px solid var(--char-line); border-radius: var(--radius);
}
.tile h3 { margin-bottom: 12px; font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--cream); }
.tile p { margin-bottom: 10px; }
.tile-big { font-size: 18px; font-weight: 600; color: var(--cream); }
.plus { font-size: 15px; color: var(--muted); }
.tile .btn { margin-top: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pills li {
  padding: 6px 14px;
  border: 1px solid var(--gold); border-radius: 999px;
  font-size: 15px; color: var(--cream);
}
.contact-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.contact-links a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 18px; font-weight: 700; color: var(--cream);
}
.contact-links a:hover { color: var(--gold); }

/* 10. FOOTER ============================================================= */
.site-footer { padding: 28px 0 36px; border-top: 1px solid var(--char-line); background: var(--char-raised); color: var(--muted); font-size: 15px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.footer-row p { margin: 0; }
.footer-partner { color: var(--gold); }