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

/* ===== Open now / Closed now badge (new-website standards 2026-10-22) =====
   Sits just under the header (absolute, so it never shifts the layout).
   Hidden until the live hours check answers; stays hidden on any error. */
.open-badge {
  position: absolute;
  top: calc(100% + 8px);
  left: max(12px, calc((100% - 1200px) / 2 + 12px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.open-badge[hidden] { display: none; }
.open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
}
.open-badge.is-open::before { background: #15803d; }
.open-badge.is-closed::before { background: #b91c1c; }
/* 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; }

/* ---------- Maps (squad map pattern, 2026-11-05) ----------
   No overflow at 360-414 (grid children may shrink, fixed mobile height instead of a ratio);
   no scroll trap: a transparent .map-shield covers the iframe on touch screens until the first tap
   (components.js), and returns once the map scrolls out of view. .map-block = map + Get directions. */
.contact-sec .wrap > *, .map-block { min-width: 0; }
.map-block { display: flex; flex-direction: column; gap: .75rem; }
.map-block .map-directions { align-self: flex-start; }
.map-frame { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.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 { aspect-ratio: auto; min-height: 0; height: 320px; } }

/* ---------- Logo (Brandy pack: real logo keyed from the storefront sign, transparent 485x170 = 2.85:1) ----------
   Navy logo.webp on the white header (85px tall box = 243px wide, no white plate needed);
   the white-ink logo-light.webp only on the #1E2D3D footer band (THEME.md: never on red). */
.brand img { width: 243px; height: auto; object-fit: contain; background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.foot-brand img { width: 200px; height: auto; object-fit: contain; background: transparent; padding: 0; border-radius: 0; }
@media (max-width: 359px) { .brand img { width: 200px; } }
/* Footer = exactly --brand-2 (#1E2D3D), the band logo-light.webp is made for (TF derived a darker mix). */
.site-footer { background: var(--brand-2); }

/* ---------- Contrast fixes (THEME.md safe pairings) ----------
   --brand-3 gold is never text on white/canvas (2.03:1): the dish-page rating line uses --ink (on white 15.9:1).
   A .btn inside legal/404 copy inherited the red link colour on the red button (3.59:1): white on --brand = 5.84:1. */
.dish-rating span { color: var(--ink); }
.privacy-desc a.btn, .privacy-desc a.btn:hover { color: #fff !important; text-decoration: none; }

/* CLS (Mr. Schnapp's lesson f5baa44 + font swap): 1) until components.js injects the header, the breadcrumb
   fallback holds the header's measured height (110px <=900px, 148px >=901px); 2) metric-matched local fallbacks
   for Poppins / Noto Sans so the display=swap font change does not reflow text. */
body:not(.header-loaded) .breadcrumb-container { min-height: 110px; box-sizing: border-box; }
@media (min-width: 901px) { body:not(.header-loaded) .breadcrumb-container { min-height: 148px; } }
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 112.16%; ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; }
@font-face { font-family: "Noto Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 106.37%; ascent-override: 100.18%; descent-override: 27.46%; line-gap-override: 0%; }