/* ============================================================
   RAJA CHETTINAD — "Warm" light theme  (site-wide)
   Cream/beige surfaces, dusty mauve hero, pastel cards, pill
   buttons, soft shadows, clean hairline section edges, and calm,
   minimal motion (§15).

   Layered over the dark base in global.css / style.css and scoped
   under `body.theme-warm` (every page). Interior pages also carry
   `theme-warm-auto` for generic section tinting (§11).

   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 {
  /* Surfaces (were dark → now warm light) */
  --color-black: #FBF7F0;          /* page background            */
  --color-charcoal: #F5ECDD;       /* cards / nav / footer        */
  --color-charcoal-light: #EFE3D0; /* raised / alt surfaces       */

  /* Text (were light-on-dark → now warm dark-on-light) */
  --color-cream: #3A2A1E;          /* headings & primary text     */
  --color-cream-dark: #5A4636;     /* secondary text              */
  --color-gray: #6E5B4B;           /* body copy                   */
  --color-gray-light: #8C7862;     /* muted labels / captions     */

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

  /* Accent — keep the orange identity, deepen slightly so it
     stays legible on cream */
  --color-primary: #8f2123;
  --color-primary-light: #c0392b;
  --color-ember: #8f2123;
  --color-flame: #c0392b;
  --main-color: #8f2123;
  --primary: #8f2123;
  --primaryLight: #c0392b;
  --secondary: #8f2123;
  --secondaryLight: #c0392b;
  --primary-color: #8f2123;
  --primary-color-light: #c0392b;
  --primary-color-dark: #6e1719;

  /* Legacy text tokens */
  --headerColor: #3A2A1E;
  --bodyTextColor: #6E5B4B;
  --bodyTextColorWhite: #3A2A1E;
  --text-dark: #3A2A1E;
  --text-light: #6E5B4B;

  /* Accent tints */
  --color-primary-5: rgba(143, 33, 35, 0.05);
  --color-primary-10: rgba(143, 33, 35, 0.10);
  --color-primary-15: rgba(143, 33, 35, 0.14);
  --color-primary-30: rgba(143, 33, 35, 0.28);

  /* Neutral low-alpha overlays (were light-on-dark → now
     warm-dark-on-light so borders/hover states stay visible) */
  --color-cream-10: rgba(90, 70, 54, 0.10);
  --color-cream-30: rgba(90, 70, 54, 0.22);
  --color-black-50: rgba(58, 42, 30, 0.45);
  --color-black-80: rgba(58, 42, 30, 0.72);

  /* Softer, warmer shadows */
  --shadow-sm: 0 3px 12px rgba(120, 84, 54, 0.10);
  --shadow-md: 0 8px 26px rgba(120, 84, 54, 0.14);
  --shadow-lg: 0 18px 48px rgba(120, 84, 54, 0.18);
  --shadow-glow-primary: 0 8px 26px rgba(143, 33, 35, 0.22);
  --shadow-glow-primary-light: 0 8px 26px rgba(143, 33, 35, 0.20);

  /* Rounder corners to match the reference's soft look */
  --border-radius-sm: 10px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --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(251, 247, 240, 0.82);
  border-bottom: 1px solid rgba(120, 84, 54, 0.12);
  box-shadow: 0 2px 18px rgba(120, 84, 54, 0.06);
}
body.theme-warm .nav.scrolled {
  background: rgba(251, 247, 240, 0.95);
  border-bottom: 1px solid rgba(120, 84, 54, 0.14);
}
body.theme-warm .nav-link {
  color: #4A3728;
  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: #4A3728; }

/* ------------------------------------------------------------
   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: #4A3728;
  border: 1px solid rgba(120, 84, 54, 0.35);
  background: rgba(255, 255, 255, 0.4);
}
body.theme-warm .btn-secondary:hover {
  background: rgba(143, 33, 35, 0.10);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   4. HERO — keep LIGHT text over the food video, but warm the
   overlay to the reference's dusty-mauve tone for readability.
   ------------------------------------------------------------ */
body.theme-warm .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(74, 48, 55, 0.30) 0%,
    rgba(60, 40, 46, 0.52) 45%,
    rgba(45, 30, 34, 0.72) 78%,
    rgba(251, 247, 240, 0.0) 100%
  );
}
/* Text stays light for contrast on the imagery */
body.theme-warm .hero-title .line-1 { color: #F3E4DC; }
body.theme-warm .hero-title .line-3 { color: #FBF3E8; }
body.theme-warm .hero-subtitle    { color: #F0E4D6; }
body.theme-warm .hero-badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
  color: #FBD9A6;
}
body.theme-warm .food-hero-scroll span { color: #F0E4D6; }

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

/* 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::before,
body.theme-warm .story::after { opacity: 0.4; }

/* 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: #FFFDF9;
  border: 1px solid rgba(120, 84, 54, 0.10);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* hover lift lives in §15.3 */

/* Pastel rotation on the signature-dish cards (pink / tan / lilac) */
body.theme-warm .dish-card:nth-child(3n+1) { background: #FBEDEA; }
body.theme-warm .dish-card:nth-child(3n+2) { background: #F7EEDD; }
body.theme-warm .dish-card:nth-child(3n+3) { background: #F1ECF3; }

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: #4A3728;
  border: 1px solid rgba(120, 84, 54, 0.30);
}
body.theme-warm .location-btn-secondary:hover {
  background: rgba(143, 33, 35, 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(120, 84, 54, 0.12); }

/* 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: #EFE1CE; border-top: 1px solid rgba(120,84,54,0.12); }
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(143, 33, 35, 0.12); color: var(--color-primary); }
body.theme-warm .footer-social-link:hover { background: var(--color-primary); color: var(--color-white); }

/* ============================================================
   8. CLEAN SECTION EDGES
   Sections are separated by their alternating warm tones plus a
   single static hairline that fades out at both ends (the same
   motif style.css already uses on .locations / .dishes). No shaped
   or moving dividers.
   ============================================================ */
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: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 84, 54, 0.22), transparent);
  opacity: 1;
  pointer-events: none;
}
body.theme-warm .story::after { opacity: 0.4; }

/* ------------------------------------------------------------
   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, warm mauve overlay.
   ============================================================ */
body.theme-warm [class$="-hero-overlay"] {
  background: linear-gradient(
    180deg,
    rgba(74, 48, 55, 0.30) 0%,
    rgba(60, 40, 46, 0.52) 45%,
    rgba(45, 30, 34, 0.72) 82%,
    rgba(251, 247, 240, 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: #FBF3E8; }
body.theme-warm [class$="-hero-title"] .line-1 { color: #F3E4DC; }
/* Keep an orange accent only where an <em> marks it */
body.theme-warm [class$="-hero-title"] em { color: var(--color-primary); }
/* 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: #FBD9A6;
}
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: #F0E4D6; }
/* Hero secondary buttons over imagery stay light-bordered */
body.theme-warm [class$="-hero-btn"].secondary,
body.theme-warm [class$="-hero-ctas"] .btn-secondary {
  color: #FBF3E8;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   11. INTERIOR PAGES ONLY  (.theme-warm-auto)
   Generic alternating warm section tints + the same clean hairline
   edge as the homepage (§8), so pages whose sections we don't style
   individually still get the multi-tone 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: #FBF7F0; }
body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even) { background-color: #F5E9DC; }

body.theme-warm-auto section:not([class*="hero"])::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 84, 54, 0.22), transparent);
  pointer-events: none;
}
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: #4A3728; }
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(251, 247, 240, 0.97);
  box-shadow: 0 2px 14px rgba(120, 84, 54, 0.10);
}
body.theme-warm .menu-buttons.fixed-nav .menu-button { color: #4A3728; }
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(120, 84, 54, 0.12); }
/* Menu item cards: rounder + soft shadow to match the theme */
body.theme-warm .menu-item {
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(120, 84, 54, 0.10);
  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 — soft rounded frames (site-wide)
   Covers all three markups:
     • .dish-image        (homepage Signature Dishes)
     • .dish-card-image   (Our Food)
     • .special__card img (location landing + tags/places pages)
   The image sits inset on the card surface with rounded corners;
   one consistent shape, no morphing.
   ============================================================ */
body.theme-warm .dish-image,
body.theme-warm .dish-card-image,
body.theme-warm .special__card img {
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
/* Inset the image 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);
}


/* ============================================================
   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. MOTION — calm & minimal
   Only three kinds of movement, all short and one-shot:
     • content fades up a little as it scrolls into view
     • hover states ease colour / shadow with a small lift
     • images that are still loading sharpen in (blur-up)
   Nothing loops, nothing follows the cursor, no page loader.
   JS behaviours live in theme-animations.js. Everything is
   switched off under prefers-reduced-motion.
   ============================================================ */
body.theme-warm {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 15.1 Scroll reveal: short fade-up -------------------- */
body.theme-warm .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
body.theme-warm .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- 15.2 Section-title underline (static accent) --------- */
body.theme-warm .section-header .section-title::after,
body.theme-warm .story-content .story-title::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
}
body.theme-warm .section-header .section-title::after {
  width: 64px;
  margin: 0.7rem auto 0;
  background: var(--color-primary);
}
body.theme-warm .story-content .story-title::after {
  width: 64px;
  margin: 0.7rem 0 0;
  background: var(--color-primary);
}

/* ---- 15.3 Hover: colour / shadow ease + small lift -------- */
body.theme-warm .dish-card,
body.theme-warm .special__card,
body.theme-warm .location-card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
body.theme-warm .dish-card:hover,
body.theme-warm .special__card:hover,
body.theme-warm .location-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
body.theme-warm .nav-link { transition: color 0.2s ease; }
body.theme-warm .btn,
body.theme-warm .btn-primary,
body.theme-warm .btn-secondary,
body.theme-warm .nav-cta,
body.theme-warm .location-btn {
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease;
}

/* ---- 15.4 Blur-up for images still loading ---------------- */
body.theme-warm img.blur-load { filter: blur(8px); }
body.theme-warm img { transition: filter 0.4s ease; }

/* ---- 15.5 Retired effects ----------------------------------
   Elements injected by older cached copies of theme-animations.js
   (particles, steam, scroll bar) stay hidden. */
body.theme-warm .chai-particles,
body.theme-warm .chai-steam,
body.theme-warm .chai-progress { display: none !important; }

/* ---- 15.6 Reduced motion: no movement at 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 .dish-card:hover,
  body.theme-warm .special__card:hover,
  body.theme-warm .location-card:hover { transform: none; }
}


/* ============================================================
   16. 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.
   ============================================================ */

/* ---- 16.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: #FFFDF9;
  border: 1px solid rgba(120, 84, 54, 0.10);
}
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); }

/* ---- 16.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: #FFFDF9;
  border: 1px solid rgba(120, 84, 54, 0.12);
}
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); }

/* ---- 16.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); }

/* ---- 16.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: #FFFDF9;
  border: 1px solid rgba(120, 84, 54, 0.12);
}
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); }

/* ---- 16.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: #FBF3E8; }
body.theme-warm .author-source { color: #F0E4D6; }

/* ---- 16.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: #5e1416;
  background: rgba(143, 33, 35, 0.14);
  border-color: rgba(143, 33, 35, 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);
}

/* ---- 16.7 Small uppercase accent labels ------------------- */
/* #8f2123 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
   (#6e1719 ~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); }

/* ---- 16.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;
}

/* ---- 16.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); }

/* ---- 16.10 White hairline divider now invisible on light -- */
body.theme-warm .location-details { border-bottom-color: rgba(120, 84, 54, 0.15); }

/* ---- 16.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: #F0E4D6;
  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: #FBF3E8;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---- 16.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: #FBF3E8; }
body.theme-warm .locations-cta-section .section-title em { color: var(--color-primary-light); }
body.theme-warm .locations-cta-section .section-subtitle,
body.theme-warm .locations-cta-section .locations-social span { color: #F0E4D6; }
body.theme-warm .locations-cta-section .section-label { color: var(--color-primary-light); }
body.theme-warm .locations-cta-section .btn-secondary {
  color: #FBF3E8;
  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: #3A2A1E;
}

/* ---- 16.13 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); }

/* Badge → orange pill (was faded tan on light) */
body.theme-warm .dish-page-hero-badge {
  background: rgba(143, 33, 35, 0.12);
  border-color: rgba(143, 33, 35, 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(143, 33, 35, 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(143, 33, 35, 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); }

/* ------------------------------------------------------------
   17. 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(120, 84, 54, 0.14);
    box-shadow: 0 14px 30px rgba(58, 42, 30, 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: #4A3728; }
  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); }
}

/* ------------------------------------------------------------
   18. 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: #FBF3E8; }

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: #F0E4D6;
  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: #F0E4D6;
  color: #FBF3E8;
}