/* ============================================================
   CUSTOM — Per-store overrides for Template PT
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* Mumbai Bites: bands, top bar and CTA use the logo's maroon plate
   instead of the darkened copper the template derives by default. */
:root {
  --pt-deep: var(--brand-2);
}

/* ---------- Mumbai Bites: navbar matches the logo plate ----------
   Logo background is #4B0000 (edges fade to ~#330000), so the logo
   blends into the bar instead of sitting on white as a dark box. */
:root {
  --logo-plate: #4b0000;
  --logo-plate-edge: #330000;
  --nav-text: #f7e6d8;
  --nav-accent: #f2a36b;
}
.site-topline { background: var(--logo-plate-edge); }
.site-header,
.site-header.scrolled,
body:has(.hero-full) .site-header:not(.scrolled) {
  background: var(--logo-plate);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header.scrolled { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }

@media (min-width: 901px) {
  .site-nav a { color: var(--nav-text); }
  .site-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .site-nav a.active { background: rgba(255, 255, 255, 0.12); color: var(--nav-accent); }
}

/* mobile toggle + slide-down panel */
.nav-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.nav-toggle__bars span { background: #fff; }
@media (max-width: 900px) {
  .site-nav { background: var(--logo-plate); }
  .site-nav a { color: var(--nav-text); }
  .site-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .site-nav a.active { background: rgba(255, 255, 255, 0.12); color: var(--nav-accent); }
  .nav-extra { border-top-color: rgba(255, 255, 255, 0.12); }
  .site-nav .nav-extra .nav-extra__tel { color: var(--nav-text); }
}
@media (max-width: 768px) {
  .site-header,
  body:has(.hero-full) .site-header:not(.scrolled) { background: var(--logo-plate); }
}