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

/* ============================================================
   DISH PAGES — "Find us" map box (tags/dishes/*.html)
   Boxed panel: Google Map on the left, address / contact
   details and the Get Directions button on the right.
   Collapses to a single stacked column on small screens.
   ============================================================ */

.dish-map-container .section__header {
  text-align: left;
  margin-bottom: 1.1rem;
}

.dish-map-container > .section__description {
  text-align: left;
  margin-inline: 0;
  margin-bottom: 1.6rem;
}

.dish-map-box {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 860px) {
  .dish-map-box {
    grid-template-columns: 1.05fr 1fr;
  }
}

.dish-map-frame {
  position: relative;
  min-height: 280px;
  background: var(--sand);
}

.dish-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dish-map-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.dish-map-info h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  margin: 0;
}

.dish-map-details {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dish-map-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.dish-map-details i {
  flex: 0 0 auto;
  color: var(--chili);
  font-size: 1.15rem;
  line-height: 1.5;
}

.dish-map-details strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.dish-map-details a {
  color: var(--chili-dark);
  font-weight: 600;
}

.dish-map-details a:hover {
  text-decoration: underline;
}

.dish-map-info .btn {
  margin-top: 0.2rem;
}

@media (max-width: 859px) {
  .dish-map-frame {
    min-height: 260px;
  }

  .dish-map-info .btn {
    width: 100%;
  }
}

/* ============================================================
   VISIT BOX — location + contact panel used on the city
   landing page. Map on the left, address and contact details
   on the right, action buttons pinned to the bottom corner.
   Uses only the tokens already defined in theme.css/style.css.
   ============================================================ */

.visit__container {
  padding-top: 0;
}

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

.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__details {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.visit-box__details h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--basil);
  margin-bottom: 0.3rem;
}

.visit-box__tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
}

.visit-box__list {
  display: grid;
  gap: 1.05rem;
}

.visit-box__row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.visit-box__ic {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--chili-soft);
  color: var(--chili-dark);
  font-size: 1rem;
}

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

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

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

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

.visit-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

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

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

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

/* ============================================================
   HOME — "Find us" map box (index.html)
   Only sets the section rhythm/background so the existing
   .visit-box panel sits neatly at the end of the home page.
   ============================================================ */

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

.home-visit .visit-box {
  margin-top: 0;
}

/* reviews lead-in on dish pages — keeps h2 > h3 > h4 order intact */
.reviews-container > .reviews-source {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* keep the 5-star row on one line next to longer reviewer names */
.review-header .review-rating {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ============================================================
   HOME FAQ — internal link styling (index.html #faq)
   The base reset sets `a { color: inherit; text-decoration: none }`,
   so the service-area, dish and delivery/takeout links inside the
   FAQ answers were rendering as plain muted body text with no
   affordance. These rules make every tags/ link in the FAQ read
   as a link, stay legible on the card background, and expose a
   visible keyboard focus ring.
   ============================================================ */

.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) 35%, transparent);
  border-radius: 6px;
  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-thickness: 2px;
  text-decoration-color: currentColor;
}

.qa .qa-body a:focus-visible {
  outline: 2px solid var(--chili);
  outline-offset: 3px;
}

/* Service-area and dish answers hold long link lists — give the
   rows a little more breathing room so the targets are easy to
   hit on a phone, and let the wide list use two columns on
   roomier screens instead of running down the page. */
.qa .qa-body li {
  margin-bottom: 0.45rem;
  line-height: 1.55;
}

.qa .qa-body ul {
  margin-bottom: 0.35rem;
}

@media (min-width: 620px) {
  /* .qa-body is capped at 58ch for prose; a two-column link list
     needs more room than that or the longer place names wrap. */
  .qa .qa-body:has(ul.qa-cols) {
    max-width: 74ch;
  }

  .qa .qa-body ul.qa-cols {
    columns: 2;
    column-gap: 1.75rem;
  }

  .qa .qa-body ul.qa-cols li {
    break-inside: avoid;
  }
}