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

/* Lucky Koi rebrand: wide horizontal logo (640x103) */
.brand img { width: 260px; height: auto; padding: 6px 10px; }
.foot-brand img { width: 240px; padding: 8px 12px; }
@media (max-width: 480px) { .brand img { width: 210px; } }

/* Lucky Koi: blue brand needs a blue (not red-mixed) dark shade */
:root { --chili-dark: color-mix(in srgb, var(--brand) 78%, #000814); }

/* TF known bug: dish hero image stretches */
.dish-hero-image img { height: auto; aspect-ratio: 5/4; object-fit: cover; }

/* Lucky Koi: two extra nav links (Gluten-Free Menu, Vegan Menu) — keep the desktop nav on one line */
.site-nav a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) {
  .brand img { width: 190px; }
  .site-header .wrap { gap: 0.75rem; }
  .site-nav { gap: 0.1rem; }
  .site-nav a { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
  .header-cta .btn { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .brand img { width: 160px; }
  .site-nav a { padding: 0.45rem 0.45rem; font-size: 0.86rem; }
}

/* Hero store bar: let long values (e.g. hours "Tue closed") wrap instead of being cut off on desktop */
.store-bar .sb-body span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ============================================================
   Lucky Koi LIGHT THEME (Rakesh rule 2026-10-06: Chinese
   restaurants — no dark themes / extreme dark colours).
   Navy only for text + accents, koi orange for highlights.
   All text pairs WCAG AA (navy on light blue 10:1, deep koi
   orange #a8520f on light blue 4.8:1, brand blue 4.6:1+).
   ============================================================ */
:root {
  --koi-sky: #eaf1fa;     /* light koi blue band */
  --koi-sky-2: #e3ecf7;   /* top bar */
  --koi-cream: #fdf6ec;   /* footer cream */
  --koi-orange-text: #a8520f; /* koi orange, deepened for AA text */
}

/* top bar */
.site-topline { background: var(--koi-sky-2); color: var(--brand-2); border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.site-topline a { color: var(--brand-2); }

/* Gluten-free / vegan band (home) */
.menu-band { background: var(--koi-sky); color: var(--brand-2); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); }
.menu-band h2 { color: var(--brand-2); }
.menu-band h2 em { color: var(--koi-orange-text); }
.menu-band p { color: var(--ink); }
.menu-band p a { color: var(--koi-orange-text) !important; font-weight: 600; }
.menu-band .kicker { color: var(--brand); }
.menu-band .kicker::before { background: var(--gold); }
.menu-band::after { -webkit-text-stroke: 1px color-mix(in srgb, var(--brand) 10%, transparent); }
.cat-tile { color: var(--brand-2); background: #fff; border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.cat-tile::before { color: var(--brand); }
.cat-tile .arrow { color: var(--koi-orange-text); }
.cat-tile:hover { background: var(--brand-2); color: #fff; }
.cat-tile:hover::before, .cat-tile:hover .arrow { color: #fff; }

/* CTA bands (inner pages) */
.cta-container { background: var(--koi-sky); color: var(--brand-2); }
.cta-content h2 { color: var(--brand-2); }
.cta-content p { color: var(--ink); }
.cta-content .btn { background: var(--brand-2); color: #fff; }

/* hours card (contact + location pages) */
.hours-table { background: var(--koi-sky); color: var(--brand-2); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); }
.hours-table h3 { color: var(--brand-2); }
.hours-table li { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--brand) 18%, transparent); }

/* footer */
.site-footer { background: var(--koi-cream); color: var(--ink); border-top: 3px solid var(--gold); }
.foot-grid { border-bottom-color: color-mix(in srgb, var(--brand-2) 14%, transparent); }
.site-footer a { color: var(--brand-2); }
.site-footer h4 { color: var(--brand-2); }
.site-footer li a:hover, .foot-legal a:hover { color: var(--koi-orange-text); }
.foot-social a { background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand-2); }
.foot-social a:hover { background: var(--brand); color: #fff; }
.foot-legal { color: color-mix(in srgb, var(--ink) 80%, #fff); }
.foot-legal a { color: var(--brand-2); }
.foot-legal .credit a { color: var(--koi-orange-text); }
.menu-band .btn--butter { background: var(--brand-2); color: #fff; }
.menu-band .btn--butter:hover { background: var(--brand); color: #fff; }

/* Lucky Koi LIGHT THEME — home hero (Obron 2026-10-06 per Rakesh's light-theme rule):
   lighter warm scrim (max 42%, no near-black bands top/bottom); text kept legible
   with text-shadow instead of a dark overlay. Photo, copy and layout unchanged. */
.hero-full::before {
  background: linear-gradient(
    180deg,
    rgba(58, 40, 28, 0.40) 0%,
    rgba(58, 40, 28, 0.18) 45%,
    rgba(58, 40, 28, 0.42) 100%
  );
}
.hero-full h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 4px 22px rgba(0, 0, 0, 0.45); }
.hero-full__tag,
.hero-full .kicker--light { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.5); }
.store-bar .sb-body strong,
.store-bar .sb-body span { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 10px rgba(0, 0, 0, 0.5); }
.hero-full__tag {
  background: rgba(58, 40, 28, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--r-lg);
  padding: 0.6rem 1rem;
}
.hero-full__tag a, .hero-full__tag em { color: #ffc56b !important; }
