/* ===========================================================
   BBQ Express — main stylesheet
   Mobile-first. Palette matches Wow! Momo's red/yellow/white brand look.
=========================================================== */

:root{
  --red:#ed1b24;
  --red-dark:#922623;
  --maroon:#3c0000;
  --yellow:#fbbe15;
  --yellow-2:#ffed1d;
  --ink:#241e20;
  --ink-dim:#6b6465;
  --paper:#ffffff;
  --paper-2:#fff8ec;
  --line:#eee0c8;
  --green-veg:#2e9e44;
  --max-w:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  line-height:1.6;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.05;
  color:var(--ink);
}

.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:0.8rem;
  font-weight:600;
}

.section{padding:clamp(3rem, 8vw, 5.5rem) 0;}
.section-inner, .header-inner, .footer-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.25rem;
}

.section-head{margin-bottom:2.2rem; text-align:center;}
.section-head h2{font-size:clamp(1.8rem, 5vw, 2.6rem);}

.empty-note{
  color:var(--ink-dim);
  text-align:center;
  padding:2rem;
  border:1px dashed var(--red);
  border-radius:12px;
  grid-column:1/-1;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:0.85rem 1.8rem;
  border-radius:50px;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary{
  background:var(--red);
  color:#fff;
  box-shadow:0 6px 16px rgba(237,27,36,0.25);
}
.btn-primary:hover{transform:translateY(-2px); background:var(--red-dark); box-shadow:0 10px 22px rgba(237,27,36,0.35);}
.btn-outline{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline:hover{border-color:var(--red); color:var(--red);}
.btn-sm{padding:0.55rem 1.2rem; font-size:0.75rem;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--red);
  border-bottom:4px solid var(--ink);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:0.7rem; padding-bottom:0.7rem;
  gap:1rem;
}

/* Yellow rounded badge logo, in the spirit of a QSR brand mark */
.logo-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--yellow);
  border-radius:16px;
  padding:0.4rem 1rem 0.5rem;
  line-height:1;
  flex-shrink:0;
}
.logo-badge-main{
  font-family:'Anton', sans-serif;
  font-size:1.35rem;
  letter-spacing:0.03em;
  color:var(--ink);
  text-transform:uppercase;
}
.logo-badge-main em{
  font-style:normal;
  color:var(--red);
}
.logo-badge-sub{
  font-family:'Anton', sans-serif;
  font-size:0.85rem;
  letter-spacing:0.06em;
  color:var(--red-dark);
  text-transform:lowercase;
  margin-top:-2px;
}

.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px;
  background:none; border:none; cursor:pointer;
  z-index:110;
}
.hamburger span{
  display:block; height:3px; width:100%;
  background:var(--yellow);
  border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.main-nav{
  position:fixed;
  top:0; right:-100%;
  width:min(82vw, 320px);
  height:100vh;
  overflow-y:auto;
  background:var(--red);
  display:flex; flex-direction:column;
  gap:0.2rem;
  padding:5.5rem 1.4rem 2rem;
  transition:right 0.3s ease;
  z-index:105;
}
.main-nav.open{right:0;}
.main-nav > a{
  padding:0.85rem 0.3rem;
  font-size:0.95rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-bottom:1px solid rgba(255,255,255,0.15);
  color:var(--yellow);
}
.main-nav > a.active, .main-nav > a:hover{color:#fff;}

.nav-item{border-bottom:1px solid rgba(255,255,255,0.15);}
.nav-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer;
  padding:0.85rem 0.3rem;
  font-family:'Jost', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:0.95rem;
  color:var(--yellow);
}
.nav-toggle:hover{color:#fff;}
.caret{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform 0.2s ease;
  margin-left:0.5rem;
}
.nav-item.open .caret{transform:rotate(-135deg);}

.dropdown-panel{
  display:none;
  flex-direction:column;
  background:var(--red-dark);
  border-radius:8px;
  margin:0.2rem 0 0.6rem;
  overflow:hidden;
}
.nav-item.open .dropdown-panel{display:flex;}
.dropdown-panel a{
  padding:0.7rem 1rem;
  font-size:0.88rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--yellow);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.dropdown-panel a:last-child{border-bottom:none;}
.dropdown-panel a:hover{color:#fff;}

@media (min-width:900px){
  .hamburger{display:none;}
  .main-nav{
    position:static; height:auto; width:auto; overflow:visible;
    flex-direction:row; align-items:center;
    background:none; padding:0; gap:1.7rem;
  }
  .main-nav > a{border-bottom:none; padding:0; font-size:0.85rem;}
  .nav-item{border-bottom:none; position:relative;}
  .nav-toggle{padding:0; font-size:0.85rem; width:auto;}

  .dropdown-panel{
    position:absolute;
    top:100%; left:0;
    min-width:200px;
    margin:0;
    border-radius:0 0 10px 10px;
    box-shadow:0 14px 24px rgba(36,30,32,0.25);
  }
  .dropdown-panel a{padding:0.8rem 1.2rem; font-size:0.82rem;}
}

/* ---------- Hero Slider ---------- */
.hero-slider{
  position:relative;
  height:62vh;
  min-height:380px;
  max-height:640px;
  overflow:hidden;
  background:var(--ink);
}
.slider-track{
  display:flex;
  height:100%;
  transition:transform 0.5s ease;
}
.slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slide-fallback{
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(251,190,21,0.35), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(237,27,36,0.35), transparent 60%),
    var(--ink);
}
.slide-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,30,32,0.35) 0%, rgba(36,30,32,0.65) 100%);
}
.slide-content{
  position:relative; z-index:2;
  text-align:center;
  max-width:640px;
  padding:0 1.5rem;
  color:#fff;
}
.slide-content h1{
  font-size:clamp(2.2rem, 8vw, 4.2rem);
  color:#fff;
}
.slide-content .lead{
  color:rgba(255,255,255,0.9);
  font-size:clamp(0.95rem, 2.2vw, 1.15rem);
  margin:1rem auto 1.6rem;
  max-width:44ch;
}
.slide-content .hero-actions{display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap;}
.btn-outline-light{
  border-color:#fff; color:#fff;
}
.btn-outline-light:hover{background:#fff; color:var(--ink);}

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(255,255,255,0.85);
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease;
}
.slider-arrow:hover{background:var(--yellow);}
.slider-arrow.prev{left:0.8rem;}
.slider-arrow.next{right:0.8rem;}

.slider-dots{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  display:flex; gap:0.5rem; z-index:3;
}
.slider-dots .dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:none; cursor:pointer; padding:0;
  transition:background 0.2s ease, transform 0.2s ease;
}
.slider-dots .dot.active{background:var(--yellow); transform:scale(1.2);}

@media (min-width:700px){
  .hero-slider{height:72vh;}
}

/* ---------- USP strip ---------- */
.usp-strip{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:2rem 1.25rem;
}
.usp-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.2rem;
}
.usp-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0.3rem;
}
.usp-icon{font-size:1.8rem;}
.usp-title{font-weight:700; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.02em;}
.usp-text{font-size:0.8rem; color:var(--ink-dim);}

@media (min-width:700px){
  .usp-grid{grid-template-columns:repeat(4, 1fr);}
}

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.4rem;
}
.testimonial-card{
  background:var(--paper-2);
  border:2px solid var(--line);
  border-radius:16px;
  padding:1.6rem;
}
.testimonial-card .stars{color:var(--yellow); letter-spacing:0.2em; margin-bottom:0.8rem; font-size:1rem;}
.testimonial-card p{color:var(--ink-dim); font-size:0.92rem; margin-bottom:1rem; font-style:italic;}
.testimonial-name{font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--red-dark);}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.7rem;
}
.gallery-item{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.gallery-item:hover img{transform:scale(1.06);}

@media (min-width:600px){
  .gallery-grid{grid-template-columns:repeat(4, 1fr);}
}

/* ---------- Events teaser ---------- */
.events-teaser{background:var(--paper-2);}
.events-teaser-inner{
  display:flex; flex-direction:column; gap:1.4rem;
  align-items:flex-start;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:20px;
  padding:2rem;
}
.events-teaser-inner h2{font-size:clamp(1.6rem, 5vw, 2.1rem); margin:0.4rem 0 0.6rem;}
.events-teaser-inner p{color:var(--ink-dim); max-width:52ch;}

@media (min-width:800px){
  .events-teaser-inner{flex-direction:row; align-items:center; justify-content:space-between;}
}

/* ---------- Hero (fallback, unused pages) ---------- */
.hero{
  min-height:78vh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251,190,21,0.25), transparent 60%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  padding:4rem 1.25rem;
  text-align:center;
}
.hero-content{max-width:640px; margin:0 auto;}
.hero h1{
  font-size:clamp(3rem, 12vw, 6rem);
  color:var(--ink);
}
.hero h1 span{
  display:block;
  color:var(--red);
  -webkit-text-stroke:0;
}
.hero .lead{
  color:var(--ink-dim);
  font-size:clamp(1rem, 2.2vw, 1.2rem);
  margin:1.4rem auto 2rem;
  max-width:42ch;
}
.hero-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* ---------- Order strip ---------- */
.order-strip{
  background:var(--ink);
  padding:1.4rem 1.25rem;
}
.order-strip-inner{
  max-width:var(--max-w); margin:0 auto;
  display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap;
}
.order-pill{
  padding:0.6rem 1.3rem;
  border:2px solid var(--yellow);
  border-radius:50px;
  font-size:0.82rem;
  font-weight:600;
  color:#fff;
  transition:all 0.2s ease;
}
.order-pill:hover{background:var(--yellow); color:var(--ink);}

/* ---------- Story ---------- */
.story{background:var(--paper-2);}
.story-grid{
  display:grid; gap:2.5rem;
}
.story-text h2{font-size:clamp(1.8rem, 5vw, 2.4rem); margin-bottom:1rem;}
.story-text p{color:var(--ink-dim); margin-bottom:1rem;}
.story-stats{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
}
.stat{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:14px;
  padding:1.4rem 0.8rem;
  text-align:center;
}
.stat .num{
  display:block;
  font-family:'Anton', sans-serif;
  font-size:1.8rem;
  color:var(--red);
}
.stat .lbl{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-top:0.3rem;
}

@media (min-width:800px){
  .story-grid{grid-template-columns:1.2fr 1fr; align-items:center;}
}

/* ---------- Dish grid ---------- */
.dish-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.4rem;
  margin-bottom:2.4rem;
}
.dish-card{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dish-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(36,30,32,0.12); border-color:var(--yellow);}
.dish-img{
  position:relative;
  aspect-ratio:4/3;
  background:var(--paper-2);
}
.dish-img img{width:100%; height:100%; object-fit:cover;}
.dish-img-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem;
  opacity:0.35;
}
.tag{
  position:absolute; top:0.7rem; left:0.7rem;
  font-size:0.65rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:0.25rem 0.6rem; border-radius:20px;
  font-weight:700;
}
.tag-veg{background:var(--green-veg); color:#fff;}
.tag-nonveg{background:var(--red); color:#fff;}

.dish-info{padding:1.1rem 1.2rem 1.3rem;}
.dish-cat{
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red-dark);
  font-weight:600;
}
.dish-info h3{
  font-size:1.15rem; margin:0.35rem 0 0.5rem;
  text-transform:none;
  font-family:'Jost', sans-serif;
  font-weight:600;
}
.dish-info p{
  color:var(--ink-dim); font-size:0.88rem;
  margin-bottom:0.8rem;
  min-height:2.6em;
}
.price{
  font-family:'Anton', sans-serif;
  color:var(--red);
  font-size:1.1rem;
}

.section-cta{text-align:center; margin-top:1rem;}

/* ---------- Outlets ---------- */
.outlet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.4rem;
  margin-bottom:2.4rem;
}
.outlet-card{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:16px;
  padding:1.4rem;
}
.outlet-img{border-radius:10px; overflow:hidden; margin-bottom:1rem; aspect-ratio:16/9;}
.outlet-img img{width:100%; height:100%; object-fit:cover;}
.outlet-card h3{
  font-family:'Jost', sans-serif; font-weight:600;
  font-size:1.1rem; text-transform:none; margin-bottom:0.3rem;
}
.outlet-type{
  display:inline-block;
  font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red-dark);
  font-weight:700;
  border:1px solid var(--red-dark);
  border-radius:20px;
  padding:0.15rem 0.6rem;
  margin-bottom:0.7rem;
}
.outlet-card p{color:var(--ink-dim); font-size:0.88rem; margin-bottom:0.4rem;}
.outlet-card .timing{font-size:0.82rem;}
.outlet-card .btn{margin-top:0.7rem;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--red);
  text-align:center;
  padding:clamp(3rem, 7vw, 4.5rem) 1.25rem;
}
.cta-banner h2{font-size:clamp(1.8rem, 5vw, 2.6rem); margin-bottom:0.6rem; color:#fff;}
.cta-banner p{color:rgba(255,255,255,0.9); margin-bottom:1.6rem;}
.cta-banner .btn-primary{background:var(--yellow); color:var(--ink); box-shadow:none;}
.cta-banner .btn-primary:hover{background:#fff;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:clamp(3.5rem, 9vw, 5.5rem) 1.25rem 2.5rem;
  text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(251,190,21,0.22), transparent 60%);
}
.page-hero h1{font-size:clamp(2.4rem, 8vw, 4rem);}
.page-hero .lead{color:var(--ink-dim); margin-top:0.8rem;}

/* ---------- Menu filters ---------- */
.menu-filters{
  display:flex; flex-wrap:wrap; gap:0.6rem;
  margin-bottom:2rem;
  justify-content:center;
}
.filter-btn{
  background:var(--paper);
  border:2px solid var(--line);
  color:var(--ink-dim);
  padding:0.5rem 1.1rem;
  border-radius:50px;
  font-family:'Jost', sans-serif;
  font-weight:600;
  font-size:0.82rem;
  cursor:pointer;
  transition:all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover{
  border-color:var(--red);
  color:var(--red);
  background:rgba(237,27,36,0.06);
}
.filter-divider{width:1px; background:var(--line); margin:0 0.4rem;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; gap:2rem;}
.contact-info h3{
  font-family:'Jost', sans-serif; font-weight:600; text-transform:none;
  margin-bottom:1rem; font-size:1.2rem;
}
.contact-info p{margin-bottom:0.7rem; color:var(--ink-dim);}
.contact-info a:hover{color:var(--red);}

.contact-form-wrap form{
  display:flex; flex-direction:column; gap:0.9rem;
  background:var(--paper-2);
  border:2px solid var(--line);
  border-radius:16px;
  padding:1.6rem;
}
.contact-form-wrap input, .contact-form-wrap textarea, .contact-form-wrap select{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:0.8rem 1rem;
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-size:0.92rem;
  resize:vertical;
  width:100%;
}
.contact-form-wrap select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b6465' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.4rem;
}
.contact-form-wrap select:invalid{color:var(--ink-dim);}
.contact-form-wrap input[type="date"], .contact-form-wrap input[type="time"]{
  color:var(--ink);
}
.form-row-2col{
  display:grid;
  grid-template-columns:1fr;
  gap:0.9rem;
}
@media (min-width:480px){
  .form-row-2col{grid-template-columns:1fr 1fr;}
}
.contact-form-wrap input:focus, .contact-form-wrap textarea:focus, .contact-form-wrap select:focus{
  outline:none; border-color:var(--red);
}
.form-success{
  background:rgba(46,158,68,0.1);
  border:1px solid rgba(46,158,68,0.4);
  color:#1f7a30;
  padding:1.2rem; border-radius:12px;
}
.form-error{
  background:rgba(237,27,36,0.08);
  border:1px solid rgba(237,27,36,0.3);
  color:var(--red-dark);
  padding:1rem 1.2rem; border-radius:12px;
  margin-bottom:1rem;
  font-size:0.88rem;
}

@media (min-width:800px){
  .contact-grid{grid-template-columns:1fr 1.4fr;}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  border-top:4px solid var(--yellow);
  padding-top:3rem;
  color:#fff;
}
.footer-inner{
  display:grid; gap:2rem;
  grid-template-columns:1fr;
  padding-bottom:2rem;
}
.site-footer .logo{color:#fff;}
.footer-col p{color:rgba(255,255,255,0.65); font-size:0.88rem; margin-top:0.7rem;}
.footer-col h4{
  font-family:'Jost', sans-serif; font-weight:600;
  text-transform:uppercase; font-size:0.78rem; letter-spacing:0.1em;
  color:var(--yellow); margin-bottom:0.8rem;
}
.footer-col a{
  display:block; color:rgba(255,255,255,0.7); font-size:0.9rem;
  margin-bottom:0.55rem;
}
.footer-col a:hover{color:var(--yellow);}
.footer-bottom{
  text-align:center; font-size:0.78rem; color:rgba(255,255,255,0.45);
  border-top:1px solid rgba(255,255,255,0.1);
  padding:1.2rem;
}

@media (min-width:700px){
  .footer-inner{grid-template-columns:1.4fr 1fr 1fr 1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}