/*
Theme Name: Chaska Bites Theme
Theme URI: https://www.chaskabites.com/
Author: Chaska Bites
Author URI: https://www.chaskabites.com/
Description: A one-page food ordering WordPress theme with menu items, cart drawer, and WhatsApp order confirmation.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chaska-bites
Tags: custom-menu, featured-images, one-column, two-columns, custom-logo, theme-options
*/

:root{
  --bg: #fff7e8;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --green: #1f8a4c;
  --green2:#2dbf6a;
  --orange:#ff6a2b;
  --orange2:#ff8a3d;
  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --ring: 0 0 0 3px rgba(45,191,106,.22);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 15% 0%, #fff2d7 0%, var(--bg) 60%, #fff 100%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.container{width:min(1100px, 92%); margin:0 auto}

.topbar{
  background: linear-gradient(90deg, var(--green), var(--green2));
  color:#fff;
  font-size:14px;
}
.topbar__inner{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 0;
  flex-wrap:wrap;
}
.topbar__dot{opacity:.7}

.header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color:#fff;
  font-weight:900;
  box-shadow: 0 12px 22px rgba(255,106,43,.25);
}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{display:block; font-size:12px; color:var(--muted)}

.nav{display:flex; gap:18px; align-items:center}
.nav a{
  font-weight:700;
  color:#111827;
  opacity:.85;
}
.nav a:hover{opacity:1}

.header__actions{display:flex; gap:10px; align-items:center}

.btn{
  border:0;
  border-radius: 999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.18s transform, .18s filter, .18s background;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color:#fff;
  box-shadow: 0 14px 26px rgba(255,106,43,.22);
}
.btn--primary:hover{filter:brightness(1.03)}
.btn--ghost{
  background: rgba(31,138,76,.10);
  color: var(--green);
}
.btn--ghost:hover{background: rgba(31,138,76,.14)}
.btn.full{width:100%; justify-content:center}

.badge{
  min-width:22px; height:22px;
  border-radius:999px;
  background: rgba(0,0,0,.1);
  padding:0 7px;
  display:inline-grid; place-items:center;
  font-size:12px;
  font-weight:900;
}
.btn--ghost .badge{
  background: rgba(31,138,76,.16);
  color: var(--green);
}

.hamburger{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:10px;
}
.hamburger span{
  display:block;
  width:24px; height:2px;
  background:#111827;
  margin:5px 0;
  border-radius:999px;
}

.mobileNav{
  display:none;
  padding:10px 0 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.mobileNav a{
  display:block;
  padding:10px 0;
  font-weight:800;
}
.mobileNav__cart{width:100%; justify-content:space-between}

.hero{padding:34px 0 12px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:stretch;
}

.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,106,43,.12);
  color:#8a2b10;
  font-weight:800;
}

.hero h1{
  margin:14px 0 8px;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height:1.05;
  letter-spacing:-.6px;
}
.accent{
  background: linear-gradient(90deg, var(--green), var(--green2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  max-width: 58ch;
}
.hero__cta{display:flex; gap:10px; margin:18px 0 18px; flex-wrap:wrap}

.hero__stats{
  display:flex; gap:12px; flex-wrap:wrap;
}
.stat{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:12px 14px;
  min-width: 140px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.stat__num{font-weight:900; font-size:18px}
.stat__label{color:var(--muted); font-weight:700; font-size:13px}

.hero__right{
  display:grid;
  gap:14px;
}
.heroCard{
  background: var(--card);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.heroCard__badge{
  position:absolute; top:14px; right:14px;
  background: rgba(31,138,76,.12);
  color: var(--green);
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
}
.heroCard__title{font-weight:1000; font-size:18px; margin:4px 0}
.heroCard__desc{color:var(--muted); margin:0 0 10px}

.heroCard__mock{
  height:160px;
  border-radius: 16px;
  background: radial-gradient(220px 160px at 70% 35%, rgba(255,106,43,.18), transparent 60%),
              radial-gradient(220px 160px at 30% 65%, rgba(45,191,106,.18), transparent 60%),
              linear-gradient(135deg, #fff7e8, #fff);
  border: 1px dashed rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  margin-bottom:12px;
  position:relative;
}
.mockBurger{
  width:120px; height:90px; border-radius: 18px;
  background: linear-gradient(180deg, #f7b56a, #d8872e);
  box-shadow: 0 18px 30px rgba(0,0,0,.14);
  position:relative;
}
.mockBurger:before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:34px;
  height:18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a2b10, #b33a12);
}
.mockBurger:after{
  content:"";
  position:absolute;
  left:12px; right:12px; top:54px;
  height:10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2dbf6a, #1f8a4c);
}
.mockGlow{
  position:absolute;
  width:240px; height:240px;
  border-radius:50%;
  filter: blur(20px);
  background: radial-gradient(circle, rgba(255,106,43,.20), transparent 60%);
  bottom:-140px; right:-140px;
}

.discountCard{
  background: linear-gradient(135deg, rgba(255,106,43,.12), rgba(31,138,76,.10));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.discountCard h3{margin:0; font-size:18px}
.discountCard p{margin:4px 0 8px; color:var(--muted); font-weight:700}
.link{color:var(--green); font-weight:900}
.seal{
  width:78px; height:78px;
  border-radius: 22px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color:#fff;
  font-weight:1000;
  text-align:center;
  line-height:1.0;
  box-shadow: 0 18px 30px rgba(255,106,43,.22);
}
.seal span{font-weight:900; font-size:12px; opacity:.9}

.promo{padding:12px 0 26px}
.promo__grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.promoBox{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:14px;
  display:flex;
  gap:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.promoBox--alt{background: rgba(31,138,76,.08)}
.promoBox__icon{font-size:26px}
.promoBox h3{margin:0 0 4px}
.promoBox p{margin:0; color:var(--muted); font-weight:700}

.sectionHead{
  display:flex; gap:14px; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.sectionHead h2{margin:0; font-size:28px}
.sectionHead p{margin:6px 0 0; color:var(--muted); font-weight:700}

.filters{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
}
.pill:hover{filter:brightness(1.02)}
.pill.is-active{
  background: rgba(31,138,76,.12);
  color: var(--green);
  border-color: rgba(31,138,76,.28);
  box-shadow: var(--ring);
}

.menu{padding:18px 0 26px}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card__img{
  height:140px;
  background:
    radial-gradient(160px 120px at 70% 35%, rgba(255,106,43,.22), transparent 60%),
    radial-gradient(160px 120px at 30% 75%, rgba(45,191,106,.22), transparent 60%),
    linear-gradient(135deg, #fff4dd, #fff);
  position:relative;
}
.card__img:after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.12);
}
.card__body{padding:12px 12px 14px; display:grid; gap:8px}
.card__title{font-weight:1000; font-size:16px; margin:0}
.card__desc{margin:0; color:var(--muted); font-weight:700; font-size:13px; min-height:34px}
.card__row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-weight:1000}
.mini{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
}

.how{padding:16px 0 26px}
.how__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.howCard, .trustCard{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
  padding:16px;
}
.howCard h2{margin:0 0 8px}
.howCard ol{margin:0; padding-left:18px; color:#111827; font-weight:700}
.howCard li{margin:10px 0}
.note{
  margin-top:14px;
  background: rgba(31,138,76,.10);
  border: 1px solid rgba(31,138,76,.22);
  color: #0f5132;
  padding:12px;
  border-radius: 14px;
  font-weight:800;
}
.trustCard h3{margin:0 0 10px}
.captionList{display:grid; gap:10px}
.cap{
  padding:12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.8);
  font-weight:800;
}

.socials{padding:10px 0 30px}
.socials__inner{
  background: linear-gradient(135deg, rgba(31,138,76,.10), rgba(255,106,43,.10));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding:16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.socialBtns{display:flex; gap:10px; flex-wrap:wrap}

.footer{
  padding:18px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
}

.muted{color:var(--muted); font-weight:700}
.tiny{font-size:12px}

.stickyCart{
  position:fixed;
  bottom:16px; left:50%;
  transform: translateX(-50%);
  z-index:50;
  display:none;
  border:0;
  border-radius:999px;
  padding:12px 14px;
  font-weight:1000;
  cursor:pointer;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color:#fff;
  box-shadow: 0 18px 40px rgba(31,138,76,.22);
  gap:10px;
  align-items:center;
}
.stickyCart__text{opacity:.95}
.stickyCart .badge{
  background: rgba(255,255,255,.22);
  color:#fff;
}

/* Drawer */
.drawerBackdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.34);
  z-index:60;
}
.drawer{
  position:fixed; top:0; right:0;
  width:min(420px, 92vw);
  height:100%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(0,0,0,.08);
  z-index:70;
  display:flex;
  flex-direction:column;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
}
.drawer__head{
  padding:14px 14px 10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.drawer__head h3{margin:0}
.drawer__head p{margin:2px 0 0}

.iconBtn{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.8);
  width:40px; height:40px;
  border-radius: 14px;
  cursor:pointer;
  font-size:16px;
}

.drawer__body{
  padding:12px 14px;
  overflow:auto;
  flex:1;
  display:grid;
  gap:10px;
}
.cartItem{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding:12px;
  display:grid;
  gap:8px;
}
.cartItem__top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}
.cartItem__name{font-weight:1000}
.cartItem__meta{color:var(--muted); font-weight:800; font-size:12px}
.cartItem__controls{display:flex; align-items:center; justify-content:space-between; gap:10px}

.counter{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8);
  border-radius:999px;
  padding:6px 8px;
}
.counter button{
  width:32px; height:32px;
  border:0;
  border-radius:999px;
  background: rgba(31,138,76,.12);
  color:var(--green);
  font-weight:1000;
  cursor:pointer;
}
.counter span{min-width:18px; text-align:center; font-weight:1000}

.remove{
  border:0;
  background: transparent;
  color: #b42318;
  font-weight:1000;
  cursor:pointer;
}

.drawer__foot{
  padding:12px 14px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.totals{display:grid; gap:6px; margin-bottom:12px}
.totals__row{display:flex; justify-content:space-between; align-items:center; font-weight:900}
.totals__row--big{font-size:18px}
.drawer__actions{display:grid; gap:10px}

.wp-block{max-width:100%}

@media (max-width: 920px){
  .hero__grid{grid-template-columns:1fr}
  .promo__grid{grid-template-columns:1fr}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .how__grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .hamburger{display:block}
  .header__actions{display:none}
  .mobileNav.is-open{display:block}
  .stickyCart{display:inline-flex}
  .grid{grid-template-columns:1fr}
}