/* ============================================================
   FOXMORO GLOBAL CSS
   Reset, type, buttons, decorations, waves, top bar, header, mobile
   drawer, footer, toast. Copied from the approved prototype.
   Homepage sections live in sections.css (Phase 3).
   Mobile rules live in responsive.css.

   Only these things differ from the prototype (needed for WordPress):
   1. Header icons use the class .h-btn (cart and account are links now,
      search and menu are buttons).
   2. The mobile drawer is hidden with visibility when closed, so keyboard
      users cannot tab into it.
   3. Scroll reveal only hides content when JavaScript is running (.js).
   4. Footer: newsletter honeypot field and temporary white-logo fallback.
   5. New blocks at the bottom: accessibility helpers, admin bar offset,
      search panel, basic page shell.
============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--f-body);color:var(--ink);background:var(--cream);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto;position:relative;z-index:2}
.wrap > *{min-width:0}

/* ---------- Type ---------- */
.display{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:.5px;color:var(--green);text-wrap:balance}
.display .o{color:var(--orange)}
.display .y{color:var(--yellow)}
.hand{font-family:var(--f-hand);font-weight:700}
.h2{font-size:clamp(2rem,4vw,3.2rem)}
.sub{color:var(--muted);font-size:1.05rem;margin-top:10px}
.sub.tilt{transform:rotate(-2deg);display:inline-block}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.92rem;letter-spacing:.3px;transition:transform .12s ease, box-shadow .12s ease, background .2s, color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn i{font-size:.85em}
.btn-orange{background:var(--orange);color:#fff;--shade:#B83E12}
.btn-yellow{background:var(--yellow);color:var(--green);--shade:#C99400}
/* 3D buttons: resting edge -> lift on hover -> pushed flat on press */
.btn-orange,.btn-yellow,.add{--depth:6px;box-shadow:0 var(--depth) 0 var(--shade);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:hover){
  .btn-orange:hover,.btn-yellow:hover,.add:hover{transform:translateY(-2px);box-shadow:0 calc(var(--depth) + 2px) 0 var(--shade)}
}
.btn-orange:active,.btn-yellow:active,.add:active{transform:translateY(var(--depth));box-shadow:0 0 0 var(--shade);transition-duration:.05s}
.btn-ghost:active,.btn-ghost-light:active{transform:scale(.96)}
.btn-ghost{background:#fff;color:var(--green);border:2px solid var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border:2px solid #fff}
.btn-ghost-light:hover{background:#fff;color:var(--orange)}
.link{color:var(--orange);font-weight:700;font-size:.92rem;display:inline-flex;gap:8px;align-items:center}
.link:hover i{transform:translateX(4px)}
.link i{transition:transform .2s}

/* ---------- Decorative floating makhana / chilli / mint leaf (real images) ----------
   The image URLs (--img-mk-red, --img-mk-green, --img-chili, --img-leaf) are set
   on :root by PHP (inc/enqueue.php) so the client can replace them in Customizer. */
.mk,.leaf{position:absolute;width:var(--s,44px);aspect-ratio:1;background:center/contain no-repeat;
  transform:rotate(var(--r,0deg));
  filter:drop-shadow(0 8px 8px rgba(40,25,5,.3));
  animation:bob var(--d,7s) ease-in-out infinite;pointer-events:none;z-index:1}
.mk.r{background-image:var(--img-mk-red)}
.mk.g{background-image:var(--img-mk-green)}
.mk.c{background-image:var(--img-chili)}
.leaf{background-image:var(--img-leaf)}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:12deg}}

/* ---------- Waves ---------- */
.wave{display:block;width:100%;height:60px;line-height:0}
.wave svg{width:100%;height:100%;display:block}
.wave path{fill:currentColor}

/* ============ 1. TOP BAR ============ */
.topbar{background:var(--green);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.4px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar i{color:var(--yellow);margin-right:6px}
.topbar a{color:var(--yellow)}
.topbar a i{margin:0 0 0 6px}

/* ============ 2. HEADER ============ */
.header{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.98);transition:box-shadow .3s}
.header.scrolled{box-shadow:0 8px 24px -14px rgba(27,67,50,.35)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo img{height:48px;width:auto}
.nav{display:flex;gap:34px;font-weight:600;font-size:.95rem}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.h-icons{display:flex;gap:6px;align-items:center}
.h-icons .h-btn{width:42px;height:42px;border-radius:50%;font-size:1.05rem;color:var(--green);position:relative;transition:background .2s;display:grid;place-items:center;padding:0;line-height:1}
.h-icons .ico{width:24px;height:24px;display:block}
.h-icons .h-btn:hover{background:var(--cream-2)}
.cart-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--orange);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;padding:0 4px}
.cart-count.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.4)}}
.h-icons .burger{display:none}
.drawer{position:fixed;inset:0;z-index:60;background:var(--green);color:#fff;padding:24px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);visibility:hidden;overflow-y:auto;transition:transform .35s ease, visibility 0s linear .35s}
.drawer.open{transform:none;visibility:visible;transition:transform .35s ease, visibility 0s}
.drawer .close{align-self:flex-end;color:#fff;font-size:1.6rem;width:44px;height:44px}
.drawer a{font-family:var(--f-display);font-size:2rem;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer a.acc{color:var(--yellow);display:flex;align-items:center;gap:14px}
.drawer a.acc i{font-size:1.5rem}

/* ============ 16. FOOTER ============ */
.footer{background:var(--green);color:#D5E6DA;padding:20px 0 26px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:30px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.f-brand img{height:52px;width:auto;margin-bottom:14px}
/* temporary: normal logo shown white until a white logo file is supplied */
.f-brand img.is-fallback{filter:brightness(0) invert(1)}
.f-brand p{font-size:.9rem;max-width:30ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;transition:all .2s}
.socials a:hover{background:var(--yellow);color:var(--green);border-color:var(--yellow)}
.f-col h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.f-col a{display:block;font-size:.88rem;padding:4px 0;transition:color .2s}
.f-col a:hover{color:var(--yellow)}
.f-news h4{color:#fff;margin-bottom:10px}
.f-news p{font-size:.88rem;margin-bottom:12px}
.f-news form{display:flex;background:#fff;border-radius:999px;padding:5px}
.f-news input{flex:1;border:0;outline:0;padding:0 14px;font-family:inherit;font-size:.88rem;background:none;min-width:0}
.f-news input.hp-field{position:absolute;left:-9999px;width:1px;height:1px;flex:none;padding:0;opacity:0}
.f-news button{background:var(--orange);color:#fff;font-weight:700;font-size:.82rem;padding:11px 18px;border-radius:999px}
.f-news .hand{color:var(--yellow);font-size:1.9rem;line-height:1;margin-top:22px;transform:rotate(-4deg)}
.f-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:.8rem;flex-wrap:wrap}
.f-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.f-bottom a:hover{color:var(--yellow)}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 200%;opacity:0;pointer-events:none;background:var(--green);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;font-size:.9rem;display:flex;gap:10px;align-items:center;z-index:80;transition:translate .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.toast i{color:var(--yellow)}
.toast.show{translate:-50% 0;opacity:1}

/* Scroll reveal (one orchestrated rise per section) */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* ============ SECTION PRIMITIVE ============ */
.sec{padding:80px 0;position:relative}

/* ============ WORDPRESS / ACCESSIBILITY ============ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus,.skip-link:focus{clip:auto!important;clip-path:none;width:auto;height:auto;margin:0;overflow:visible}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:100000;background:var(--green);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700}
.admin-bar .header{top:32px}
.admin-bar .drawer{top:32px}
body.drawer-open{overflow:hidden}

/* ============ HEADER SEARCH PANEL (desktop, opens from the search icon) ============ */
.search-panel{background:rgba(255,248,240,.98);border-top:1px solid rgba(27,67,50,.1)}
.search-panel[hidden]{display:none}
.search-panel .sp-inner{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.search-panel form{display:flex;background:#fff;border:2px solid var(--green);border-radius:999px;padding:5px;margin:14px 0}
.search-panel input[type="search"]{flex:1;min-width:0;border:0;outline:0;padding:0 16px;font-family:inherit;font-size:.95rem;background:none;color:var(--ink)}
.search-panel button{background:var(--orange);color:#fff;font-weight:700;font-size:.82rem;padding:11px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px}

/* ============ BASIC PAGE SHELL (inner pages, refined in Phase 6) ============ */
.page-shell{padding:56px 0 84px}
.page-head{margin-bottom:28px}
.entry{max-width:78ch;font-size:1.02rem}
.woocommerce-cart .entry,.woocommerce-checkout .entry,.woocommerce-account .entry{max-width:none}
.entry > * + *{margin-top:1em}
.entry h2,.entry h3,.entry h4{font-family:var(--f-display);font-weight:400;line-height:1.1;color:var(--green);margin-top:1.6em}
.entry h2{font-size:1.9rem}
.entry h3{font-size:1.5rem}
.entry a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.3em}
.post-item{padding:22px 0;border-bottom:1px solid rgba(27,67,50,.12)}
.post-item h2{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1;color:var(--green);margin-bottom:8px}
.post-item h2 a:hover{color:var(--orange)}
.post-item .entry{margin-bottom:12px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pagination .page-numbers{padding:8px 16px;border-radius:999px;border:2px solid var(--green);font-weight:700;color:var(--green)}
.pagination .page-numbers.current,.pagination a.page-numbers:hover{background:var(--green);color:#fff}

@media (max-width:782px){
  .admin-bar .header{top:46px}
  .admin-bar .drawer{top:46px}
}
@media (max-width:600px){
  .admin-bar .header{top:0}
  .admin-bar .drawer{top:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}