/*
Theme Name: Nee-Doh Land
Theme URI: https://ljltech.ca
Description: A bright, squishy, kid-friendly storefront for Nee-Doh sensory toys. Claymorphism child theme of Storefront.
Author: LJL Tech
Template: storefront
Version: 0.2.0
Text Domain: needoh
*/

/* ============================================================
   Nee-Doh Land — Claymorphism + animated playground
   Style direction: chunky soft-3D, candy palette, bouncy motion
   ============================================================ */
:root {
  --nd-pink:   #ff3d8b;
  --nd-pink-d: #d8327c;   /* button under-shadow */
  --nd-purple: #7c3aed;   /* AA-contrast price text */
  --nd-blue:   #1f9cf0;
  --nd-lime:   #6dd400;
  --nd-yellow: #ffc833;
  --nd-orange: #ff7a2f;
  --nd-mint:   #2dd4bf;
  --nd-ink:    #3a2b63;
  --nd-cream:  #fff5fb;

  --nd-radius: 26px;
  --nd-radius-sm: 16px;
  /* Claymorphism double shadow: soft outer + light inner highlight */
  --nd-clay: 0 14px 0 rgba(58,43,99,.10), 0 22px 38px rgba(124,58,237,.22),
             inset 0 4px 8px rgba(255,255,255,.65), inset 0 -8px 14px rgba(124,58,237,.12);
  --nd-clay-sm: 0 8px 0 rgba(58,43,99,.08), 0 12px 22px rgba(124,58,237,.18),
                inset 0 3px 6px rgba(255,255,255,.6);
  --nd-font-head: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
  --nd-font-body: 'Nunito', system-ui, sans-serif;
}

body {
  font-family: var(--nd-font-body);
  color: var(--nd-ink);
  font-size: 17px;
  background:
    radial-gradient(circle at 10% 6%,  rgba(255,61,139,.10), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(31,156,240,.12), transparent 40%),
    radial-gradient(circle at 70% 90%, rgba(109,212,0,.10), transparent 42%),
    var(--nd-cream);
}

h1,h2,h3,h4,.site-title,.product_title,.entry-title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--nd-font-head) !important;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--nd-ink);
}

/* ---------- Animated playground background ---------- */
.nd-playground { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nd-playground i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(1px); opacity: .5;
  animation: nd-float 12s ease-in-out infinite;
}
.nd-playground i:nth-child(1){ width:120px;height:120px;left:6%;top:20%;  background:var(--nd-pink);   animation-duration:13s;}
.nd-playground i:nth-child(2){ width:80px; height:80px; left:84%;top:14%; background:var(--nd-blue);   animation-duration:11s; animation-delay:-3s;}
.nd-playground i:nth-child(3){ width:60px; height:60px; left:20%;top:74%; background:var(--nd-lime);   animation-duration:15s; animation-delay:-6s;}
.nd-playground i:nth-child(4){ width:100px;height:100px;left:74%;top:66%; background:var(--nd-yellow); animation-duration:14s; animation-delay:-2s;}
.nd-playground i:nth-child(5){ width:46px; height:46px; left:48%;top:30%; background:var(--nd-mint);   animation-duration:10s; animation-delay:-5s;}
.nd-playground i:nth-child(6){ width:70px; height:70px; left:38%;top:88%; background:var(--nd-orange); animation-duration:16s; animation-delay:-4s;}
@keyframes nd-float {
  0%,100% { transform: translateY(0) translateX(0) rotate(0deg); }
  33%     { transform: translateY(-34px) translateX(16px) rotate(8deg); }
  66%     { transform: translateY(22px) translateX(-14px) rotate(-6deg); }
}

/* keep Storefront content above the playground */
.site { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(120deg, var(--nd-pink), var(--nd-purple) 52%, var(--nd-blue));
  border-bottom: 6px solid rgba(255,255,255,.4);
}
.site-header .site-title a, .site-header a,
.storefront-primary-navigation a { color:#fff !important; text-shadow:0 2px 0 rgba(58,43,99,.22); }
.site-branding .site-title { font-size: 2.2rem; }
.storefront-primary-navigation ul.menu > li > a:hover { transform: translateY(-2px); display:inline-block; }

/* ---------- Chunky clay buttons ---------- */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .button.alt {
  background: var(--nd-pink) !important;
  color:#fff !important; border:none !important;
  border-radius: 999px !important;
  font-family: var(--nd-font-head) !important; font-weight:600;
  padding:.7em 1.6em !important; font-size:1.02rem;
  box-shadow: 0 7px 0 var(--nd-pink-d), inset 0 3px 6px rgba(255,255,255,.45);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .2s;
  cursor: pointer;
}
.button:hover, button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  transform: translateY(-4px) rotate(-1.5deg) scale(1.03);
  box-shadow: 0 11px 0 var(--nd-pink-d), inset 0 3px 6px rgba(255,255,255,.45);
  background: var(--nd-purple) !important;
}
.button:active, .woocommerce a.button:active, .woocommerce button.button:active {
  transform: translateY(3px); box-shadow: 0 3px 0 var(--nd-pink-d);
}
:focus-visible { outline: 4px solid var(--nd-blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- Product cards = clay blobs ---------- */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background:#fff; border-radius:var(--nd-radius); padding:16px 16px 24px !important;
  box-shadow: var(--nd-clay); border: 3px solid #fff;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1); text-align:center; position:relative;
}
.woocommerce ul.products li.product:hover { transform: translateY(-10px) rotate(.8deg); }
.woocommerce ul.products li.product img {
  border-radius: var(--nd-radius-sm); background: linear-gradient(135deg,#fff,#ffe9f4);
}
.woocommerce ul.products li.product .price { color: var(--nd-purple); font-weight:800; font-size:1.2rem; }
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:1.08rem; }

/* sticker badge sitting on each card */
.woocommerce ul.products li.product::before {
  content: "Squish-tested!";
  position:absolute; top:-12px; left:-10px; z-index:3;
  background: var(--nd-lime); color: var(--nd-ink);
  font-family: var(--nd-font-head); font-weight:700; font-size:.72rem;
  padding:.28em .7em; border-radius: 999px; transform: rotate(-9deg);
  box-shadow: 0 4px 0 rgba(58,43,99,.18); border:2px solid #fff;
}
.woocommerce ul.products li.product:nth-child(3n)::before   { content:"Kid-approved"; background: var(--nd-yellow); }
.woocommerce ul.products li.product:nth-child(3n+1)::before { content:"Super squishy"; background: var(--nd-mint); }

.onsale {
  background: var(--nd-orange) !important; color:#fff !important;
  border-radius:999px !important; font-family:var(--nd-font-head);
  min-height:auto; min-width:auto; padding:.3em .85em; box-shadow:0 4px 0 rgba(58,43,99,.2);
}

/* ---------- Hero ---------- */
.nd-hero {
  border-radius: 34px; position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--nd-yellow), var(--nd-orange) 42%, var(--nd-pink) 88%);
  padding: 64px 26px; text-align:center; color:#fff; margin:0 0 14px;
  box-shadow: var(--nd-clay); border:4px solid #fff;
}
.nd-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55; }
.nd-hero__inner { position:relative; z-index:2; }
.nd-hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); margin:0 0 .25em; color:#fff; text-shadow:0 4px 0 rgba(58,43,99,.22); line-height:1.04; }
.nd-hero p  { font-size:1.25rem; max-width:640px; margin:0 auto 1.4em; font-weight:700; text-shadow:0 2px 0 rgba(58,43,99,.18); }
.nd-hero .button { font-size:1.2rem; }
/* floating squishy shapes inside hero (the "playing" motion) */
.nd-hero__shape { position:absolute; border-radius:46% 54% 58% 42% / 52% 48% 52% 48%; z-index:1; opacity:.85; box-shadow: inset 0 6px 12px rgba(255,255,255,.5); animation: nd-bob 6s ease-in-out infinite; }
.nd-hero__shape.s1 { width:90px;height:90px; background:var(--nd-blue);  top:14%;  left:8%; }
.nd-hero__shape.s2 { width:64px;height:64px; background:var(--nd-lime);  bottom:16%; left:18%; animation-delay:-2s;}
.nd-hero__shape.s3 { width:110px;height:110px;background:var(--nd-purple);top:18%;  right:9%; animation-delay:-1s;}
.nd-hero__shape.s4 { width:54px;height:54px; background:#fff;          bottom:20%; right:20%; animation-delay:-3s;}
@keyframes nd-bob { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-18px) rotate(10deg);} }

/* ---------- Scrolling fun-word marquee ---------- */
.nd-marquee { overflow:hidden; white-space:nowrap; margin:0 0 30px; padding:12px 0; background:var(--nd-ink); border-radius:18px; box-shadow:var(--nd-clay-sm); }
.nd-marquee__track { display:inline-block; animation: nd-scroll 22s linear infinite; }
.nd-marquee span { font-family:var(--nd-font-head); font-weight:700; font-size:1.1rem; color:#fff; padding:0 1.1em; }
.nd-marquee span::after { content:"•"; color:var(--nd-yellow); margin-left:1.1em; }
@keyframes nd-scroll { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Category pills ---------- */
.nd-cats { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:0 0 40px; }
.nd-cats a {
  background:#fff; color:var(--nd-ink); text-decoration:none; font-family:var(--nd-font-head); font-weight:600;
  padding:.6em 1.35em; border-radius:999px; box-shadow:var(--nd-clay-sm); border:3px solid #fff; transition:transform .15s;
}
.nd-cats a:hover{ transform:translateY(-5px) rotate(-2deg); border-color:var(--nd-pink); }

/* ---------- "Why kids love it" feature band ---------- */
.nd-feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; margin:46px 0; }
.nd-feat { background:#fff; border-radius:var(--nd-radius); padding:28px 20px; text-align:center; box-shadow:var(--nd-clay); border:3px solid #fff; }
.nd-feat__icon { width:64px;height:64px;margin:0 auto 14px; display:grid; place-items:center; border-radius:50%; box-shadow:var(--nd-clay-sm); }
.nd-feat__icon svg { width:34px;height:34px; }
.nd-feat h3 { margin:.2em 0 .3em; font-size:1.2rem; }
.nd-feat p  { margin:0; font-size:.98rem; color:#5a4b7c; }

/* ---------- Video grid (kids-playing clips, added later) ---------- */
.nd-videos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin:40px 0; }
.nd-video { border-radius:22px; overflow:hidden; box-shadow:var(--nd-clay); background:#000; aspect-ratio:9/16; border:4px solid #fff; }
.nd-video video, .nd-video iframe { width:100%; height:100%; object-fit:cover; border:0; }

/* ---------- Section heading flair ---------- */
.woocommerce .products h2, .nd-section-title, h1.page-title, .shop .page-title {
  position:relative; display:inline-block;
}
.nd-band { text-align:center; margin: 34px 0 10px; }
.nd-band h2 { font-size: clamp(1.6rem,3.5vw,2.4rem); display:inline-block; padding:.1em .6em; background:#fff; border-radius:16px; box-shadow:var(--nd-clay-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--nd-ink); color:#fff; border-radius:34px 34px 0 0; margin-top:50px; }
.site-footer a { color: var(--nd-yellow); }

/* ---------- Misc ---------- */
.woocommerce-message, .woocommerce-info { border-top-color:var(--nd-pink); border-radius:14px; }
a { color: var(--nd-purple); }
.woocommerce span.onsale + a img { } /* noop guard */

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nd-playground i, .nd-hero__shape, .nd-marquee__track,
  .button, .woocommerce ul.products li.product { animation: none !important; transition: none !important; }
}

/* ---------- Responsive polish ---------- */
@media (max-width: 768px) {
  .nd-hero { padding:46px 18px; }
  .nd-hero__shape { display:none; }
  body { font-size:16px; }
}