/*
Theme Name: Khelna House
Theme URI: https://khelnahouse.com
Author: Khelna House
Author URI: https://khelnahouse.com
Description: A warm, playful WordPress theme built for Khelna House — a kids' toy brand. Ships with a home page, shop archive, about, contact, and FAQ layouts, plus WooCommerce support so products can be imported and sold straight away.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: khelna-house
Tags: e-commerce, custom-menu, custom-logo, footer-widgets, translation-ready
*/

/* =========================================================
   DESIGN TOKENS
   Palette:
   --kh-cream    #FFFBF2  (page background)
   --kh-ink      #22283B  (text / headlines)
   --kh-sun      #FFC93C  (primary accent — sunshine yellow)
   --kh-sky      #3FA9DA  (secondary accent — sky blue)
   --kh-coral    #FF6B5E  (call-to-action / energy)
   --kh-grass    #5FBE87  (success / trust)
   --kh-cloud    #FFFFFF  (card surfaces)
   Type:
   Display: 'Baloo 2' (rounded, toy-block weight, used sparingly for headlines)
   Body:    'Nunito Sans' (warm, rounded, highly legible)
   Signature element: a hand-drawn "play path" — a dashed, curved track
   (like a toy train track / board-game path) that threads between
   sections instead of straight dividers.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

:root{
  --kh-cream:#FFFBF2;
  --kh-ink:#22283B;
  --kh-ink-soft:#525A72;
  --kh-sun:#FFC93C;
  --kh-sky:#3FA9DA;
  --kh-coral:#FF6B5E;
  --kh-grass:#5FBE87;
  --kh-cloud:#FFFFFF;
  --kh-line:#EDE6D3;
  --kh-radius-lg:28px;
  --kh-radius-md:18px;
  --kh-radius-sm:10px;
  --kh-shadow: 0 14px 30px -14px rgba(34,40,59,0.22);
  --kh-container: 1180px;
  --kh-font-display: 'Baloo 2', system-ui, sans-serif;
  --kh-font-body: 'Nunito Sans', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--kh-cream);
  color:var(--kh-ink);
  font-family:var(--kh-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--kh-sky); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--kh-font-display);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--kh-ink);
}
h1{ font-size:clamp(2.2rem,4vw + 1rem,3.6rem); font-weight:800; }
h2{ font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem); }
h3{ font-size:1.3rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--kh-font-display);
  font-weight:600; font-size:.85rem; letter-spacing:.04em;
  color:var(--kh-coral); text-transform:uppercase;
  margin-bottom:.6em;
}
.eyebrow::before{ content:"●"; font-size:.6em; color:var(--kh-sun); }

.container{ max-width:var(--kh-container); margin:0 auto; padding:0 24px; }
.section{ padding:76px 0; position:relative; }
.section--tight{ padding:48px 0; }
.section--cloud{ background:var(--kh-cloud); }
.section--sky{ background:linear-gradient(180deg,#EAF6FC 0%,var(--kh-cream) 100%); }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head p{ color:var(--kh-ink-soft); font-size:1.05rem; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--kh-font-display); font-weight:600; font-size:1rem;
  padding:14px 28px; border-radius:100px; border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--kh-coral); color:#fff; box-shadow:0 10px 22px -8px rgba(255,107,94,.55); }
.btn--primary:hover{ background:#ff584a; }
.btn--secondary{ background:var(--kh-sun); color:var(--kh-ink); box-shadow:0 10px 22px -8px rgba(255,201,60,.6); }
.btn--outline{ background:transparent; border-color:var(--kh-ink); color:var(--kh-ink); }
.btn--outline:hover{ background:var(--kh-ink); color:#fff; }
.btn--sm{ padding:10px 20px; font-size:.9rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,251,242,.92); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--kh-line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; position:relative;
}
.site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--kh-font-display); font-weight:800; font-size:1.4rem; color:var(--kh-ink); }
.site-logo img{ max-height:44px; width:auto; }
.site-logo .logo-mark{
  width:40px;height:40px;border-radius:12px;
  background:var(--kh-sun);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-6deg);
  box-shadow:0 6px 14px -6px rgba(255,201,60,.7);
}
.site-logo .logo-mark svg{ width:22px; height:22px; }

.primary-nav ul{ display:flex; align-items:center; gap:6px; }
.primary-nav a{
  font-family:var(--kh-font-display); font-weight:600; font-size:.98rem;
  padding:10px 16px; border-radius:100px; color:var(--kh-ink);
  transition:background .15s ease, color .15s ease;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{ background:var(--kh-sun); }
.primary-nav .sub-menu{
  position:absolute; background:var(--kh-cloud); border-radius:var(--kh-radius-md);
  box-shadow:var(--kh-shadow); padding:10px; min-width:200px; margin-top:8px;
  display:none; flex-direction:column;
}
.primary-nav li:hover > .sub-menu{ display:flex; }
.primary-nav .sub-menu a{ border-radius:var(--kh-radius-sm); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions a{ display:flex; align-items:center; gap:6px; font-weight:700; }
.cart-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--kh-ink); color:#fff;
  padding:10px 18px; border-radius:100px; font-family:var(--kh-font-display); font-weight:600;
}
.cart-pill .count{ background:var(--kh-coral); border-radius:100px; padding:1px 8px; font-size:.8rem; }
.menu-toggle{ display:none; background:none; border:none; font-size:1.6rem; }

@media (max-width:900px){
  .primary-nav{ display:none; }
  .primary-nav.is-open{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:var(--kh-cloud); padding:16px 24px; box-shadow:var(--kh-shadow);
  }
  .primary-nav.is-open ul{ flex-direction:column; align-items:flex-start; gap:2px; }
  .menu-toggle{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:64px 0 40px; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero__copy p.lede{ font-size:1.15rem; color:var(--kh-ink-soft); max-width:480px; margin-bottom:28px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero__trust{ display:flex; gap:26px; flex-wrap:wrap; }
.hero__trust div{ font-family:var(--kh-font-display); font-weight:700; font-size:1.4rem; color:var(--kh-coral); }
.hero__trust span{ display:block; font-family:var(--kh-font-body); font-weight:600; font-size:.8rem; color:var(--kh-ink-soft); }
.hero__art{ position:relative; }
.hero__art .blob{
  position:absolute; inset:0; margin:auto; width:92%; height:92%;
  background:var(--kh-sun); border-radius:42% 58% 60% 40% / 46% 40% 60% 54%;
  z-index:0;
}
.hero__art svg{ position:relative; z-index:1; width:100%; height:auto; }
.hero__badge{
  position:absolute; top:8%; right:2%; background:var(--kh-cloud); border-radius:100px;
  padding:10px 16px; box-shadow:var(--kh-shadow); font-family:var(--kh-font-display);
  font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:6px; z-index:2;
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:380px; margin:0 auto; }
}

/* =========================================================
   PLAY PATH — signature divider
   ========================================================= */
.play-path{ height:64px; width:100%; display:block; }
.play-path path{ fill:none; stroke:var(--kh-ink); stroke-width:3; stroke-dasharray:2 14; stroke-linecap:round; opacity:.35; }

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.category-card{
  background:var(--kh-cloud); border-radius:var(--kh-radius-lg); padding:28px;
  box-shadow:var(--kh-shadow); text-align:left; position:relative; overflow:hidden;
  transition:transform .2s ease;
}
.category-card:hover{ transform:translateY(-6px); }
.category-card .icon-wrap{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.category-card .icon-wrap svg{ width:30px; height:30px; }
.category-card p{ color:var(--kh-ink-soft); font-size:.95rem; margin:6px 0 14px; }
.category-card .cat-link{ font-family:var(--kh-font-display); font-weight:700; color:var(--kh-coral); }

@media (max-width:900px){ .category-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .category-grid{ grid-template-columns:1fr; } }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-item{ display:flex; gap:14px; align-items:flex-start; }
.trust-item .icon-wrap{
  flex:none; width:48px; height:48px; border-radius:14px; background:var(--kh-cream);
  display:flex; align-items:center; justify-content:center; border:2px solid var(--kh-line);
}
.trust-item svg{ width:24px; height:24px; }
.trust-item h4{ margin-bottom:2px; font-size:1.02rem; }
.trust-item p{ margin:0; font-size:.88rem; color:var(--kh-ink-soft); }

@media (max-width:900px){ .trust-strip{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   PRODUCTS (WooCommerce + fallback grid)
   WooCommerce's product-loop shortcode injects its own inline
   <style> block with float + percentage widths on li.product
   (based on the "columns" attribute). Everything below beats
   that with !important so our grid always wins, regardless of
   which stylesheet loads last.
   ========================================================= */
.products, ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:26px !important;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.products .product, ul.products li.product{
  width:auto !important; max-width:none !important; float:none !important;
  margin:0 !important; clear:none !important;
  background:var(--kh-cloud); border-radius:var(--kh-radius-md); padding:18px;
  box-shadow:var(--kh-shadow); text-align:left !important;
  display:flex !important; flex-direction:column !important;
}
.products .product a, ul.products li.product > a{
  display:flex !important; flex-direction:column !important; flex:1 1 auto;
}
.products .product img, ul.products li.product img{
  width:100% !important; height:auto !important; max-width:none !important;
  aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--kh-radius-sm); margin-bottom:12px !important;
  background:var(--kh-cream);
}
.products .product h2, .products .product h3, ul.products li.product h2, ul.products li.product h3{
  font-size:1rem !important; margin:0 0 4px !important; line-height:1.35;
}
.woocommerce ul.products li.product .price{
  color:var(--kh-coral); font-weight:800; font-family:var(--kh-font-display);
  margin-top:auto; padding-top:8px; display:block;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background:var(--kh-ink) !important; color:#fff !important; border-radius:100px !important;
  font-family:var(--kh-font-display) !important; font-weight:600 !important; border:none !important;
  padding:10px 20px !important; margin-top:10px !important; align-self:flex-start;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--kh-coral) !important; }
.woo-empty-notice{
  background:var(--kh-cloud); border:2px dashed var(--kh-sky); border-radius:var(--kh-radius-md);
  padding:32px; text-align:center; color:var(--kh-ink-soft);
}

@media (max-width:1000px){ .products, ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:560px){ .products, ul.products{ grid-template-columns:1fr !important; } }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonial-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{
  background:var(--kh-ink); color:#fff; border-radius:var(--kh-radius-lg); padding:30px;
}
.testimonial-card .stars{ color:var(--kh-sun); letter-spacing:2px; margin-bottom:14px; }
.testimonial-card p{ font-size:1rem; opacity:.92; }
.testimonial-card footer{ margin-top:18px; font-family:var(--kh-font-display); font-weight:700; font-size:.9rem; color:var(--kh-sun); }

@media (max-width:900px){ .testimonial-track{ grid-template-columns:1fr; } }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  background:var(--kh-sky); border-radius:var(--kh-radius-lg); padding:52px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  color:#fff;
}
.newsletter h2{ color:#fff; margin-bottom:6px; }
.newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter input[type=email]{
  padding:14px 20px; border-radius:100px; border:none; min-width:260px; font-size:1rem; font-family:var(--kh-font-body);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{ background:var(--kh-cloud); border-radius:var(--kh-radius-md); padding:24px; box-shadow:var(--kh-shadow); }
.value-card .num{ font-family:var(--kh-font-display); font-weight:800; color:var(--kh-sun); -webkit-text-stroke:1.5px var(--kh-ink); font-size:1.6rem; }
@media (max-width:900px){ .about-hero{ grid-template-columns:1fr; } .value-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; }
.contact-card{ background:var(--kh-cloud); border-radius:var(--kh-radius-lg); padding:32px; box-shadow:var(--kh-shadow); }
.contact-info-item{ display:flex; gap:14px; margin-bottom:22px; }
.contact-info-item .icon-wrap{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--kh-cream); display:flex; align-items:center; justify-content:center; }
.kh-form label{ display:block; font-family:var(--kh-font-display); font-weight:600; font-size:.9rem; margin-bottom:6px; }
.kh-form input, .kh-form textarea{
  width:100%; padding:13px 16px; border-radius:var(--kh-radius-sm); border:2px solid var(--kh-line);
  font-family:var(--kh-font-body); font-size:1rem; margin-bottom:18px; background:var(--kh-cream);
}
.kh-form input:focus, .kh-form textarea:focus{ border-color:var(--kh-sky); outline:none; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ PAGE
   ========================================================= */
.faq-list details{
  background:var(--kh-cloud); border-radius:var(--kh-radius-md); padding:20px 24px; margin-bottom:14px;
  box-shadow:var(--kh-shadow);
}
.faq-list summary{ font-family:var(--kh-font-display); font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:1.4rem; color:var(--kh-coral); }
.faq-list details[open] summary::after{ content:"–"; }
.faq-list p{ color:var(--kh-ink-soft); margin-top:12px; margin-bottom:0; }

/* =========================================================
   BLOG / ARCHIVE
   ========================================================= */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:var(--kh-cloud); border-radius:var(--kh-radius-md); overflow:hidden; box-shadow:var(--kh-shadow); }
.post-card__img{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--kh-sun),var(--kh-coral)); }
.post-card__body{ padding:20px; }
.post-card time{ font-size:.8rem; color:var(--kh-ink-soft); font-weight:700; text-transform:uppercase; }
@media (max-width:900px){ .post-grid{ grid-template-columns:1fr; } }

/* =========================================================
   404
   ========================================================= */
.error-404{ text-align:center; padding:100px 0; }
.error-404 h1{ font-size:6rem; color:var(--kh-sun); -webkit-text-stroke:2px var(--kh-ink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--kh-ink); color:#fff; padding-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.footer-grid p, .footer-grid a{ color:#C8CCDA; font-size:.92rem; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a:hover{ color:var(--kh-sun); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:100px; background:#333A52; display:flex; align-items:center; justify-content:center; }
.footer-bottom{ border-top:1px solid #333A52; padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:#9BA1B8; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* Widgets fallback */
.widget{ margin-bottom:24px; }
.widget h2, .widget h3{ font-size:1rem; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }