/* ============================================================
   CUSTOM — Per-store overrides for Template TF (SnackO’ Surti)
   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; }

/* ---- Logo: owner artwork is 234x170 (near-square), so size by height, not the TF 250px width ---- */
.brand img { width: auto; height: 72px; padding: 4px 10px; }
.foot-brand img { width: auto; height: 84px; padding: 6px 12px; }
/* header CLS reserve while components.js loads the top line + header
   (measured: 37.66px top line + 97px header; the top line is hidden <= 900px) */
#header-container:empty { display: block; min-height: 134.66px; }
@media (max-width: 900px) { #header-container:empty { min-height: 97px; } }

/* hero copy over the bright truck photo: a soft shadow keeps the tagline readable */
.hero-full h1, .hero-full__tag { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }

/* ---- Home hero photo slideshow (kept from the previous build; 2 real truck photos) ----
   Each slide drifts with a slow Ken Burns zoom/pan and hands over with a 1.8 s
   cross-fade every 6 s. JS in components.js only switches classes.
   Reduced motion: first photo, still. One slide = still hero. */
.hero-slides { overflow: hidden; background: #181410; }
.hero-slides .hero-slide,
.hero-slides .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slides .hero-slide { opacity: 0; transition: opacity 1.8s cubic-bezier(0.45, 0, 0.55, 1); will-change: opacity; }
.hero-slides .hero-slide.is-active { opacity: 1; z-index: 2; }
.hero-slides .hero-slide.is-leaving { opacity: 0; z-index: 1; }
.hero-slides .hero-slide img {
  object-fit: cover; object-position: center;
  transform: scale(1.04); transform-origin: 50% 50%;
  backface-visibility: hidden; will-change: transform;
}
.hero-slides .kb-1 img { animation: heroKb1 9.6s linear both; }
.hero-slides .kb-2 img { animation: heroKb2 9.6s linear both; }
.hero-slides .kb-3 img { animation: heroKb3 9.6s linear both; }
.hero-slides .kb-4 img { animation: heroKb4 9.6s linear both; }
.hero-slides .kb-5 img { animation: heroKb5 9.6s linear both; }
@keyframes heroKb1 { from { transform: scale(1.02) translate3d(0, 0, 0); }      to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes heroKb2 { from { transform: scale(1.14) translate3d(1.5%, 0, 0); }   to { transform: scale(1.03) translate3d(0, 0, 0); } }
@keyframes heroKb3 { from { transform: scale(1.08) translate3d(-2.5%, 0, 0); }  to { transform: scale(1.08) translate3d(2.5%, 0, 0); } }
@keyframes heroKb4 { from { transform: scale(1.03) translate3d(0, 1%, 0); }     to { transform: scale(1.15) translate3d(1%, -1.5%, 0); } }
@keyframes heroKb5 { from { transform: scale(1.12) translate3d(0, -1.5%, 0); }  to { transform: scale(1.02) translate3d(0, 0, 0); } }
.hero-slides .hero-slide:only-of-type img { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slides .hero-slide { transition: none; }
  .hero-slides .hero-slide img { animation: none !important; transform: none; }
}

/* ---- Home gallery (real photos; TF has no gallery block on the home page) ---- */
.home-gallery { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--sand); }
.home-gallery .sec-head { margin-bottom: 1.75rem; }
.home-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.home-gallery__grid img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.home-gallery__grid img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (max-width: 700px) { .home-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }


/* ---- Legacy compat sections (guelph-indian-restaurant): centre the kicker above a centred .section__header ---- */
.section__container > .kicker { display: flex; justify-content: center; text-align: center; }

/* ---- Dish pages: related-dish list + read-more links styled as links (TF prose link look) ---- */
.dish-description-content li a,
.dish-description-content p a {
  color: var(--chili-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  display: inline-block; min-height: 24px; padding-block: 3px; line-height: 1.3;
}
.dish-description-content li a:hover, .dish-description-content p a:hover { color: var(--chili); }