/* ===========================================================
   BBQ Express — SEO update styles (Oct 2026)
   New sections: single hero H1, SVG icons, outlet pages,
   menu sections, FAQs, breadcrumbs, order chooser, mobile bar
=========================================================== */

/* ---------- Hero: slide captions are <p>, one real H1 below ---------- */
.slide-content .slide-title{
  font-family:'Anton', sans-serif; text-transform:uppercase; line-height:1.05;
  font-size:clamp(2.2rem, 8vw, 4.2rem); color:#fff; margin:0;
}
.hero-intro{
  background:var(--ink); color:#fff; text-align:center;
  padding:2.2rem 1.25rem 2.4rem;
  border-bottom:4px solid var(--red);
}
.hero-intro h1{
  color:#fff; font-size:clamp(1.6rem, 5vw, 2.6rem); max-width:22ch; margin:0 auto;
}
.hero-intro h1 span{ color:var(--yellow); }
.hero-intro p{ color:rgba(255,255,255,.86); max-width:62ch; margin:0.9rem auto 1.4rem; font-size:clamp(.95rem,2.2vw,1.08rem); }
.hero-intro .hero-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ---------- SVG icons (replace emoji) ---------- */
.ico{ display:inline-block; vertical-align:middle; flex-shrink:0; }
.usp-icon{ display:inline-flex; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center;
  background:#fff; color:var(--red); box-shadow:0 4px 14px rgba(136,0,0,.12); margin:0 auto .4rem; }
.veg-mark{ display:inline-block; vertical-align:-2px; margin-right:6px; flex:0 0 16px; width:16px; height:16px; margin-top:1px; }
.dish-img-placeholder{
  opacity:1 !important;
  background:radial-gradient(circle at 30% 25%, rgba(251,190,21,.35), transparent 55%), linear-gradient(135deg, #3c0000, #241e20);
  color:rgba(255,255,255,.85); flex-direction:column; gap:.4rem;
  font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1rem !important; letter-spacing:.04em; text-align:center; padding:1rem;
}
.dish-img-placeholder .ico{ color:var(--yellow); opacity:.9; }
.dish-info h3, .dish-info h4{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:1.15rem; line-height:1.15; margin-bottom:.35rem; color:var(--ink); display:flex; align-items:flex-start; gap:2px; }
.dish-portion{ display:inline-block; font-size:.75rem; color:var(--ink-dim); margin-right:.6rem; }

/* ---------- Stats ---------- */
.story-stats .stat .num{ white-space:nowrap; }

/* ---------- Menu groups ---------- */
.menu-group{ margin-bottom:2.6rem; }
.menu-group > h3, .menu-section > h2{
  font-size:clamp(1.3rem,3.6vw,1.8rem); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem;
}
.menu-group > h3::after, .menu-section > h2::after{ content:""; flex:1; height:2px; background:var(--line); }
.menu-section{ margin-bottom:3rem; scroll-margin-top:110px; }
.menu-section > p.cat-intro{ color:var(--ink-dim); margin:-.4rem 0 1.2rem; max-width:75ch; }
.menu-section .section-more{ margin-top:1rem; font-weight:600; color:var(--red); display:inline-block; }
.menu-intro{ max-width:78ch; margin:0 auto 2rem; color:var(--ink-dim); text-align:center; }
.menu-cats{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.2rem; }
.menu-cats a{ padding:.5rem 1rem; border:1.5px solid var(--line); border-radius:40px; font-size:.82rem; font-weight:600; color:var(--ink); background:#fff; }
.menu-cats a:hover, .menu-cats a.active{ border-color:var(--red); color:var(--red); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ max-width:var(--max-w); margin:0 auto; padding:.9rem 1.25rem 0; font-size:.8rem; color:var(--ink-dim); }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; }
.breadcrumbs li + li::before{ content:"›"; margin-right:.3rem; color:#b9aea0; }
.breadcrumbs a{ color:var(--red); }

/* ---------- Outlet cards (home + hub) ---------- */
.outlet-city-grid{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:700px){ .outlet-city-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .outlet-city-grid{ grid-template-columns:repeat(3,1fr); } }
.outlet-card .outlet-meta{ list-style:none; margin:.6rem 0 1rem; display:grid; gap:.45rem; font-size:.9rem; color:var(--ink-dim); }
.outlet-card .outlet-meta li{ display:flex; gap:.5rem; align-items:flex-start; }
.outlet-card .outlet-meta .ico{ color:var(--red); margin-top:2px; }
.outlet-card h3 a:hover{ color:var(--red); }
.outlet-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.outlet-actions .btn{ padding:.55rem 1rem; font-size:.72rem; }

/* ---------- Outlet detail page ---------- */
.outlet-page .page-hero{ padding-bottom:1.5rem; }
.outlet-layout{ display:grid; gap:2rem; }
@media (min-width:900px){ .outlet-layout{ grid-template-columns:1.4fr 1fr; align-items:start; } }
.outlet-block{ margin-bottom:2.4rem; }
.outlet-block h2{ font-size:clamp(1.3rem,3.6vw,1.8rem); margin-bottom:.8rem; }
.outlet-block p{ color:var(--ink-dim); margin-bottom:.8rem; }
.outlet-info-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:1.4rem; position:sticky; top:110px; }
.outlet-info-card h2{ font-size:1.3rem; margin-bottom:.8rem; }
.outlet-info-card .outlet-meta{ list-style:none; display:grid; gap:.7rem; margin-bottom:1.1rem; color:var(--ink); font-size:.95rem; }
.outlet-info-card .outlet-meta li{ display:flex; gap:.6rem; }
.outlet-info-card .outlet-meta .ico{ color:var(--red); margin-top:2px; }
.outlet-info-card .btn{ width:100%; text-align:center; margin-bottom:.5rem; }
.map-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--paper-2); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }
.area-tags{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; }
.area-tags li{ background:#fff; border:1px solid var(--line); border-radius:30px; padding:.35rem .85rem; font-size:.82rem; color:var(--ink); }
.order-buttons{ display:flex; flex-wrap:wrap; gap:.6rem; }
.btn-swiggy{ background:#fc8019 !important; color:#fff !important; }
.btn-zomato{ background:#e23744 !important; color:#fff !important; }
.btn-wa{ background:#25D366 !important; color:#fff !important; }

/* ---------- Generic content blocks ---------- */
.content-wrap{ max-width:880px; margin:0 auto; }
.content-wrap h2{ font-size:clamp(1.4rem,4vw,2rem); margin:2.2rem 0 .8rem; }
.content-wrap h3{ font-size:1.15rem; margin:1.2rem 0 .4rem; }
.content-wrap p, .content-wrap li{ color:var(--ink-dim); line-height:1.75; }
.content-wrap ul.ticks{ list-style:none; display:grid; gap:.55rem; margin:.6rem 0 1rem; }
.content-wrap ul.ticks li{ display:flex; gap:.6rem; }
.content-wrap ul.ticks li::before{ content:""; flex-shrink:0; width:8px; height:8px; margin-top:.6rem; border-radius:50%; background:var(--red); }
.card-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin:1rem 0; }
@media (min-width:700px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; }
.info-card .ico{ color:var(--red); margin-bottom:.5rem; }
.info-card h3{ font-size:1.05rem; margin:0 0 .35rem; }
.info-card p{ font-size:.9rem; color:var(--ink-dim); margin:0; }
.steps{ counter-reset:step; list-style:none; display:grid; gap:1rem; }
@media (min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.steps li{ position:relative; background:var(--paper-2); border-radius:14px; padding:1.3rem 1.2rem 1.2rem 3.6rem; color:var(--ink); }
.steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:1.1rem; top:1.1rem; width:32px; height:32px; border-radius:50%; background:var(--red); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
.alt-band{ background:var(--paper-2); }
.data-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.data-table th, .data-table td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:top; }
.data-table th{ background:var(--red); color:#fff; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; }
.data-table a{ color:var(--red); word-break:break-all; }
.table-scroll{ overflow-x:auto; }

/* ---------- FAQ accordion (shared) ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-list details{ border:1px solid var(--line); border-radius:12px; margin-bottom:.8rem; background:#fff; overflow:hidden; }
.faq-list summary{ cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:600; background:var(--paper-2); display:flex; justify-content:space-between; gap:1rem; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; color:var(--red); font-size:1.3rem; line-height:1; }
.faq-list details[open] summary::after{ content:"–"; }
.faq-list .faq-a{ padding:.9rem 1.2rem 1.1rem; color:var(--ink-dim); font-size:.93rem; line-height:1.7; }
.faq-list h3{ font-family:'Jost',sans-serif; text-transform:none; font-size:1rem; font-weight:600; line-height:1.4; margin:0; display:inline; }

/* ---------- Footer NAP ---------- */
.footer-nap{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.9rem; font-size:.82rem; }
.footer-nap span{ opacity:.8; }
.footer-nap .footer-nap-name{ font-weight:700; }
.footer-inner{ grid-template-columns:1.3fr 1fr 1fr 1.3fr 1fr !important; }
@media (max-width:900px){ .footer-inner{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:600px){ .footer-inner{ grid-template-columns:1fr !important; } }

/* ---------- Order chooser ---------- */
.order-dialog{ position:fixed; inset:0; z-index:3000; background:rgba(20,14,12,.72); display:flex; align-items:center; justify-content:center; padding:1rem; }
.order-dialog[hidden]{ display:none; }
.order-dialog-box{ position:relative; background:#fff; border-radius:18px; max-width:480px; width:100%; padding:1.6rem 1.4rem 1.3rem; box-shadow:0 30px 60px rgba(0,0,0,.35); max-height:90vh; overflow:auto; }
.order-dialog-title{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.4rem; margin-bottom:1rem; color:var(--ink); }
.order-dialog-close{ position:absolute; top:.6rem; right:.9rem; background:none; border:0; font-size:1.8rem; cursor:pointer; color:var(--ink-dim); }
.order-dialog-row{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.order-dialog-row strong{ display:block; font-size:.95rem; }
.order-dialog-row span{ font-size:.78rem; color:var(--ink-dim); }
.order-dialog-btns{ display:flex; gap:.4rem; flex-shrink:0; }
.od-btn{ padding:.5rem .9rem; border-radius:30px; color:#fff; font-weight:700; font-size:.75rem; text-transform:uppercase; }
.od-swiggy{ background:#fc8019; } .od-zomato{ background:#e23744; }
.od-wa{ display:block; text-align:center; margin-top:1rem; font-weight:600; color:#128C4B; font-size:.9rem; }
body.no-scroll{ overflow:hidden; }

/* ---------- Sticky mobile action bar ---------- */
.mobile-action-bar{ display:none; }
@media (max-width:760px){
  .mobile-action-bar{ display:grid; grid-template-columns:1.3fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:1500;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.12); padding-bottom:env(safe-area-inset-bottom); }
  .mobile-action-bar a{ display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.85rem .4rem; font-weight:700; font-size:.82rem; text-transform:uppercase; }
  .mobile-action-bar .mab-order{ background:var(--red); color:#fff; }
  .mobile-action-bar .mab-call{ color:var(--ink); }
  .mobile-action-bar .mab-wa{ color:#128C4B; border-left:1px solid var(--line); }
  .floating-whatsapp{ display:none !important; }
  body{ padding-bottom:58px; }
}

/* ---------- Spam honeypot (hidden from people) ---------- */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.blog-card img{ aspect-ratio:16/9; object-fit:cover; width:100%; }
.blog-card .blog-card-body{ padding:1.1rem 1.2rem 1.3rem; }
.blog-card h2{ font-size:1.2rem; margin-bottom:.5rem; }
.blog-card p{ color:var(--ink-dim); font-size:.92rem; }
.blog-meta{ font-size:.78rem; color:var(--ink-dim); margin-bottom:.4rem; display:block; }
.blog-post-cover{ border-radius:16px; margin:1.2rem 0 1.5rem; width:100%; }

/* ---------- Utilities ---------- */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-link{ color:var(--red); font-weight:600; }
.text-link:hover{ text-decoration:underline; }
.section-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.story-text a:not(.btn){ color:var(--red); font-weight:600; }
.footer-col .footer-h{
  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;
}