/* ============================================================
   CUSTOM — Per-store overrides for Monty's Pizza, Edmonton AB
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* ---------- location + map box (city landing page) ---------- */

.location-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
  background: var(--card, #fff);
  border-radius: var(--r-xl, 20px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.12));
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: 2rem;
}

.location-box__map .map-container {
  height: 100%;
  padding-bottom: 0;
  min-height: 340px;
}

.location-box__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.location-box__details h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.location-box__row h4 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  margin-bottom: 0.3rem;
}

.location-box__row p {
  font-size: 1rem;
  margin: 0;
}

.location-box__hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.location-box__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}

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

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

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

  .location-box__map .map-container {
    min-height: 280px;
  }

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

/* ============================================================
   DISH PAGES — "Find Us" boxed map + contact panel
   Used by tags/dishes/*.html. Map left, details right on
   desktop; stacked on mobile.
   ============================================================ */

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

.dish-location-container .section__header {
  text-align: left;
  margin-bottom: 1.25rem;
}

.dish-location-box {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 860px) {
  .dish-location-box {
    grid-template-columns: 1.05fr 1fr;
  }
}

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

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

@media (min-width: 860px) {
  .dish-location-map {
    min-height: 420px;
  }
}

.dish-location-info {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.dish-location-info h3 {
  font-size: 1.35rem;
  margin: 0;
}

.dish-location-info h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0.35rem 0 0;
}

.dish-location-list,
.dish-location-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.dish-location-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.dish-location-list i {
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1.4;
}

.dish-location-list a {
  color: inherit;
  font-weight: 600;
}

.dish-location-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

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

.dish-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.dish-location-actions .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dish-location-actions .btn-outline:hover {
  background: var(--chili);
  color: #fff;
}

@media (max-width: 480px) {
  .dish-location-actions .btn,
  .dish-location-actions .btn-outline {
    width: 100%;
  }
}

/* ============================================================
   HOME — "Find Us" boxed map + contact panel (index.html)
   Reuses the dish-page location box; actions sit in the
   bottom-right corner and icons are inline SVG, not icon font.
   ============================================================ */

.home-location .dish-location-actions {
  justify-content: flex-end;
}

.home-location .dish-location-list .loc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1.4;
}

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

/* ============================================================
   HOME — FAQ answer links (index.html #faq)
   The global reset sets `a { color: inherit; text-decoration: none }`,
   so links inside answers need their own treatment to read as links.
   Covers the dish, delivery-area and service tag pages linked from
   the FAQ list.
   ============================================================ */

.qa .qa-body a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.qa .qa-body a:hover,
.qa .qa-body a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.qa .qa-body a[target="_blank"]::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.82em;
  text-decoration: none;
  line-height: 1;
}

.qa .qa-body li a {
  font-weight: 600;
}

/* ============================================================
   RESERVATIONS PAGE — embedded iOrders booking form
   ============================================================ */

.resv-sec {
  padding: 0 0 clamp(3rem, 6vw, 5.5rem);
  background: var(--bg);
}

.resv-sec > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* ---------- the form card ---------- */

.resv-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  overflow: hidden;
}

.resv-form__head {
  margin-bottom: 1.15rem;
}

.resv-form__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.15;
  color: var(--ink);
}

.resv-form__head p {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* The iOrders form is a cross-origin embed and posts no height to
   the parent, so it gets a fixed frame taller than the form's natural
   height (6 fields + Turnstile + submit, plus room for validation
   messages). That keeps the nested scrollbar off — the page scrolls,
   not the iframe. The form page centres itself, so any slack shows
   as even padding. Revisit if iOrders changes the form fields. */
.resv-embed {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid var(--line);
  height: 1360px;
}

.resv-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.resv-fallback {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.resv-fallback a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.resv-fallback a:hover,
.resv-fallback a:focus-visible {
  color: var(--ink);
}

/* ---------- sidebar ---------- */

.resv-aside {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.resv-aside .hours-table {
  margin-top: 0;
}

.resv-note {
  background: var(--basil);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}

.resv-note h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.resv-note ul {
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.resv-note li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

.resv-note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.resv-note li strong {
  color: #ffffff;
}

.resv-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.resv-note a:hover,
.resv-note a:focus-visible {
  color: #ffffff;
}

.resv-info {
  grid-template-columns: 1fr;
}

/* ---------- occasions ---------- */

.resv-occasions {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--canvas);
}

.resv-occasions__head {
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.resv-occasions__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.12;
  color: var(--ink);
  margin: 0.35rem 0 0.6rem;
}

.resv-occasions__head h2 em {
  font-style: normal;
  color: var(--accent);
}

.resv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.resv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.resv-card:hover {
  transform: translateY(-3px);
  border-color: var(--chili-soft);
}

.resv-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.resv-card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.resv-card a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.resv-card a:hover,
.resv-card a:focus-visible {
  color: var(--ink);
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .resv-sec > .wrap {
    grid-template-columns: 1fr;
  }

  .resv-aside {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}

@media (max-width: 620px) {
  .resv-aside {
    grid-template-columns: 1fr;
  }

  .resv-embed {
    height: 1460px;
    border-radius: var(--r-md);
  }

  .resv-form {
    padding: 1rem 0.85rem 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resv-card:hover {
    transform: none;
  }
}

/* ---------- catering page: embedded iOrders request form ---------- */

.catering-form-sec {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--sand);
}

.catering-form-sec .sec-head {
  margin-bottom: 1.6rem;
}

.catering-form-sec .sec-head .lede {
  max-width: 46rem;
  margin-top: 0.75rem;
}

/* The iOrders form is a cross-origin embed and posts no height to
   the parent, so it gets a fixed frame taller than the form's natural
   height (6 fields + Turnstile + submit, plus room for validation
   messages). That keeps the nested scrollbar off — the page scrolls,
   not the iframe. Revisit if iOrders changes the form fields. */
.catering-embed {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid var(--line);
  height: 1360px;
}

.catering-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.catering-fallback {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.catering-fallback a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.catering-fallback a:hover,
.catering-fallback a:focus-visible {
  color: var(--ink);
}

.packages-footnote {
  margin-top: 1.5rem;
  text-align: center;
}

@media (max-width: 640px) {
  .catering-embed {
    height: 1460px;
  }
}

/* ---------- header: fit seven nav items above the mobile breakpoint ----------
   The header row is brand + 7 links + "Order Online". Between the 900px
   mobile breakpoint and ~1180px that row is wider than .wrap, so the nav
   links were shrinking and wrapping onto a second line. Tighten the whole
   row across that band instead of letting it collapse. */

.site-nav a {
  white-space: nowrap;
}

@media (min-width: 901px) and (max-width: 1180px) {
  .site-header .wrap {
    gap: 0.85rem;
  }

  .brand img {
    height: 56px;
  }

  .site-nav {
    gap: 0.15rem;
  }

  .site-nav a {
    padding-inline: 0.5rem;
    font-size: 0.9rem;
  }

  .header-cta .btn {
    padding: 0.7rem 1.05rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 901px) and (max-width: 1010px) {
  .brand img {
    height: 48px;
  }

  .site-nav a {
    padding-inline: 0.36rem;
    font-size: 0.86rem;
  }

  .header-cta .btn {
    padding: 0.62rem 0.9rem;
    font-size: 0.8rem;
  }

  /* the CTA arrow costs width it doesn't earn at this size */
  .header-cta .btn .arrow {
    display: none;
  }
}

/* the mobile panel's stagger only reached six links */
@media (max-width: 900px) {
  .site-nav.open a:nth-child(7) {
    transition-delay: 0.28s;
  }
}

/* ---------- mobile menu button ----------
   The base rules give .nav-toggle a var(--sand) fill, which on the dark
   theme is near-black on a near-black header, and draw the three bars
   from .nav-toggle__bars span far down style.css. If either the theme
   vars or those bar rules don't apply, the button renders as an
   invisible black square and the mobile nav becomes unreachable.
   Redeclare the whole button here with literal colours so it always
   reads, and keep it displayed at mobile widths. */

@media (max-width: 900px) {
  .site-header .header-cta .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.09);
    cursor: pointer;
  }

  .site-header .nav-toggle .nav-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
  }

  .site-header .nav-toggle .nav-toggle__bars span {
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: #f4efea;
  }

  .site-header .nav-toggle.is-open {
    background: rgba(238, 123, 132, 0.18);
    border-color: rgba(238, 123, 132, 0.5);
  }

  .site-header .nav-toggle.is-open .nav-toggle__bars span {
    background: #f5787f !important;
  }
}