/* ============================================================
   CAFE JUNOON — "Arch & Ripple" light theme
   Built from the Cafe Junoon "jn" logo: warm off-white ground,
   deep teal monogram colour and fine copper arch + ripple lines.
   Arched dish-photo frames, arch / ripple section edges and calm
   motion. Scoped entirely under `.theme-warm` (every page);
   interior pages also carry `.theme-warm-auto`.

   Fonts unchanged (Cormorant Garamond + DM Sans).
   No images or text content are touched — layout/colour only.
   ============================================================ */

/* ------------------------------------------------------------
   1. PALETTE — remap the design tokens to a warm light system.
   Most of the site reads these variables, so this single block
   flips the bulk of the colours automatically.
   ------------------------------------------------------------ */
body.theme-warm {
  /* Brand constants — sampled from the Cafe Junoon "jn" logo */
  --jn-teal: #2F5F5C;              /* monogram teal               */
  --jn-teal-deep: #234845;
  --jn-teal-mist: #A8D1CB;         /* light teal for accents over photos */
  --jn-copper: #A9826A;            /* arch + ripple hairlines (decorative only) */
  --jn-copper-deep: #7F5B47;       /* copper safe for small text (5.3:1)        */
  --jn-line: rgba(169, 130, 106, 0.28);
  --jn-line-strong: rgba(169, 130, 106, 0.55);

  /* Surfaces (logo off-white paper) */
  --color-black: #F4F1EA;          /* page background            */
  --color-charcoal: #EAE5DA;       /* cards / nav / footer        */
  --color-charcoal-light: #E4DED1; /* raised / alt surfaces       */

  /* Text — teal-tinted ink */
  --color-cream: #1F2B2A;          /* headings & primary text     */
  --color-cream-dark: #2B3A38;     /* secondary text              */
  --color-gray: #4A5856;           /* body copy (6.6:1)           */
  --color-gray-light: #5E6B68;     /* muted labels / captions     */

  /* Kept light — only ever used as text ON coloured buttons */
  --color-white: #FBFAF6;

  /* Accent — Cafe Junoon teal (white on teal 6.9:1) */
  --color-primary: #2F5F5C;
  --color-primary-light: #376D69;
  --color-ember: #2F5F5C;
  --color-flame: #376D69;
  --main-color: #2F5F5C;
  --primary: #2F5F5C;
  --primaryLight: #376D69;
  --secondary: #2F5F5C;
  --secondaryLight: #376D69;
  --primary-color: #2F5F5C;
  --primary-color-light: #376D69;
  --primary-color-dark: #234845;

  /* Legacy text tokens */
  --headerColor: #1F2B2A;
  --bodyTextColor: #4A5856;
  --bodyTextColorWhite: #1F2B2A;
  --text-dark: #1F2B2A;
  --text-light: #4A5856;

  /* Accent tints */
  --color-primary-5: rgba(47, 95, 92, 0.05);
  --color-primary-10: rgba(47, 95, 92, 0.10);
  --color-primary-15: rgba(47, 95, 92, 0.14);
  --color-primary-30: rgba(47, 95, 92, 0.28);

  /* Neutral low-alpha overlays (ink on paper) */
  --color-cream-10: rgba(31, 43, 42, 0.10);
  --color-cream-30: rgba(31, 43, 42, 0.22);
  --color-black-50: rgba(31, 43, 42, 0.45);
  --color-black-80: rgba(31, 43, 42, 0.72);

  /* Soft, cool-neutral shadows */
  --shadow-sm: 0 2px 10px rgba(31, 43, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 43, 42, 0.08);
  --shadow-lg: 0 18px 44px rgba(31, 43, 42, 0.12);
  --shadow-glow-primary: 0 8px 22px rgba(47, 95, 92, 0.22);
  --shadow-glow-primary-light: 0 8px 22px rgba(47, 95, 92, 0.18);

  /* Refined, slightly tighter corners */
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-full: 50px;

  background-color: var(--color-black);
  color: var(--color-gray);
}

/* Base text colour safety on the light background */
body.theme-warm h1,
body.theme-warm h2,
body.theme-warm h3,
body.theme-warm h4,
body.theme-warm h5,
body.theme-warm h6 { color: var(--color-cream); }

/* ------------------------------------------------------------
   2. NAVIGATION — translucent cream bar instead of black glass
   ------------------------------------------------------------ */
body.theme-warm .nav {
  background: rgba(244, 241, 234, 0.82);
  border-bottom: 1px solid rgba(169, 130, 106, 0.22);
  box-shadow: 0 2px 18px rgba(31, 43, 42, 0.04);
}
body.theme-warm .nav.scrolled {
  background: rgba(244, 241, 234, 0.95);
  border-bottom: 1px solid rgba(169, 130, 106, 0.25);
}
body.theme-warm .nav-link {
  color: #2B3A38;
  text-shadow: none;
}
body.theme-warm .nav-link:hover,
body.theme-warm .nav-link.active { color: var(--color-primary); }

/* Order Now pill */
body.theme-warm .nav-cta {
  border-radius: var(--border-radius-full);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-primary);
}
body.theme-warm .nav-mobile-toggle span { background: #2B3A38; }

/* ------------------------------------------------------------
   3. BUTTONS — pill-shaped, warm
   ------------------------------------------------------------ */
body.theme-warm .btn,
body.theme-warm .btn-primary,
body.theme-warm .btn-secondary,
body.theme-warm .location-btn,
body.theme-warm .nav-cta,
body.theme-warm .dishes-cta .btn-primary {
  border-radius: var(--border-radius-full);
}
body.theme-warm .btn-primary,
body.theme-warm .btn {
  color: var(--color-white);
  box-shadow: var(--shadow-glow-primary);
}
body.theme-warm .btn-secondary {
  color: #2B3A38;
  border: 1px solid rgba(169, 130, 106, 0.60);
  background: rgba(255, 255, 255, 0.4);
}
body.theme-warm .btn-secondary:hover {
  background: rgba(47, 95, 92, 0.10);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   4. HERO — keep LIGHT text over the food video, with a deep
   teal-ink overlay (the brand teal) for readability.
   ------------------------------------------------------------ */
body.theme-warm .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 40, 38, 0.30) 0%,
    rgba(18, 36, 34, 0.55) 45%,
    rgba(14, 28, 27, 0.76) 78%,
    rgba(244, 241, 234, 0.0) 100%
  );
}
/* Text stays light for contrast on the imagery */
body.theme-warm .hero-title .line-1 { color: #F2EEE6; }
body.theme-warm .hero-title .line-3 { color: #F7F4ED; }
body.theme-warm .hero-subtitle    { color: #E9E4DA; }
body.theme-warm .hero-title .line-2 { color: var(--jn-teal-mist); }
body.theme-warm .hero-badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #CFE3DF;
}
body.theme-warm .food-hero-scroll span { color: #E9E4DA; }

/* ------------------------------------------------------------
   5. SECTION SURFACES — alternate warm tones down the page,
   echoing the reference's multi-tone composition.
   ------------------------------------------------------------ */
body.theme-warm .locations        { background: #F4F1EA; }
body.theme-warm .story            { background: #EAE5DA; }
body.theme-warm .dishes           { background: #F4F1EA; }
body.theme-warm .faq              { background: #EFEBE2; }
body.theme-warm .find-us-section  { background: #F4F1EA; }

/* Neutralise the old dark decorative gradients/patterns */
body.theme-warm .story-pattern,
body.theme-warm .hero-glow { opacity: 0.35; mix-blend-mode: multiply; }
body.theme-warm .story::after { opacity: 0.4; }
/* the story ::before is the ripple edge (§8) — keep it solid */
body.theme-warm .story::before { opacity: 1; }

/* Section headers / labels */
body.theme-warm .section-label,
body.theme-warm .story-label { color: var(--color-primary); }
body.theme-warm .section-title,
body.theme-warm .section-subtitle,
body.theme-warm .story-title,
body.theme-warm .story-text { color: var(--color-cream); }
body.theme-warm .section-subtitle { color: var(--color-gray); }

/* ------------------------------------------------------------
   6. CARDS — rounded, soft-shadowed, light surfaces.
   Dish cards pick up rotating pastel tints like the reference.
   ------------------------------------------------------------ */
body.theme-warm .location-card,
body.theme-warm .dish-card,
body.theme-warm .faq-category {
  background: #FBFAF6;
  border: 1px solid rgba(169, 130, 106, 0.18);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
body.theme-warm .location-card:hover,
body.theme-warm .dish-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Brand tint rotation on the signature-dish cards (teal mist / copper blush / paper) */
body.theme-warm .dish-card:nth-child(3n+1) { background: #E6EEEC; }
body.theme-warm .dish-card:nth-child(3n+2) { background: #F3EAE2; }
body.theme-warm .dish-card:nth-child(3n+3) { background: #FBFAF6; }

body.theme-warm .location-name,
body.theme-warm .dish-name,
body.theme-warm .faq-category-title { color: var(--color-cream); }
body.theme-warm .dish-description,
body.theme-warm .location-info-item,
body.theme-warm .location-info-item span,
body.theme-warm .location-hours-row span { color: var(--color-gray); }
body.theme-warm .location-tag {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Location buttons: primary uses --color-cream for text (now dark) →
   force white on orange for contrast; give the secondary a visible border */
body.theme-warm .location-btn-primary {
  color: var(--color-white);
  border-color: var(--color-primary);
}
body.theme-warm .location-btn-primary:hover { color: var(--color-white); }
body.theme-warm .location-btn-secondary {
  color: #2B3A38;
  border: 1px solid rgba(169, 130, 106, 0.54);
}
body.theme-warm .location-btn-secondary:hover {
  background: rgba(47, 95, 92, 0.10);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* FAQ items */
body.theme-warm .faq-question { color: var(--color-cream); }
body.theme-warm .faq-answer,
body.theme-warm .faq-answer p { color: var(--color-gray); }
body.theme-warm .faq-item { border-color: rgba(169, 130, 106, 0.22); }

/* Rounded imagery inside cards */
body.theme-warm .location-image img,
body.theme-warm .dish-image img,
body.theme-warm .story-image img { border-radius: 0; }
body.theme-warm .story-image { border-radius: var(--border-radius-lg); overflow: hidden; }

/* ------------------------------------------------------------
   7. FOOTER — warm beige
   ------------------------------------------------------------ */
body.theme-warm .footer { background: #E4DED1; border-top: 1px solid rgba(169, 130, 106, 0.22); }
body.theme-warm .footer-description,
body.theme-warm .footer-link,
body.theme-warm .footer-location-info,
body.theme-warm .footer-location-info a,
body.theme-warm .footer-legal a { color: var(--color-gray); }
body.theme-warm .footer-column-title,
body.theme-warm .footer-location-name { color: var(--color-cream); }
body.theme-warm .footer-social-link { background: rgba(47, 95, 92, 0.12); color: var(--color-primary); }
body.theme-warm .footer-social-link:hover { background: var(--color-primary); color: var(--color-white); }

/* ============================================================
   8. ARCH & RIPPLE SECTION EDGES
   Each section draws a shaped top edge in its OWN background
   colour, rising over the section above. Two shapes alternate,
   both taken from the logo: a shallow ARCH (the doorway) and a
   RIPPLE bowl (the concentric lines), each traced by two fine
   copper hairlines. Pure CSS / inline SVG, no image files.
   ============================================================ */
body.theme-warm .locations,
body.theme-warm .story,
body.theme-warm .dishes,
body.theme-warm .faq,
body.theme-warm .find-us-section,
body.theme-warm .footer { position: relative; }

body.theme-warm .locations::before,
body.theme-warm .story::before,
body.theme-warm .dishes::before,
body.theme-warm .faq::before,
body.theme-warm .find-us-section::before,
body.theme-warm .footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  transform: translateY(-99%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 4;
}

/* LOCATIONS — arch */
body.theme-warm .locations::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q600,-12 1200,28' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,36 Q600,-4 1200,36' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V44 Q600,4 1200,44 V64 Z' fill='%23F4F1EA'/%3E%3C/svg%3E");
}
/* STORY — ripple */
body.theme-warm .story::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,6 Q600,58 1200,6' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,14 Q600,66 1200,14' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V22 Q600,74 1200,22 V64 Z' fill='%23EAE5DA'/%3E%3C/svg%3E");
}
/* DISHES — arch */
body.theme-warm .dishes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q600,-12 1200,28' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,36 Q600,-4 1200,36' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V44 Q600,4 1200,44 V64 Z' fill='%23F4F1EA'/%3E%3C/svg%3E");
}
/* FAQ — ripple */
body.theme-warm .faq::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,6 Q600,58 1200,6' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,14 Q600,66 1200,14' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V22 Q600,74 1200,22 V64 Z' fill='%23EFEBE2'/%3E%3C/svg%3E");
}
/* FIND-US — arch */
body.theme-warm .find-us-section::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q600,-12 1200,28' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,36 Q600,-4 1200,36' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V44 Q600,4 1200,44 V64 Z' fill='%23F4F1EA'/%3E%3C/svg%3E");
}
/* FOOTER — ripple */
body.theme-warm .footer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,6 Q600,58 1200,6' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,14 Q600,66 1200,14' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V22 Q600,74 1200,22 V64 Z' fill='%23E4DED1'/%3E%3C/svg%3E");
}

/* Give the sections a little extra top padding so the shaped
   edge never overlaps their headings */
body.theme-warm .locations,
body.theme-warm .story,
body.theme-warm .dishes,
body.theme-warm .faq,
body.theme-warm .find-us-section { padding-top: 2rem; }

/* ------------------------------------------------------------
   9. Small readability guards
   ------------------------------------------------------------ */
body.theme-warm .scroll-line { background: linear-gradient(to bottom, var(--color-primary), transparent); }
body.theme-warm a { color: inherit; }
body.theme-warm .location-info-item i,
body.theme-warm .dish-rating i { color: var(--color-primary); }

/* ============================================================
   10. SITE-WIDE GENERALISATION  (every .theme-warm page)
   Every interior page uses the same hero anatomy as the home
   hero: {prefix}-hero-title (.line-1/.line-2/.line-3), -subtitle,
   -overlay, -badge. Attribute selectors let one block protect
   them all — light text over imagery, teal-ink overlay.
   ============================================================ */
body.theme-warm [class$="-hero-overlay"] {
  background: linear-gradient(
    180deg,
    rgba(20, 40, 38, 0.30) 0%,
    rgba(18, 36, 34, 0.55) 45%,
    rgba(14, 28, 27, 0.76) 82%,
    rgba(244, 241, 234, 0.0) 100%
  );
}
/* Force every hero title line light over the imagery. Interior
   heroes use --color-cream (now dark) for the big title line, so
   they must all be lightened. Light titles also match the
   reference hero, which is cream — not orange. */
body.theme-warm [class$="-hero-title"],
body.theme-warm [class$="-hero-title"] .line-1,
body.theme-warm [class$="-hero-title"] .line-2,
body.theme-warm [class$="-hero-title"] .line-3,
body.theme-warm [class$="-hero-subtitle"],
body.theme-warm [class$="-hero-tagline"] { color: #F7F4ED; }
body.theme-warm [class$="-hero-title"] .line-1 { color: #F2EEE6; }
/* Light teal accent where an <em> marks it (readable over photos) */
body.theme-warm [class$="-hero-title"] em,
body.theme-warm .location-page-hero-tagline { color: var(--jn-teal-mist); }
/* Soft shadow so light hero text stays legible over any image */
body.theme-warm [class$="-hero-title"],
body.theme-warm [class$="-hero-subtitle"],
body.theme-warm [class$="-hero-tagline"] { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
body.theme-warm [class$="-hero-badge"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #CFE3DF;
}
body.theme-warm [class$="-hero-info-item"],
body.theme-warm [class$="-hero-info-item"] span,
body.theme-warm [class$="-hero-info-item"] a,
body.theme-warm [class$="-hero-scroll"] span { color: #E9E4DA; }
/* Hero secondary buttons over imagery stay light-bordered */
body.theme-warm [class$="-hero-btn"].secondary,
body.theme-warm [class$="-hero-ctas"] .btn-secondary {
  color: #F7F4ED;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   11. INTERIOR PAGES ONLY  (.theme-warm-auto)
   Generic alternating warm section tints + organic (non-straight)
   dividers, so pages whose sections we don't style individually
   still get the reference's multi-tone, torn/wave separation.
   Scoped away from the homepage so its bespoke layout is safe.
   `background-color` (not `background`) is used so any real
   background image on a section is preserved.
   ============================================================ */
body.theme-warm-auto section:not([class*="hero"]) { position: relative; }
body.theme-warm-auto section:not([class*="hero"]):nth-of-type(odd)  { background-color: #F4F1EA; }
body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even) { background-color: #EAE5DA; }

body.theme-warm-auto section:not([class*="hero"])::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  transform: translateY(-99%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 4;
}
/* odd sections (paper) — arch */
body.theme-warm-auto section:not([class*="hero"]):nth-of-type(odd)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q600,-12 1200,28' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,36 Q600,-4 1200,36' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V44 Q600,4 1200,44 V64 Z' fill='%23F4F1EA'/%3E%3C/svg%3E");
}
/* even sections (sand) — ripple */
body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0,6 Q600,58 1200,6' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.35'/%3E%3Cpath d='M0,14 Q600,66 1200,14' fill='none' stroke='%23A9826A' stroke-width='1' vector-effect='non-scaling-stroke' stroke-opacity='0.7'/%3E%3Cpath d='M0,64 V22 Q600,74 1200,22 V64 Z' fill='%23EAE5DA'/%3E%3C/svg%3E");
}
/* Extra top padding so shaped edges never overlap headings */
body.theme-warm-auto section:not([class*="hero"]) { padding-top: 2rem; }

/* Interior generic cards / panels that reused dark surfaces */
body.theme-warm-auto .section-title,
body.theme-warm-auto .section-subtitle { color: var(--color-cream); }
body.theme-warm-auto .section-subtitle { color: var(--color-gray); }

/* ============================================================
   12. MENU PAGES — the category bar + item cards were built for
   a dark background (white text, #2d2d2d sticky bar). Make the
   category navigation readable on the warm light theme.
   ============================================================ */
body.theme-warm .menu-button { color: #2B3A38; }
body.theme-warm .menu-button:hover { color: var(--color-primary); opacity: 1; }
body.theme-warm .active-button,
body.theme-warm .menu-button.active-button { color: var(--color-primary); }
/* Light sticky category bar with dark text (was #2d2d2d + white) */
body.theme-warm .menu-buttons.fixed-nav {
  background-color: rgba(244, 241, 234, 0.97);
  box-shadow: 0 2px 14px rgba(31, 43, 42, 0.07);
}
body.theme-warm .menu-buttons.fixed-nav .menu-button { color: #2B3A38; }
body.theme-warm .menu-buttons.fixed-nav .menu-button.active-button,
body.theme-warm .menu-buttons.fixed-nav .menu-button:hover { color: var(--color-primary); }
/* Mobile dropdown category list + search */
body.theme-warm .dropdown-content a { color: var(--color-cream); }
body.theme-warm .dropdown-content a:hover { background-color: var(--color-charcoal-light); }
body.theme-warm .mobile-menu-controls { box-shadow: 0 2px 10px rgba(31, 43, 42, 0.08); }
/* Menu item cards: rounder + soft shadow to match the theme */
body.theme-warm .menu-item {
  background: #FBFAF6;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(169, 130, 106, 0.18);
  box-shadow: var(--shadow-sm);
}
body.theme-warm .item-name { color: var(--color-cream); }
body.theme-warm .item-desc { color: var(--color-gray); }

/* ============================================================
   13. DISH IMAGES → ARCH FRAMES (site-wide)
   Echoes the arched doorway in the Cafe Junoon logo: every dish
   photo gets a round arch top, and a fine copper outline sits just
   outside it — like the logo's arch line around the "jn".
     • .dish-image        (homepage Signature Dishes)
     • .dish-card-image   (Our Food)
     • .special__card img (location landing + tags/places pages)
   The oversized top radii are scaled down by the browser to a
   true semicircle for whatever width the card has.
   ============================================================ */
body.theme-warm .dish-image,
body.theme-warm .dish-card-image,
body.theme-warm .special__card img {
  border-radius: 400px 400px var(--border-radius-sm) var(--border-radius-sm);
  outline: 1px solid var(--jn-line-strong);
  outline-offset: 5px;
  transition: outline-offset 0.45s ease, outline-color 0.45s ease, transform var(--transition-medium);
}
/* Float the arch inside its card */
body.theme-warm .dish-card { padding: 14px 14px 0; }
body.theme-warm .special__card img {
  display: block;
  margin: 14px auto 0;
  width: calc(100% - 28px);
}
/* Hover: the copper line opens out from the arch */
body.theme-warm .dish-card:hover .dish-image,
body.theme-warm .dish-card:hover .dish-card-image,
body.theme-warm .special__card:hover img {
  outline-offset: 8px;
  outline-color: var(--jn-copper);
}

/* ============================================================
   14. CARD BALANCE
   The CSS grid was stretching every card to the tallest one in
   its row, leaving ~100px of dead space inside shorter cards.
   Let each card size to its own content instead (align-items:
   start) so there's no empty gap, and tighten the star rating
   so it groups with the title.
   ============================================================ */
body.theme-warm .dishes-grid,
body.theme-warm .special__grid {
  align-items: start;
}
body.theme-warm .dish-card { padding: 14px 14px 16px; }
/* Kill the stray 96px bottom margin on the rating (from a later
   global .dish-rating rule) that created the mid-card void, and
   group the stars tightly under the image. */
body.theme-warm .dishes-grid .dish-rating {
  margin-bottom: 0;
  padding: 10px 0 2px;
}
body.theme-warm .dishes .dish-content { padding-top: 4px; }

/* ============================================================
   15. ANIMATION LAYER
   GPU-friendly (transform/opacity) motion for the whole site.
   All disabled under prefers-reduced-motion (media query at the
   end). JS behaviours live in theme-animations.js.
   ============================================================ */

/* ---- 15.1 Scroll reveal (universal) + stagger ------------- */
body.theme-warm .reveal {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* ---- 15.2 Copper hairline draws in under titles on reveal -- */
body.theme-warm .section-header .section-title,
body.theme-warm .story-content .story-title { position: relative; }
body.theme-warm .section-header .section-title::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin: 0.7rem auto 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--jn-copper), transparent);
  transition: width 0.9s ease 0.25s;
}
body.theme-warm .story-content .story-title::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  margin: 0.7rem 0 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--jn-copper), transparent);
  transition: width 0.9s ease 0.25s;
}
body.theme-warm .reveal.visible .section-title::after,
body.theme-warm .section-header.visible .section-title::after { width: min(180px, 60%); }
body.theme-warm .reveal.visible .story-title::after,
body.theme-warm .visible .story-title::after { width: 130px; }

/* ---- 15.3 Ripple arcs on dish-card hover ------------------
   theme-animations.js appends .chai-steam (3 spans) to each card;
   the spans draw as three concentric copper arches — the logo's
   ripple motif — that rise in just above the card on hover. */
body.theme-warm .dish-card,
body.theme-warm .special__card { overflow: visible; }
body.theme-warm .chai-steam {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 6;
}
body.theme-warm .dish-card:hover .chai-steam,
body.theme-warm .special__card:hover .chai-steam { opacity: 1; }
body.theme-warm .chai-steam span {
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 1px solid var(--jn-copper);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
body.theme-warm .chai-steam span:nth-child(1) { width: 16px; height: 8px; }
body.theme-warm .chai-steam span:nth-child(2) { width: 34px; height: 17px; transition-delay: 0.08s; }
body.theme-warm .chai-steam span:nth-child(3) { width: 52px; height: 26px; transition-delay: 0.16s; }
body.theme-warm .dish-card:hover .chai-steam span,
body.theme-warm .special__card:hover .chai-steam span { opacity: 1; transform: translate(-50%, 0); }

/* ---- 15.4 (retired) blob morph — arch frames stay still ---- */

/* ---- 15.5 Button glow-sweep + click pulse ----------------- */
body.theme-warm .btn-primary,
body.theme-warm .btn,
body.theme-warm .nav-cta,
body.theme-warm .location-btn-primary,
body.theme-warm [class$="-hero-btn"].primary {
  position: relative;
  overflow: hidden;
}
body.theme-warm .btn-primary::after,
body.theme-warm .btn::after,
body.theme-warm .nav-cta::after,
body.theme-warm .location-btn-primary::after,
body.theme-warm [class$="-hero-btn"].primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
body.theme-warm .btn-primary:hover::after,
body.theme-warm .btn:hover::after,
body.theme-warm .nav-cta:hover::after,
body.theme-warm .location-btn-primary:hover::after,
body.theme-warm [class$="-hero-btn"].primary:hover::after { left: 140%; }
body.theme-warm .btn-primary:active,
body.theme-warm .btn:active,
body.theme-warm .nav-cta:active,
body.theme-warm .location-btn-primary:active { transform: translateY(-1px) scale(0.97); }

/* ---- 15.6 Nav link hover lift ----------------------------- */
body.theme-warm .nav-link { transition: color 0.25s ease, transform 0.25s ease; }
body.theme-warm .nav-link:hover { transform: translateY(-2px); }
body.theme-warm .nav-cta { transition: transform 0.25s ease, box-shadow 0.25s ease; }
body.theme-warm .nav-cta:hover { transform: translateY(-2px) scale(1.03); }

/* ---- 15.7 Card lift + tilt base --------------------------- */
body.theme-warm .dish-card,
body.theme-warm .special__card,
body.theme-warm .location-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
}

/* ---- 15.8 Warm breathing hero glow ------------------------ */
body.theme-warm [class$="-hero-glow"],
body.theme-warm .hero-glow { animation: warmBreathe 7s ease-in-out infinite; }
@keyframes warmBreathe {
  0%,100% { opacity: 0.35; transform: translateX(-50%) scale(1); }
  50%     { opacity: 0.6;  transform: translateX(-50%) scale(1.08); }
}

/* ---- 15.9 Blur-up images ---------------------------------- */
body.theme-warm img.blur-load { filter: blur(14px); transform: scale(1.02); }
body.theme-warm img { transition: filter 0.6s ease, transform 0.6s ease; }

/* ---- 15.10 Arch page loader ------------------------------- */
body.theme-warm::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #F4F1EA;
  z-index: 99999;
  pointer-events: none;
  animation: loaderVeil 0.9s ease 0.35s forwards;
}
body.theme-warm::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 52px;
  margin: -26px 0 0 -20px;
  border: 1.5px solid var(--jn-copper);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  z-index: 100000;
  pointer-events: none;
  animation: loaderArch 1.2s ease-in-out infinite, loaderVeil 0.9s ease 0.35s forwards;
}
body.theme-warm.loaded::before,
body.theme-warm.loaded::after { opacity: 0 !important; visibility: hidden !important; animation: none !important; }
@keyframes loaderArch {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}
@keyframes loaderVeil { to { opacity: 0; visibility: hidden; } }

/* ---- 15.11 Reduced-motion: disable it all ----------------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-warm *,
  body.theme-warm *::before,
  body.theme-warm *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body.theme-warm .reveal { opacity: 1 !important; transform: none !important; }
  body.theme-warm::before,
  body.theme-warm::after { display: none !important; }
  body.theme-warm .chai-steam { display: none !important; }
  body.theme-warm .chai-particles,
  body.theme-warm .chai-progress { display: none !important; }
  body.theme-warm .nav-cta { animation: none !important; }
}

/* ============================================================
   16. PREDOMINANT / PUBLIC-FACING MOTION
   Bolder, always-visible animation: soft light motes in heroes,
   copper ripple rings in sections, a copper→teal scroll bar, a pulsing CTA,
   and stronger directional reveals. Still reduced-motion safe.
   ============================================================ */

/* ---- 16.1 Floating particles (hero motes + ripple rings) --- */
body.theme-warm .chai-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
/* section particles sit behind the cards/text (above the bg only) */
body.theme-warm .chai-particles--behind { z-index: 0; }
body.theme-warm .story > *:not(.chai-particles),
body.theme-warm .dishes > *:not(.chai-particles),
body.theme-warm .faq > *:not(.chai-particles),
body.theme-warm .find-us-section > *:not(.chai-particles),
body.theme-warm .signature-dishes > *:not(.chai-particles),
body.theme-warm .popular-dishes-section > *:not(.chai-particles),
body.theme-warm .location-dishes-section > *:not(.chai-particles),
body.theme-warm .about-story > *:not(.chai-particles),
body.theme-warm .about-philosophy > *:not(.chai-particles),
body.theme-warm .location-about-section > *:not(.chai-particles) { position: relative; z-index: 1; }
/* keep hero content/text above the particles */
body.theme-warm .hero-content,
body.theme-warm [class$="-hero-content"] { z-index: 10; }
body.theme-warm .chai-particle {
  position: absolute;
  bottom: -60px;
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp linear infinite;
}
/* soft light mote (heroes) */
body.theme-warm .chai-particle.steam {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6), rgba(255,255,255,0));
  filter: blur(4px);
}
/* ripple ring (copper hairline circle, from the logo's ripples) */
body.theme-warm .chai-particle.leaf {
  background: transparent;
  border: 1px solid rgba(169, 130, 106, 0.5);
  border-radius: 50%;
}
@keyframes floatUp {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.85; }
  50%  { transform: translate3d(24px, -52vh, 0) rotate(180deg); }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(-16px, -108vh, 0) rotate(340deg); opacity: 0; }
}

/* ---- 16.2 Scroll-progress bar (copper → teal) ------------- */
body.theme-warm .chai-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--jn-copper), var(--color-primary));
  box-shadow: none;
  z-index: 99998;
  pointer-events: none;
}

/* ---- 16.3 Pulsing Order Now CTA (draws the eye) ----------- */
body.theme-warm .nav-cta {
  animation: ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(47, 95, 92, 0.25); }
  50%      { box-shadow: 0 10px 34px rgba(47, 95, 92, 0.55); }
}
body.theme-warm .nav-cta:hover { animation-play-state: paused; }

/* ---- 16.4 Bolder directional scroll reveals --------------- */
body.theme-warm .reveal { transform: translateY(55px); }
body.theme-warm .reveal.from-left  { transform: translateX(-70px); }
body.theme-warm .reveal.from-right { transform: translateX(70px); }
body.theme-warm .reveal.zoom-in    { transform: scale(0.82); }
body.theme-warm .reveal.visible { transform: none !important; }

/* ---- 16.5 Stronger card hover lift ------------------------ */
body.theme-warm .dish-card:hover,
body.theme-warm .special__card:hover,
body.theme-warm .location-card:hover { box-shadow: 0 26px 60px rgba(31, 43, 42, 0.20); }

/* ---- 16.6 Bouncing scroll cue (inner line only, so we don't
   disturb the centered wrapper's transform) ----------------- */
body.theme-warm .scroll-line { animation: scrollBob 1.8s ease-in-out infinite; }
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.5; }
}

/* ============================================================
   17. STATIC SECTION EDGES
   The arch / ripple edges are drawn once at full width and stay
   still — calm, like the logo — rather than drifting like water.
   ============================================================ */
body.theme-warm .locations::before,
body.theme-warm .story::before,
body.theme-warm .dishes::before,
body.theme-warm .faq::before,
body.theme-warm .find-us-section::before,
body.theme-warm .footer::before,
body.theme-warm-auto section:not([class*="hero"])::before {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: none;
}

/* ============================================================
   18. GENERIC PARTICLE LAYERING
   Any section that receives a leaf layer marks itself so its
   real content floats above the particles (background/decor
   layers are excluded so they stay put).
   ============================================================ */
body.theme-warm .chai-has-particles > *:not(.chai-particles):not([class$="-bg"]):not([class*="pattern"]):not([class*="overlay"]):not([class*="glow"]) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   19. READABILITY / CONTRAST FIXES  (warm-theme scope gaps)
   theme-warm remaps tokens to dark-on-light, but several
   components used hard-coded dark overlay surfaces or near-white
   text that were never remapped — producing dark-on-dark or
   light-on-light text (e.g. the "Find Us" / contact location
   cards). These additive overrides restore WCAG-AA contrast
   while keeping the warm palette. No HTML / global.css /
   style.css changes required.
   ============================================================ */

/* ---- 19.1 Homepage "Find Us" location cards --------------- */
/* .find-us-card kept a hard-coded rgba(20,20,20,0.6) surface that
   composited to muddy grey on the light section; the flipped dark
   text then sat at ~1.3-2.7:1. Give it the light card surface used
   elsewhere so the dark text/icons read correctly. */
body.theme-warm .find-us-card {
  background: #FBFAF6;
  border: 1px solid rgba(169, 130, 106, 0.18);
}
body.theme-warm .find-us-name { color: var(--color-cream); }
body.theme-warm .find-us-info-item,
body.theme-warm .find-us-info-item span,
body.theme-warm .find-us-info-item a { color: var(--color-gray); }
body.theme-warm .find-us-info-item i { color: var(--color-primary); }
body.theme-warm .find-us-info-item a:hover { color: var(--primary-color-dark); }

/* ---- 19.2 Location "Visit Us" detail cards ---------------- */
/* location pages + tag pages: .detail-* used near-white text on
   the now-light section (~1.05:1, invisible). */
body.theme-warm .location-info-section .detail-card {
  background: #FBFAF6;
  border: 1px solid rgba(169, 130, 106, 0.22);
}
body.theme-warm .location-info-section .detail-content h4 { color: var(--primary-color-dark); }
body.theme-warm .location-info-section .detail-content p,
body.theme-warm .location-info-section .detail-content span { color: var(--color-gray); }
body.theme-warm .location-info-section .detail-content a { color: var(--primary-color-dark); }
body.theme-warm .location-info-section .detail-content a:hover { color: var(--color-primary); }

/* ---- 19.3 Location "About" body copy ---------------------- */
/* .location-about-text was near-white on light (invisible) on both
   location pages and the takeout tag page's list. */
body.theme-warm .location-about-text { color: var(--color-gray); }

/* ---- 19.4 Contact-us location cards ----------------------- */
/* .contact-location-card kept a dark rgba(20,20,20,0.6) surface and
   .contact-detail-item a used an undefined var (--color-cream-muted)
   → washed out. Light surface + explicit dark text. */
body.theme-warm .contact-location-card {
  background: #FBFAF6;
  border: 1px solid rgba(169, 130, 106, 0.22);
}
body.theme-warm .contact-card-title { color: var(--color-cream); }
body.theme-warm .contact-detail-item,
body.theme-warm .contact-detail-item span,
body.theme-warm .contact-hours span { color: var(--color-gray); }
body.theme-warm .contact-detail-item a { color: var(--color-cream-dark); }
body.theme-warm .contact-detail-item a:hover { color: var(--color-primary); }
body.theme-warm .contact-detail-item i { color: var(--color-primary); }

/* ---- 19.5 our-food "Sizzling Experience" review banner ---- */
/* This is a dark photo banner (dark overlay is intended), but the
   text tokens were flipped dark → invisible. Keep text LIGHT here. */
body.theme-warm .experience-quote p,
body.theme-warm .author-name { color: #F7F4ED; }
body.theme-warm .author-source { color: #E9E4DA; }

/* ---- 19.6 Cuisine tags (locations.html) ------------------- */
/* Light-tinted pills kept light text (esp. the green "Vegetarian"
   ~1.3:1). Deepen text + tint for AA. */
body.theme-warm .cuisine-tag {
  color: #234845;
  background: rgba(47, 95, 92, 0.14);
  border-color: rgba(47, 95, 92, 0.32);
}
body.theme-warm .cuisine-tag.pizza {
  color: #2E6B32;
  background: rgba(76, 175, 80, 0.16);
  border-color: rgba(76, 175, 80, 0.35);
}

/* ---- 19.7 Small uppercase accent labels ------------------- */
/* #155c54 on cream is ~3.5-4.4:1 — fine for large headings/icons
   (3:1) but under AA for small text. Deepen to --primary-color-dark
   (#124b45 ~4.9:1) for these small labels only. */
body.theme-warm .section-label,
body.theme-warm .story-label,
body.theme-warm .footer-location-name,
body.theme-warm .location-hours-title,
body.theme-warm .footer-credit a { color: var(--primary-color-dark); }

/* ---- 19.8 Menu item prices (menu pages) ------------------- */
/* --color-primary @0.9 opacity ~3:1; deepen + bold for AA. */
body.theme-warm .item-price {
  color: var(--primary-color-dark);
  opacity: 1;
  font-weight: 600;
}

/* ---- 19.9 our-food cuisine intro paragraph ---------------- */
/* --color-gray-light (#8C7862) ~3.96:1 on light → use --color-gray. */
body.theme-warm .cuisine-description > p { color: var(--color-gray); }

/* ---- 19.10 White hairline divider now invisible on light -- */
body.theme-warm .location-details { border-bottom-color: rgba(169, 130, 106, 0.27); }

/* ---- 19.11 Location / place-page hero: intro paragraph + primary button
   These heroes sit over a dark photo, but two pieces were never
   lightened: (a) the intro paragraph class ends in "-hero-text",
   which the §10 light-text group omitted, so it inherited the
   flipped dark body colour → faded on the image; (b)
   .location-page-hero-btn.primary used an undefined
   var(--color-obsidian) that fell back to dark body text on the
   orange button, and §10's [class$="-hero-btn"] selector could not
   match a multi-class button. Force hero paragraph light + primary
   hero button white (matches every other primary button). */
body.theme-warm [class$="-hero-text"] {
  color: #E9E4DA;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
body.theme-warm [class*="-hero-btn"].primary,
body.theme-warm [class*="-hero-btn"].primary span,
body.theme-warm [class*="-hero-btn"].primary i { color: var(--color-white); }
body.theme-warm [class*="-hero-btn"].primary:hover {
  background: var(--primary-color-dark);
  color: var(--color-white);
}
/* Robustly re-assert the light hero secondary button too (same
   multi-class matching problem as the primary). */
body.theme-warm [class*="-hero-btn"].secondary,
body.theme-warm [class*="-hero-btn"].secondary span,
body.theme-warm [class*="-hero-btn"].secondary i {
  color: #F7F4ED;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---- 19.12 locations.html "Questions? We're Here" CTA ------
   Dark photo banner (image + dark overlay preserved by
   theme-warm-auto), but the generic .section-title / .section-
   subtitle / .locations-social were flipped dark → invisible on the
   dark background, and .btn-secondary rendered a muddy translucent
   pill with dark text. Force light text + a light-on-dark secondary
   button within this section. */
body.theme-warm .locations-cta-section .section-title { color: #F7F4ED; }
body.theme-warm .locations-cta-section .section-title em { color: var(--jn-teal-mist); }
body.theme-warm .locations-cta-section .section-subtitle,
body.theme-warm .locations-cta-section .locations-social span { color: #E9E4DA; }
body.theme-warm .locations-cta-section .section-label { color: var(--color-primary-light); }
body.theme-warm .locations-cta-section .btn-secondary {
  color: #F7F4ED;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.10);
}
body.theme-warm .locations-cta-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #1F2B2A;
}

/* ---- 19.12 Dish detail pages (tags/dishes/*) --------------
   The dish-page hero is the ONLY hero on a light background
   (no dark photo/overlay), so §10's global light-hero text
   rules rendered its title, tagline, badge and secondary
   button light-on-light (invisible). The location card also
   kept a dark translucent panel with dark cream text → muddy,
   low contrast. Re-assert dark-on-light colours + a light
   location card for AA readability. */

/* Hero title line + tagline → dark, drop the dark glow */
body.theme-warm .dish-page-hero-title,
body.theme-warm .dish-page-hero-tagline {
  color: var(--color-cream);
  text-shadow: none;
}
body.theme-warm .dish-page-hero-tagline { color: var(--color-cream-dark); }
body.theme-warm .dish-page-hero-title em { color: var(--color-primary); }

/* Badge → orange pill (was faded tan on light) */
body.theme-warm .dish-page-hero-badge {
  background: rgba(47, 95, 92, 0.12);
  border-color: rgba(47, 95, 92, 0.30);
  color: var(--primary-color-dark);
}

/* "View Menu" secondary CTA → readable orange outline */
body.theme-warm .dish-page-hero-ctas .btn-secondary {
  color: var(--primary-color-dark);
  border-color: rgba(47, 95, 92, 0.45);
}
body.theme-warm .dish-page-hero-ctas .btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Location card → light warm surface so address / phone / hours
   read as dark-on-light instead of dark-on-muddy-grey */
body.theme-warm .dish-location-card {
  background: var(--color-charcoal);
  border-color: rgba(47, 95, 92, 0.20);
}
body.theme-warm .dish-location-name { color: var(--color-cream); }
body.theme-warm .dish-location-info-item,
body.theme-warm .dish-location-info-item span,
body.theme-warm .dish-location-info-item a { color: var(--color-cream-dark); }

/* ------------------------------------------------------------
   20. MOBILE NAV DROPDOWN — opaque warm panel
   The base mobile dropdown uses a dark surface (rgba(10,10,10,.98)),
   but the warm theme flips the nav-link text dark AND the navbar is a
   light translucent bar, so the dropdown rendered dark-on-dark / see-
   through (page content bled through). Force a solid cream panel with
   a border + drop shadow so the links read clearly on any device.
   Scoped to both theme variants (homepage + interior pages).
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.theme-warm .nav-links,
  body.theme-warm-auto .nav-links {
    background: var(--color-white);
    border-bottom: 1px solid rgba(169, 130, 106, 0.25);
    box-shadow: 0 14px 30px rgba(31, 43, 42, 0.20);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Ensure link text stays dark/legible on the light panel */
  body.theme-warm .nav-links .nav-link,
  body.theme-warm-auto .nav-links .nav-link { color: #2B3A38; }
  body.theme-warm .nav-links .nav-link:hover,
  body.theme-warm .nav-links .nav-link.active,
  body.theme-warm-auto .nav-links .nav-link:hover,
  body.theme-warm-auto .nav-links .nav-link.active { color: var(--color-primary); }
}

/* ------------------------------------------------------------
   21. ORDER-NOW MODAL — dark surface, keep text light
   The "Choose Your Location" modal is a deliberately dark panel
   (.order-modal background #1a1a1a). Its title, location names and
   the "View Menu" button use var(--color-cream), which the warm theme
   remaps to dark #3A2A1E — rendering dark-on-dark (invisible). Force
   light text back so the modal is legible on every page/theme variant.
   ------------------------------------------------------------ */
body.theme-warm .order-modal-header h2,
body.theme-warm-auto .order-modal-header h2,
body.theme-warm .order-location-name,
body.theme-warm-auto .order-location-name { color: #F7F4ED; }

body.theme-warm .order-location-actions .location-btn-primary,
body.theme-warm-auto .order-location-actions .location-btn-primary { color: var(--color-white); }

body.theme-warm .order-location-actions .location-btn-secondary,
body.theme-warm-auto .order-location-actions .location-btn-secondary {
  color: #E9E4DA;
  border-color: rgba(245, 240, 230, 0.35);
  background: transparent;
}
body.theme-warm .order-location-actions .location-btn-secondary:hover,
body.theme-warm-auto .order-location-actions .location-btn-secondary:hover {
  background: rgba(245, 240, 230, 0.10);
  border-color: #E9E4DA;
  color: #F7F4ED;
}