/* Roadside Café — site styles (complements Tailwind CDN) */
:root { --brand: #ED1C24; --brand-dark: #C81017; }

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', system-ui, sans-serif; }
.font-display { font-family: 'Playfair Display', Georgia, serif; }
::selection { background: var(--brand); color: #fff; }

/* Generic icon sizing for inline SVGs */
[data-icon] svg, .ic svg { width: 100%; height: 100%; }

/* Nav */
.nav-link { padding: .55rem .9rem; border-radius: 9999px; font-weight: 600; font-size: .9rem; color: #334155; transition: color .15s; }
.nav-link:hover, .nav-link-active { color: var(--brand); }
#siteNav.nav-scrolled { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); box-shadow: 0 6px 24px -12px rgba(15,23,42,.25); }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"]  { transform: scale(.93); }
[data-reveal].revealed { transform: none; }

/* ===== HERO ===== */
.hero-bg {
  background:
    radial-gradient(900px 500px at 85% -5%, #fbe3cf 0%, transparent 55%),
    radial-gradient(700px 480px at 5% 8%, #ffe3e4 0%, transparent 50%),
    linear-gradient(180deg, #fffdfb 0%, #f6efe7 100%);
}
.text-gradient { background: linear-gradient(120deg, #ED1C24, #ff7a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero image collage */
.hero-photo { border-radius: 1.5rem; object-fit: cover; box-shadow: 0 30px 60px -25px rgba(15,23,42,.45); }
.hero-badge { backdrop-filter: blur(8px); }

/* ===== MENU MARQUEE ===== */
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.menu-track { display: flex; gap: 1rem; width: max-content; animation: scroll-left 45s linear infinite; }
.menu-track:hover { animation-play-state: paused; }   /* hover anywhere on the row pauses it */
@keyframes scroll-left { to { transform: translateX(-50%); } }
.menu-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.4rem; border-radius: 9999px;
  background: #fff; border: 1px solid #ececec;
  font-weight: 600; color: #475569; white-space: nowrap;
  opacity: .4; filter: grayscale(.5);
  transition: opacity .3s, filter .3s, transform .3s, box-shadow .3s, color .3s;
  cursor: default;
}
.menu-chip:hover {                                   /* highlight the hovered item */
  opacity: 1; filter: none; transform: translateY(-4px) scale(1.06);
  color: #0f172a; border-color: var(--brand);
  box-shadow: 0 18px 36px -16px rgba(237,28,36,.45);
}
.menu-chip-price { color: var(--brand); font-weight: 800; }
.menu-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.menu-dot.veg { box-shadow: inset 0 0 0 2px #16a34a; background: #16a34a33; }
.menu-dot.nonveg { box-shadow: inset 0 0 0 2px #dc2626; background: #dc262633; }

/* ===== STORY / founder photo ===== */
.founder-photo { object-fit: cover; border-radius: 1.5rem; box-shadow: 0 30px 60px -28px rgba(15,23,42,.5); }
.founder-fallback { background: linear-gradient(135deg, #ED1C24, #ff7a3c); }

/* ===== FAQ ===== */
.faq-item { border: 1px solid #ececec; border-radius: 1rem; background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.faq-item.open { border-color: #ED1C24; box-shadow: 0 16px 36px -20px rgba(237,28,36,.35); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; font-weight: 700; color: #0f172a; text-align: left; cursor: pointer; background: none; border: none; font-family: inherit; font-size: 1rem; }
.faq-chev { width: 20px; height: 20px; color: #94a3b8; transition: transform .3s; flex: 0 0 auto; }
.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--brand); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 280px; }
.faq-a-inner { padding: 0 1.4rem 1.3rem; color: #64748b; line-height: 1.7; }

/* Cards */
.feature-card, .t-card { transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover, .t-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(15,23,42,.28); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .menu-track { animation: none; }
  html { scroll-behavior: auto; }
}