/* ============================================================
   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 — "Opening hours" is the page's only section heading, so it is
   marked up as <h2> to keep a valid h1 → h2 order. This mirrors the existing
   .hours-table h3 rule exactly, so the visual design is unchanged. */
.hours-table h2 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

/* Our Food page — each dish name in the gallery wall is marked up as <h3> so the
   nine dishes sit correctly under the section <h2> (h1 → h2 → h3). The dish name
   inherits the figcaption's own type styles, so the visual design is unchanged. */
.gallery-wall figcaption h3 {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* Winnipeg Mexican restaurant landing page — the intro block stacks two
   paragraphs, so the second one needs a little air. Scoped to that section. */
#local-info .section__description + .section__description {
  margin-top: 1rem;
}

/* Winnipeg Mexican restaurant landing page — "Visit us" box: Google map on the
   left, address / contact / hours on the right, with the Get Directions and
   Order Online buttons pinned to the bottom-right corner. Built only from the
   tokens already defined in style.css, so it matches the cards, radii and
   shadows used everywhere else on the site. */
.visit-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: stretch;
  margin-top: 2rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.visit-box__map {
  position: relative;
  min-height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  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;
  gap: 1.1rem;
}

.visit-box__details h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--basil);
}

.visit-box__info h4 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chili);
  margin-bottom: 0.35rem;
}

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

.visit-box__info a {
  color: var(--ink);
  font-weight: 700;
}

.visit-box__info a:hover {
  color: var(--chili);
}

.visit-box__hours {
  list-style: none;
}

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

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

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

.visit-box__actions .cs-button-solid,
.visit-box__actions .cs-button-ghost {
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
}

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

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

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

/* ============================================================
   LOCATION BOX — used on the long-tail service pages
   (tags/mexican-food-delivery-winnipeg.html and
   tags/mexican-food-takeout-winnipeg.html). One card holding
   the Google map on the left and the address, phone, hours and
   the two action buttons on the right. Built from the existing
   design tokens so it matches the rest of the site.
   ============================================================ */

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

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

.location-map {
  position: relative;
  min-height: 320px;
  background: var(--sand);
}

@media (min-width: 900px) {
  .location-map {
    min-height: 460px;
  }
}

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

.location-details {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.location-details h3 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.location-details h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chili);
  margin: 1.25rem 0 0.5rem;
}

.location-details address {
  font-style: normal;
  color: var(--muted);
  line-height: 1.6;
}

.location-contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.location-contact .ic {
  display: inline-flex;
  color: var(--basil);
}

.location-contact a {
  color: var(--ink);
  font-weight: 600;
}

.location-contact a:hover {
  color: var(--chili);
}

.location-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.92rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

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

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

@media (max-width: 480px) {
  .location-actions {
    justify-content: stretch;
  }

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

/* ============================================================
   HOME PAGE (index.html)
   ============================================================ */

/* FAQ questions are marked up as <h3> so the seven questions sit correctly
   under the section <h2> (h1 -> h2 -> h3). The heading inherits the
   <summary> type styles exactly, so the accordion looks unchanged. */
.qa summary h3 {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}

/* "Visit us" band at the foot of the home page — holds the Google map card
   (.location-box, already defined above and shared with the service pages).
   Padding and heading sizes mirror the .faq section so the rhythm of the
   page is unchanged. */
.visit-band {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--sand);
}

.visit-head {
  max-width: 46rem;
}

.visit-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  margin: 1rem 0 1rem;
}

.visit-band .location-box {
  margin-top: 2.25rem;
}

/* FAQ answers carry the internal links to the dish and neighbourhood pages, so
   they need to read as links. This reuses the exact `.lede a` / `.prose a`
   treatment already defined in style.css — same tokens, same underline — rather
   than introducing a new link style. */
.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

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