/*
Theme Name: Happakhalo
Theme URI: https://happakhalo.com
Author: Happakhalo
Description: "Dabba Stack" — a one-of-a-kind tiffin-service theme. The whole homepage is built like a stacked steel tiffin carrier: every section is a tier, plans are shown as 1/2/3-tier dabbas, the menu is a handwritten chitthi tucked inside, and a live "dabba ki yatra" strip shows the delivery journey. Prices, menu, phone, WhatsApp and serviceable pincodes are all editable from Appearance › Customize.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happakhalo
Tags: food-and-drink, one-column, custom-logo, custom-menu, theme-options
*/

:root{
  --haldi:#F5B82E;
  --haldi-deep:#D99A0E;
  --dhaniya:#1F4D3A;
  --dhaniya-deep:#143326;
  --mirchi:#C2410C;
  --ink:#2A2118;
  --ink-soft:#4A3F33;
  --muted:#6B5E4F;
  --paper:#FFFDF7;
  --cream:#FFF6DD;
  --steel-1:#F4F6F8;
  --steel-2:#DDE2E6;
  --steel-3:#B8C0C7;
  --steel-4:#8D979F;
  --radius-tier:44px;
  --font-head:'Baloo 2', system-ui, sans-serif;
  --font-body:'Mukta', system-ui, sans-serif;
  --font-hand:'Kalam', 'Comic Sans MS', cursive;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--dhaniya)}
a:hover{color:var(--dhaniya-deep)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.08;margin:0;color:var(--dhaniya);letter-spacing:-.5px}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:1000;background:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--mirchi);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.hk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:18px;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hk-btn:hover{transform:translateY(-2px)}
.hk-btn--green{background:var(--dhaniya);color:#fff;box-shadow:0 5px 0 var(--dhaniya-deep)}
.hk-btn--green:hover{color:#fff}
.hk-btn--haldi{background:var(--haldi);color:#1F2A1F;box-shadow:0 5px 0 var(--haldi-deep)}
.hk-btn--haldi:hover{color:#1F2A1F}
.hk-btn--ghost{background:#fff;color:var(--dhaniya);box-shadow:inset 0 0 0 2px var(--dhaniya)}
.hk-btn svg{width:22px;height:22px;flex:none}

/* ---------- Header: the carrier handle ---------- */
.hk-header{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid #EFE6D2}
.hk-header__in{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hk-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dhaniya)}
.hk-logo__mark{width:46px;height:46px;flex:none}
.hk-logo__word{font-family:var(--font-head);font-weight:800;font-size:28px;letter-spacing:-.6px}
.hk-logo__word b{color:var(--mirchi);font-weight:800}
.custom-logo{max-height:52px;width:auto}
.hk-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.hk-nav a{text-decoration:none;color:var(--ink);font-weight:500}
.hk-nav a:hover{color:var(--mirchi)}
.hk-header__cta{display:flex;align-items:center;gap:12px}
.hk-menu-toggle{display:none;width:48px;height:48px;border-radius:14px;border:2px solid var(--dhaniya);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.hk-menu-toggle svg{width:24px;height:24px}

/* ---------- The Stack ---------- */
.hk-stack{position:relative;max-width:calc(var(--wrap) + 80px);margin:0 auto;padding:56px 40px 24px}
/* carrier side rails */
.hk-stack::before,.hk-stack::after{
  content:"";position:absolute;top:120px;bottom:60px;width:10px;border-radius:10px;
  background:linear-gradient(90deg,var(--steel-3),var(--steel-1) 45%,var(--steel-3));
  box-shadow:0 0 0 1px var(--steel-3);
}
.hk-stack::before{left:14px}
.hk-stack::after{right:14px}

.tier{
  position:relative;background:#fff;border-radius:var(--radius-tier);
  margin:0 0 30px;padding:72px 56px 60px;
  box-shadow:0 0 0 1px var(--steel-2), 0 14px 0 -4px var(--steel-2), 0 22px 40px -24px rgba(42,33,24,.25);
}
/* steel rim at the top of every tier */
.tier::before{
  content:"";position:absolute;left:0;right:0;top:0;height:18px;
  border-radius:var(--radius-tier) var(--radius-tier) 0 0;
  background:linear-gradient(180deg,var(--steel-1),var(--steel-2) 60%,var(--steel-3));
  border-bottom:1px solid var(--steel-3);
}
/* latch clips that lock the tier onto the rails */
.tier::after{
  content:"";position:absolute;top:44px;left:-30px;right:-30px;height:22px;pointer-events:none;
  background:
    radial-gradient(circle at 11px 11px,var(--steel-4) 0 5px,var(--steel-2) 6px 11px,transparent 12px) left/22px 22px no-repeat,
    radial-gradient(circle at 11px 11px,var(--steel-4) 0 5px,var(--steel-2) 6px 11px,transparent 12px) right/22px 22px no-repeat;
}
.tier--cream{background:var(--cream)}
.tier--green{background:var(--dhaniya);color:#fff}
.tier--green h2,.tier--green h3{color:#fff}
.tier--haldi{background:var(--haldi)}
.tier__label{
  position:absolute;top:30px;right:56px;
  font-family:var(--font-hand);font-size:16px;color:var(--muted);transform:rotate(-2deg)
}
.tier--green .tier__label{color:#B9D3C6}
.eyebrow{display:inline-block;color:var(--mirchi);font-weight:700;font-size:14px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:10px}
.tier--green .eyebrow{color:var(--haldi)}
.h2{font-size:clamp(34px,4.2vw,52px);font-weight:800}
.lead{font-size:20px;color:var(--ink-soft)}
.center{text-align:center}
.center .lead{margin:14px auto 0;max-width:620px}

/* ---------- LID / HERO ---------- */
.tier--lid{padding-top:84px;background:var(--cream);border-radius:120px 120px var(--radius-tier) var(--radius-tier)}
.tier--lid::before{height:26px;border-radius:120px 120px 0 0}
.hk-handle{
  position:absolute;left:50%;top:-44px;transform:translateX(-50%);
  width:180px;height:70px;border:12px solid var(--steel-3);border-bottom:0;border-radius:90px 90px 0 0;
  box-shadow:inset 0 3px 0 var(--steel-1);
}
.hk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hk-hero__badge{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid #EBD9A8;color:#7A4A0B;padding:6px 14px;border-radius:999px;font-size:15px;font-weight:600}
.hk-hero h1{font-size:clamp(44px,6vw,82px);font-weight:800;margin:20px 0 18px;letter-spacing:-2px}
.hk-hero h1 .scribble{position:relative;color:var(--mirchi);white-space:nowrap}
.hk-hero h1 .scribble svg{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:18px}
.hk-hero .lead{max-width:560px}

.hk-pin{margin-top:28px;background:#fff;border:1px solid #EBD9A8;border-radius:22px;padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;max-width:580px}
.hk-pin label{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.hk-pin input{height:50px;border:1px solid #D9CBA8;border-radius:14px;padding:0 16px;font:inherit;font-size:18px;color:var(--ink);background:#fff}
.hk-pin__result{flex-basis:100%;font-weight:600;font-size:16px;min-height:0}
.hk-pin__result.ok{color:var(--dhaniya)}
.hk-pin__result.no{color:var(--mirchi)}
.hk-ticks{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 24px;color:var(--ink-soft);font-size:16px;list-style:none;padding:0}
.hk-ticks li{display:flex;align-items:center;gap:8px}
.hk-ticks svg{width:20px;height:20px;color:var(--dhaniya)}

/* hero dabba illustration */
.hk-dabba-art{position:relative;max-width:420px;margin:0 auto;width:100%}
.hk-dabba-art svg{width:100%;height:auto;overflow:visible}
.hk-dabba-art .lid{transform-origin:50% 100%;animation:lidUp 1.2s .4s cubic-bezier(.2,.9,.3,1.3) both}
.hk-dabba-art .steam path{stroke-dasharray:60;stroke-dashoffset:60;animation:steam 2.6s 1.2s ease-in-out infinite}
.hk-dabba-art .steam path:nth-child(2){animation-delay:1.6s}
.hk-dabba-art .steam path:nth-child(3){animation-delay:2s}
.hk-sticker{
  position:absolute;font-family:var(--font-head);font-weight:700;font-size:17px;padding:10px 16px;border-radius:16px;
  box-shadow:0 6px 0 rgba(0,0,0,.08)
}
.hk-sticker--a{left:-14px;bottom:22%;background:var(--dhaniya);color:#fff;transform:rotate(-5deg)}
.hk-sticker--b{right:-10px;top:30%;background:#fff;color:var(--mirchi);border:1px solid #F1D9C7;transform:rotate(4deg)}
@keyframes lidUp{0%{transform:translateY(40px)}100%{transform:translateY(0) rotate(-6deg)}}
@keyframes steam{0%{stroke-dashoffset:60;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-60;opacity:0}}

/* ---------- Journey strip ---------- */
.hk-journey{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.hk-journey::before{content:"";position:absolute;left:12%;right:12%;top:34px;border-top:3px dashed var(--steel-3)}
.hk-step{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.hk-step__dot{
  width:70px;height:70px;border-radius:50%;background:#fff;border:3px solid var(--dhaniya);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1
}
.hk-step__dot svg{width:32px;height:32px;color:var(--dhaniya)}
.hk-step__time{font-family:var(--font-hand);color:var(--mirchi);font-size:17px}
.hk-step h3{font-size:22px}
.hk-step p{font-size:16px;color:var(--ink-soft)}
.hk-rider{position:absolute;top:14px;left:12%;width:40px;height:40px;z-index:2;animation:ride 7s linear infinite}
.hk-rider svg{width:40px;height:40px}
@keyframes ride{0%{left:12%}100%{left:calc(88% - 40px)}}

/* ---------- Menu: chitthi in the dabba ---------- */
.hk-menu{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.hk-menu .lead{color:#D6E4DC;margin-top:14px}
.hk-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hk-days button{
  min-width:56px;min-height:44px;border-radius:12px;border:1px solid #3E6E58;background:transparent;color:#fff;
  font:600 16px var(--font-body);cursor:pointer
}
.hk-days button[aria-pressed="true"]{background:var(--haldi);color:#1F2A1F;border-color:var(--haldi)}
.hk-chitthi{
  position:relative;background:#FFFDF2;color:var(--ink);padding:40px 40px 36px;border-radius:6px;
  transform:rotate(1.4deg);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(180deg,transparent 0 37px,#E7DFC7 37px 38px);
}
.hk-chitthi::before{ /* tape */
  content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(245,184,46,.75);
}
.hk-chitthi h3{font-family:var(--font-hand);font-weight:700;font-size:32px;color:var(--mirchi);margin-bottom:6px}
.hk-chitthi ul{list-style:none;margin:0;padding:0}
.hk-chitthi li{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-hand);font-size:22px;line-height:38px}
.hk-chitthi li span:first-child{color:var(--dhaniya);font-weight:700}
.hk-chitthi__sign{margin-top:10px;text-align:right;font-family:var(--font-hand);color:var(--muted);font-size:18px}

/* ---------- Plans as dabbas ---------- */
.hk-plans{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:end}
.hk-plan{
  position:relative;background:#fff;border-radius:32px;padding:30px 28px 30px;
  box-shadow:0 0 0 1px var(--steel-2);display:flex;flex-direction:column;gap:14px
}
.hk-plan--pop{box-shadow:0 0 0 3px var(--dhaniya);background:var(--cream)}
.hk-plan__flag{position:absolute;top:-16px;left:28px;background:var(--haldi);color:#1F2A1F;font-weight:700;font-size:14px;padding:4px 14px;border-radius:999px}
.hk-plan__art{height:200px;display:flex;align-items:flex-end;justify-content:center}
.hk-plan__art svg{height:100%;width:auto}
.hk-plan h3{font-size:28px}
.hk-plan__tag{color:var(--ink-soft);font-size:16px}
.hk-price{display:flex;align-items:baseline;gap:6px}
.hk-price strong{font-family:var(--font-head);font-weight:800;font-size:46px;color:var(--ink);line-height:1}
.hk-price span{color:var(--muted);font-size:16px}
.hk-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:17px}
.hk-plan li{display:flex;gap:10px;align-items:flex-start}
.hk-plan li svg{width:20px;height:20px;flex:none;margin-top:4px;color:var(--dhaniya)}
.hk-plan .hk-btn{margin-top:8px;width:100%}
.hk-dabba-tier{transform-origin:center bottom}
.hk-plan:hover .hk-dabba-lid{transform:translateY(-10px) rotate(-5deg)}
.hk-dabba-lid{transition:transform .35s cubic-bezier(.2,.9,.3,1.4);transform-box:fill-box;transform-origin:left bottom}

/* ---------- Why us ---------- */
.hk-why{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hk-why__item{background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:10px;box-shadow:0 0 0 1px #EFE6D2}
.hk-why__item svg{width:38px;height:38px;color:var(--mirchi)}
.hk-why__item h3{font-size:22px}
.hk-why__item p{font-size:16px;color:var(--ink-soft)}

/* ---------- Base tier / CTA ---------- */
.tier--base{border-radius:var(--radius-tier) var(--radius-tier) 70px 70px}
.hk-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.hk-cta h2{color:#1F2A1F}
.hk-cta p{color:#3A2E14;font-size:19px;margin-top:8px}
.hk-cta__btns{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- Footer ---------- */
.hk-footer{background:var(--dhaniya-deep);color:#D6E4DC;margin-top:40px}
.hk-footer__in{max-width:var(--wrap);margin:0 auto;padding:56px 24px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.hk-footer .hk-logo__word{color:#fff}
.hk-footer .hk-logo__word b{color:var(--haldi)}
.hk-footer a{color:#D6E4DC;text-decoration:none}
.hk-footer a:hover{color:#fff}
.hk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hk-footer__bottom{max-width:var(--wrap);margin:0 auto;padding:18px 24px 28px;border-top:1px solid #2B5A45;font-size:14px;color:#A9C2B5;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

/* ---------- Floating WhatsApp ---------- */
.hk-float{
  position:fixed;right:18px;bottom:18px;z-index:60;width:60px;height:60px;border-radius:50%;
  background:var(--dhaniya);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(20,51,38,.35)
}
.hk-float svg{width:30px;height:30px}
.hk-float:hover{color:#fff}

/* ---------- Generic pages / posts ---------- */
.hk-page{max-width:820px;margin:0 auto}
.hk-page .entry-title{font-size:clamp(34px,5vw,54px);margin-bottom:20px}
.hk-page .entry-content > * + *{margin-top:1em}
.hk-page .entry-content img{border-radius:20px}
.hk-post-list{display:grid;gap:22px}
.hk-post-card{padding:26px 28px;border-radius:26px;background:var(--cream)}
.hk-post-card h2{font-size:28px}
.hk-post-card a{text-decoration:none}
.hk-meta{font-size:15px;color:var(--muted);margin:6px 0 10px}
.nav-links{display:flex;justify-content:space-between;margin-top:30px}

/* ---------- Reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(40px) scale(.98);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hk-hero,.hk-menu{grid-template-columns:1fr}
  .hk-plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .hk-why{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hk-menu-toggle{display:inline-flex}
  .hk-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid #EFE6D2;padding:16px 24px 24px}
  .hk-nav.is-open{display:block}
  .hk-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
  .hk-header__cta .hk-btn{display:none}
  .hk-stack{padding:48px 14px 16px}
  .hk-stack::before,.hk-stack::after{display:none}
  .tier{padding:60px 22px 40px;border-radius:32px}
  .tier::before{border-radius:32px 32px 0 0}
  .tier::after{display:none}
  .tier__label{right:22px;top:26px}
  .tier--lid{border-radius:70px 70px 32px 32px}
  .tier--lid::before{border-radius:70px 70px 0 0}
  .hk-journey{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .hk-journey::before,.hk-rider{display:none}
  .hk-why{grid-template-columns:1fr}
  .hk-chitthi{padding:34px 22px 28px}
  .hk-chitthi li{font-size:19px}
}