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

/* ------------------------------------------------------------
   Tag pages — sub-headings & inline links inside legacy blocks
   ------------------------------------------------------------ */

.explore__content h3 {
  font-size: 1.2rem;
  margin-top: 1.75rem;
  color: var(--basil);
}

.order-step p a,
.faq-answer a,
.delivery-area-card a,
.qa .qa-body a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}

.order-step p a:hover,
.faq-answer a:hover,
.delivery-area-card a:hover,
.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: 2px;
  border-radius: 2px;
}

.faq-item .faq-question {
  color: var(--basil);
}

/* ------------------------------------------------------------
   Home FAQ — internal link lists.
   The delivery-area and dish answers carry every tag page on
   the site, so they need more room than the default 58ch
   answer column and a column layout that stays scannable.
   ------------------------------------------------------------ */

.qa .qa-body:has(.qa-link-list) {
  max-width: 72ch;
}

.qa .qa-body ul.qa-link-list {
  columns: 2;
  column-gap: 1.6rem;
  padding-left: 1.1rem;
}

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

@media (min-width: 700px) {
  .qa .qa-body ul.qa-link-list--areas {
    columns: 3;
  }
}

@media (max-width: 480px) {
  .qa .qa-body ul.qa-link-list {
    columns: 1;
  }
}

/* Dish answers pair a link with a description, so they stay
   single-column and only gain the extra width. */
.qa .qa-body ul.qa-link-list--dishes {
  columns: 1;
}

/* ------------------------------------------------------------
   City + cuisine SEO landing page — keep the split-section
   photo at its true aspect ratio. The width/height attributes
   are kept for CLS, so height must be released to auto or the
   HTML height attribute stretches the image.
   ------------------------------------------------------------ */

#local-info .explore__image img {
  height: auto;
}

#local-info .section__description + .section__description {
  margin-top: 1rem;
}

/* ------------------------------------------------------------
   Service tag pages — keep the split-section photo at its true
   aspect ratio. The width/height attributes stay for CLS, so
   height has to be released or the attribute stretches the image.
   ------------------------------------------------------------ */

#delivery-service .explore__image img,
#takeout-service .explore__image img {
  height: auto;
}

/* ------------------------------------------------------------
   Location box — shared by the city landing page and the
   service tag pages. Map on the left, address / phone / hours
   on the right, action buttons anchored to the bottom-right
   corner. Uses the tokens from style.css so it inherits theme.
   ------------------------------------------------------------ */

.location__container .section__description,
.location-box-container .section__description {
  margin-bottom: 0;
}

.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.05fr 1fr;
  }
}

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

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

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

.location-box__details {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.location-box__title {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--basil);
  margin-bottom: 0.25rem;
}

.location-detail 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-detail address {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

.location-detail p {
  font-weight: 600;
  color: var(--ink);
}

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

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

.location-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.94rem;
  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.8rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

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

  .location-actions .btn,
  .location-actions .btn-line {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------
   Header nav — narrow-desktop guard.
   The nav carries seven links plus the Order Online button. The
   hamburger only takes over at 900px, so between 900px and
   roughly 1150px the row runs out of room: labels wrap onto two
   lines and the CTA is pushed past the edge. Tighten the
   spacing across that band only — the full-size nav is
   untouched above it, the mobile panel untouched below.
   ------------------------------------------------------------ */

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

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

  .site-nav {
    gap: 0.1rem;
  }

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

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

/* ------------------------------------------------------------
   Embedded iOrders forms — reservation & catering pages.
   Mirrors .map-frame from style.css (same card treatment as the
   contact map that sits in the identical grid slot), but these
   forms are tall multi-field flows and stop reflowing below
   ~460px wide. The iframe is cross-origin so it cannot report
   its own size — hence the fixed heights below rather than auto
   sizing. Measured heights: reservation ~1360px, catering
   ~1240px. Keep these in step if iOrders changes the fields.
   ------------------------------------------------------------ */

.reserve-frame {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  background: var(--card);
  min-height: 1420px;
  position: relative;
  overflow: hidden;
}

/* The catering enquiry has one fewer block than the reservation
   form (no confirmation note, single-line event details). */
.reserve-frame--catering {
  min-height: 1300px;
}

.reserve-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Below the form's own minimum width it would otherwise be
   clipped by the frame, so let the frame pan instead of hiding
   the right-hand edge of the fields. */
@media (max-width: 520px) {
  .reserve-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .reserve-frame iframe {
    width: 460px;
    min-width: 460px;
  }
}

/* Always-visible escape hatch: the embed can also be blocked by
   strict tracking-protection settings, so the direct link and
   phone number must never depend on the iframe rendering. */
.reserve-note {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--muted);
  text-align: center;
}

.reserve-note a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.reserve-note a:hover {
  color: var(--chili);
}

/* The details column is much shorter than the form, so pin it
   while the form scrolls rather than leaving a tall empty gap. */
@media (min-width: 901px) {
  #reservation-form .reserve-aside,
  #catering-form .reserve-aside {
    position: sticky;
    top: calc(var(--header-h, 5rem) + 1.25rem);
  }
}

/* ------------------------------------------------------------------
   Image sizing guard (Phase 2)
   The markup carries intrinsic width/height attributes for CLS, which
   map to the CSS width/height properties. Where a rule governs the box
   with aspect-ratio + object-fit (or width:100% in a masonry column),
   the attribute height must yield to it or the image renders stretched.
   ------------------------------------------------------------------ */
.plate img,
.bd-img img,
.snap-grid img,
.gallery-wall img,
.story-collage .img-a,
.story-collage .img-b,
.dish-hero-image img {
  height: auto;
}

/* ------------------------------------------------------------
   Menu page — Brunch / Dinner / Drinks section tabs.
   Tabs are built by script.js from the `menu_section` tag that
   update-menu.js writes into menu.js on every daily fetch.
   ------------------------------------------------------------ */

.menu-sections {
  width: min(var(--max), calc(100% - 2 * var(--pad)));
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.menu-sections[hidden] {
  display: none;
}

.menu-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.75rem 1.6rem;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.menu-tab:hover {
  border-color: var(--cta);
  background: var(--sand);
}

.menu-tab:focus-visible {
  outline: 2px solid var(--chili);
  outline-offset: 2px;
}

.menu-tab.is-active {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-ink);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-3) 34%, transparent);
}

.menu-tab__count {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--muted);
}

.menu-tab.is-active .menu-tab__count {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}

.menu-button[hidden] {
  display: none;
}

@media (max-width: 768px) {
  /* tabs + search/category row stick together under the header */
  .menu-toolbar {
    position: sticky;
    top: var(--header-h, 4.5rem);
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }

  .menu-toolbar .mobile-menu-controls {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }

  .menu-sections {
    width: auto;
    margin: 0;
    padding: 0.7rem var(--pad) 0;
    gap: 0.4rem;
  }

  .menu-tab {
    flex: 1;
    justify-content: center;
    font-size: 0.92rem;
    padding: 0.6rem 0.5rem;
    gap: 0.4rem;
  }

  .menu-tab__count {
    font-size: 0.66rem;
    padding: 0.25rem 0.4rem;
  }
}