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

/* Layout for the location / delivery boxes now lives in style.css
   (Lantern template). Keep only store-specific tweaks below. */

/* ---------- home FAQ: internal links to tag pages ---------- */
.qa .qa-body a {
  color: var(--chili);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--chili) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

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

/* long neighbourhood / dish lists (8+ items) read better in two columns */
.qa .qa-body ul:has(li:nth-child(8)) {
  columns: 2;
  column-gap: 1.5rem;
}

.qa .qa-body ul:has(li:nth-child(8)) li {
  break-inside: avoid;
}

@media (max-width: 560px) {
  .qa .qa-body ul:has(li:nth-child(8)) {
    columns: 1;
  }
}

/* Rakesh 2026-10-29: overflow:hidden makes min-height 0, so 26 categories shrank instead of scrolling - keep full height, sidebar scrolls */
.menu-buttons .menu-button { flex-shrink: 0; }

/* ============================================================
   HAKKA BISTRO (2026-11-05) — SB structure + PT button UI (Rakesh 20:22)
   PT-BUTTONS: ported verbatim from templates/Website-Templates/PT/custom.css
   (PT design rules of 2026-10-24, rules 1 + 2 + 3 only: :root --btn-* tokens, .btn/.btn-line
   split shape, .btn__label/.btn__arrow, primary/secondary, hover, focus-visible,
   red-band variant, order-float, <480px header button). Colours come from theme.css
   (--brand = Brandy's accent). Nothing else from PT.
   ============================================================ */
:root {
  --btn-accent: var(--brand);
  --btn-accent-dark: #A11218;   /* rebrand (checked): white 8.03:1 */
  --btn-accent-hover: #B3141A;  /* rebrand (checked): white 6.93:1 (Brandy THEME.md) */
  --btn-sec-line: #C9C9C7;
  --btn-sec-arrow: #E8E8E6;
}
.btn, .btn-line,
.site-nav .nav-extra .btn, .header-cta .btn, .btn.order-float {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: none !important;
  overflow: hidden;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-head, 600) !important;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none !important;
  text-decoration: none !important;
  transform: none !important;
  white-space: nowrap;
  vertical-align: middle;
}
.btn::before, .btn::after, .btn-line::before, .btn-line::after { content: none !important; display: none !important; }
.btn > .arrow, .btn-line > .arrow { display: none !important; }
.btn .btn__label, .btn-line .btn__label {
  display: flex; align-items: center; justify-content: center; flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 6px 0 0 6px;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-head, 600) !important;
  transition: background-color .15s ease;
}
.btn .btn__arrow, .btn-line .btn__arrow {
  display: flex !important; align-items: center; justify-content: center; flex: none;
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
}
.btn .btn__arrow .ico, .btn-line .btn__arrow .ico { display: block !important; width: 1em; height: 1em; }
/* primary */
.btn .btn__label { background: var(--btn-accent); color: #fff !important; }
.btn .btn__arrow { background: var(--btn-accent-dark); color: #fff !important; }
.btn:hover .btn__label, .btn:focus-visible .btn__label { background: var(--btn-accent-hover); }
.site-nav .nav-extra .btn, .site-nav .nav-extra .btn * { color: #fff !important; }
/* secondary */
.btn-line .btn__label { background: #fff; color: var(--ink) !important; border: 1px solid var(--btn-sec-line); border-right: 0; }
.btn-line .btn__arrow { background: var(--btn-sec-arrow); color: var(--ink) !important; border: 1px solid var(--btn-sec-arrow); }
.btn-line:hover .btn__label, .btn-line:focus-visible .btn__label { border-color: var(--ink); }
/* red-band variant */
.menu-band .btn .btn__label, .cta-band .btn .btn__label { background: #fff; color: var(--btn-accent) !important; }
.menu-band .btn:hover .btn__label, .cta-band .btn:hover .btn__label { background: #f3f3f3; }
.btn:focus-visible, .btn-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.order-float { justify-content: stretch; }
@media (max-width: 479px) { .header-cta .btn { display: none !important; } }
/* long demo label: allow wrap inside narrow cards, never overflow */
.loc-card .btn, .loc-map .btn, .plate .btn { white-space: normal; max-width: 100%; }

/* ---------- Multi-location blocks (ported from the finished two-location builds, data-free) ----------
   .loc-cards = location cards (home chooser, locations hub, contact, menu)
   .loc-maps  = two-location map block (one map per location, each in its own card) */
.loc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
.loc-card { display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 1px solid rgba(0,0,0,.1); border-radius: 8px; overflow: hidden; min-width: 0; }
.loc-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.loc-card__body { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; flex: 1; }
.loc-card__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; }
.loc-card__addr, .loc-card__hours, .loc-card__phone, .loc-card__svc, .loc-card__rating { margin: 0; line-height: 1.5; }
.loc-card__phone a { font-weight: 600; color: var(--ink); }
.loc-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .75rem; }
.loc-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
.loc-map { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; background: #fff; color: var(--ink); border: 1px solid rgba(0,0,0,.1); border-radius: 8px; }
.loc-map h3, .loc-map p { margin: 0; }
.loc-map .map-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; margin-top: .25rem; }
.loc-map .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loc-map__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
/* map overflow fix + tap shield (Sales fix 2026-11-05, CIK) */
.contact-sec .wrap > *, .loc-maps > *, .loc-map, .map-block, .find-us .wrap > * { min-width: 0; }
.map-block { display: flex; flex-direction: column; gap: .75rem; }
.map-frame { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.loc-map .map-frame { min-height: 0; }
.map-shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-shield span { margin-bottom: .75rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(0,0,0,.78); color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.2; }
.map-shield:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.map-frame.is-live .map-shield { display: none; }
@media (hover: hover) and (pointer: fine) { .map-shield { display: none; } }
@media (max-width: 900px) {
  .map-frame, .loc-map .map-frame { aspect-ratio: auto; min-height: 0; height: 320px; }
}
/* static menu (no feed): location labels */
.loc-tag { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--canvas, #f6f1e8); border: 1px solid rgba(0,0,0,.15); font-size: .75rem; font-weight: 600; line-height: 1.4; vertical-align: middle; white-space: nowrap; }
/* static menu page (no feed) */
.menu-static .menu-sections { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.25rem; }
.menu-static .menu-cat { scroll-margin-top: calc(var(--header-h, 80px) + 1rem); }
.menu-static .menu-cat-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0 0 .35rem; }
.menu-static .menu-cat-note { margin: 0 0 1rem; color: var(--muted, #555); font-size: .95rem; }
.menu-static .menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.menu-static .menu-item:hover { transform: none; }
.menu-static .item-name { font-size: 1.05rem; margin: 0; }
.menu-static .item-desc { margin: .35rem 0 0; }
.menu-static .menu-buttons a.menu-button { display: block; text-decoration: none; }
.menu-static .menu-lede { margin: .5rem 0 0; }
@media (max-width: 768px) {
  .menu-static #menu .menu-container { flex-direction: column; gap: 1rem; }
  .menu-static .menu-buttons { position: static; flex: none; width: 100%; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-radius: 12px; padding: .5rem; display: flex !important; }
  .menu-static .menu-buttons a.menu-button { flex: none; }
  .menu-static .menu-items { grid-template-columns: minmax(0, 1fr); }
}
/* logo (Brandy pack): light wordmark on SB's dark header + footer, no white disc */
.brand img { height: 34px; width: auto; max-width: 100%; border-radius: 0; background: none; padding: 0; }
.foot-brand img { height: 40px; width: auto; border-radius: 0; background: none; padding: 0; }
@media (max-width: 900px) { .brand img { height: 30px; } }
@media (max-width: 380px) { .brand img { height: 26px; } }
/* Scarborough page: real dining-room photos (Brandy pack, SCAR) */
.scar-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 1.5rem 0; }
.scar-photos figure { margin: 0; min-width: 0; }
.scar-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.scar-photos figcaption { margin-top: .5rem; font-size: .95rem; }
/* LCP (mobile): page-hero backdrop uses Brandy's 800x1100 mobile hero instead of the 1920 spread */
@media (max-width: 600px) { .page-hero { background-image: url("assets/backgrounds/hakka-bistro-parliament-st-sign-hero-portrait.webp"); } }
/* dish pages (Brandy v3 F2): HTML height=640 beat aspect-ratio 4/3 at 390 */
.dish-hero-image img { height: auto; }
/* menu page: skip layout/paint of off-screen menu sections until scrolled near (render delay on mobile) */
.menu-static .menu-cat { content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* phones (menu page only): the sharp mobile hero backdrop shows; the small 585px banner (lazy) is not loaded */
@media (max-width: 600px) { .menu-static .page-hero--split .ph-img { display: none; } }
/* SB motion restored (Rakesh 21:32 via Atlas). No-JS fail-safe: if script.js never runs,
   every reveal target shows after 3s (script.js adds html.reveal-on first thing). */
@keyframes reveal-failsafe { to { opacity: 1; transform: none; background-position: 0 0; } }
html:not(.reveal-on) [data-reveal],
html:not(.reveal-on) [data-reveal] h1,
html:not(.reveal-on) [data-reveal] h2,
html:not(.reveal-on) :is(.plates-track .plate, .gallery-wall figure, .cat-grid .cat-tile, .faq-list .qa, .snap-grid img, .location-box > *, .info-cards .info-card) {
  animation: reveal-failsafe 0.6s ease 3s forwards;
}
/* LCP guard: the split-hero picture (page LCP on desktop) is never hidden; it keeps
   only SB's Ken Burns settle (scale 1.1 -> 1, transform only) */
.page-hero--split .ph-img[data-reveal] { opacity: 1; transition: transform 1.8s var(--ease-soft); }
@media (prefers-reduced-motion: reduce) {
  .page-hero--split .ph-img, .page-hero--split .ph-img[data-reveal] { transform: none; transition: none; }
}