/* ============================================================
   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 */
.nav-overlay__close:hover,
.nav-overlay__social a:hover,
.foot-social a:hover {
  background: var(--brand);
  --btn-bd: var(--brand);
}

/* ---- home hero art: dark slate backdrop flush top-left, round plate overlapping it ---- */
.hero-art {
  min-height: 0;
  height: auto;
  align-self: start;
}
.hero-art__stage {
  position: relative;
  width: 100%;
}
.hero-art__bg {
  display: block;
  width: 100%;
  height: auto;
}
/* the thali photo is cropped to a circle and given a gold rim, like a plate */
.hero-art .hero-art__plate {
  position: absolute;
  left: 38%;
  top: 33%;
  width: 63%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  border: clamp(4px, 0.45vw, 7px) solid var(--logo-yellow);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);
  z-index: 1;
  /* round iris instead of the template's square one; it opens past the rim
     so the shadow is not clipped */
  animation-name: plateOpen;
  clip-path: circle(0% at 50% 50%);
}
@keyframes plateOpen {
  to {
    clip-path: circle(75% at 50% 50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .hero-art__plate {
    clip-path: none;
  }
}
@media (max-width: 900px) {
  .hero-art {
    aspect-ratio: auto;
    padding-bottom: 12%;
  }
  .hero-art__stage {
    width: 82%;
  }
}

/* ---- buttons: solid logo yellow with ink text (outline .btn-line links unchanged) ---- */
:root {
  --logo-yellow: #f0d850; /* the brush stroke behind the Lutf wordmark */
  --logo-yellow-hi: #f6e47f;
  --logo-yellow-deep: #c9ab2c;
}
/* same selectors as style.css so these win on load order at equal specificity */
.btn,
.btn--cream,
.btn--fill,
.btn--dark,
.band-dark .btn:not(.btn--fill):not(.btn--dark),
.band-olive .btn:not(.btn--fill):not(.btn--dark),
.page-title .btn {
  --btn-c: var(--ink);
  --btn-bd: var(--logo-yellow);
  --btn-ghost: var(--logo-yellow-deep);
  background: var(--logo-yellow);
}
.btn:hover,
.btn--fill:hover,
.band-dark .btn--fill:hover,
.band-olive .btn--fill:hover {
  --btn-c: var(--ink);
  --btn-bd: var(--logo-yellow-hi);
  background: var(--logo-yellow-hi);
}

/* ---- our-food gallery wall: no captions, three equal columns with even gaps ---- */
@media (min-width: 901px) {
  .gallery-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gallery-wall figure:nth-child(n) {
    grid-column: span 1;
  }
  .gallery-wall .frame {
    height: auto;
    aspect-ratio: 1;
  }
}