/* Vegetarian & Jain Food page (/vegetarian-food-vancouver/).
   Plain, hand-written CSS for this page only. The header and footer still use /assets/site.css.
   Everything is scoped under .food so nothing leaks into the shared header and footer. */

.food {
  --ink: #1f1c18;
  --muted: #5c5953;
  --paper: #f8f3ea;
  --card: #fffdf9;
  --line: #e4dccb;
  --line-strong: #cfc4ae;
  --green: #128144;
  --green-deep: #0d4a2a;
  --night: #08140f;
  --gold: #eaa420;
  --gold-deep: #8a5a00;
  --gold-soft: #fbefd6;
  --kesar: #b03a24;
  --kesar-soft: #fbebe6;
  --blue: #1729a4;
  --blue-soft: #e8eaf6;
  --serif: 'Quattrocento', Georgia, serif;
  --sans: 'Quattrocento Sans', system-ui, sans-serif;
  --caps: 'Cinzel', 'Times New Roman', serif;
  --wrap: 1240px;
  /* Faint paper grain used on the light sections */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
}
.food *, .food *::before, .food *::after { box-sizing: border-box; }
.food .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.food .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.food a:focus-visible, .food button:focus-visible, .food input:focus-visible, .food select:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}

/* ---------------------------------------------------------------- buttons */
.food .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 3px;
  font: 700 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  transition: background-color .15s, color .15s, transform .15s;
}
.food .btn:hover { transform: translateY(-1px); }
.food .btn--gold { background: var(--gold); color: var(--ink); }
.food .btn--gold:hover { background: #f3b43a; }
.food .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.food .btn--ghost:hover { background: rgba(255,255,255,.1); }
.food .btn--green { background: var(--green); color: #fff; }
.food .btn--green:hover { background: #0e6a38; }
.food .btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.food .btn--line:hover { background: rgba(31,28,24,.05); }
.food .btn:focus-visible { outline-color: #fff; }
.food .postcard .btn:focus-visible, .food .list .btn:focus-visible { outline-color: var(--blue); }

/* ---------------------------------------------------------------- hero: satellite map with pins */
.fh {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 72vh, 720px);
  background: var(--night); color: #fff;
  display: flex; align-items: center;
}
.fh-map { position: absolute; inset: 0; z-index: -2; }
.fh-map img, .fh-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh-map img { object-fit: cover; object-position: center; max-width: none; }
.fh::before { /* the fade that lets the headline sit over the water */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,20,15,.97) 0%, rgba(8,20,15,.9) 26%, rgba(8,20,15,.45) 48%, rgba(8,20,15,0) 66%),
    linear-gradient(0deg, rgba(8,20,15,.75) 0%, rgba(8,20,15,0) 22%),
    linear-gradient(180deg, rgba(8,20,15,.55) 0%, rgba(8,20,15,0) 14%);
}
.fh .wrap { width: 100%; padding-top: 72px; padding-bottom: 88px; pointer-events: none; }
.fh-copy { max-width: 540px; pointer-events: auto; }
.fh-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font: 700 13px/1 var(--caps); letter-spacing: .2em; color: var(--gold);
}
.fh-eyebrow::after { content: ''; width: 56px; height: 1px; background: rgba(234,164,32,.6); }
.fh h1 {
  margin: 0; font: 400 clamp(44px, 5.6vw, 78px)/1.02 var(--serif); letter-spacing: -.02em;
  text-wrap: balance;
}
.fh h1 em { font-style: normal; color: var(--gold); }
.fh-lead { margin: 24px 0 0; max-width: 470px; font-size: 19px; line-height: 30px; color: rgba(255,255,255,.82); }
.fh-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fh-credit {
  position: absolute; right: 14px; bottom: 10px; margin: 0;
  font-size: 11px; line-height: 14px; color: rgba(255,255,255,.6);
}
.fh-credit a { color: inherit; }

/* pins drop in one after another */
.pin-in { transform-box: fill-box; transform-origin: 50% 100%; animation: pin-drop .55s cubic-bezier(.3,1.5,.6,1) both; animation-delay: var(--d, 0s); }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-60px) scale(.7); } to { opacity: 1; transform: none; } }
.pin-s { transform: scale(var(--pin, 1)); }
.fh-map .city text {
  font-family: var(--caps); font-weight: 700; font-size: 25px; letter-spacing: .14em;
  fill: #fff; paint-order: stroke; stroke: rgba(8,20,15,.75); stroke-width: 6px; stroke-linejoin: round;
}
.fh-map .city:hover text, .fh-map .city:focus text { fill: var(--gold); }
.fh-map .city:focus { outline: none; }
.fh-map .city:focus-visible text { text-decoration: underline; }

/* Phones, tablets and small laptops: the map sits above the headline instead of behind it */
@media (max-width: 1279px) {
  .fh { display: block; min-height: 0; }
  .fh::before { display: none; }
  .fh-map { --mh: 460px; position: relative; inset: auto; z-index: 0; height: var(--mh); overflow: hidden; }
  .fh .wrap { padding-top: 8px; padding-bottom: 48px; }
  .fh-credit { position: static; padding: 0 24px 18px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .fh-map { --mh: 520px; } }
/* Phones: zoom in so Vancouver to Surrey fills the width (1450 = the map x placed in the middle) */
@media (max-width: 767px) {
  .fh-map { --mh: max(360px, 58vw); }
  .fh-map img, .fh-map svg { inset: auto; top: 0; height: 100%; width: calc(var(--mh) * 2400 / 1087); left: calc(50% - var(--mh) * 1450 / 1087); }
  .fh-map img { object-fit: fill; }
  .fh-map .city--minor { display: none; }
  .fh-map::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,20,15,.5) 0%, rgba(8,20,15,0) 16%, rgba(8,20,15,0) 62%, var(--night) 100%);
  }
  .fh-map { --pin: 1.5; }
  .fh-map .city text { font-size: 40px; stroke-width: 9px; }
  .fh .wrap { padding-top: 4px; padding-bottom: 36px; }
  .fh-lead { font-size: 18px; line-height: 28px; }
}

/* ---------------------------------------------------------------- filter bar (pinned) */
.ff {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250,246,238,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(31,28,24,.06);
}
.ff .wrap { padding-top: 12px; padding-bottom: 10px; }
.ff form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ff-field { position: relative; min-width: 0; }
.ff-search { flex: 1 1 55%; }
.ff-select { flex: 1 1 calc(50% - 4px); }
.ff input, .ff select {
  width: 100%; height: 46px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 3px; background: #fff;
  font: 400 16px/1 var(--sans); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.ff input { padding: 0 12px 0 40px; }
.ff input::placeholder { color: var(--muted); }
.ff select { padding: 0 36px 0 12px; cursor: pointer; }
.ff input:hover, .ff select:hover { border-color: var(--ink); }
.ff-field > svg { position: absolute; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.ff-search > svg { left: 13px; }
.ff-select > svg { right: 12px; }
.ff-jain {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 14px; border: 1.5px solid var(--gold); border-radius: 3px;
  background: #fff; color: var(--gold-deep); font: 700 16px/1 var(--sans); cursor: pointer;
}
.ff-jain:hover { background: var(--gold-soft); }
.ff-jain[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.ff-jain svg { width: 20px; height: 20px; }
.ff-jain .long { display: none; }
.ff-status { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; font-size: 15px; line-height: 20px; }
.ff-status p { margin: 0; color: var(--muted); }
.ff-status b { color: var(--ink); }
.ff-clear { border: 0; background: none; padding: 6px 0; margin: -6px 0; font: 700 15px/20px var(--sans); color: var(--blue); cursor: pointer; }
.ff-clear:hover { text-decoration: underline; }
.ff-clear[hidden] { display: none; }
@media (min-width: 640px) { .ff-jain .long { display: inline; } }
@media (min-width: 768px) {
  .ff form { flex-wrap: nowrap; gap: 12px; align-items: center; }
  .ff-search { order: 1; flex: 1 1 auto; }
  .ff-select { order: 2; flex: 0 0 180px; }
  .ff-jain { order: 3; }
  .ff-jain .long { display: none; }
}
@media (min-width: 1024px) {
  .ff-select { flex-basis: 220px; }
  .ff-jain .long { display: inline; }
}

/* ---------------------------------------------------------------- the list */
.list { background: var(--paper) var(--grain); padding: 44px 0 96px; }
.cat + .cat { margin-top: 72px; }
.cat[hidden], .pc-item[hidden], .list-empty[hidden] { display: none; }
.cat { scroll-margin-top: 150px; }
.cat-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 6px 20px;
  padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 3px double var(--c, var(--gold));
}
.cat-icon {
  grid-row: span 2; align-self: center;
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  color: var(--c, var(--gold-deep)); background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 6px var(--paper), 0 0 0 7px var(--line);
}
.cat-icon svg { width: 40px; height: 40px; }
.cat-num { margin: 0; font: 700 13px/1 var(--caps); letter-spacing: .2em; color: var(--c, var(--gold-deep)); }
.cat h2 { margin: 0; font: 400 clamp(32px, 3.4vw, 44px)/1.05 var(--serif); letter-spacing: -.015em; grid-column: 2; }
.cat-desc { grid-column: 2; margin: 2px 0 0; font-size: 17px; line-height: 25px; color: var(--muted); }
.cat-count { grid-column: 3; grid-row: 1 / span 2; align-self: end; margin: 0; font: 700 13px/1 var(--caps); letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
.cat-head .cat-num { grid-column: 2; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 639px) {
  .cat-head { grid-template-columns: auto 1fr; }
  .cat-icon { width: 56px; height: 56px; }
  .cat-icon svg { width: 32px; height: 32px; }
  .cat-count { grid-column: 2; grid-row: auto; margin-top: 6px; }
}

/* place card: a small ticket, with a perforated tear line and a gold stamp for Jain food */
.pc {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(31,28,24,.04), 0 10px 24px -18px rgba(31,28,24,.35);
  transition: transform .18s, box-shadow .18s;
}
.pc:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(31,28,24,.04), 0 18px 32px -18px rgba(31,28,24,.45); }
.pc::before { /* category colour along the top edge */
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: 4px 4px 0 0; background: var(--c, var(--gold));
}
.pc-top { padding: 22px 22px 16px; }
.pc--jain .pc-top { padding-right: 96px; }
.pc-cuisine { margin: 0 0 6px; font: 700 12px/16px var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--gold-deep)); }
.pc-name { margin: 0; font: 400 23px/28px var(--serif); color: var(--ink); }
.pc-branch { display: block; margin-top: 3px; font: 400 15px/20px var(--sans); color: var(--muted); }
.pc-perf { position: relative; height: 0; border-top: 1.5px dashed var(--line-strong); margin: 0 14px; }
.pc-perf::before, .pc-perf::after {
  content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.pc-perf::before { left: -23px; clip-path: inset(0 0 0 50%); }
.pc-perf::after { right: -23px; clip-path: inset(0 50% 0 0); }
.pc-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 16px 22px 18px; }
.pc-addr { display: flex; gap: 10px; margin: 0; font-size: 16px; line-height: 23px; }
.pc-addr svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.pc-addr strong { font-weight: 700; }
.pc-addr .soft { color: var(--muted); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pc-tags li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 2px; font: 700 13px/16px var(--sans); }
.pc-tags svg { width: 15px; height: 15px; }
.tag-vegan { background: #e3f0e8; color: #0e6a38; }
.tag-truck { background: var(--blue-soft); color: var(--blue); }
.pc-note { margin: 0; padding: 8px 10px; border-left: 3px solid var(--kesar); background: var(--kesar-soft); font-size: 14px; line-height: 20px; color: var(--kesar); }
.pc-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: auto 0 0; padding-top: 2px; }
.pc-links a { display: inline-block; padding: 8px 0; margin: -8px 0; font: 700 16px/24px var(--sans); color: var(--blue); text-decoration: none; }
.pc-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.stamp {
  position: absolute; top: 14px; right: 14px; width: 74px; height: 74px;
  color: var(--gold-deep); transform: rotate(-12deg);
}
.stamp svg { width: 100%; height: 100%; }
.stamp text { font: 700 10.5px var(--caps); letter-spacing: .16em; fill: currentColor; }
.pc--jain { border-color: #e9cf96; }

.list-empty { padding: 56px 24px; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 4px; background: var(--card); }
.list-empty h2 { margin: 0; font: 400 28px/1.2 var(--serif); }
.list-empty p { margin: 10px 0 22px; font-size: 17px; line-height: 27px; color: var(--muted); }
.list-empty .btn { border: 0; cursor: pointer; }

/* ---------------------------------------------------------------- tips (dark band) */
.tips { background: var(--green-deep); color: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.tips::before { /* faint diamond lattice, the same motif as the Diwali pages */
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z' fill='none' stroke='%23E2BC62' stroke-opacity='.12'/%3E%3C/svg%3E");
}
.tips .wrap { position: relative; display: grid; gap: 48px; }
.tips-eyebrow { margin: 0 0 18px; font: 700 13px/1 var(--caps); letter-spacing: .2em; color: var(--gold); }
.tips h2 { margin: 0; font: 400 clamp(34px, 3.6vw, 48px)/1.08 var(--serif); letter-spacing: -.015em; }
.tips-lead { margin: 18px 0 0; font-size: 19px; line-height: 30px; color: #cfe2d6; max-width: 420px; }
.tips ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: tip; }
.tips li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.16); counter-increment: tip; }
.tips li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.tips li::before { content: counter(tip, decimal-leading-zero); font: 500 34px/1 var(--caps); color: var(--gold); padding-top: 2px; }
.tips h3 { margin: 0; font: 400 24px/30px var(--serif); }
.tips li p { margin: 6px 0 0; font-size: 17px; line-height: 27px; color: #cfe2d6; }
@media (min-width: 1024px) { .tips .wrap { grid-template-columns: 1fr 1.35fr; gap: 80px; } }

/* ---------------------------------------------------------------- closing: a postcard with an airmail edge */
.close { background: var(--paper) var(--grain); padding: 80px 0 96px; }
.postcard {
  position: relative; display: grid; gap: 32px; align-items: center;
  padding: 44px 32px; background: var(--card);
  border: 10px solid transparent; border-radius: 4px;
  border-image: repeating-linear-gradient(135deg, var(--kesar) 0 14px, var(--card) 14px 24px, var(--blue) 24px 38px, var(--card) 38px 48px) 10;
  box-shadow: 0 24px 40px -28px rgba(31,28,24,.45);
}
.postcard-copy .postcard-eyebrow { margin: 0 0 14px; font: 700 13px/1 var(--caps); letter-spacing: .2em; color: var(--kesar); }
.postcard h2 { margin: 0; font: 400 clamp(32px, 3.4vw, 44px)/1.1 var(--serif); letter-spacing: -.015em; }
.postcard-copy p { margin: 14px 0 0; font-size: 18px; line-height: 29px; color: var(--muted); max-width: 560px; }
.postcard-copy a { color: var(--blue); font-weight: 700; text-underline-offset: 4px; }
.postcard-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.postcard-stamp { display: none; }
@media (min-width: 900px) {
  .postcard { grid-template-columns: 1fr auto; padding: 56px 64px; gap: 56px; }
  .postcard-side { align-items: center; padding-left: 48px; border-left: 1.5px dashed var(--line-strong); }
  .postcard-stamp { display: block; width: 96px; height: 96px; margin-bottom: 6px; color: var(--kesar); transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pin-in { animation: none; }
  .food .btn, .pc { transition: none; }
  .food .btn:hover, .pc:hover { transform: none; }
}

/* The filter bar pins to the top on this page, so the site header scrolls away normally here */
body > header.relative { position: relative; }