/* ============================================================
   SUSHICAT — Main Stylesheet
   ============================================================
   HOW TO USE THIS FILE
   ─────────────────────────────────────────────────────────────
   All colour and font decisions live in the :root block at the
   top (the "design tokens"). Change a value there and it
   updates every element that uses it automatically.

   If you want to tweak a specific element rather than a global
   token, find the named section below and edit that rule.

   File is structured top-to-bottom in the same order elements
   appear on the page:
     1. Design Tokens  (colours, fonts)
     2. Reset & Base
     3. Navigation
     4. Hero
     5. About Section
     6. Menu Navigation Bar
     7. Menu Sections (shared)
     8. Nigiri Cards
     9. Maki / Roll Cards
    10. Bento Box Section
    11. Sides & Dessert Cards
    12. Drinks Section
    13. Booking CTA
    14. Location Section
    15. Footer
    16. Responsive Breakpoints
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ─────────────────────────────────────────────────────────────
   Change any value here to update the whole site at once.
   ============================================================ */

:root {
    /* ── Primary accent colour ─────────────────────────────
     Used for: price badges, dividers, active nav links,
     button backgrounds, icon backgrounds, hover highlights.
     Default: orange from the SushiCat menu. */
    --orange: #E8701A;
    /* Darker shade of the accent — used for button hover states */
    --orange-dark: #C45A10;
    /* Lighter shade — used for the hero eyebrow text */
    --orange-light: #F5924A;
    /* ── Background colours ────────────────────────────────
     --cream      : main page background (light sections)
     --cream-dark : slightly darker cream for alternating sections */
    --cream: #F5F0E6;
    --cream-dark: #EDE6D8;
    /* ── Dark backgrounds ──────────────────────────────────
     --ink      : darkest background (About, Bento, Footer)
     --charcoal : mid-dark background (Drinks section, about stats) */
    --ink: #292929;
    --charcoal: #292929;
    /* ── Text colours ──────────────────────────────────────
     --mid  : secondary / muted text on light backgrounds
     --white: text on dark backgrounds */
    --mid: #6B5B45;
    --white: #FFFFFF;
    /* ── Typefaces ─────────────────────────────────────────
     --ff-display : headings and large titles
     --ff-jp      : Japanese text labels and eyebrow text
     --ff-body    : navigation links, body copy, tags
     To change fonts: swap the name before the comma.
     The fonts must be loaded in the <head> of the HTML. */
    --ff-display: 'Kaushan Script', cursive;
    --ff-jp: 'Noto Serif JP', serif;
    --ff-body: 'Inter', system-ui, sans-serif;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Enables smooth anchor-link scrolling */
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-body);
  /* Page background colour on light sections */
  background: var(--cream);
  /* Default body text colour */
  color: var(--ink);
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   3. NAVIGATION
   ============================================================ */

/* Outer nav bar — always fixed at the top of the viewport */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  /* Height of the navigation bar */
  height: 72px;
  transition: background 0.4s, box-shadow 0.4s;

  /* Nav starts transparent over the hero image;
     the .scrolled class (added by JS) makes it solid */
}

/* Nav background once the user scrolls down.
   Change the rgba() colour to match your --ink token or a brand colour. */
nav.scrolled {
  background: #EDE6D8;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232,112,26,0.2); /* Thin accent underline */

}


/* Logo link wrapper — contains the logo image and/or text */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;         /* Space between logo image and text */
  text-decoration: none;
}

/* Logo image in the nav (replace logo-placeholder.png with your file) */
.nav-logo-img {
  height: 44px;      /* Change to resize the nav logo image */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Text next to the logo image — hide this if you prefer image-only */
.nav-logo-text {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 1.5rem;
  /* Logo text colour (always white so it shows over both
     transparent and solid nav backgrounds) */
  color: var(--white);
  letter-spacing: 0.05em;
}


/* The "CAT" part of SUSHICAT in the nav — accent colour */
.nav-logo-text span {
  color: var(--orange);
}

/* Nav link list */
.nav-links {
  display: flex;
  gap: 36px;         /* Space between nav links */
  list-style: none;
}

/* Individual nav links */
.nav-links a {
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Default nav link colour (slightly transparent white) */
  color: var(--white);
  transition: color 0.2s;
}
nav.scrolled .nav-links a{
    color: #1A1208;
}
nav.scrolled .nav-links :hover {
    color: var(--orange);
}
/* Nav link hover colour */
.nav-links a:hover {
  color: var(--orange);
}

/* "Book a Table" button in the nav */
.nav-book {
  background: var(--orange);           /* Button fill colour */
  color: var(--white) !important;      /* Button text colour */
  padding: 10px 22px !important;
  border-radius: 2px;                  /* Roundness — increase for pill shape */
  letter-spacing: 0.1em !important;
  transition: background 0.2s !important;
}

/* "Book a Table" button hover */
.nav-book:hover {
  background: var(--orange-dark) !important;
  color: var(--white) !important;
}


/* ============================================================
   4. HERO SECTION
   ============================================================ */

/* Full-viewport hero container */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;        /* Full screen height */
  min-height: 640px;    /* Minimum so it doesn't collapse on short screens */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background image + dark overlay.
   ─── TO CHANGE THE HERO IMAGE ───────────────────────────────
   Replace the URL inside url('...') with your own image URL.
   ─── TO CHANGE THE OVERLAY DARKNESS ────────────────────────
   Edit the rgba() values — the 3rd number (0.72, 0.45) is
   opacity (0 = fully transparent, 1 = fully dark). */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(26,12,4,0.72) 0%,
      rgba(26,12,4,0.45) 50%,
      rgba(232,112,26,0.18) 100%
    ),
    url('sushicatFront.jpg')
    center/cover no-repeat;
}

/* Subtle Japanese wave pattern layered over the hero image.
   Reduce opacity to make it less visible, or set to 0 to remove. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='30' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 Q15 0 30 15 Q45 30 60 15' stroke='rgba(232,112,26,0.07)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size: 60px 30px;
  opacity: 0.6;   /* Wave pattern visibility — set to 0 to hide */
}

/* Wrapper for all hero text and buttons */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

/* ── Hero logo image (replaces the animated cat SVG) ────────
   This is the image placeholder in the centre of the hero.
   Replace logo-placeholder.png with your actual logo file.
   Adjust width/height to resize it. */
.hero-logo-img {
  margin: 0 auto 28px;
  width: 180px;         /* Logo width in the hero — change to resize */
  height: auto;
  object-fit: contain;
  display: block;
  /* Slight drop shadow to lift the logo off the background */
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}

/* Small Japanese text above the main title */
.hero-eyebrow {
  font-family: var(--ff-jp);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.4em;
  /* Eyebrow text colour — uses the light accent */
  color: var(--orange-light);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Main hero heading — "SUSHICAT" */
.hero-title {
  font-family: var(--ff-display);
  /* clamp(min, preferred, max) — scales between 4rem and 8rem */
  font-size: clamp(4rem, 5vw, 4rem);
  font-weight: 900;
  /* Hero title colour */
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 0.95;
  margin-bottom: 20px;
}

/* The accent-coloured word inside the hero title */
.hero-title span {
  color: var(--orange);
}

/* Tagline below the hero title */
.hero-subtitle {
  font-family: var(--ff-jp);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.5em;
  /* Subtitle colour — semi-transparent white */
  color: rgba(255,255,255,0.7);
  margin-bottom: 48px;
}

/* Flex wrapper for the two hero buttons */
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Filled primary button (used for "Reserve a Table") */
.btn-primary {
  display: inline-block;
  /* Button fill colour */
  background: var(--orange);
  /* Button text colour */
  color: var(--white);
  text-decoration: none;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 2px;   /* Increase for rounded corners */
  transition: background 0.2s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
}

/* Outlined ghost button (used for "View Menu") */
.btn-outline {
  display: inline-block;
  /* Border colour */
  border: 1.5px solid rgba(255,255,255,0.5);
  /* Button text colour */
  color: var(--white);
  text-decoration: none;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.btn-outline:hover {
  border-color: var(--orange);
  /* Light accent fill on hover */
  background: rgba(232,112,26,0.12);
  transform: translateY(-2px);
}

/* Animated "scroll" indicator at the bottom of the hero */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* "scroll" label colour */
  color: rgba(255,255,255,0.5);
  font-family: var(--ff-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Animated line above the "scroll" label */
.scroll-line {
  width: 1px;
  height: 40px;
  /* Scroll line colour — gradient from transparent to accent */
  background: linear-gradient(to bottom, transparent, rgba(232,112,26,0.7));
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}


/* ============================================================
   5. SHARED SECTION UTILITIES
   ============================================================ */

/* Default vertical padding for all sections */
section {
  padding: 96px 0;
}

/* Max-width content wrapper used in every section */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Small label above section headings */
.section-eyebrow {
  font-family: var(--ff-jp);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  /* Eyebrow colour on light backgrounds */
  color: var(--orange);
  margin-bottom: 12px;
}

/* Section heading */
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  /* Section title colour on light backgrounds */
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 16px;
}

/* Modifier — white versions for dark-background sections */
.section-title-light  { color: var(--white); }
.section-eyebrow-light { color: var(--orange-light); }

/* Body text beneath section headings */
.section-desc {
  font-size: 1rem;
  line-height: 1.7;
  /* Description text colour on light backgrounds */
  color: var(--mid);
  max-width: 560px;
}

/* White version for dark sections */
.section-desc-light { color: rgba(255,255,255,0.65); }

/* Short horizontal rule beneath headings */
.divider {
  width: 48px;
  height: 3px;
  /* Divider colour */
  background: var(--orange);
  margin: 20px 0 40px;
}

/* Centred variant of the divider */
.divider-center {
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   6. ABOUT SECTION
   ============================================================ */

/* Dark background for the About section */
.about {
  background: var(--charcoal);
  padding: 80px 0;
}

/* Two-column layout: image left, text right */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* About image with offset-border accent */
.about-image {
  height: 480px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* Decorative offset border on the about image.
   Change border colour by editing the color value below. */
.about-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--orange);  /* Offset border colour */
  border-radius: 4px;
  transform: translate(12px, 12px);
  pointer-events: none;
}

/* Four stat boxes below the about copy */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

/* Individual stat — left accent border */
.stat {
  border-left: 2px solid var(--orange);  /* Stat left-border colour */
  padding-left: 16px;
}

/* Large number in each stat */
.stat-number {
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 900;
  /* Stat number colour */
  color: var(--orange);
  line-height: 1;
}

/* Label beneath the stat number */
.stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  /* Stat label colour */
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-top: 4px;
}


/* ============================================================
   7. MENU NAVIGATION BAR (sticky sub-nav)
   ============================================================ */

/* Sticky bar below the main nav listing menu categories */
.menu-nav {
  /* Background colour of the menu sub-nav */
  background: var(--ink);
  position: sticky;
  top: 72px;  /* Must match nav height */
  z-index: 90;
  border-bottom: 1px solid rgba(232,112,26,0.2); /* Thin accent underline */
}

/* Inner scroll container for menu category links */
.menu-nav-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-nav-inner::-webkit-scrollbar { display: none; }

/* Individual category links in the sub-nav */
.menu-nav-inner a {
  display: block;
  padding: 16px 28px;
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Inactive link colour */
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

/* Hovered / active category link */
.menu-nav-inner a:hover,
.menu-nav-inner a.active {
  color: var(--orange);              /* Active link text colour */
  border-bottom-color: var(--orange); /* Active link underline colour */
}


/* ============================================================
   8. MENU SECTION SHARED STYLES
   ============================================================ */

/* Each full menu section (Nigiri, Rolls, Bento, etc.) */
.menu-section {
  padding: 80px 0;
}

/* Alternating background colours for odd/even sections */
.menu-section:nth-child(even) { background: var(--cream-dark); }
.menu-section:nth-child(odd)  { background: var(--cream); }

/* Header block above a menu grid */
.menu-header {
  margin-bottom: 52px;
}

/* Centred variant of the menu header */
.menu-header-center {
  text-align: center;
}
.menu-header-center .divider    { margin: 20px auto 40px; }
.menu-header-center .section-desc { margin: 0 auto; }

/* Grid of menu cards — auto-fills columns at 260px minimum */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Individual menu card */
.menu-card {
  /* Card background colour */
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,12,4,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(26,12,4,0.12);
}

/* Image area within a card */
.menu-card-img {
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.menu-card-img img {
  transition: transform 0.4s;
}
.menu-card:hover .menu-card-img img {
  transform: scale(1.05);
}

/* "NEW" or "Popular" badge overlaid on card image */
.badge-new {
  position: absolute;
  top: 12px; left: 12px;
  /* Badge background colour */
  background: var(--orange);
  /* Badge text colour */
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

/* Text body of a card */
.menu-card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Japanese subtitle inside a card */
.menu-card-jp {
  font-family: var(--ff-jp);
  font-size: 0.72rem;
  /* Japanese label colour on cards */
  color: var(--mid);
  margin-bottom: 4px;
}

/* Card dish name */
.menu-card-name {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  /* Card title colour */
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 6px;
}

/* Card description paragraph */
.menu-card-desc {
  font-size: 0.8rem;
  /* Card description colour */
  color: var(--mid);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 14px;
}

/* Row at the bottom of a card containing price badge + tag */
.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Circular price badge on cards */
.menu-card-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Price badge background */
  background: var(--orange);
  /* Price badge text colour */
  color: var(--white);
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

/* Small tag (e.g. "6 pcs") next to price badge */
.menu-card-tag {
  font-size: 0.7rem;
  /* Tag text colour */
  color: var(--mid);
  letter-spacing: 0.06em;
}


/* ============================================================
   9. NIGIRI CARDS (compact horizontal layout)
   ============================================================ */

/* Tighter grid for nigiri — narrower minimum column */
.nigiri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* Horizontal nigiri card */
.nigiri-card {
  /* Card background */
  background: var(--white);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(26,12,4,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}

.nigiri-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(26,12,4,0.1);
}

/* Japanese kanji label on nigiri card */
.nigiri-card-jp {
  font-family: var(--ff-jp);
  font-size: 0.68rem;
  /* Japanese label colour */
  color: var(--mid);
}

/* Dish name on nigiri card */
.nigiri-card-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  /* Name colour */
  color: var(--ink);
  margin-top: 2px;
}

/* "2 pcs" note on nigiri card */
.nigiri-card-note {
  font-size: 0.72rem;
  /* Note colour */
  color: var(--mid);
  margin-top: 3px;
}

/* Price pill on nigiri cards */
.nigiri-price {
  /* Price pill background */
  background: var(--orange);
  /* Price pill text colour */
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 12px;
}


/* ============================================================
   10. BENTO BOX SECTION
   ============================================================ */

/* Dark background override for the Bento section */
.bento-section {
  background: var(--ink) !important;
}

/* Three-column bento grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Individual bento card */
.bento-card {
  /* Bento card background */
  background: var(--charcoal);
  border-radius: 4px;
  overflow: hidden;
  /* Subtle accent border at rest */
  border: 1px solid rgba(232,112,26,0.15);
  transition: transform 0.25s, border-color 0.25s;
}

.bento-card:hover {
  transform: translateY(-4px);
  /* Full accent border on hover */
  border-color: var(--orange);
}

/* Image area of bento card */
.bento-card-img {
  height: 200px;
  position: relative;
}

/* Letter badge (A, B, C…) on each bento image */
.bento-letter {
  position: absolute;
  top: 12px; left: 12px;
  /* Badge fill colour */
  background: var(--orange);
  /* Badge text colour */
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 1.1rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
}

/* Text body of a bento card */
.bento-card-body {
  padding: 20px;
}

/* Japanese label on bento card */
.bento-card-jp {
  font-family: var(--ff-jp);
  font-size: 0.7rem;
  /* Japanese label colour on dark background */
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}

/* Dish name on bento card */
.bento-card-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  /* Name colour on dark background */
  color: var(--white);
}

/* Price on bento card */
.bento-card-price {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 1.4rem;
  /* Price colour */
  color: var(--orange);
  margin-top: 10px;
}


/* ============================================================
   11. DRINKS SECTION
   ============================================================ */

/* Dark background for the Drinks section */
.drinks-section {
  background: var(--charcoal);
}

/* Two-column grid: drink list left, image right */
.drinks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Drinks photo */
.drinks-image {
  border-radius: 4px;
  overflow: hidden;
  height: 400px;
}

/* Drinks list — unstyled */
.drinks-list {
  list-style: none;
}

/* Individual drink row */
.drinks-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  /* Divider between items */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.drinks-list li:last-child {
  border-bottom: none;
}

/* Drink name */
.drink-name {
  font-family: var(--ff-display);
  font-size: 1rem;
  /* Drink name colour */
  color: var(--white);
  font-weight: 400;
}

/* Sub-label (Japanese name / serving info) */
.drink-sub {
  font-size: 0.75rem;
  /* Sub-label colour */
  color: rgba(255,255,255,0.4);
  display: block;
  margin-top: 2px;
}

/* Drink price */
.drink-price {
  font-family: var(--ff-display);
  font-weight: 700;
  /* Drink price colour */
  color: var(--orange);
  font-size: 1rem;
  flex-shrink: 0;
  margin-left: 16px;
}

/* Horizontal rule between drink sub-categories */
.drinks-divider {
  height: 1px;
  /* Divider colour between drink categories */
  background: rgba(232,112,26,0.25);
  margin: 24px 0 8px;
}

/* Sub-category label within the drinks list (e.g. "Soft Drinks") */
.drinks-category-label {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Category label colour */
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 16px;
}


/* ============================================================
   12. BOOKING CTA SECTION
   ============================================================ */

/* Full-bleed booking section with background image.
   ─── TO CHANGE THE BOOKING IMAGE ────────────────────────────
   Edit the url('...') on the second line below. */
.booking {
  background:
    linear-gradient(
      to right,
      rgba(26,12,4,0.9) 40%,
      rgba(26,12,4,0.6) 100%
    ),
    url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=1400&q=80')
    center/cover no-repeat;
  padding: 120px 0;
  text-align: center;
}

/* Main booking heading */
.booking-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  /* Heading colour */
  color: var(--white);
  margin-bottom: 16px;
}

/* Accent word inside the booking title */
.booking-title em {
  /* Emphasised word colour */
  color: var(--orange);
  font-style: normal;
}

/* Subtext in booking section */
.booking-sub {
  font-size: 1rem;
  /* Booking subtext colour */
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}


/* ============================================================
   13. LOCATION SECTION
   ============================================================ */

/* Light background for the Location section */
.location {
  background: var(--cream);
}

/* Two-column layout: info left, map right */
.location-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Map placeholder box */
.location-map {
    height: 600px;
    width: 600px;
    background: var(--cream-dark);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dashed border colour */
    border: 2px dashed rgba(232,112,26,0.3);
    position: relative;
}

/* Placeholder content inside map box */
.map-placeholder {
  text-align: center;
  color: var(--mid);
}
.map-placeholder svg  { margin: 0 auto 12px; }
.map-placeholder p    { font-size: 0.9rem; }

/* Each info row (icon + text) in the location section */
.info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

/* Circular icon beside each info row */
.info-icon {
  width: 40px; height: 40px;
  /* Icon circle fill */
  background: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* Icon colour */
  color: var(--white);
}

/* Small label above each info value */
.info-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Info label colour */
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 4px;
}

/* Info text (address, hours, phone) */
.info-value {
  font-size: 0.95rem;
  /* Info value colour */
  color: var(--ink);
  line-height: 1.5;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

/* Footer background */
footer {
  background: var(--ink);
  padding: 64px 0 40px;
}

/* Three-column footer grid */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}

/* Large brand name in the footer */
.footer-brand-name {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 900;
  /* Footer brand name colour */
  color: var(--white);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Accent word in footer brand name */
.footer-brand-name span {
  color: var(--orange);
}

/* Japanese tagline in footer */
.footer-tagline {
  font-family: var(--ff-jp);
  font-size: 0.78rem;
  /* Footer tagline colour */
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.3em;
  margin-bottom: 20px;
}

/* Short description paragraph in footer */
.footer-desc {
  font-size: 0.85rem;
  /* Footer description colour */
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
}

/* Column heading in footer ("Explore", "Visit") */
.footer-col-title {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Footer column heading colour */
  color: var(--orange);
  margin-bottom: 20px;
  font-weight: 600;
}

/* Footer navigation link list */
.footer-links {
  list-style: none;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  text-decoration: none;
  font-size: 0.88rem;
  /* Footer link colour */
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer-links a:hover {
  /* Footer link hover colour */
  color: var(--orange);
}

/* Bottom strip of the footer */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Copyright text */
.footer-copy {
  font-size: 0.78rem;
  /* Copyright text colour */
  color: rgba(255,255,255,0.25);
}

/* Social icon row */
.footer-socials {
  display: flex;
  gap: 16px;
}

/* Individual social icon link */
.footer-socials a {
  width: 36px; height: 36px;
  /* Social icon border */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Social icon colour */
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.2s, color 0.2s;
}
.footer-socials a:hover {
  /* Social icon hover colour */
  border-color: var(--orange);
  color: var(--orange);
}


/* Flex row for the two buttons in the booking CTA */
.booking-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Muted outline button variant used in the booking CTA.
   Inherits from .btn-outline but with a more subtle border colour. */
.btn-outline-muted {
  border-color: rgba(255,255,255,0.4);  /* Muted border colour — change to taste */
}


/* ============================================================
   15. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
  nav {
    padding: 0 24px;
  }

  /* Hide nav links on tablets — you could add a hamburger menu here */
  .nav-links {
    display: none;
  }

  /* Stack two-column layouts to single column */
  .about-inner,
  .drinks-grid,
  .location-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Shorter about image on tablet */
  .about-image {
    height: 300px;
  }

  /* Bento drops to 2 columns on tablet */
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer drops to 2 columns on tablet */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Mobile (≤ 600px) ─────────────────────────────────────── */
@media (max-width: 600px) {
  /* Tighter section spacing on mobile */
  section {
    padding: 64px 0;
  }

  /* Tighter horizontal padding on mobile */
  .container {
    padding: 0 20px;
  }

  /* Bento single column on mobile */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  /* Footer single column on mobile */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Smaller hero title on mobile */
  .hero-title {
    font-size: 3.5rem;
  }

  /* Smaller hero logo image on mobile */
  .hero-logo-img {
    width: 120px;
  }
}
/* ── Reservation section ───────────────────────────── */
.reservation {
    background: #292929;          /* very dark warm brown — matches your site dark bg */
    padding: 100px 0;
}

.reservation-inner {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: start;
}

/* Info panel */
.reservation-info .section-title {
    color: #fff;
    margin-bottom: 0;
}
.reservation-info .section-desc {
    color: rgba(255,255,255,0.7);
    margin-top: 20px;
    line-height: 1.75;
}

.reservation-info span {
  color: var(--orange);
}


.reservation-hours {
    margin: 28px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.res-hour-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}
.res-day  { color: #E87722; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; }
.res-time { color: rgba(255,255,255,0.8); font-size: 0.9rem; }

.reservation-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
}
.reservation-note a {
    color: #E87722;
    text-decoration: none;
}
.reservation-note a:hover { text-decoration: underline; }

/* Form card */
.reservation-form-wrap {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 40px;
    backdrop-filter: blur(6px);
}

/* Form layout */
.form-row { margin-bottom: 20px; }
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.req { color: #E87722; }

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 12px 14px;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.25); }

/* Style the date picker calendar icon to match */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
}

/* Select arrow */
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E87722' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.form-group select option { background: #1a1008; color: #fff; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #E87722;
    background: rgba(232,119,34,0.06);
}

.form-group textarea { resize: vertical; min-height: 90px; }

/* Submit button */
.btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    letter-spacing: 0.06em;
    margin-top: 8px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.form-disclaimer {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}

/* Success state */
.form-success {
    text-align: center;
    padding: 48px 20px;
}
.form-success-icon { font-size: 3rem; margin-bottom: 16px; }
.form-success h3   { color: #E87722; font-size: 1.6rem; margin-bottom: 10px; }
.form-success p    { color: rgba(255,255,255,0.7); }

/* Responsive */
@media (max-width: 860px) {
    .reservation-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 540px) {
    .form-row-2col { grid-template-columns: 1fr; }
    .reservation-form-wrap { padding: 24px 18px; }
}