/* ============================================================
   CUSTOM — Per-store overrides for Template AR
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   e.g. keep a full-colour logo on the dark header:
   .brand img, .foot-brand img { filter: none; }
   ============================================================ */

/* ---- Lutf Indo-Pak Cuisine rebrand ---- */
/* variable the template references but never defines (fallback was template #141414) */
:root {
  --ink-45: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* logo: 285x85 wordmark, sized by height (same heights as style.css) */
.brand img,
.foot-brand img,
.nav-overlay__brand img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* mobile hero crops: <picture> wrapper must fill the parallax box like the bare img did */
.page-title__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* contrast: brand #0876A8 is 3.46:1 on ink and 2.33:1 on navy, so accent text/lines
   inside dark surfaces use the logo blue (#189FD8, 5.8:1 on ink) or pale blue
   (#DDF4FA, 10.3:1 on navy). Scoped via --gold, which the template uses for accents. */
.band-dark,
.site-footer,
.page-title,
.map-band {
  --gold: #189FD8;
}
.band-olive,
.nav-overlay__panel,
.hero-card__panel {
  --gold: #DDF4FA;
}
/* keep white-icon/white-text hover fills on the accessible brand blue */
.band-dark .btn--fill:hover,
.band-olive .btn--fill:hover,
.nav-overlay__close:hover,
.nav-overlay__social a:hover,
.foot-social a:hover {
  background: var(--brand);
  --btn-bd: var(--brand);
}