/* ============================================================
   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 / map box (index.html #visit) ----------
   Reuses the contact-section grid, but puts the map on the left and
   the address, phone, hours and buttons on the right. ---------- */
#visit .wrap {
  grid-template-columns: 1.15fr 1fr;
}

#visit .visit-head {
  grid-column: 1 / -1;
  margin-bottom: 0.4rem;
}

#visit .visit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

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

  #visit .visit-actions {
    justify-content: stretch;
  }

  #visit .visit-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Home: FAQ answer links (index.html #faq) ----------
   The global reset sets `a { color: inherit; text-decoration: none }`,
   which made the internal links inside FAQ answers — the dish pages,
   neighbourhood delivery pages and service pages under /tags/ —
   indistinguishable from body copy. Style them as real links so both
   readers and crawlers see them as navigation. ---------- */
.qa .qa-body a {
  color: var(--chili);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--chili) 45%, transparent);
  border-radius: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease,
    background-color 0.2s ease;
}

.qa .qa-body a:hover,
.qa .qa-body a:focus-visible {
  color: var(--brand-2);
  text-decoration-color: currentColor;
  background: color-mix(in srgb, var(--chili) 8%, transparent);
}

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

/* Neighbourhood list is long — lay it out in columns so all 30 area
   pages stay scannable instead of running down the page. */
.qa .qa-body ul.area-list {
  columns: 2;
  column-gap: 1.5rem;
}

@media (max-width: 560px) {
  .qa .qa-body ul.area-list {
    columns: 1;
  }
}

/* The area list needs more room than the 58ch answer measure allows. */
.qa .qa-body:has(ul.area-list) {
  max-width: 70ch;
}