/* ============================================================
   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; }

/* ============================================================
   CAFE IMRAN KHAN — two locations (shared, written by Wilson; agents reuse these classes)
   .loc-cards  = location cards (home, locations hub, menu chooser page, contact)
   .loc-maps   = two-location map block (one map per location, each in its own card)
   .loc-chooser = the location chooser dialog behind every brand-level Order Online button
   ============================================================ */
.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: var(--card, #fff); color: inherit; border: 1px solid rgba(0,0,0,.1); border-radius: var(--r-lg, 1.35rem); overflow: hidden; }
.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__rating { margin: 0; line-height: 1.5; }
.loc-card__phone a { font-weight: 600; }
.loc-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .75rem; }
/* badges inside cards/dialog sit in the flow (the header badge stays absolute under the header) */
.loc-card .open-badge, .loc-map .open-badge, .loc-chooser .open-badge, .hero-full .open-badge.in-flow, .open-badge.in-flow {
  position: static; align-self: flex-start; box-shadow: none; border: 1px solid rgba(0,0,0,.15); }
.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: var(--card, #fff); color: inherit; border: 1px solid rgba(0,0,0,.1); border-radius: var(--r-lg, 1.35rem); }
.loc-map h3 { margin: 0; }
.loc-map p { margin: 0; }
.loc-map .map-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md, 1rem); 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; }
.loc-chooser { width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 1.5rem; border: 0; border-radius: var(--r-lg, 1.35rem); background: #fff; color: #1f1d1a; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.loc-chooser::backdrop { background: rgba(20, 16, 12, .6); }
.loc-chooser__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.loc-chooser__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: inherit; }
.loc-chooser__close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.2); border-radius: 50%; background: #fff; color: #1f1d1a; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.loc-chooser__note { margin: .75rem 0 1rem; line-height: 1.5; color: #3d3a36; }
.loc-chooser__list { display: grid; gap: .75rem; }
.loc-chooser__opt { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border: 2px solid rgba(0,0,0,.12); border-radius: var(--r-md, 1rem); color: #1f1d1a; text-decoration: none; }
.loc-chooser__opt:hover, .loc-chooser__opt:focus-visible { border-color: var(--brand, #b3261e); outline: none; }
.loc-chooser__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.loc-chooser__addr, .loc-chooser__hours { font-size: .95rem; color: #3d3a36; }
.loc-chooser__go { margin-top: .35rem; font-weight: 700; color: var(--brand-ink, var(--brand, #b3261e)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .loc-chooser { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 1.25rem 1.25rem 0 0; }
}
/* CLS (Mr. Schnapp's lesson f5baa44): the header is injected by components.js; until then the breadcrumb fallback
   holds the header's height (TF: top bar + header = 103px <=900px, 140px >=901px), so the page does not jump.
   Re-measured on this build before READY. */
body:not(.header-loaded) .breadcrumb-container { min-height: 103px; box-sizing: border-box; }
@media (min-width: 901px) { body:not(.header-loaded) .breadcrumb-container { min-height: 140px; } }
/* Logo (Brandy pack: real badge, transparent 485x170 = 2.85:1). Green badge on the white header, the light
   (white badge) version on the green footer. Transparent, so no white plate. Width 243 = 85px tall. */
.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; } }

/* Location-page hero badge (inside .hero-full__content, after the kicker) sits in the flow:
   it inherited the header badge's absolute top:calc(100% + 8px) and covered the store bar's
   "Find us" cell (flagged by Brandy 2026-11-05, pre-existing since the Pack v2 build). */
.hero-full__content > .open-badge:not([hidden]) { position: static; display: flex; width: max-content; margin: .9rem auto 0; }

/* ---------- Mobile maps (Sales fix 2026-11-05) ----------
   1. No overflow: .loc-map .map-frame had aspect-ratio 4/3 + the base
      min-height 440/340px, which forced a 453px minimum width and pushed the
      grid column past a 360px screen. Grid items may now shrink (min-width 0)
      and the map gets a fixed mobile height instead of a ratio.
   2. No scroll trap: a transparent .map-shield sits over each iframe on touch
      screens; the first tap removes it (components.js), and it comes back
      once the map scrolls out of view. Mouse/trackpad screens never see it.
   3. .map-block = map + its "Get directions" button (places/dish/location pages). */
.contact-sec .wrap > *, .loc-maps > *, .loc-map, .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%; 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; }
}


/* Fraunces ships one weight (600): never synthesise a faux bold on TF's 700-800 display headings
   (keeps the face crisp and stops a swap-time width change). */
html { font-synthesis: none; }

/* Contrast (Brandy THEME: --brand-3 #2FB34A is an accent, never text on white and 4.18:1 on #044323).
   Accent TEXT on the dark green bands, hero overlay and footer = light green #A8E6B4 (7.99:1 on #044323,
   5.65:1 on #0A5C34). Star glyphs and icons on light backgrounds = --brand #0A5C34 (7.4:1 on canvas). */
.hero-full em, .hero-full__tag em, .menu-band .kicker, .menu-band h2 em, .menu-band em, .cta-band h2 em, .cta-band em,
.foot-legal .credit a { color: #A8E6B4; }
.quote-card .stars, .dish-rating span, .sticker::before, .sb-cell:last-child .sb-ico { color: var(--brand); }