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

/* Contact page: the hours card heading is an <h2> so the page keeps a
   valid h1 -> h2 outline. Rendering is identical to the template's
   .hours-table h3 — no visual change. */
.hours-table h2 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

/* Takeout tag page: dish/category cards carry an h4 sub-label under
   the card's h3, so the page keeps a clean h2 -> h3 -> h4 outline. */
.related-dish-card h4 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.35rem;
}

/* ------------------------------------------------------------
   Location box — long-tail service pages under tags/
   (steakhouse takeout + delivery). Google map on the left,
   address, phone and hours on the right, action buttons pinned
   to the bottom corner. Visuals reuse the existing .map-frame,
   .btn and .btn-line tokens, so no new look is introduced.
   ------------------------------------------------------------ */
.location-box {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: stretch;
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 901px) {
  .location-box {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.location-box .map-frame {
  min-height: 380px;
  box-shadow: var(--shadow-sm);
}

.location-box__info {
  display: flex;
  flex-direction: column;
}

.location-box__info h3 {
  font-size: 1.35rem;
  color: var(--basil);
  margin-bottom: 0.35rem;
}

.location-box__info > p {
  color: var(--muted);
  font-size: 0.92rem;
}

.location-details {
  margin: 1.1rem 0 1.5rem;
}

.location-details > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.location-details > li:last-child {
  border-bottom: none;
}

.location-details 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.35rem;
}

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

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

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

.location-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.22rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

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

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

@media (max-width: 560px) {
  .location-box__actions .btn,
  .location-box__actions .btn-line {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   FAQ answer links (home page #faq)
   The global reset sets `a { color: inherit; text-decoration:
   none }`, so links inside FAQ answers are invisible without
   explicit styling. Every page under tags/ (dish pages, service
   area pages, delivery + takeout) is linked from this section,
   so these need to read clearly as links and pass focus /
   contrast checks. Built only from existing design tokens.
   ------------------------------------------------------------ */
.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) 45%, transparent);
  border-radius: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

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

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

/* Neighbourhood link lists — 21 service-area pages read better as
   a wrapping pill grid than as a long single-file bullet column. */
.qa .qa-body:has(.qa-links) {
  max-width: 66ch;
}

.qa .qa-body ul.qa-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding-left: 0;
}

.qa .qa-body ul.qa-links li {
  margin-bottom: 0;
}

.qa .qa-body ul.qa-links a {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}

.qa .qa-body ul.qa-links a:hover,
.qa .qa-body ul.qa-links a:focus-visible {
  background: var(--chili-soft);
  border-color: var(--chili);
  color: var(--chili-dark);
  text-decoration: none;
}

/* Dish link lists — the dish name carries the link, followed by a
   short em-dash descriptor, so give the rows a little more air. */
.qa .qa-body ul.qa-dishes li {
  margin-bottom: 0.5rem;
}

/* Home page: the "Find us" / map section at the end of index.html uses
   the same vertical rhythm as the template's other home sections
   (.plates, .story, .quotes, .faq) so the visit box sits evenly between
   the CTA band and the footer. No new visual language is introduced. */
#visit-us {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* ------------------------------------------------------------
   Visit box — map (left) + address, contact & hours (right)
   Used on the Calgary city + cuisine landing page. Built only
   from existing design tokens so it matches the template skin.
   ------------------------------------------------------------ */
.visit-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 2rem;
}

.visit-box__map {
  position: relative;
  min-height: 420px;
  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.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-box__info h3 {
  font-size: 1.4rem;
  color: var(--basil);
}

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

.visit-box__info p,
.visit-box__info address {
  font-style: normal;
  font-size: 0.97rem;
  color: var(--muted);
  line-height: 1.6;
}

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

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

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

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

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

.visit-box__actions .btn,
.visit-box__actions .btn-secondary {
  padding: 0.8rem 1.4rem;
  font-size: 0.95rem;
}

.visit-box__actions .btn-secondary {
  border: 1px solid var(--line);
}

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

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

  .visit-box__actions {
    justify-content: flex-start;
  }
}