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

/* 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): max ONE map per page. .map-block = map + Get directions.
   No overflow at 360-414; on touch screens a transparent .map-shield covers the iframe until the
   first tap (components.js) so the page scrolls past the map; it returns once the map leaves view. */
.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 { width: 100%; max-width: 100%; }
.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 { min-height: 320px; } }

/* Logo (Brandy pack v1: real orange flame + wordmark on transparent, 1419x377 = 3.76:1).
   Orange logo straight on the light header (no white plate); white logo on the charcoal footer. */
.brand img { width: 230px; height: auto; background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
@media (max-width: 380px) { .brand img { width: 190px; } }
.foot-brand img { width: 190px; height: auto; background: transparent; padding: 0; border-radius: 0; }

/* TF dish-hero stretch fix: width/height attributes + width:100% stretched mixed-size photos. */
.dish-hero-image img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Contrast: --brand-3 rating text uses --ink (one copper accent, AA). */
.dish-rating span.rating-count { color: var(--ink); }

/* Menu perf (74 live dishes): skip layout/paint of off-screen dish rows until they scroll near. */
.menu-items .menu-item, #menu-items .menu-item { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* PT font layer (Atlas 2026-11-10): Barlow ships 2 weights (Condensed 700, regular 400); never synthesise faux-bold. */
:root { font-synthesis-weight: none; }
/* CLS: Barlow Condensed is narrower than the fallback, so hero button rows could re-wrap on font load;
   stack them on small phones (KD Saskatoon / MEXIKAN fix). */
@media (max-width: 479.98px) {
  .hero-actions, .hero-full .hero-actions, .page-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions > .btn, .hero-actions > a { width: 100%; justify-content: center; text-align: center; }
}

/* PT layer: no uppercase labels anywhere (decision 18.5); sentence case comes from the HTML text. */
.kicker, .plate .plate-no, .plate .plate-foot, .item-desc span, .info-card strong, #home-hero .cs-subtitle, .cs-topper { text-transform: none; letter-spacing: normal; }

/* Pasta + Milkshakes have no real photo (owner Q): their dish heroes are text only, full width. */
.dish-hero-container:not(:has(.dish-hero-image)) { grid-template-columns: 1fr; }
.dish-hero-container:not(:has(.dish-hero-image)) .dish-hero-content { max-width: 46rem; }

/* a11y: contact "Opening hours" is an h2 (heading order), styled like the template's h3. */
.hours-table h2 { color: #fff; font-size: 1.2rem; margin-bottom: 0.9rem; }
/* a11y: copper on the charcoal footer is 3.16:1, so the credit link uses near-white (Brandy v1.1 note). */
.foot-legal .credit a { color: rgba(255, 255, 255, 0.92); }

/* Brandy image check 6d33921 (header gate): drawer "Order online" text was --ink on copper (3.16:1); white = 5.27:1 */
.site-nav .nav-extra .btn,
.site-nav .nav-extra .btn:hover { color: #fff; }

/* header gate (Brandy v1.3): opaque header so the copper logo stays 5.27:1 when the header sits over the dark hero */
.site-header { background: #ffffff; }

/* Dennis QA 6d33921 F4: keep reading measure at or under 75 characters per line at 1280/1440/1920 */
/* Barlow is narrow (1ch ~ 1.4 characters), so 65ch still gave up to 91 characters; 52ch keeps lines at or under 75.
   !important because the template sets wider max-widths with higher specificity (.page-hero .lede, .hero-copy .lede). */
body :is(p, .lede, .cs-text, .dish-description, .section__description, .faq-answer, .hero-full__tag) { max-width: 52ch !important; }

/* Dennis QA 6aa59c9 F5: the 52ch cap narrowed centred paragraphs without centring them; re-centre them inside the template's centred blocks only (left-aligned text untouched) */
body :is(.cta-band, .section__header, #home-hero, .order-cta, .cta__container, .cta-container, .hero-full__content, .order-step) :is(p, .lede, .cs-text, .section__description, .hero-full__tag) { margin-inline: auto !important; }