/* ============================================================
   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 — hours card heading promoted from h3 to h2 for a correct
   h1 → h2 heading hierarchy. Visual output is identical to .hours-table h3. */
.hours-table h2 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

/* Store "Find us" panel — Google map on the left, address and contact details
   on the right, action buttons tucked into the corner. Shared by
   index.html (.home-map-box), tags/chinese-food-delivery-winnipeg.html
   (.delivery-map-box) and tags/chinese-food-takeout-winnipeg.html
   (.takeout-map-box). Tokens only, no new colours or fonts, so it inherits
   the site identity from theme.css. */
.home-map-box,
.delivery-map-box,
.takeout-map-box {
  display: grid;
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 861px) {
  .home-map-box,
  .delivery-map-box,
  .takeout-map-box {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.home-map-box__map,
.delivery-map-box__map,
.takeout-map-box__map {
  position: relative;
  min-height: 320px;
  background: var(--sand);
}

.home-map-box__map iframe,
.delivery-map-box__map iframe,
.takeout-map-box__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-map-box__details,
.delivery-map-box__details,
.takeout-map-box__details {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.home-map-box__details h3,
.delivery-map-box__details h3,
.takeout-map-box__details h3 {
  font-size: 1.35rem;
}

.home-map-box__details h4,
.delivery-map-box__details h4,
.takeout-map-box__details h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chili);
  margin-bottom: 0.3rem;
}

.home-map-box__item,
.delivery-map-box__item,
.takeout-map-box__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.home-map-box__item:last-of-type,
.delivery-map-box__item:last-of-type,
.takeout-map-box__item:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.home-map-box__item address,
.home-map-box__item p,
.delivery-map-box__item address,
.delivery-map-box__item p,
.takeout-map-box__item address,
.takeout-map-box__item p {
  font-style: normal;
  font-size: 0.98rem;
  color: var(--muted);
}

.home-map-box__item a,
.delivery-map-box__item a,
.takeout-map-box__item a {
  font-weight: 600;
  color: var(--ink);
}

.home-map-box__item a:hover,
.delivery-map-box__item a:hover,
.takeout-map-box__item a:hover {
  color: var(--chili-dark);
}

.home-map-box__hours li,
.delivery-map-box__hours li,
.takeout-map-box__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
  padding: 0.15rem 0;
}

.home-map-box__actions,
.delivery-map-box__actions,
.takeout-map-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.4rem;
}

@media (max-width: 540px) {
  .home-map-box__actions > .btn,
  .home-map-box__actions > .btn-line,
  .delivery-map-box__actions > .btn,
  .delivery-map-box__actions > .btn-line,
  .takeout-map-box__actions > .btn,
  .takeout-map-box__actions > .btn-line {
    flex: 1 1 100%;
  }
}

/* Home page — band that holds the "Find us" map panel. Same rhythm and
   background as the .faq band above it, so it reads as part of the same
   page, not a new visual language. */
.find-us {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--sand);
}

/* the .sec-head above the panel already supplies the gap, so drop the
   panel's own top margin here only */
.find-us .home-map-box {
  margin-top: 0;
}

/* Legacy tag-page components — style.css gives body-copy links their colour
   through .section__description a / .faq__answer a, but the static FAQ list,
   the numbered order steps and the location cards were left out, so links
   inside them inherited plain body text. Same treatment as the rest of the
   site: chili colour plus an underline, so a link is not signalled by
   colour alone. */
.faq-answer a,
.order-step p a,
.delivery-area-card li a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* Modern .qa accordion (home page FAQ) — style.css colours body-copy links
   through .lede a / .prose a, but the answers inside .qa-body were left out,
   so their links inherited plain body text. Same treatment as the rest of
   the site: chili colour plus an underline, so a link is not signalled by
   colour alone. */
.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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