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

/* Footer logo: keep intrinsic ratio now that width/height attributes are set */
.foot-brand img {
  height: auto;
}

/* TF dish hero: keep photo proportions (template has width:100% but no height:auto) */
.dish-hero-image img { height: auto; aspect-ratio: 5 / 4; object-fit: cover; }

/* ============================================================
   LIGHT THEME (Rakesh rule: Chinese / Indo-Chinese sites = no dark
   or extreme-dark colour blocks). Template brand-2 (#191717) stays
   for text only; every band / card / strip below is re-surfaced to
   cream with dark text and red/gold accents (AA contrast).
   ============================================================ */
:root {
  --lt-surface: #F7EADB;   /* light band surface (cream)            */
  --lt-strip:   #F3E2CF;   /* top bar + footer                      */
  --lt-text:    #3B302C;   /* body text on light surfaces (~11:1)   */
  --lt-line:    rgba(32, 26, 24, 0.14);
}

/* Top info bar (address, hours, phone) */
.site-topline { background: var(--lt-strip); color: var(--lt-text); border-bottom: 1px solid var(--lt-line); }
.site-topline a { color: var(--brand); }

/* Home "THE MENU" band */
.menu-band { background: var(--lt-surface); color: var(--lt-text); border: 1px solid var(--lt-line); }
.menu-band .kicker { color: var(--brand); }
.menu-band .kicker::before { background: var(--brand-3); }
.menu-band h2 { color: var(--ink); }
.menu-band h2 em { color: var(--brand); }
.menu-band p { color: var(--lt-text); }
.cat-tile { background: #fff; color: var(--ink); border: 1px solid var(--lt-line); }
.cat-tile .arrow { color: var(--brand); }
.cat-tile:hover { background: var(--brand); color: #fff; }
.cat-tile:hover .arrow { color: #fff; }

/* Hero dish card */
.board-card.dish { background: #fff; color: var(--ink); border: 1px solid var(--lt-line); }
.board-card.dish img { border-color: var(--brand-3); }
.board-card.dish .dish-note { color: var(--lt-text); }

/* Hours card (contact / place pages) */
.hours-table { background: #fff; color: var(--ink); border: 1px solid var(--lt-line); }
.hours-table h3 { color: var(--ink); }
.hours-table li { color: var(--lt-text); border-bottom-color: var(--lt-line); }

/* CTA bands (inner pages) */
.cta-container { background: var(--lt-surface); color: var(--lt-text); border-block: 1px solid var(--lt-line); }
.cta-content h2 { color: var(--ink); }
.cta-content p { color: var(--lt-text); }
.cta-content .btn { background: var(--brand); color: #fff; }
.cta-content .btn:hover { background: var(--chili-dark); color: #fff; }

/* Value-card icon tiles */
.value-card .v-ico { background: var(--chili-soft); }

/* Dark pill buttons -> brand red (white text 7:1) */
.btn--green, .dropbtn { background: var(--brand); color: #fff; }
.btn--green:hover { background: var(--chili-dark); }

/* Footer */
.site-footer { background: var(--lt-strip); color: var(--lt-text); border-top: 1px solid var(--lt-line); }
.foot-grid { border-bottom-color: var(--lt-line); }
.site-footer h4 { color: var(--ink); }
.site-footer a { color: var(--lt-text); }
.site-footer li a:hover { color: var(--brand); }
.foot-social a { background: #fff; color: var(--brand); border: 1px solid var(--lt-line); }
.foot-social a:hover { background: var(--brand); color: #fff; }
.foot-legal { color: var(--lt-text); }
.foot-legal a { color: var(--lt-text); }
.foot-legal a:hover { color: var(--brand); }
.foot-legal .credit a { color: var(--brand); }