/*
Theme Name: EnnyCrunch
Theme URI: https://ennycrunch.ng
Author: Eniola (EnnyCrunch)
Description: A visual, photo-rich one-page theme for the EnnyCrunch chin chin business in Ijagun, Ijebu Ode. Hero with founder photo, menu with prices, photo gallery, WhatsApp order builder, about section and delivery info. Orders go straight to WhatsApp.
Version: 1.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ennycrunch
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, full-width-template
*/

:root{
  --cocoa:#2A1608; --cocoa-2:#3B2210; --cream:#FFF6E9; --cream-2:#FBEEDA;
  --gold:#E8B54A; --gold-2:#C98F2B; --caramel:#C97B2D; --ink:#241206;
  --wa:#25D366; --wa-d:#128C4B; --muted:#8A7A63;
  --r:22px; --shadow:0 18px 44px rgba(42,22,8,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito","Segoe UI",Verdana,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,.logo{font-family:"Baloo 2","Nunito","Segoe UI",sans-serif;line-height:1.12}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.kicker{display:inline-block;background:rgba(232,181,74,.16);color:var(--gold-2);border:1px solid rgba(232,181,74,.5);font-weight:800;letter-spacing:2.5px;text-transform:uppercase;font-size:.72rem;padding:7px 16px;border-radius:999px;margin-bottom:16px}
.grad{background:linear-gradient(92deg,var(--gold) 10%,var(--caramel) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;background:var(--wa);color:#fff;font-weight:800;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;font-size:1rem;box-shadow:0 10px 24px rgba(37,211,102,.35);transition:.2s}
.btn:hover{transform:translateY(-2px);background:var(--wa-d)}
.btn.gold{background:linear-gradient(92deg,var(--gold),var(--caramel));color:var(--cocoa);box-shadow:0 10px 24px rgba(201,143,43,.35)}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--cream);border:2px solid rgba(255,246,233,.45);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.sm{padding:9px 18px;font-size:.85rem}

/* ============ TOP BAR ============ */
.topbar{position:sticky;top:0;z-index:80;background:rgba(42,22,8,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;max-width:1100px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:800;font-size:1.3rem;letter-spacing:1px}
.logo img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.logo span{color:var(--gold)}
nav.main{display:flex;gap:22px}
nav.main a{color:rgba(255,246,233,.85);font-weight:700;font-size:.92rem;position:relative}
nav.main a:hover{color:var(--gold)}
nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:.25s}
nav.main a:hover::after{width:100%}

/* ============ HERO ============ */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;background:linear-gradient(100deg,rgba(30,15,5,.93) 8%,rgba(42,22,8,.78) 46%,rgba(42,22,8,.35) 100%),url("assets/images/chin-fry.jpg") center 60%/cover no-repeat;color:var(--cream);padding:70px 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);margin:6px 0 18px}
.hero p.sub{font-size:1.08rem;max-width:50ch;color:rgba(255,246,233,.9);margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.stat b{display:block;font-family:"Baloo 2",sans-serif;font-size:1.5rem;color:var(--gold)}
.stat span{font-size:.8rem;color:rgba(255,246,233,.7);letter-spacing:1px;text-transform:uppercase}
.hero-photo{position:relative;justify-self:center}
.hero-photo .arch{width:min(330px,80vw);border-radius:999px 999px 26px 26px;border:5px solid var(--gold);box-shadow:0 26px 60px rgba(0,0,0,.5);object-fit:cover;aspect-ratio:4/5}
.hero-photo .badge{position:absolute;width:112px;left:-42px;bottom:26px;transform:rotate(-10deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:bob 5s ease-in-out infinite}
.hero-photo .chip{position:absolute;right:-30px;top:34px;background:var(--gold);color:var(--cocoa);font-weight:800;font-size:.8rem;padding:9px 16px;border-radius:999px;box-shadow:0 10px 22px rgba(0,0,0,.35);transform:rotate(6deg);animation:bob 6s ease-in-out infinite reverse}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ============ MARQUEE ============ */
.marquee{background:linear-gradient(92deg,var(--gold),var(--caramel));color:var(--cocoa);overflow:hidden;padding:13px 0;transform:rotate(-1.2deg) scale(1.02);box-shadow:0 8px 24px rgba(201,143,43,.35)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:slide 26s linear infinite;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1rem;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.marquee-track span{display:flex;gap:44px;align-items:center}
.marquee-track i{font-style:normal;color:var(--cocoa-2)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section{padding:84px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--cocoa)}
.sec-head p{color:var(--muted);margin-top:10px}
.dark{background:radial-gradient(1200px 500px at 50% -10%,rgba(232,181,74,.12),transparent),var(--cocoa);color:var(--cream)}
.dark .sec-head h2{color:var(--cream)}
.dark .sec-head p{color:rgba(255,246,233,.65)}

/* ============ MENU ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.card{background:var(--cream);color:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;transition:transform .25s}
.card:hover{transform:translateY(-8px)}
.card-img{position:relative;height:190px;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.08)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(42,22,8,.35))}
.card-tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold);color:var(--cocoa);font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.card-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{color:var(--cocoa);font-size:1.25rem}
.card-body p{font-size:.92rem;color:var(--muted);flex:1}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.price{font-family:"Baloo 2",sans-serif;font-size:1.6rem;font-weight:800;color:var(--caramel)}
.price s{font-size:.85rem;color:var(--muted);font-weight:600;margin-left:6px}

/* ============ GALLERY ============ */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-grid figure{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1}
.g-grid figure.tall{grid-row:span 2;aspect-ratio:auto}
.g-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.g-grid figure:hover img{transform:scale(1.07)}
.g-grid figcaption{position:absolute;inset:auto 0 0 0;padding:38px 16px 14px;background:linear-gradient(transparent,rgba(20,10,3,.85));color:var(--cream);font-weight:700;font-size:.9rem}

/* ============ ORDER BUILDER ============ */
.order-sec{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.builder{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:34px;max-width:760px;margin:0 auto;border:1px solid rgba(201,143,43,.25)}
.b-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px;border-bottom:1px dashed #E7D7B8}
.b-name{font-weight:800;color:var(--cocoa);font-size:1.02rem}
.b-name small{display:block;font-weight:600;color:var(--muted);font-size:.8rem}
.step{display:flex;align-items:center;gap:14px}
.step button{width:38px;height:38px;border-radius:50%;border:2px solid var(--cocoa);background:#fff;color:var(--cocoa);font-size:1.2rem;font-weight:800;cursor:pointer;transition:.15s}
.step button:hover{background:var(--cocoa);color:var(--gold)}
.step .q{min-width:24px;text-align:center;font-weight:800;font-size:1.15rem}
.b-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.b-fields label{font-size:.82rem;font-weight:800;color:var(--cocoa);display:block;margin-bottom:6px;letter-spacing:.5px}
.b-fields input,.b-fields select{width:100%;padding:12px 14px;border:2px solid #EBDCBE;border-radius:12px;font:inherit;background:var(--cream)}
.b-fields input:focus,.b-fields select:focus{outline:none;border-color:var(--gold)}
.b-total{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-weight:800;color:var(--cocoa);font-size:1.1rem}
.b-total span:last-child{font-family:"Baloo 2",sans-serif;font-size:1.8rem;color:var(--caramel)}
.b-send{margin-top:18px}
.b-send .btn{width:100%;font-size:1.08rem;padding:16px}
.b-hint{text-align:center;color:var(--muted);font-size:.82rem;margin-top:12px}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.about-photo{position:relative;justify-self:center}
.about-photo .arch{width:min(320px,78vw);aspect-ratio:4/5;object-fit:cover;border-radius:26px 26px 999px 999px;border:5px solid #fff;box-shadow:var(--shadow)}
.about-photo .badge{position:absolute;right:-34px;top:-24px;width:104px;transform:rotate(9deg);filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}
.about-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--cocoa);margin-bottom:16px}
.about-copy p{margin-bottom:14px;color:#4d3a26}
.signature{font-family:"Segoe Script","Brush Script MT",cursive;font-size:1.7rem;color:var(--caramel);margin-top:6px}

/* ============ INFO ============ */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.info{background:rgba(255,246,233,.06);border:1px solid rgba(232,181,74,.25);border-radius:var(--r);padding:26px;transition:.25s}
.info:hover{background:rgba(232,181,74,.1);transform:translateY(-5px)}
.info .ico{font-size:1.7rem;margin-bottom:12px}
.info h4{color:var(--gold);font-family:"Baloo 2",sans-serif;font-size:1.1rem;margin-bottom:8px}
.info p{font-size:.92rem;color:rgba(255,246,233,.75)}

/* ============ FOOTER / FAB ============ */
footer{background:#1B0E04;color:rgba(255,246,233,.75);text-align:center;padding:44px 20px}
footer .logo{justify-content:center;margin-bottom:12px}
footer b{color:var(--gold)}
.fab{position:fixed;right:20px;bottom:20px;width:62px;height:62px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:90}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--wa);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.fab:hover{background:var(--wa-d)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .hero-grid,.about-grid{grid-template-columns:1fr;text-align:center}
  .hero p.sub{margin-inline:auto}
  .hero-cta,.hero-stats{justify-content:center}
  .hero-photo{margin-top:16px}
  .hero-photo .badge{left:-14px}
  .hero-photo .chip{right:-6px}
  .g-grid{grid-template-columns:repeat(2,1fr)}
  nav.main{display:none}
  .b-fields{grid-template-columns:1fr}
  .about-photo .badge{right:-8px}
}
@media(max-width:520px){.g-grid{grid-template-columns:1fr}.g-grid figure.tall{grid-row:span 1;aspect-ratio:1}}