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

/* ============================================================
   CHACHU KI BIRYANI — 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 v2, owner logo cut out): owner's white original on the black header and footer.
   Transparent, so no plate. 469x170 (2.76:1): width 242 keeps the 87.7px height of v1, so header height is unchanged. */
.brand img { width: 242px; height: auto; object-fit: contain; background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.foot-brand img { width: 178px; height: auto; object-fit: contain; background: transparent; padding: 0; border-radius: 0; }
/* v2 logo on very narrow phones: keeps logo + Order Online + menu toggle inside 320px. */
@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; }
}

/* ============================================================
   BLACK AND GOLD — the owner's new menu card (2026-11).
   Black pages, gold plaques, the grey "web" lattice on alternate sections and the gold star
   corners from the top of the card. style.css was written for light pages, so its hard-coded
   whites are answered here; style.css itself stays as the template.
   Artwork: assets/patterns/ (web tile 300x520, corners 300x300).
   ============================================================ */
:root {
  color-scheme: dark;
  --on-gold: #0a0a0a;
  --bg: #000000;
  --card: #171717;
  --sand-2: #262626;
  --muted: #cdc9bf;
  --chili-dark: var(--brand-3);
  --chili-soft: color-mix(in srgb, var(--brand) 18%, #0a0a0a);
  --basil: #0c0c0c;
  --basil-deep: #000000;
  --line: color-mix(in srgb, var(--brand) 30%, #0a0a0a);
  /* every card and photo uses these, so each one picks up the gold hairline */
  --shadow-sm: 0 0 0 1px var(--line), 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent), 0 24px 60px rgba(0, 0, 0, 0.7);
  --web: url("assets/patterns/menu-web-grey.svg") 0 0 / 300px 520px;
  --web-gold: url("assets/patterns/menu-web-ink.svg") 0 0 / 300px 520px;
  --corner: clamp(84px, 15vw, 210px);
  --corner-left: url("assets/patterns/menu-corner-left.svg") left top / var(--corner) no-repeat;
  --corner-right: url("assets/patterns/menu-corner-right.svg") right top / var(--corner) no-repeat;
}

::selection { background: var(--chili); color: var(--on-gold); }
html { scrollbar-color: #4a4a4a transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3a; }
::-webkit-scrollbar-thumb:hover { background: var(--chili); }

/* --- the web lattice, on the sections the template tints --- */
.story, .faq, .values, .reviews-container, .dish-hero .dish-hero-container {
  background: var(--web), var(--sand);
}
.site-footer {
  background: var(--web), var(--basil-deep);
  border-top: 3px solid var(--chili);
}
.page-hero {
  background: linear-gradient(180deg, transparent 45%, var(--bg) 100%), var(--corner-right), var(--web), var(--sand);
}
#home-hero {
  background: linear-gradient(180deg, transparent 45%, var(--bg) 100%), var(--corner-left), var(--corner-right), var(--web), var(--sand);
}
.menu-band {
  background: var(--corner-right), var(--web), var(--basil);
  box-shadow: 0 0 0 1px var(--chili);
}
.menu-band::after { -webkit-text-stroke-color: color-mix(in srgb, var(--brand) 26%, transparent); }
.hero-full::before {
  background: var(--corner-left), var(--corner-right),
    linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.84) 100%);
}

/* --- gold plaques, like the card's column headings --- */
.kicker, .menu-band .kicker, .kicker--light, .cs-topper, #home-hero .cs-subtitle {
  padding: 0.35rem 0.8rem;
  border-radius: 3px;
  background: var(--chili);
  color: var(--on-gold);
}
.kicker::before, .cs-topper::before { display: none; }
.site-topline { background: var(--chili); color: var(--on-gold); font-weight: 600; }
.site-topline a { color: var(--on-gold); }

/* --- header, nav and sticky bars --- */
.site-header {
  background: rgba(0, 0, 0, 0.92);
  border-bottom-color: var(--chili);
}
.mobile-menu-controls, .floating-btn-wrapper { background: rgba(0, 0, 0, 0.94); }
.floating-btn-wrapper { border-top-color: var(--chili); }
@media (max-width: 900px) {
  .site-nav { background: #000; border-bottom-color: var(--chili); }
}
.dropdown-content, .popup-content { background: var(--card); }
.dropbtn { background: var(--chili); color: var(--on-gold); }

/* --- buttons: black text on gold --- */
.btn, .btn:hover, .btn--butter, .btn--butter:hover, .cs-button-solid, .cs-button-solid:hover,
#home-hero .cs-button-solid, #home-hero .cs-button-solid:hover, .btn-small, .btn-small:hover {
  color: var(--on-gold);
}
.btn--butter { background: var(--chili); }
.btn--butter:hover { background: var(--chili-dark); }
.btn--green, .btn--green:hover {
  background: #000;
  color: var(--chili);
  box-shadow: inset 0 0 0 2px var(--chili);
}
.btn-line, .cs-button-ghost, .btn-secondary {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--chili);
}
.btn-line:hover, .cs-button-ghost:hover, .btn-secondary:hover {
  background: var(--chili);
  color: var(--on-gold);
}
.arrow-btn:hover, .qa[open] summary .qa-ico, .active-button, .active-button:hover, .step-number,
.faq__item.active .faq__icon, .close-popup, .info-card:hover .ic, .to-top:hover, .foot-social a:hover {
  color: var(--on-gold);
}
.to-top { background: var(--card); box-shadow: var(--shadow-md); }

/* --- whites that were cards on the old light pages --- */
.sticker, .hero-proof .chip, .story-copy .chip, .quotes-intro .chip, .cta-chips .chip,
.dish-hero .dish-detail, #home-hero .hero-stats li {
  background: var(--card);
}
.chip, .dish-detail, .arrow-btn, .nav-toggle { box-shadow: 0 0 0 1px var(--line); }
.story-collage .img-b { border-color: var(--chili); }
.value-card .v-ico { background: var(--chili); }
.value-card .v-ico img { filter: brightness(0); }

/* --- the template's secondary colour was also a text colour --- */
.bd-body .bd-note, .item-desc span, .delivery-area h3, .delivery-area-card h3, .package-card h3,
.signoff, .delivery-features li .ico, .takeout-features li .ico, .nav-extra__tel .ico {
  color: var(--chili);
}
.signoff::before, .nutrition-info li::before { background: var(--chili); }

/* --- menu band tiles --- */
.cat-tile { box-shadow: 0 0 0 1px var(--line); }
.cat-tile:hover { background: var(--chili); color: var(--on-gold); }
.cat-tile:hover .arrow, .cat-tile:hover::before { color: var(--on-gold); }
.cat-tile::before { color: var(--muted); }

/* --- hero info bar sits on the photo --- */
.store-bar { background: rgba(0, 0, 0, 0.66); box-shadow: 0 0 0 1px var(--chili), 0 24px 60px rgba(0, 0, 0, 0.6); }
a.sb-cell:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.sb-cell:last-child .sb-ico { background: var(--chili-soft); }

/* --- open badge, location cards and the chooser dialog --- */
.open-badge { background: #000; color: #fff; box-shadow: 0 0 0 1px var(--chili); }
.open-badge.is-open::before { background: #4ade80; }
.open-badge.is-closed::before { background: #f87171; }
.loc-card .open-badge, .loc-map .open-badge, .loc-chooser .open-badge, .hero-full .open-badge.in-flow, .open-badge.in-flow {
  border-color: var(--line); box-shadow: none; }
.loc-card, .loc-map { border-color: var(--line); }
.loc-chooser { background: var(--card); color: #fff; box-shadow: 0 0 0 1px var(--chili), 0 24px 60px rgba(0, 0, 0, 0.7); }
.loc-chooser::backdrop { background: rgba(0, 0, 0, 0.75); }
.loc-chooser__close { background: #000; color: #fff; border-color: var(--line); }
.loc-chooser__note, .loc-chooser__addr, .loc-chooser__hours { color: var(--muted); }
.loc-chooser__opt { color: #fff; border-color: var(--line); }

/* --- gold CTA panels: the one full-yellow moment, so everything inside flips to black --- */
.cta-band, .cta-container, .cta__container { background: var(--web-gold), var(--chili); color: var(--on-gold); }
.cta-band::before { display: none; }
.cta-band h2, .cta-band h2 em, .cta-band .lede, .cta-band .cta-phone, .cta-band .cta-phone a,
.cta-content h2, .cta-content p, .cta__container h2, .cta__container p, .cta__container .section__header,
.cta__container .section__header span, .cta__container .section__description, .cta__container a:not([class]) {
  color: var(--on-gold);
}
.cta-band h2 em { background: linear-gradient(180deg, transparent 88%, var(--on-gold) 88%); }
.cta-band .kicker { background: var(--on-gold); color: var(--chili); }
.cta-band .btn, .cta-band .btn:hover, .cta-content .btn, .cta-content .btn:hover, .cta__container .btn, .cta__container .btn:hover {
  background: var(--on-gold);
  color: var(--chili);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.cta-band .btn-line, .cta-container .btn-line, .cta__container .btn-line, .cta__container .btn-secondary {
  color: var(--on-gold);
  box-shadow: inset 0 0 0 2px var(--on-gold);
}
.cta-band .btn-line:hover, .cta-container .btn-line:hover, .cta__container .btn-line:hover, .cta__container .btn-secondary:hover {
  background: var(--on-gold);
  color: var(--chili);
}
.cta-band a:focus-visible, .cta-container a:focus-visible, .cta__container a:focus-visible { outline-color: var(--on-gold); }
/* style.css forces these link colours with !important, so the flips have to as well */
.section__description a.btn, .privacy-desc a.btn { color: var(--on-gold) !important; text-decoration: none; }
.cta__container .section__description a, .cta-container .section__description a { color: var(--on-gold) !important; }
.cta__container .section__description a.btn, .cta-container .section__description a.btn { color: var(--chili) !important; }
.site-nav .nav-extra .btn { color: var(--on-gold); }
/* two gold buttons side by side compete, so the hero keeps gold for ordering only */
.hero-full .btn--butter, .hero-full .btn--butter:hover { background: rgba(0, 0, 0, 0.55); color: #fff; box-shadow: inset 0 0 0 2px var(--chili); }

/* the frame is positioned, so a large dark shadow would paint over the buttons below it */
.loc-map .map-frame { box-shadow: 0 0 0 1px var(--line); }