/* ============================================================
   TUPS KITCHEN — MASTER STYLESHEET
   ============================================================
   HOW TO USE THIS FILE:
   - Each section is clearly labeled with what it controls
   - Look for "YOU CAN CHANGE" comments to find safe edit points
   - Never remove a section unless you know what it affects
   - After any change, bump ?v=1.x in all HTML <link> and <script> tags
   ============================================================ */


/* ============================================================
   SECTION 1 — GOOGLE FONTS
   ============================================================
   Loads two fonts from Google (requires internet connection).
   - Playfair Display = headings, dish names, titles  (serif, elegant)
   - Nunito           = body text, nav links, captions (sans-serif, clean)

   YOU CAN CHANGE: swap font names here to use different Google Fonts.
   Also update font-family in Sections 3 and 4 if you change fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Nunito:wght@300;400;500;600;700&display=swap');


/* ============================================================
   SECTION 2 — COLOR & SIZE VARIABLES  ← MAIN PLACE TO EDIT
   ============================================================
   These are the master "settings" for the entire site.
   Change a value here and it updates everywhere automatically.

   ── BRAND COLORS ────────────────────────────────────────────
   --saffron        Orange — buttons, prices, active nav, hover
                    effects, icons. Main brand accent color.
   --saffron-dark   Darker orange — used on button hover state.
   --saffron-light  Lighter orange — occasional highlights.
   --turmeric       Yellow/gold — banner dots, popup title text,
                    hero eyebrow label, highlighted bold words.

   ── FOOTER & BANNER COLOR ───────────────────────────────────
   --cardamom       Dark color used for BOTH footer background
                    AND announcement banner background.
                    Change this one value to update both at once.
                    Examples:
                    #2D4A3E = dark green (current)
                    #2C3E50 = navy blue
                    #2C2C2C = near-black charcoal
                    #1A3A4A = deep ocean teal
                    #4A1942 = deep purple
   --cardamom-light Slightly lighter version — hover states.

   ── PAGE BACKGROUND COLORS ──────────────────────────────────
   --cream          Main page background (warm off-white).
   --cream-dark     Alternate section background (slightly darker).

   ── TEXT COLORS ─────────────────────────────────────────────
   --text-dark      Main body text (near-black warm tone).
   --text-mid       Secondary text — descriptions, subtitles.
   --text-light     Muted text — small labels, meta info.
   --white          Pure white — on dark backgrounds.

   ── LAYOUT SIZES ────────────────────────────────────────────
   --nav-height     Height of navigation bar. Change if you resize nav.
   --banner-height  Height of scrolling announcement strip.
   --total-top      Auto = nav + banner. DO NOT change manually.
   --transition     Animation speed across the whole site.

   ── FULL THEME SWAP EXAMPLES ────────────────────────────────
   Just replace the color values below with one of these presets:

   Theme A — Slate & Gold (professional, elegant):
     --saffron: #C9973A;  --saffron-dark: #A67C2A;
     --turmeric: #F0D060; --cardamom: #2C3E50;

   Theme B — Rose & Charcoal (warm, modern):
     --saffron: #C0392B;  --saffron-dark: #96281B;
     --turmeric: #F39C12; --cardamom: #2C2C2C;

   Theme C — Teal & Saffron (vibrant, keeps orange):
     --saffron: #E8702A;  --saffron-dark: #C45B18;
     --turmeric: #F5C842; --cardamom: #1A3A4A;

   Theme D — Charcoal & Gold (dark, luxurious):
     --saffron: #D4A843;  --saffron-dark: #B8902E;
     --turmeric: #F0C040; --cardamom: #1C1C1C;
     --cream: #F8F5F0;    --text-dark: #1A1A1A;

   Theme E — Royal Burgundy (deep, rich, Indian festive):
     --saffron: #C0392B;  --saffron-dark: #96281B;
     --turmeric: #F39C12; --cardamom: #2C1654;
     --cream: #FDF4F4;    --cream-dark: #F5E4E4;

   Theme F — Midnight Navy (clean, modern, professional):
     --saffron: #E8702A;  --saffron-dark: #C45B18;
     --turmeric: #F5C842; --cardamom: #0F1F3D;
     --cream: #F5F8FF;    --cream-dark: #E8EEF8;

   Theme G — Forest & Copper (earthy, warm):
     --saffron: #B5651D;  --saffron-dark: #8B4513;
     --turmeric: #DAA520; --cardamom: #1B3A2D;
     --cream: #FAF5EC;    --cream-dark: #F0E8D8;

   ── HERO IMAGE OVERLAY DARKNESS ─────────────────────────────
   Controls the dark tinted layer on top of the homepage photo.
   0.0 = completely invisible (image fully visible)
   1.0 = fully solid black (image completely hidden)

   --overlay-dark    Top-left corner darkness     (default 0.65)
   --overlay-mid     Centre blend                 (default 0.50)
   --overlay-accent  Bottom-right orange tint     (default 0.30)
                     Set to 0.0 to remove orange tint completely.

   Useful presets:
   Lighter (more image):  0.40 / 0.30 / 0.15
   Darker (more contrast): 0.80 / 0.65 / 0.40
   No orange tint:        0.65 / 0.50 / 0.00
   ============================================================ */

:root {
  /* ══════════════════════════════════════════════════════════
     THEME COLORS — change these to switch the whole site look
     Currently: ROYAL BURGUNDY & RED
     ══════════════════════════════════════════════════════════ */

  /* Buttons, prices, icons, active nav */
  --saffron:        #C0392B;
  --saffron-dark:   #96281B;
  --saffron-light:  #E74C3C;

  /* Banner dots, highlighted text */
  --turmeric:       #F39C12;

  /* Footer + announcement banner background */
  --cardamom:       #260209;   /* very dark matte wine */
  --cardamom-light: #3B0812;   /* slightly lighter dark wine */

  /* Page backgrounds */
  --cream:          #FDF4F4;
  --cream-dark:     #F5E4E4;
  --warm-brown:     #5C3D2E;

  /* ── OTHER THEMES (copy/paste to replace the 8 lines above) ──
  
  ORIGINAL Green & Orange:
  --saffron:#E8702A; --saffron-dark:#C45B18; --saffron-light:#F4924E;
  --turmeric:#F5C842; --cardamom:#2D4A3E; --cardamom-light:#3D6B5A;
  --cream:#FDF6EC; --cream-dark:#F5E8D0;

  CHARCOAL & Orange:
  --saffron:#E8702A; --saffron-dark:#C45B18; --saffron-light:#F4924E;
  --turmeric:#F5C842; --cardamom:#1C1C1C; --cardamom-light:#2E2E2E;
  --cream:#FDF6EC; --cream-dark:#F5E8D0;

  MIDNIGHT NAVY & Orange:
  --saffron:#E8702A; --saffron-dark:#C45B18; --saffron-light:#F4924E;
  --turmeric:#F5C842; --cardamom:#0F1F3D; --cardamom-light:#1A3260;
  --cream:#F5F8FF; --cream-dark:#E8EEF8;

  WARM MAROON & Orange:
  --saffron:#E8702A; --saffron-dark:#C45B18; --saffron-light:#F4924E;
  --turmeric:#DAA520; --cardamom:#4A1515; --cardamom-light:#6B2020;
  --cream:#FDF6EC; --cream-dark:#F5E8D0;

  DARK TEAL & Orange:
  --saffron:#E8702A; --saffron-dark:#C45B18; --saffron-light:#F4924E;
  --turmeric:#F5C842; --cardamom:#0D3B3B; --cardamom-light:#1A5C5C;
  --cream:#F5FBFC; --cream-dark:#E3F2F5;
  ── */

  /* ── Text colors ── */
  --text-dark:      #1A1208;
  --text-mid:       #4A3728;
  --text-light:     #8B6E5A;
  --white:          #FFFFFF;

  /* ── Layout heights ── */
  --nav-height:     72px;
  --banner-height:  38px;
  --total-top:      calc(var(--nav-height) + var(--banner-height));
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Hero image overlay ────────────────────────────────────────
     Controls the dark layer on top of the homepage background photo.
     Range: 0.0 = invisible (full image), 1.0 = fully solid (image hidden)

     --overlay-dark    = top-left darkness
     --overlay-mid     = centre blend
     --overlay-accent  = bottom-right COLOUR tint (orange by default)
                         Set to 0.0 to remove colour tint completely.

     To change overlay STYLE, also update the rgba() colors in
     Section 8 (.hero::before). Current presets are in the comment there.
     ────────────────────────────────────────────────────────────── */

  /* CURRENT: Pure dark black overlay (no orange tint) */
  --overlay-dark:   0.72;
  --overlay-mid:    0.60;
  --overlay-accent: 0.00;

  /* OTHER PRESETS — uncomment one block to use it:

  // Subtle dark with slight warm tone (original style):
  --overlay-dark:   0.65;
  --overlay-mid:    0.50;
  --overlay-accent: 0.30;

  // Very light — image clearly visible, minimal text contrast:
  --overlay-dark:   0.40;
  --overlay-mid:    0.25;
  --overlay-accent: 0.00;

  // Very dark — maximum text contrast:
  --overlay-dark:   0.85;
  --overlay-mid:    0.75;
  --overlay-accent: 0.00;
  */
}


/* ============================================================
   SECTION 3 — GLOBAL RESET & BODY
   ============================================================
   Clears all browser default margins so the site looks consistent
   across Chrome, Safari, Firefox, Edge.
   Sets the base font, text color, and background for the whole site.

   YOU CAN CHANGE:
   - font-family: swap 'Nunito' for another loaded font name
   - line-height: 1.7 controls spacing between lines (higher = more space)
   - background: var(--cream) = page background color
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
}


/* ============================================================
   SECTION 4 — TYPOGRAPHY (headings & links)
   ============================================================
   Font sizes for h1 through h4. Uses clamp() so sizes
   scale fluidly between small screens and large screens.
   Format: clamp(minimum, preferred, maximum)

   YOU CAN CHANGE:
   - font-family: swap 'Playfair Display' to use sans-serif headings
   - clamp values: adjust min/max sizes for each heading level
   ============================================================ */

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.15rem; }

a { text-decoration: none; color: inherit; }


/* ============================================================
   SECTION 5 — ANNOUNCEMENT BANNER (scrolling strip at top)
   ============================================================
   The thin strip at the very top of every page that scrolls
   messages left continuously. Content is set in js/config.js.

   YOU CAN CHANGE HERE:
   - background: change banner color (default uses --cardamom)
   - font-size: make banner text larger or smaller
   - animation 28s: change scroll speed (lower = faster)

   To change MESSAGE TEXT: edit js/config.js (BANNER_CONFIG.messages)
   To DISABLE banner:      set BANNER_CONFIG.enabled = false in config.js
   ============================================================ */

.announcement-banner {
  height: var(--banner-height);
  background: var(--cardamom);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The scrolling track — duplicated messages for seamless loop */
.banner-track {
  display: flex;
  white-space: nowrap;
  animation: bannerScroll 28s linear infinite;
}

.banner-track:hover { animation-play-state: paused; }

.banner-item {
  padding: 0 3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Yellow dot separator between messages */
.banner-item .dot {
  width: 5px; height: 5px;
  background: var(--turmeric);
  border-radius: 50%;
  flex-shrink: 0;
}

.banner-item strong { color: var(--turmeric); }

@keyframes bannerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   SECTION 6 — NAVIGATION BAR
   ============================================================
   Fixed top bar with logo and menu links. Stays visible while
   scrolling. Sits directly below the announcement banner.
   Picks up a drop shadow when the user scrolls down.

   YOU CAN CHANGE:
   - background rgba(...): nav background — increase last number
     (0.95) toward 1.0 for more solid, decrease for more transparent
   - border-bottom color: the thin line under the nav bar
   - --nav-height in Section 2: makes nav taller or shorter
   - .nav-links a colors: link text and hover/active colors
   ============================================================ */

.nav {
  position: fixed;
  top: var(--banner-height);
  left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(253, 246, 236, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232, 112, 42, 0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition);
}

.nav.scrolled {
  box-shadow: 0 4px 24px rgba(92, 61, 46, 0.12);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo in nav bar */
.nav-logo img {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  align-items: center;
}

/* Nav link default state */
.nav-links a {
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text-mid);
  border-radius: 100px;
  transition: all var(--transition);
  position: relative;
}

/* Nav link hover state */
.nav-links a:hover {
  color: var(--saffron);
  background: rgba(232, 112, 42, 0.08);
}

/* Active (current page) nav button — matches footer color */
.nav-links a.active {
  color: var(--white);
  background: var(--cardamom);
  box-shadow: 0 2px 8px rgba(38, 2, 9, 0.3);
}

/* ── Hamburger button (shows on mobile, hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}

.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Three lines animate into an X when menu opens */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   SECTION 7 — PAGE WRAP (content offset below fixed bars)
   ============================================================
   Pushes all page content down so it starts below both the
   announcement banner AND the navigation bar combined.
   --total-top is auto-calculated in Section 2.

   DO NOT CHANGE this section.
   ============================================================ */

.page-wrap { padding-top: var(--total-top); }


/* ============================================================
   SECTION 8 — HERO (homepage full-screen image section)
   ============================================================
   The large background image covering the full screen on the
   homepage. A dark colour overlay sits on top via ::before.

   YOU CAN CHANGE:
   - background-image url: swap the homepage background photo
   - background-position: center/top/bottom — crops differently
   - Overlay tint: edit --overlay-dark/mid/accent in Section 2
   ============================================================ */

.hero {
  min-height: calc(100vh - var(--nav-height));
  background-image: url('../images/bg/bg-indexpage.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Dark overlay on homepage image.
   Adjust darkness using --overlay-dark/mid/accent in Section 2.

   The rgba() COLOR values below control the TINT:
   - rgba(0,0,0,...) = pure black/grey (current — no color tint)
   - rgba(26,18,8,...) = very dark warm brown
   - rgba(232,112,42,...) = orange saffron tint

   Overlay style presets — change the rgba colors here:

   Pure black (current):
     rgba(0, 0, 0, var(--overlay-dark)) 0%,
     rgba(0, 0, 0, var(--overlay-mid)) 100%

   Warm brown to orange (original):
     rgba(26, 18, 8, var(--overlay-dark)) 0%,
     rgba(92, 61, 46, var(--overlay-mid)) 50%,
     rgba(232, 112, 42, var(--overlay-accent)) 100%

   Deep navy tint:
     rgba(10, 20, 40, var(--overlay-dark)) 0%,
     rgba(0, 0, 0, var(--overlay-mid)) 100%
*/
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--overlay-dark))  0%,
    rgba(0, 0, 0, var(--overlay-mid))  100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding: 2rem;
  max-width: 780px;
  animation: heroFade 1.2s ease-out forwards;
}

@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Small uppercase label above heading e.g. "Authentic Vegetarian" */
.hero-eyebrow {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turmeric);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--white);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

/* Italic tagline below main heading */
.hero-tagline {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-style: italic;
  color: rgba(255,255,255,0.88);
  margin-bottom: 0.5rem;
}

/* Smaller subtitle text below tagline */
.hero-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2.5rem;
  font-weight: 500;
}

/* Pill notice e.g. "Pickup only — Fremont CA" */
.hero-notice {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 0.6rem 1.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.hero-notice strong { color: var(--turmeric); }

/* Row of CTA buttons */
.hero-cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}


/* ============================================================
   SECTION 9 — BUTTONS
   ============================================================
   Two button styles used across the site:
   .btn-primary = filled orange (main call-to-action)
   .btn-outline = transparent with white border (secondary)

   YOU CAN CHANGE:
   - padding: makes buttons larger or smaller
   - border-radius: 100px = pill shape, lower = more rectangular
   - .btn-primary background: changes the filled button color
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
}

.btn-primary { background: var(--saffron); color: var(--white); }
.btn-primary:hover {
  background: var(--saffron-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
  transform: translateY(-2px);
}


/* ============================================================
   SECTION 10 — PAGE BANNER (header image on inner pages)
   ============================================================
   The shorter banner image at the top of Menu, Gallery, FAQ,
   Contact, and Catering pages. Each page sets its own background
   image inline in the HTML.

   YOU CAN CHANGE:
   - height: 280px — how tall the banner strip is
   - rgba(26, 18, 8, 0.6) — last number is darkness of overlay
     (0.0 = image fully visible, 1.0 = fully black)
   ============================================================ */

.page-banner {
  height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(26, 18, 8, 0.6);
}

.page-banner-content { position: relative; z-index: 1; color: var(--white); }

.page-banner h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.5rem; }
.page-banner p  { font-size: 1rem; color: rgba(255,255,255,0.75); font-style: italic; }


/* ============================================================
   SECTION 11 — SECTIONS & LAYOUT HELPERS
   ============================================================
   .section      = large top/bottom padding for content blocks
   .section-sm   = smaller padding variant
   .container    = centers content, max 1200px wide
   .section-label   = small orange uppercase label above headings
   .section-title   = main section heading
   .section-subtitle = descriptive paragraph below heading

   YOU CAN CHANGE:
   - max-width: 1200px — how wide content sits on large screens
   - padding values in .section — space above/below content blocks
   - .section-label color/size — the small orange label text
   ============================================================ */

.section    { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Small orange uppercase label e.g. "Fresh Daily", "Our Story" */
.section-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 0.5rem;
}

.section-title    { margin-bottom: 1rem; color: var(--text-dark); }
.section-subtitle { font-size: 1.05rem; color: var(--text-light); max-width: 540px; margin: 0 auto 3rem; }
.text-center      { text-align: center; }


/* ============================================================
   SECTION 12 — CONTACT PAGE IMAGE & CAPTION
   ============================================================
   The dish photo on the Contact Us page, sitting beside the text.
   Uses flex-direction: column so the black caption band sits
   ABOVE the image naturally without overlapping it.

   Also defines .img-caption (reusable on any image) and
   .img-card (reusable card wrapper for future images).

   YOU CAN CHANGE:
   - aspect-ratio: 3/2 — matches 800x533px photos.
     Change to 4/3 for slightly taller, 16/9 for wide landscape.
   - border-radius: corner roundness
   - .img-caption background rgba: darkness of the caption band
   - .img-caption font-size: size of caption text

   TO ADD A CAPTION TO ANY IMAGE anywhere on the site:
   <div class="img-card">
     <div class="img-caption"><span>Dish Name Here</span></div>
     <img src="images/photo.jpg" alt="Dish Name">
   </div>
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(92, 61, 46, 0.2);
  display: flex;
  flex-direction: column; /* caption above, image below — DO NOT REMOVE */
}

.about-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Black caption band — sits above any image it is placed before */
.img-caption {
  background: rgba(0, 0, 0, 0.82); /* increase opacity for darker band */
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}

.img-caption span {
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* Reusable card wrapper for any future image with a caption */
.img-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(92, 61, 46, 0.15);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.img-card:hover { box-shadow: 0 16px 48px rgba(92, 61, 46, 0.22); transform: translateY(-3px); }
.img-card img   { width: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.img-card:hover img { transform: scale(1.04); }

/* Orange divider line and paragraph text in About section */
.about-text .divider {
  width: 48px; height: 3px;
  background: var(--saffron);
  border-radius: 2px;
  margin: 1.25rem 0;
}
.about-text p { color: var(--text-mid); margin-bottom: 1rem; font-size: 1rem; }


/* ============================================================
   SECTION 13 — CONTACT CARDS
   ============================================================
   The three white info cards on the Contact page showing
   Phone, Email, and Address, each with a coloured circle icon.

   YOU CAN CHANGE:
   - grid-template-columns: repeat(3, 1fr) — 3 columns desktop
   - .contact-icon background: icon circle gradient colors
   - border-radius on .contact-card: roundness of cards
   - hover transform: how much cards lift on hover
   ============================================================ */

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.contact-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid rgba(232, 112, 42, 0.12);
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(92, 61, 46, 0.06);
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(92, 61, 46, 0.12);
  border-color: rgba(232, 112, 42, 0.3);
}

/* Orange circle with icon */
.contact-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
  color: var(--white);
}

.contact-card h4 {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-light); margin-bottom: 0.5rem;
}
.contact-card a { font-size: 1.05rem; font-weight: 600; color: var(--text-dark); transition: color var(--transition); }
.contact-card a:hover { color: var(--saffron); }


/* ============================================================
   SECTION 14 — MENU PAGE (category tabs and dish cards)
   ============================================================
   Tab buttons to filter by category (Curries, Dal, Rice etc.)
   and the grid of dish name + price cards below.

   YOU CAN CHANGE:
   - .tab-btn.active background: color of the selected tab
   - .menu-item-price color: changes price text color
   - minmax(280px, 1fr): minimum width of each dish card
   - .menu-item border: border style around each dish card
   ============================================================ */

/* Category filter buttons row */
.menu-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 3rem; justify-content: center;
}

.tab-btn {
  padding: 0.6rem 1.25rem; border-radius: 100px;
  border: 2px solid rgba(38, 2, 9, 0.35);
  background: var(--white); color: var(--text-mid);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all var(--transition);
}
.tab-btn:hover  { border-color: var(--cardamom); color: var(--cardamom); }
.tab-btn.active { background: var(--cardamom); border-color: var(--cardamom); color: var(--white); box-shadow: 0 4px 16px rgba(38, 2, 9, 0.3); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabFade 0.4s ease; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grid of dish cards */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

/* Individual dish card */
.menu-item {
  background: var(--white); border-radius: 16px; padding: 1.5rem;
  display: flex; justify-content: space-between; align-items: flex-start;
  border: 1px solid rgba(232, 112, 42, 0.1); transition: all var(--transition); gap: 1rem;
}
.menu-item:hover {
  border-color: rgba(232, 112, 42, 0.3);
  box-shadow: 0 8px 24px rgba(92, 61, 46, 0.08);
  transform: translateY(-2px);
}

.menu-item-name { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.25rem; }
.menu-item-desc { font-size: 0.92rem; color: var(--text-light); font-style: italic; }
.menu-item-price { font-size: 0.98rem; font-weight: 700; color: var(--saffron); white-space: nowrap; text-align: right; flex-shrink: 0; }

/* Info note below a category e.g. "Prices may vary" */
.menu-note {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: rgba(232, 112, 42, 0.06);
  border-left: 3px solid var(--saffron);
  border-radius: 0 12px 12px 0;
  font-size: 0.85rem; color: var(--text-mid);
}


/* ============================================================
   SECTION 15 — GALLERY PAGE (photo grid)
   ============================================================
   Grid of dish photos. Each card has a black caption band ABOVE
   the image (not overlaid on it), showing the dish name.
   Clicking a photo opens it in the full-screen lightbox.

   YOU CAN CHANGE:
   - minmax(340px, 1fr): minimum card width. Bigger = fewer columns.
   - gap: 1.5rem: space between cards
   - aspect-ratio: 3/2: photo shape (matches 800x533px images).
     Change to 4/3 for slightly taller, 1/1 for square.
   - border-radius: 18px: corner roundness
   - .gallery-caption background: darkness of the name band
   - .gallery-caption-text font-size: size of dish name text
   ============================================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

/* Each photo card — flex column keeps caption above image */
.gallery-item {
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* IMPORTANT: puts caption above image — do not change */
  box-shadow: 0 4px 16px rgba(92, 61, 46, 0.10);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.gallery-item:hover { box-shadow: 0 12px 40px rgba(92, 61, 46, 0.22); transform: translateY(-4px); }

/* Dish photo */
.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2; /* change to match your image dimensions */
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover img { transform: scale(1.07); }

/* Black name band sitting above the image */
.gallery-caption {
  background: rgba(0, 0, 0, 0.82); /* change opacity to lighten/darken */
  padding: 0.55rem 1rem;
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; flex-shrink: 0;
  transition: background 0.3s ease;
}
.gallery-item:hover .gallery-caption { background: rgba(0, 0, 0, 0.95); }

/* Dish name text in the caption band */
.gallery-caption-text {
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem; /* increase to make dish names larger */
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Small expand icon — only appears on hover */
.gallery-caption-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-caption-icon { opacity: 1; }


/* ============================================================
   SECTION 16 — LIGHTBOX (full-screen image viewer)
   ============================================================
   Opens when clicking any gallery photo. Shows the full image
   with a black caption band at the top. Navigate with arrows
   or keyboard (← →). Close with X, Escape, or clicking outside.

   YOU CAN CHANGE:
   - max-width: 920px — maximum width of the opened image
   - .lightbox-close hover / .lightbox-nav hover colors
   - rgba(10, 8, 4, 0.94) — backdrop darkness
   ============================================================ */

.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 8, 4, 0.94);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.lightbox-overlay.open { opacity: 1; pointer-events: all; }

/* Flex column: caption on top, image below */
.lightbox-inner {
  position: relative; max-width: 920px; width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.lightbox-overlay.open .lightbox-inner { transform: scale(1); }

.lightbox-img-wrap { position: relative; width: 100%; }

.lightbox-img-wrap img {
  display: block; width: 100%; max-height: 78vh;
  object-fit: contain; background: #111;
}

/* Caption band above the full-size image */
.lightbox-img-caption {
  background: rgba(0, 0, 0, 0.88);
  padding: 0.75rem 1.25rem;
  display: flex; align-items: center; justify-content: center;
  order: -1; /* forces caption above image regardless of HTML order */
}
.lightbox-img-caption span {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem; font-weight: 700; color: #ffffff;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}

/* X close button */
.lightbox-close {
  position: fixed; top: 1.25rem; right: 1.25rem;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  color: white; font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; z-index: 2001; line-height: 1;
}
.lightbox-close:hover { background: var(--saffron); transform: scale(1.1); }

/* Left / right arrows */
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%; color: white; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; z-index: 2001;
}
.lightbox-nav:hover { background: var(--saffron); border-color: var(--saffron); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

@media (max-width: 600px) {
  .lightbox-nav { display: none; }
  .lightbox-img-caption span { font-size: 0.85rem; }
}


/* ============================================================
   SECTION 17 — FAQ PAGE (accordion questions)
   ============================================================
   Expandable question/answer pairs. Click a question to expand
   the answer; click again to collapse it.

   YOU CAN CHANGE:
   - max-width: 760px — how wide the FAQ list is
   - .faq-item border: border style around each question
   - .faq-icon colors: the + / x circle button
   ============================================================ */

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
  background: var(--white); border-radius: 16px;
  border: 1px solid rgba(232, 112, 42, 0.12);
  overflow: hidden; transition: all var(--transition);
}
.faq-item.open { border-color: rgba(232, 112, 42, 0.35); box-shadow: 0 8px 24px rgba(92, 61, 46, 0.08); }

.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; cursor: pointer; gap: 1rem; user-select: none;
}
.faq-question h4 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.97rem; color: var(--text-dark); flex: 1; }

/* + icon circle */
.faq-icon {
  width: 28px; height: 28px; background: rgba(232, 112, 42, 0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.1rem; color: var(--saffron); transition: all var(--transition);
}
.faq-item.open .faq-icon { background: var(--saffron); color: var(--white); transform: rotate(45deg); }

/* Answer slides open */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-answer-inner {
  padding: 1rem 1.5rem 1.25rem; color: var(--text-mid); font-size: 0.95rem;
  border-top: 1px solid rgba(232, 112, 42, 0.1);
}
.faq-answer-inner a { color: var(--saffron); font-weight: 600; }
.faq-item.open .faq-answer { max-height: 400px; }


/* ============================================================
   SECTION 18 — FOOTER
   ============================================================
   Dark bar at bottom of every page with social icons, a notice
   pill, and copyright text.

   YOU CAN CHANGE:
   - background: var(--cardamom) — update --cardamom in Section 2
     to change footer color site-wide
   - .social-link hover: icon hover color
   - .footer-notice: the "We do not offer delivery" pill styling
   - padding: top/bottom spacing of the footer
   ============================================================ */

.footer {
  background: var(--cardamom); /* change --cardamom in Section 2 */
  color: rgba(255,255,255,0.75);
  padding: 3rem 0 2rem;
  text-align: center;
}

/* Social icons row */
.social-links { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }

.social-link {
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--white); transition: all var(--transition); text-decoration: none;
}
.social-link:hover { background: var(--saffron); transform: translateY(-3px); }

/* "We do not offer delivery" pill */
.footer-notice {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px; padding: 0.4rem 1.25rem;
  font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em; margin-bottom: 1rem;
}

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


/* ============================================================
   SECTION 19 — BACKGROUND COLOR UTILITIES
   ============================================================
   Helper classes applied to sections to alternate background colors.
   Used throughout HTML like: <section class="section bg-cream">

   YOU CAN CHANGE: update --cream / --cream-dark in Section 2.
   ============================================================ */

.bg-cream      { background: var(--cream); }
.bg-cream-dark { background: var(--cream-dark); }
.bg-white      { background: var(--white); }


/* ============================================================
   SECTION 20 — CATERING MENU PAGE
   ============================================================
   Pricing tables for catering orders. Each category shows
   a table with Quarter / Half / Full tray columns and prices.

   YOU CAN CHANGE:
   - .catering-table th background: table header row color
   - .catering-section-title border-bottom: line under category names
   - font sizes in th / td: table text size
   - .catering-table tr:hover: row highlight on hover
   ============================================================ */

.catering-intro { max-width: 720px; margin: 0 auto 3rem; text-align: center; color: var(--text-mid); }
.catering-section { margin-bottom: 3rem; }

/* ── Catering Tab Layout ── */
.catering-tabs-wrap  { max-width: 960px; margin: 0 auto; }
.catering-tab-panel  { display: none; }
.catering-tab-panel.active { display: block; animation: fadeUp 0.3s ease; }

.catering-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; color: var(--text-dark);
  margin-bottom: 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(232, 112, 42, 0.2);
}

.catering-table {
  width: 100%; border-collapse: collapse;
  background: var(--white); border-radius: 16px;
  overflow: hidden; box-shadow: 0 4px 16px rgba(92, 61, 46, 0.06);
}

/* Wine dark header row — matches footer color */
.catering-table th {
  background: var(--cardamom);
  color: var(--white); padding: 1rem 1.5rem; text-align: left;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem; /* ← DISH/PRICING label size */
  letter-spacing: 0.08em; text-transform: uppercase;
}

.catering-table td { padding: 0.95rem 1.5rem; border-bottom: 1px solid rgba(92,61,46,0.08); }
.catering-table td:first-child { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; color: var(--text-dark); width: 45%; } /* ← dish name size */
.catering-table td:last-child  { font-size: 1.05rem; font-weight: 700; color: var(--saffron); } /* ← pricing size */
.catering-table tr:last-child td { border-bottom: none; }
.catering-table tr:hover td { background: rgba(192,57,43,0.03); }


/* ============================================================
   SECTION 21 — NOTICE / SPLASH POPUP
   ============================================================
   Full-screen popup for special occasions (Diwali, Holi,
   kitchen closed, orders full etc.). Content is controlled
   entirely from js/config.js — you never need to edit CSS here.

   YOU CAN CHANGE:
   - .notice-card background gradient: popup card colors
   - .notice-card border color rgba: glowing border intensity
   - .notice-btn background: "Got it" button color
   - .notice-title color: heading text color in popup
   ============================================================ */

.notice-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 8, 4, 0.78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.notice-overlay.open { opacity: 1; pointer-events: all; }

.notice-card {
  background: linear-gradient(145deg, #1a120a 0%, #2d1f10 60%, #1a2d1a 100%);
  border: 1px solid rgba(245, 200, 66, 0.25);
  border-radius: 24px; padding: 2.5rem 2.5rem 2rem;
  max-width: 560px; width: 100%; position: relative; text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 60px rgba(232,112,42,0.08);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.notice-overlay.open .notice-card { transform: translateY(0) scale(1); }

/* Fireworks canvas (when fireworks: true in config.js) */
.notice-canvas { position: absolute; inset: 0; border-radius: 24px; pointer-events: none; overflow: hidden; }

/* X close button on popup */
.notice-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px; background: rgba(255,255,255,0.1);
  border: none; border-radius: 50%; color: rgba(255,255,255,0.8);
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; z-index: 1;
}
.notice-close:hover { background: var(--saffron); color: #fff; }

/* Large emoji at top of popup */
/* ── SPLASH POPUP FONT SIZES — change these to resize popup text ──
   Line 1275  notice-emoji  = the big emoji at top (e.g. 🪔)
   Line 1278  notice-title  = main heading font size
   Line 1279  notice-body   = message body font size
   Line 1281  notice-sub    = small italic note at bottom
   Line 1289  notice-btn    = "Got it" button font size
   ──────────────────────────────────────────────────────────── */

.notice-emoji { font-size: 3.5rem; /* ← emoji size */ margin-bottom: 1rem; display: block; position: relative; z-index: 1; animation: noticeBob 2.5s ease-in-out infinite; }
@keyframes noticeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.notice-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.4rem); /* ← heading size */ color: var(--turmeric); margin-bottom: 0.75rem; position: relative; z-index: 1; line-height: 1.25; }
.notice-body  { font-size: clamp(1rem, 2.5vw, 1.15rem); /* ← body text size */ color: rgba(255,255,255,0.82); line-height: 1.65; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.notice-body strong { color: var(--turmeric); }
.notice-sub   { font-size: 0.95rem; /* ← small note size */ color: rgba(255,255,255,0.5); font-style: italic; position: relative; z-index: 1; margin-bottom: 1.5rem; }

/* "Got it" button */
.notice-btn {
  display: inline-block; padding: 0.75rem 2.5rem;
  background: var(--saffron); color: #fff; border: none; border-radius: 100px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem;
  cursor: pointer; position: relative; z-index: 1; transition: all 0.2s;
}
.notice-btn:hover { background: var(--saffron-dark); transform: translateY(-2px); }

/* Warm glow at bottom of popup card */
.notice-diya-glow {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  width: 180px; height: 80px;
  background: radial-gradient(ellipse at center, rgba(255,160,30,0.35) 0%, transparent 70%);
  pointer-events: none; border-radius: 50%;
}


/* ============================================================
   SECTION 22 — MOBILE RESPONSIVE BREAKPOINTS
   ============================================================
   Adjusts layout for smaller screens. Three breakpoints:

   768px — tablets and phones:
     - Nav collapses to hamburger menu
     - About/contact grid stacks to 1 column
     - Page banners get shorter
     - Hero gets taller on mobile
     - CTA buttons stack vertically

   540px — small phones:
     - Gallery shows 2 columns
     - Menu shows 1 column

   380px — very small phones:
     - Tab buttons get tighter spacing

   YOU CAN CHANGE: the pixel values (768, 540, 380) to change
   when the layout switches to mobile mode.
   ============================================================ */

@media (max-width: 768px) {
  /* Banner gets slightly smaller */
  .announcement-banner { font-size: 0.76rem; }
  :root { --banner-height: 34px; }

  /* Nav links collapse — slide down from hamburger */
  .nav-links {
    position: fixed;
    top: var(--total-top); left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 1.5rem 2rem; gap: 0.25rem;
    border-bottom: 1px solid rgba(232, 112, 42, 0.15);
    box-shadow: 0 8px 24px rgba(92, 61, 46, 0.1);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: all var(--transition); z-index: 999;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-links a { padding: 0.75rem 1rem; width: 100%; display: block; }
  .nav-toggle  { display: flex; }

  /* Stack grids to single column */
  .about-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .contact-cards { grid-template-columns: 1fr; gap: 1rem; }

  /* Shorter page banners */
  .page-banner { height: 200px; }
  .hero        { min-height: 90vh; }

  /* Stack CTA buttons */
  .hero-cta-group { flex-direction: column; align-items: center; }
  .btn { width: 200px; justify-content: center; }

  /* Catering table scrolls horizontally on small screens */
  .catering-section { overflow-x: auto; }
  .catering-table   { min-width: 500px; }
  .catering-table th,
  .catering-table td { padding: 0.75rem 1rem; font-size: 0.85rem; }

  /* Other layout tweaks */
  .contacts-hours-grid { grid-template-columns: 1fr !important; }
  .faq-list    { max-width: 100%; }
  .contact-card { padding: 2rem 1.5rem; }
  .notice-card  { padding: 2rem 1.5rem 1.5rem; }
}

@media (max-width: 540px) {
  /* Gallery: 2 columns on small phones */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .gallery-caption { padding: 0.4rem 0.5rem; }
  .gallery-caption-text { font-size: 0.72rem; letter-spacing: 0.02em; }

  /* Menu: 1 column on small phones */
  .menu-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  /* Very small screens */
  .menu-tabs-nav { gap: 0.35rem; }
  .tab-btn { font-size: 0.88rem; padding: 0.5rem 0.9rem; }
}