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

/* ---------- Home: find-us panel (map left, store details right) ---------- */

.home-visit {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem);
  background: var(--sand);
}

.home-visit .wrap {
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
}

.home-visit .visit-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0.8rem 0 1.2rem;
}

.home-visit .visit-actions {
  justify-content: flex-end;
  margin: 1.4rem 0 0;
}

@media (max-width: 900px) {
  .home-visit .wrap {
    grid-template-columns: 1fr;
  }

  .home-visit .visit-actions .btn,
  .home-visit .visit-actions .btn--green {
    flex: 1 1 100%;
  }
}

/* ---------- Home FAQ: internal links to the tags/ landing pages ----------
   Base style.css sets `a { color: inherit; text-decoration: none }`, so
   without this the dish, delivery, takeout and neighbourhood links inside
   the accordion are indistinguishable from body copy. These rules make
   every tags/ link read — and crawl — as a real internal link. */

.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--chili) 40%, transparent);
  border-radius: 0.2rem;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.qa .qa-body a:hover,
.qa .qa-body a:focus-visible {
  color: var(--chili);
  text-decoration-color: currentColor;
}

/* Long link lists: two/three readable columns instead of one tall stack. */
.qa .qa-body ul.qa-dishes,
.qa .qa-body ul.qa-areas {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.35rem 1.4rem;
}

.qa .qa-body ul.qa-dishes {
  grid-template-columns: 1fr;
}

.qa .qa-body ul.qa-dishes li {
  padding-left: 0.95rem;
  position: relative;
}

.qa .qa-body ul.qa-dishes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--chili);
}

.qa .qa-body ul.qa-areas {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-bottom: 0.9rem;
}

.qa .qa-body ul.qa-areas li {
  margin-bottom: 0;
}

.qa .qa-body ul.qa-areas a {
  display: block;
  padding: 0.3rem 0.1rem;
  font-weight: 500;
}

@media (max-width: 560px) {
  .qa .qa-body ul.qa-areas {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }
}

/* ---------- Home: founders / owners introduction ----------
   Two portrait cards (Chef Kamal Bajaj, Mona Bajaj) sitting between the
   story band and the maroon menu band. White background so the section
   alternates against `.story` (--sand) above it. Tokens only — nothing
   here hard-codes a colour, so re-theming still reaches this section. */

.founders {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--bg);
}

.founders .sec-head {
  align-items: flex-end;
}

.founders-intro {
  color: var(--muted);
  font-size: 1rem;
  max-width: 26rem;
  margin: 0;
}

/* One card per row. Two portraits side by side squeezes each photo into a
   column far narrower than its 4:5 source, and `object-fit: cover` then
   crops the faces off. Full-width cards give the photo a column close to
   its native ratio and give the bios room to read. */
.founder-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.founder-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: clamp(15rem, 30%, 23rem) minmax(0, 1fr);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.founder-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* second portrait sits on the right, so the pair reads as a spread */
.founder-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) clamp(15rem, 30%, 23rem);
}

.founder-card:nth-child(even) .founder-photo {
  order: 2;
}

.founder-photo {
  position: relative;
  background: var(--sand-2);
  min-height: 22rem;
}

/* fills the card height; both sources are 4:5 crops centred on the
   subject, so a slightly high object-position keeps faces in frame
   whatever the text does to the card's height */
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.founder-body {
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  display: flex;
  flex-direction: column;
  justify-content: center; /* balances the copy against the photo column */
  gap: 0.55rem;
}

.founder-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chili);
}

.founder-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.founder-body p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}

.founder-facts {
  list-style: none;
  padding: 0;
  margin: 0.55rem 0 0;
  display: grid;
  gap: 0.3rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.founder-facts li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
}

.founder-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--chili);
}

.founders-cta {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  text-align: center;
  color: var(--muted);
}

.founders-cta a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--chili) 40%, transparent);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.founders-cta a:hover,
.founders-cta a:focus-visible {
  color: var(--chili);
  text-decoration-color: currentColor;
}

/* photo above copy once the two columns stop being worth it */
@media (max-width: 720px) {
  .founders .sec-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .founders-intro {
    max-width: none;
  }

  .founder-card,
  .founder-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .founder-card:nth-child(even) .founder-photo {
    order: 0;
  }

  .founder-photo {
    min-height: 0;
  }

  .founder-photo img {
    aspect-ratio: 5 / 4;
    object-position: 50% 28%;
  }
}

/* ============================================================
   BLACK NAVBAR — header matches the logo plate (#1b1b1b) so the
   logo sits flush instead of inside a white chip.
   ============================================================ */

.site-header {
  background: #1b1b1b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* logo blends into the bar — no white plate behind it */
.brand img {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.site-nav a {
  color: rgba(255, 255, 255, 0.86);
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.site-nav a.active {
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: var(--gold);
}

/* hamburger reads on the dark bar */
.nav-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-toggle__bars span {
  background: #fff;
}

.nav-toggle.is-open {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
}

.nav-toggle.is-open .nav-toggle__bars span {
  background: var(--gold);
}

@media (max-width: 900px) {
  /* the slide-down panel is part of the bar */
  .site-nav {
    background: #1b1b1b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-nav a.active {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    color: var(--gold);
  }

  .nav-extra {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .site-nav .nav-extra .nav-extra__tel {
    color: rgba(255, 255, 255, 0.72);
  }

  .site-nav .nav-extra .nav-extra__tel:hover {
    color: #fff;
  }

  .nav-extra__tel i,
  .nav-extra__tel .ico {
    color: var(--gold);
  }
}