/* ════════════════════════════════════════════════════════════════════
   The D's Cafe — /mira-road/ local landing pages.

   These pages are plain HTML (no React), so they load styles.css for the
   shared chrome — topbar, header, nav, buttons, footer, bottom nav — and
   this file for the article body those pages need and the app doesn't.
   ═══════════════════════════════════════════════════════════════════ */

.local-page {
  /* Was 860px centred, which left most of a laptop screen empty. The
     container is now as wide as the rest of the site and the READING
     column inside it is capped separately — wide container, comfortable
     line length, no wasted screen. */
  max-width: var(--read, 1240px); margin: 0 auto;
  padding: 0 var(--pad, 22px) 40px;
}

/* breadcrumb */
.crumbs { font-size: 12.5px; color: var(--body); padding: 18px 0 6px; }
.crumbs a { color: var(--gold-deep); }
.crumbs a:hover { text-decoration: underline; }
/* A breadcrumb is pressed, not read — it is how somebody gets back out
   of a page they landed on from a search result. At 12.5px with no
   padding the "Home" link was a 17px-tall target. */
.crumbs a { display: inline-block; padding: 8px 2px; }

.local-page .kicker {
  display: block; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin-top: 14px;
}
.local-page h1 {
  font-size: 32px; line-height: 1.25; margin: 6px 0 16px; color: var(--ink);
}
.local-page h2 {
  font-size: 21px; margin: 34px 0 10px; color: var(--ink);
  padding-top: 6px; border-top: 1px solid var(--line);
}
.local-page p { font-size: 14.5px; line-height: 1.8; margin-bottom: 14px; }
.local-page p a { color: var(--gold-deep); font-weight: 600; }
.local-page p a:hover { text-decoration: underline; }
.local-page b { color: var(--ink); }

/* the three buttons directly under the intro */
.local-cta {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--beige); border-radius: 14px; padding: 18px;
  margin: 24px 0 8px;
}

/* "what to order" list */
.picks { list-style: none; margin: 6px 0 10px; }
.picks li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 11px 2px; border-bottom: 1px dashed var(--line); font-size: 14.5px;
}
.picks li b { color: var(--ink); }
.picks .pk-price {
  color: var(--gold-deep); font-weight: 700; white-space: nowrap;
}
.picks .pk-why { color: var(--body); font-size: 13px; flex: 1 1 240px; }

/* FAQ — plain <details> so the answers are in the HTML for a crawler
   even when the accordion is closed */
.faq-static details {
  border-bottom: 1px solid var(--line);
}
.faq-static summary {
  cursor: pointer; list-style: none; padding: 15px 4px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-static summary::-webkit-details-marker { display: none; }
.faq-static summary::after {
  content: "+"; color: var(--gold-deep); font-size: 21px; line-height: 1;
}
.faq-static details[open] summary::after { content: "\2212"; }
.faq-static summary:hover { color: var(--gold-deep); }
.faq-static details p { padding: 0 4px 16px; font-size: 13.5px; margin: 0; }

/* find us box */
.find-box {
  background: var(--tile); border-radius: 14px; padding: 20px 22px; margin-top: 30px;
}
.find-box h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.find-box p { font-size: 13.5px; margin-bottom: 12px; }
.find-box a { color: var(--gold-deep); font-weight: 600; }

/* related links */
.related { margin-top: 34px; }
.related ul { list-style: none; margin-top: 8px; }
.related li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.related li a { color: var(--gold-deep); font-weight: 600; }
.related li a:hover { text-decoration: underline; }
/* The row has padding; the LINK inside it did not, so the pressable
   area was the 20px of text and not the 36px row it sits in. On a
   phone that is the difference between a tap and a near miss, on the
   second-most-used way people move around this site. */
@media (pointer: coarse) {
  .related li a { display: block; padding: 9px 0; }
}

/* hub page card grid */
.hub-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 10px;
}
.hub-card {
  display: block; background: var(--tile); border: 1px solid transparent;
  border-radius: 14px; padding: 20px; transition: all .15s;
}
.hub-card:hover {
  background: #fff; border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
}
.hub-card b { display: block; font-size: 16px; color: var(--ink); }
.hub-card span { display: block; font-size: 13px; color: var(--body); margin-top: 5px; line-height: 1.6; }

@media (max-width: 700px) {
  .local-page h1 { font-size: 25px; }
  .local-page h2 { font-size: 18.5px; }
  .local-cta { padding: 14px; }
  .local-cta .btn { flex: 1 1 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   v31 — server-rendered SEO pages: dish cards, area facts, related
   chips, hub tags. Same tokens as the rest of the site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── dish cards on a landing page ────────────────────────────────── */
/* Prices here come live from the kitchen menu, so these can never
   advertise a stale price or a dish that has been switched off. */
.dish-cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 8px 0 14px;
}
.dish-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.dish-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }
.dc-img {
  position: relative; aspect-ratio: 4 / 3; background: var(--tile);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.dc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-emoji { font-size: 56px; }
.dc-best {
  position: absolute; top: 8px; left: 8px; background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px;
}
.dc-body { padding: 13px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.dc-body h3 {
  font-size: 15px; margin: 0 0 5px; display: flex; align-items: center; gap: 7px;
  border: 0; padding: 0;
}
.dc-body p { font-size: 12.5px; color: var(--body); line-height: 1.55; margin: 0 0 10px; }
.dc-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.dc-foot b { font-size: 17px; color: var(--ink); }
.dc-foot .btn { padding: 7px 16px; font-size: 13px; }

/* ── area page facts strip ───────────────────────────────────────── */
.area-facts {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--beige); border-radius: 14px; padding: 16px 18px; margin: 20px 0 4px;
}
.area-facts > div { display: flex; flex-direction: column; gap: 2px; }
.area-facts span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--body); }
.area-facts b { font-size: 14px; color: var(--ink); }

/* ── related / internal-link chips ───────────────────────────────── */
.rel-h { font-size: 14px; margin: 18px 0 8px; color: var(--ink); font-weight: 600; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-chips a {
  display: inline-block; background: var(--tile); border: 1px solid transparent;
  border-radius: 50px; padding: 7px 15px; font-size: 13px; color: var(--ink2);
  font-weight: 500; transition: all .15s;
}
.rel-chips a:hover { background: #fff; border-color: var(--gold); color: var(--gold-deep); }

.hub-card .hub-tag {
  display: inline-block; margin-top: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 50px; padding: 2px 10px; font-size: 11px; color: var(--body);
}

/* the shared <h2> rule adds a top rule; headings inside boxes don't want it */
.find-box h2, .related h2 { border-top: 0; padding-top: 0; }
.related h2 { margin-top: 30px; }

@media (max-width: 560px) {
  .dish-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dc-body { padding: 10px; }
  .dc-body h3 { font-size: 13.5px; }
  .dc-body p { display: none; }
  .dc-foot b { font-size: 15px; }
  /* This is the Order button on a dish card — the one thing the page
     exists to get pressed. Squeezing it to 6px of padding to fit two
     cards across left it 31px tall, under the size a thumb reliably
     hits. The card can carry the extra 9px; a missed order cannot. */
  .dc-foot .btn { padding: 11px 12px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   v33 — dish pages, the fact sheet and the home page's facts band.

   The facts band is server-rendered by index.php at the end of the
   document and moved into position by app.js. It is styled as a real,
   visible part of the page because that is what it is: no hidden text,
   no second copy, nothing served to a crawler that a person cannot see.
   ═══════════════════════════════════════════════════════════════════ */

/* ── fact sheet ──────────────────────────────────────────────────── */
.fact-sheet { margin: 26px 0; }
.fact-sheet h2 { margin-top: 0; }
.fact-sheet dl {
  display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #fff;
}
.fact-sheet dl > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.fact-sheet dl > div:last-child { border-bottom: 0; }
.fact-sheet dt {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 700; color: var(--body);
}
.fact-sheet dd { font-size: 14px; color: var(--ink); margin: 0; }
@media (max-width: 560px) {
  .fact-sheet dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── home page facts band ────────────────────────────────────────── */
.home-facts {
  max-width: 1080px; margin: 40px auto 0; padding: 0 18px 30px;
}
.hf-block { margin-bottom: 34px; }
.hf-block h2 {
  font-size: 21px; font-weight: 700; color: var(--ink);
  margin-bottom: 10px; padding-top: 14px; border-top: 1px solid var(--line);
}
.hf-block h3 {
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--body); margin: 18px 0 8px;
}
.hf-block p { font-size: 14.5px; line-height: 1.85; color: var(--body); }
/* The entity statement. Set slightly larger than body copy because it
   is the first thing worth reading, not because it is decorative. */
.hf-entity { font-size: 15.5px !important; color: var(--ink2) !important; }
.hf-dishes {
  list-style: none; margin: 8px 0; padding: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.hf-dishes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 14px; color: var(--ink);
}
.hf-dishes a { color: var(--gold-deep); font-weight: 600; }
.hf-cat { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9a9a9a; }
.hf-contact p { font-size: 14px; }
.hf-contact a { color: var(--gold-deep); font-weight: 600; }

/* ── dish page ───────────────────────────────────────────────────── */
.dish-hero {
  display: grid; gap: 24px; align-items: start; margin: 14px 0 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.dh-media {
  border-radius: 18px; overflow: hidden; background: var(--tile);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.dh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo-ready: an honest placeholder until a real photograph exists.
   Never a stock image of somebody else's food. */
.dh-ph {
  font-size: 64px; opacity: .5;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 24% 26%, rgba(245, 171, 30, .28), transparent 56%),
    radial-gradient(circle at 76% 76%, rgba(109, 187, 90, .22), transparent 56%),
    linear-gradient(135deg, #fdf6e8, #f3f6ef);
}
.dish-page h1 { margin-top: 6px; }
.dh-lead { font-size: 16px !important; color: var(--ink2) !important; }
.dh-price { margin: 12px 0 4px; font-size: 15px; }
.dh-price b { font-size: 22px; color: var(--ink); }
.dh-off {
  margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--red);
  border: 1px solid var(--red); border-radius: 50px; padding: 3px 10px;
}
.ing-list {
  list-style: none; margin: 10px 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ing-list li {
  padding: 7px 14px; border-radius: 50px; background: var(--beige);
  border: 1px solid var(--line); font-size: 13px; color: var(--ink2);
}
.dc-more { margin: 4px 0 0; }
.dc-more a { font-size: 12.5px; font-weight: 600; color: var(--gold-deep); }

@media (max-width: 760px) {
  .dish-hero { grid-template-columns: 1fr; gap: 16px; }
  .home-facts { padding: 0 14px 24px; }
}


/* ══ v52 · use the width on a big screen ══════════════════════════════
   Prose stays at a readable measure; the space that used to be empty
   margin now carries the things a reader wants beside the text — where
   we are, what else to read — instead of below two screens of scroll. */
@media (min-width: 1060px) {
  .seo-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
  .seo-main { min-width: 0; }
  .seo-aside { position: sticky; top: 90px; }
  .seo-aside .contact-block { margin-top: 0; }
  .seo-aside .contact-block h2 { font-size: 19px; }
  /* Stacked in the narrow column rather than side by side. */
  .seo-aside .cb-grid { grid-template-columns: 1fr; gap: 10px; }
  .seo-aside .cb-cell { padding: 14px 16px; }
}


/* ── THE PRINTED-MENU LOOK, ON A WEB PAGE ────────────────────────────
   /menu/ carries the whole menu with live prices, because the page
   promised them and because "pizza price mira road" is a real search
   with a real answer.

   Two columns on a wide screen, one on a phone, and a leader line from
   the dish to the price — the shape people already know how to read
   from a paper menu, so nobody has to learn this page. */
.menu-price-list {
  columns: 2; column-gap: 34px; margin: 18px 0 8px;
}
@media (max-width: 720px) { .menu-price-list { columns: 1; } }

.mpl-sec {
  /* A section must not be split down the middle by the column break —
     half a category in each column reads as two categories. */
  break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 22px;
}
.mpl-sec h3 {
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.mpl-sec ul { list-style: none; margin: 0; padding: 0; }
.mpl-sec li {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 0; font-size: 14.5px; line-height: 1.4;
}
.mpl-sec a { color: var(--ink); text-decoration: none; }
.mpl-sec a:hover { color: var(--gold-deep); text-decoration: underline; }

/* The leader line. It does the work of a table without being one, so
   the layout survives a long dish name on a narrow phone. */
.mpl-dots {
  flex: 1 1 auto; min-width: 12px; align-self: center;
  border-bottom: 1px dotted rgba(35, 35, 35, .25);
  transform: translateY(-2px);
}
.mpl-sec b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The green and red square every Indian menu carries. It is a legal
   marking, not decoration, so it gets a real label for a screen
   reader rather than a colour alone. */
.mpl-dot {
  flex: none; width: 11px; height: 11px; border-radius: 2px;
  border: 1.5px solid currentColor; position: relative;
  align-self: center;
}
.mpl-dot::after {
  content: ""; position: absolute; inset: 2px;
  border-radius: 50%; background: currentColor;
}
.mpl-dot.veg { color: #1d9c5a; }
.mpl-dot.non { color: #c0392b; }