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

/* Inline links on the legacy SEO pages need to look like links —
   style.css only covers .section__description / .faq__answer. */
.faq-answer a,
.delivery-note a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* Cross-links inside the neighbourhood and dish cards — tinted,
   underlined only on hover so the card lists stay readable. */
.delivery-area-card li a,
.dish-description a {
  color: var(--chili-dark);
  font-weight: 600;
}

.delivery-area-card li a:hover,
.dish-description a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   DISH IMAGE CARDS — one sizing rule for every card that carries a
   dish photo, so the rows line up whichever page they sit on.

   Every file in assets/popular-dishes/ is a 1:1 square (1024x1024),
   so the frame is square too: object-fit then has nothing to crop
   and the photos keep their full plating. The old 4/3 frame was
   slicing a quarter off the top and bottom of every dish.

   height:auto is required — without it the img width/height
   attributes win as presentational hints and aspect-ratio is
   ignored, which is what stretched the hero photos out of shape.
   ------------------------------------------------------------ */
.plate img,
.related-dish-card img,
.bd-img img,
.dish-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Same trap, everywhere else style.css sizes an image. An img's
   width/height attributes are presentational hints: they lose to any
   author `height` declaration, but where style.css sets only `width`
   the height attribute comes through as a literal pixel height. The
   element then goes off-ratio and — with no object-fit to fall back
   on — the picture is stretched to fill it.

   So every rule in style.css that controls an image's width has to
   hand height back to auto. Two groups:
     - frames with an aspect-ratio, where the hint silently beats it
     - plain width:100% blocks, where the hint sets the height outright
   Miss one and adding honest width/height attributes for CLS is what
   breaks the layout. */
.story-collage .img-a,
.story-collage .img-b,
.page-hero--split .ph-img img,
.snap-grid img,
.gallery-wall img,
.explore__image img,
.header__image img,
#gallery-header .cs-picture img,
.foot-brand img,
.value-card .v-ico img {
  height: auto;
}

/* ------------------------------------------------------------
   ABOUT HERO — about.html now uses the same .hero-full treatment as
   the home page: the 3:1 panorama sits behind the copy as a
   full-bleed cover background, under style.css's scrim. On a tall
   hero box a 3:1 source crops hard to the centre, so pull the focus
   down onto the table of dishes instead of the wall above it.
   ------------------------------------------------------------ */
#about-top .hero-full__bg img {
  object-position: 50% 72%;
}

/* Featured dish grids run three across on desktop, so six cards
   land as a clean 3 + 3 instead of the ragged 4 + 2 that
   auto-fit produced at wide viewports. */
.related-dishes-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/* Stretch each card to the tallest in its row so the image tops and
   the "Order online" feet both sit on a single baseline. */
.related-dishes-grid > .plate,
.related-dishes-grid > .related-dish-card {
  height: 100%;
  margin: 0;
}

@media (max-width: 900px) {
  .related-dishes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-dishes-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   VISIT BOX — Google map on the left, address / phone / hours
   on the right, with the action buttons pinned to the bottom
   corner. Used by the city + cuisine landing page.
   ------------------------------------------------------------ */

/* Home page "Find us" band — matches the vertical rhythm of the
   other home sections so the box does not collide with the CTA. */
.visit {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: var(--sand);
}

.visit-box {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-top: 2rem;
}

.visit-box__map {
  position: relative;
  min-height: 430px;
  background: var(--sand);
}

.visit-box__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-box__info {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-box__info h3 {
  font-size: 1.35rem;
}

.visit-box__item h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.visit-box__item address,
.visit-box__item p {
  font-style: normal;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}

.visit-box__item a {
  color: var(--chili-dark);
  font-weight: 700;
}

.visit-box__item a:hover {
  text-decoration: underline;
}

.visit-box__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.visit-box__hours li:last-child {
  border-bottom: none;
}

.visit-box__hours li span:last-child {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.visit-box__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

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

  .visit-box__map {
    min-height: 300px;
  }

  .visit-box__actions {
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   DISH PAGES — the "Ways to enjoy" two-up cards replace the old
   ingredients / nutrition pair, and the shared FAQ block sits on
   the white canvas instead of its own sand band.
   ------------------------------------------------------------ */

.dish-info-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.6rem;
}

.dish-info-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.65rem;
  margin-bottom: 0.9rem;
}

.dish-info-card ul {
  list-style: none;
  padding: 0;
}

.dish-info-card li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.3rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.dish-info-card li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chili);
}

.dish-faq {
  background: transparent;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

/* questions are real headings on dish pages — keep the summary look */
.qa summary h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0;
}

/* ------------------------------------------------------------
   TAG PAGES — dish cards that link through to a dish page.
   The card heading is a real link, so give it a visible affordance
   (style.css strips underlines from every anchor site-wide).
   ------------------------------------------------------------ */

.related-dish-card h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--chili) 45%, transparent);
  text-underline-offset: 4px;
}

.related-dish-card h3 a:hover {
  color: var(--chili-dark);
  text-decoration-color: var(--chili-dark);
}

/* ------------------------------------------------------------
   FAQ CROSS-LINKS — the home page FAQ is the hub that links out
   to every neighbourhood, dish and service page in /tags/.
   style.css resets every anchor to `color: inherit; text-decoration:
   none`, so without this the links read as plain muted body copy and
   neither users nor crawlers see them as navigation. Same treatment
   is inherited by the FAQ blocks on the dish and tag pages.
   ------------------------------------------------------------ */

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

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

/* Neighbourhood + dish lists inside the FAQ answers: keep the rows
   tight and readable while the link itself stays obvious. */
.qa .qa-body ul li a {
  font-weight: 600;
}

.qa .qa-body ul li a:hover,
.qa .qa-body ul li a:focus-visible {
  text-decoration-thickness: 2px;
}