/* ============================================================
   SAPPORO — component styles used by the Supabase renderers
   (menu list, gallery, order buttons) + the ink-reveal helpers.
   Page chrome (nav, hero, layout) is handled by Tailwind.
   ============================================================ */
:root {
  --accent:#805533;   /* secondary brown */
  --ink:#1a1c1a; --muted:#74777f; --soft:#44474e;
  --paper:#faf9f6; --paper2:#efeeeb; --line:#c4c6cf;
}

/* canvas-texture base (shows on plain pages; the reveal veil uses the
   same texture so every "white" surface matches). Falls back to a soft
   stone-white if the image is unavailable. */
/* The texture is a fixed full-viewport layer (via ::before) rather than
   background-attachment:fixed — iOS over-zooms fixed backgrounds, and cover
   scales inconsistently across pages of different heights. This covers every
   page identically on every device. Falls back to a soft stone-white. */
body { background-color:#faf9f6; overflow-x:hidden; }
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#faf9f6 url('https://res.cloudinary.com/djutbfvfz/image/upload/v1782410718/Canvas_Background_2_w6jc9o.png') center center / cover no-repeat;
}

/* revealable background (paired with ink-reveal.js white veil) — Home only */
.reveal-bg { position:relative; background-image:url('https://res.cloudinary.com/djutbfvfz/image/upload/v1782496634/Japanese_Themed_Restaurant_Street_bimlh1.jpg'); background-position:center; background-size:cover; background-attachment:fixed; }
.rc { position:relative; z-index:46; }
.tsh { text-shadow:0 1px 14px rgba(250,249,246,0.92); }
@media (prefers-reduced-motion: reduce) { .reveal-bg { background-attachment:scroll; } }
/* Mobile: fixed backgrounds get over-zoomed (iOS sizes them to the whole
   screen). Use scroll so the image scales normally to the hero. */
@media (max-width:768px) { .reveal-bg { background-attachment:scroll; } }

/* dotted-leader menu */
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; }
.mcol h3 { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:26px; margin:0 0 18px; color:var(--ink); letter-spacing:0.02em; }
.mlist { display:flex; flex-direction:column; gap:14px; }
.leader { display:flex; align-items:baseline; gap:10px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
.leader .ln { font-size:15px; color:var(--ink); }
/* English name reads first; the Japanese (lang="ja") follows as a subdued
   secondary so screen readers announce English before Japanese. */
.leader .ln .jp { color:var(--muted); }
.leader .sub { display:block; font-size:12px; color:var(--muted); line-height:1.5; margin-top:2px; }
.leader .dt { flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); }
.leader .pr { font-size:15px; color:var(--soft); white-space:normal; max-width:48%; flex-shrink:0; text-align:right; overflow-wrap:anywhere; }
/* pastel-coded item tags (work in both .leader rows and .nigiri names) */
.badge { display:inline-block; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; border-radius:999px; padding:2px 7px; margin-left:6px; vertical-align:middle; line-height:1.5; }
.badge.raw   { background:#f7d3d3; color:#8a2f2f; }  /* rose quartz */
.badge.spicy { background:#f9cdbb; color:#9c3d1c; }  /* peach nectar */
.badge.new   { background:#d2edb4; color:#45691f; }  /* paradise green */
.badge.baked { background:#cfe6f2; color:#285a78; }  /* baby blue — cool, distinct from spicy */
.badge.vegan { background:#c2e9d6; color:#1f6b46; }  /* seafoam green */
@media (max-width:768px) { .menu-grid { grid-template-columns:1fr; } }
/* single active category (tabbed menu) */
.menu-active { display:grid; grid-template-columns:1fr 1fr; gap:14px 64px; max-width:1000px; margin:0 auto; }
@media (max-width:768px) { .menu-active { grid-template-columns:1fr; } }
/* one-column variant — used by the bento mains so Dinner stacks under Lunch.
   Same max-width as .menu-active so it shares the centered left edge. */
.menu-active.one-col { grid-template-columns:1fr; }
/* Sushi & Sashimi (Nigiri) — Name / Sushi $ / Sashimi $ (3pc) / $ (6pc) */
.nigiri { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
.nig-name { font-size:15px; font-weight:400; color:var(--ink); margin-bottom:5px; }
.nig-line { display:flex; align-items:baseline; gap:10px; margin-left:14px; }
.nig-line + .nig-line { margin-top:3px; }
.nig-lbl { font-size:13px; color:var(--soft); flex-shrink:0; min-width:62px; }
.nig-dt { flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); }
.nig-pr { font-size:14px; color:var(--ink); white-space:nowrap; flex-shrink:0; }
.nig-desc { font-size:12px; color:var(--muted); line-height:1.5; margin-top:5px; }

/* horizontal-scroll category tabs */
.no-sb { -ms-overflow-style:none; scrollbar-width:none; }
.no-sb::-webkit-scrollbar { display:none; }

/* build-your-bento option groups (shown below the Bento mains) */
.bento-opts { margin:40px auto 0; max-width:1000px; padding-top:28px; border-top:1px solid var(--line); }
.bento-opts-eyebrow { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); }
.bento-opts-sub { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:13px; color:var(--soft); margin-top:6px; max-width:60ch; line-height:1.6; }
.bento-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px 48px; margin-top:22px; }
.bento-group h2 { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.bento-group ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.bento-group li { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
.bento-group .bn { font-size:14px; color:var(--ink); }
.bento-group .up { font-size:12px; color:var(--accent); white-space:nowrap; font-weight:500; }

/* gallery — square (cubical) tiles, up to 4 columns × 2 rows */
.gal { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1000px; margin:0 auto; }
@media (max-width:900px) { .gal { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px) { .gal { grid-template-columns:repeat(2,1fr); } }
.gcell { position:relative; overflow:hidden; border-radius:8px; background:var(--paper2); aspect-ratio:1/1; }
.gcell img { width:100%; height:100%; object-fit:cover; display:block; }
.gcell .glabel { position:absolute; left:0; right:0; bottom:0; padding:14px 16px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:#fff; background:linear-gradient(to top,rgba(20,16,10,0.66),transparent); }
.gcell.ph { display:flex; align-items:flex-end; }
.gcell.ph .glabel { color:var(--soft); background:none; }
.gcell.ph .kanji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:64px; color:var(--accent); opacity:0.12; }

/* monthly promotion cards */
.promo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
.promo-grid:has(> .promo-card:only-child) { max-width:680px; grid-template-columns:1fr; }
.promo-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 18px 40px -28px rgba(26,28,26,0.45); }
.promo-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.promo-body { padding:24px 26px 28px; }
.promo-title { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:22px; line-height:1.25; color:var(--ink); margin:0; }
.promo-dates { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:10px 0 0; }
.promo-text { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:15px; line-height:1.6; color:var(--soft); margin:14px 0 0; white-space:pre-line; }

/* order buttons */
.order-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; max-width:760px; margin:36px auto 0; }
.order-btn { text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:26px 20px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); transition:all .2s; }
.order-btn:hover { border-color:var(--accent); box-shadow:0 16px 34px -22px rgba(128,85,51,0.7); transform:translateY(-2px); }
.order-btn .lbl { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:19px; }
.order-btn .hint { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }

/* accessibility */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:300; background:var(--accent); color:#fff; padding:10px 16px; border-radius:6px; font:600 12px/1 Inter,sans-serif; text-decoration:none; transform:translateY(-150%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }

/* cookie consent banner */
.cookie-consent { position:fixed; left:0; right:0; bottom:0; z-index:250; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -12px 34px -24px rgba(26,28,26,0.55); }
.cookie-consent__inner { max-width:1100px; margin:0 auto; padding:16px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.cookie-consent__text { flex:1 1 320px; min-width:0; margin:0; font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:13px; line-height:1.6; color:var(--ink); }
.cookie-consent__link { color:var(--accent); text-decoration:underline; }
.cookie-consent__link:hover { color:var(--ink); }
.cookie-consent__actions { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }
.cookie-consent__btn { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:13px; font-weight:600; padding:10px 18px; border-radius:8px; cursor:pointer; border:1px solid transparent; transition:background .2s,color .2s,border-color .2s; }
.cookie-consent__btn--solid { background:var(--accent); color:#fff; border-color:var(--accent); }
.cookie-consent__btn--solid:hover { background:#6a4629; border-color:#6a4629; }
.cookie-consent__btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.cookie-consent__btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:640px) {
  /* respect the iOS home-indicator safe area, but no large gap */
  .cookie-consent__inner { padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cookie-consent__actions { width:100%; }
  .cookie-consent__btn { flex:1 1 auto; }
}