/* ============================================================
   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 (tags/dishes/*) — find-us locator box
   Boxed layout: map on the left, address / contact on the
   right, with a "Get Directions" button. Stacks on mobile.
   ============================================================ */

.dish-locator-container {
  width: min(var(--max), calc(100% - 2 * var(--pad)));
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.locator-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-top: 1.75rem;
}

.locator-box .map-frame {
  min-height: 340px;
  height: 100%;
  box-shadow: var(--shadow-sm);
}

.locator-info {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.locator-info h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
}

.locator-info .info-card {
  border: 1px solid var(--line);
  box-shadow: none;
}

.locator-info .info-card:hover {
  box-shadow: var(--shadow-sm);
}

.locator-actions {
  margin-top: auto;
  padding-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.locator-actions .btn,
.locator-actions .btn-line {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

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

  .locator-box .map-frame {
    min-height: 280px;
  }
}

/* related dishes: keep the whole card clickable and readable */
.related-dish-card h3 a:hover {
  color: var(--chili);
}

.related-dish-card .btn-small {
  margin-top: 0.9rem;
}

/* review cards use an h3 for the reviewer so the heading order on the
   dish pages runs h1 > h2 > h3 > h4 with no skipped levels; these rules
   keep the visual weight identical to the original h4 */
.review-header .reviewer-info h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: normal;
  margin-top: 0;
}

/* ============================================================
   SERVICE PAGES (tags/canadian-food-delivery|takeout-*) — these
   pages reuse the legacy tag-page markup, so the rules below
   only fill the gaps that markup leaves.
   ============================================================ */

/* the feature lists themselves are already dressed by the compat
   layer in style.css; only multi-line items need the icon pinned
   to the first line instead of vertically centred */
.delivery-features li,
.takeout-features li {
  align-items: flex-start;
}

.delivery-features li .ico,
.takeout-features li .ico {
  margin-top: 0.3rem;
}

/* neighbourhood links inside the areas-served cards */
.delivery-area-card li a {
  color: var(--ink);
  font-weight: 600;
}

.delivery-area-card li a:hover {
  color: var(--chili);
  text-decoration: underline;
}

/* inline links inside the legacy step / FAQ copy */
.order-step p a,
.faq-answer a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.order-step p a:hover,
.faq-answer a:hover {
  color: var(--chili);
}

/* locator cards label the address / phone / hours with an h4 so the
   heading order runs h1 > h2 > h3 > h4 with no skipped levels; these
   rules keep the visual weight identical to the <strong> label */
.locator-info .info-card h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: inherit;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   HOME (index.html) — closing "Find us" locator section.
   Reuses the .locator-box / .map-frame / .info-card layout
   already defined above for the dish pages, so only the
   section band itself needs dressing here.
   ============================================================ */

.find-us {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--sand);
}

.find-us .locator-box {
  margin-top: 0;
}

/* home FAQ answers link out to every page in tags/ (the two service
   pages, the ten dish pages and the 24 neighbourhood pages), so those
   links need to read as links - the base rule sets
   a { color: inherit; text-decoration: none } */
.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color 0.18s ease;
}

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

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

/* the delivery-areas answer lists 24 neighbourhood pages - flow them
   into columns so the accordion panel stays a readable height */
.qa .qa-body:has(.qa-areas) {
  max-width: 72ch;
}

.qa .qa-body .qa-areas {
  columns: 2;
  column-gap: 1.75rem;
  max-width: none;
}

.qa .qa-body .qa-areas li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

@media (min-width: 1100px) {
  .qa .qa-body .qa-areas {
    columns: 3;
  }
}

@media (max-width: 520px) {
  .qa .qa-body .qa-areas {
    columns: 1;
  }
}